/* Alpha XI — komponentstiler. Bruker kun tokens fra tokens.css. */

/* ---- Toppmeny ----------------------------------------------------------
   ÉN meny for hele siden (2026-08-08). Fram til nå hadde de åpne sidene
   `.site-head` med hamburger, mens appen hadde en naken `<nav>` med grå
   bakgrunn — og fordi den lå ETTER statuslinja og Fibbo i markupen, kom den
   som en grå stripe midt på siden, mellom coachen og overskriften. To menyer
   blir aldri like lenge, og den ene av dem er alltid den stygge.

   Bredden settes av siden (`--sidebredde`), ikke av komponenten: appen er én
   lesekolonne, forsiden har bane og tabell ved siden av hverandre. Men den
   settes fra SAMME token som innholdet under (base.css), så logoen står rett
   over overskriften. Fram til 2026-08-09 sto menyen på 58 rem over et innhold
   på 600 px — 164 px lenger ut på hver side, på hver eneste appside.

   `flex-wrap` alltid, ikke bare på mobil: appmenyen har sju lenker, og de får
   ikke plass ved siden av logoen i en 600 px-kolonne. Uten wrap ville de
   presset seg ut av kolonnen. Med wrap legger de seg på egen linje og bruker
   hele bredden — ingen utregning å holde i takt. */
/* `width: 100%` er ikke overflødig ved siden av `margin: 0 auto`. `body` er en
   flex-kolonne, og der SLÅR `margin: auto` AV strekket: headeren krympet til
   innholdet sitt — 180 px på en 390 px skjerm — så logo og hamburger sto som en
   liten klynge midt på toppen i stedet for i hvert sitt hjørne. Med bredden satt
   fyller den linja, og `max-width` + auto-margin gjør fortsatt jobben sin på
   brede skjermer. (Erik 2026-08-10: «fortsatt midtstilt logo+meny».) */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-gap-sm) var(--ax-gap);
  width: 100%;
  max-width: var(--sidebredde, var(--ax-kolonne-bred));
  margin: 0 auto;
  padding: var(--ax-gap) var(--ax-kant);
  border-bottom: 1px solid var(--ax-line);
}

.site-head__mark {
  font-family: var(--ax-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ax-ink);
  text-decoration: none;
  margin-right: auto;
}
.site-head__mark span { color: var(--ax-muted); }

.site-head__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ax-gap-sm) var(--ax-gap);
}

/* `nowrap`: appmenyen har sju lenker, og «Ukens runde» brakk i to linjer og
   dro hele toppen ut av høyde. En menylenke er ett ord, ikke et avsnitt. */
.site-head__nav a {
  color: var(--ax-ink);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-head__nav a:hover { text-decoration: underline; }
.site-head__nav a[aria-current] { font-weight: 600; }

.site-head__login {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
}

/* Hamburgeren finnes bare på smal skjerm */
.site-head__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  cursor: pointer;
}
.site-head__burger span {
  display: block;
  height: 2px;
  margin: 0 auto;
  width: 1.1rem;
  background: var(--ax-ink);
}

/* DEN ÅPNE MENYEN ER EN LISTE (Erik 2026-08-10: «menyen er helt forferdelig
   dårlig, bare gjør sånn som alle andre, vis den enkelt»).

   Her sto det et rutenett i to kolonner, bestilt av Erik selv 2026-08-09 for å
   spare høyde. Regnestykket var riktig og resultatet var likevel feil: hver
   lenke fikk ramme og bakgrunn for å bli et eget felt i rutenettet, og da leste
   den ikke som en meny lenger, men som en verktøylinje med knapper. En meny som
   ser ut som noe annet enn en meny, koster mer enn den vinner i piksler.

   Derfor det alle andre gjør: én kolonne, ingen rammer, tynne skiller. Det er
   en form folk kjenner igjen uten å tolke den. Høyden er ærlig — er den for
   stor, er svaret færre lenker, ikke en annen figur. */
@media (max-width: 760px) {
  .site-head__burger { display: flex; }

  .site-head__nav { display: none; }

  .site-head__nav[data-open] {
    display: block;
    flex-basis: 100%;
    margin-top: var(--ax-gap-xs);
    border-top: 1px solid var(--ax-line);
  }

  .site-head__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;              /* tommelen trenger 44 px */
    padding: 0 var(--ax-gap-xs);
    border-bottom: 1px solid var(--ax-line);
  }

  .site-head__nav a[aria-current] {
    color: var(--ax-green);
    font-weight: 600;
  }

  .site-head__login {
    justify-content: center;
    color: var(--ax-muted);
  }
}

/* ---- Banner / toast ---------------------------------------------------- */
.banner {
  padding: var(--ax-gap-sm) var(--ax-gap);
  border-radius: var(--ax-radius);
  margin-bottom: var(--ax-gap);
  background: var(--ax-green);
  color: var(--ax-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ax-gap);
  flex-wrap: wrap;
}
.banner--warn  { background: var(--ax-flat); color: var(--ax-ink); }
.banner--error { background: var(--ax-down); }

/* ---- Scoretabell ------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--ax-gap); }

.ax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.ax-table th,
.ax-table td {
  padding: var(--ax-gap-sm);
  text-align: left;
  border-bottom: 1px solid var(--ax-line);
  white-space: nowrap;
}
.ax-table th { font-weight: 600; color: var(--ax-muted); }
.ax-table tbody tr:nth-child(even) { background: var(--ax-bg-alt); }
.ax-table a { color: inherit; }

.badge {
  display: inline-block;
  padding: 0 var(--ax-gap-xs);
  border-radius: var(--ax-radius);
  background: var(--ax-green-soft);
  color: var(--ax-green);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge--up   { background: var(--ax-green-soft); color: var(--ax-green); }
.badge--flat { background: var(--ax-bg-alt);     color: var(--ax-muted); }
.badge--down { background: var(--ax-bg-alt);     color: var(--ax-down); }

/* Suspendert lag: står i tabellen, men skal ikke lese som en plassering. */
.row--muted td { opacity: 0.65; }

.points { font-variant-numeric: tabular-nums; font-weight: 600; }
.points--up   { color: var(--ax-up); }
.points--down { color: var(--ax-down); }
.points--flat { color: var(--ax-muted); }

.toast {
  position: fixed;
  left: 50%;
  bottom: -6rem;
  transform: translateX(-50%);
  background: var(--ax-ink);
  color: var(--ax-bg);
  padding: var(--ax-gap-sm) var(--ax-gap);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  transition: bottom 0.25s ease;
  z-index: 999;
  max-width: 90vw;
}
.toast--on { bottom: 1.5rem; }
.toast[data-tone="error"] { background: var(--ax-down); }

/* ---- Spillerrad -------------------------------------------------------- */
.player-row {
  display: flex;
  align-items: center;
  gap: var(--ax-gap-sm);
  padding: var(--ax-gap-sm) var(--ax-gap-xs);
  border-bottom: 1px solid var(--ax-line);
}
.player-row__body { min-width: 0; }
.player-row__name { text-decoration: none; color: inherit; }
/* Undertittelen skal være én linje. Brekker den, sklir radene fra hverandre
   og lista blir umulig å skumme. */
.player-row__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.muted { color: var(--ax-muted); font-size: 0.9em; }

/* ---- Fasettfilter (spillerlista) --------------------------------------- */
/* `align-items: start`: uten den strekkes hver boks til den høyeste i raden,
   og «Industri» — som er lukket — sto som en tom, 270 px høy ramme ved siden
   av Sektor. */
#filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
  gap: var(--ax-gap-sm) var(--ax-gap);
  margin-bottom: var(--ax-gap);
}
#filters details {
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  padding: var(--ax-gap-sm);
  background: var(--ax-bg-alt);
}
#filters summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--ax-gap-xs);
}
/* Avkrysningene ligger på hver sin linje. Flyter de på tvers, brekker de
   midt i en etikett — «Lassevis / med rutine» er ikke to valg. */
#filters label {
  display: flex;
  align-items: center;
  gap: var(--ax-gap-xs);
  padding: 0.15rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}
#filters input[type="checkbox"] { flex: none; margin: 0; }

.pick-btn {
  min-width: 5.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--ax-radius);
  border: 1px solid var(--ax-green);
  background: var(--ax-bg);
  color: var(--ax-green);
  cursor: pointer;
  font-family: inherit;
}
.pick-btn--on { background: var(--ax-green); color: var(--ax-bg); }
.pick-btn:disabled { opacity: 0.6; cursor: wait; }

/* #6082-oppfølging: «Byttes ut» er ikke en handling som venter (cursor:
   wait, regelen over) — den er nøytralt UT AV SPILL, som en spiller uten
   posisjon (badge--down bruker samme nøytrale rolle, ikke en signalfarge). */
.pick-btn--bytt { border-color: var(--ax-line); color: var(--ax-muted); cursor: default; }

/* ---- Skjemafelt -------------------------------------------------------- */
.field { display: block; margin-bottom: var(--ax-gap); }
.field__label { display: block; margin-bottom: var(--ax-gap-xs); font-weight: 600; }
.field__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  font-family: inherit;
  font-size: 1rem;
}
.field__input--error { border-color: var(--ax-down); }
.field__input--ok    { border-color: var(--ax-up); }
/* Fast forklaring til et felt, over inputen — til forskjell fra .field__msg
   under, som er den flyktige valideringsbeskjeden. To slag tekst, to plasser:
   `validate.js` skriver i .field__msg og ville slettet et hint lagt der. */
.field__hjelp {
  display: block;
  font-size: 0.85rem;
  color: var(--ax-muted);
  margin-bottom: 0.25rem;
}

.field__msg { display: block; font-size: 0.85rem; min-height: 1.2em; }
.field__msg--error { color: var(--ax-down); }
.field__msg--ok    { color: var(--ax-up); }

/* Samtykket er to linjer tekst med en avkrysning foran. Uten flex havner
   andre linje under boksen og setningen ser ut som to. */
.field--samtykke {
  display: flex;
  align-items: flex-start;
  gap: var(--ax-gap-sm);
  font-size: 0.9rem;
  line-height: 1.4;
}
.field--samtykke input { margin-top: 0.2rem; flex: none; }

/* PIN-skjemaet i sendt-tilstanden på /onboarding/club er ØVERST OG STORT
   (#6423) — det er nå den vanlige veien inn, ikke en fallback (se malens
   egen begrunnelse). Et litt større inputfelt er hele forskjellen;
   `.field`/`.field__input` er urørt. */
.form--pin-stor .field__input { font-size: 1.4rem; letter-spacing: 0.1em; text-align: center; }

/* `.btn-link` sto her: en knapp som så ut som en lenke, laget for
   Google-innloggingen. Knappen ble skjult 2026-08-09 (#5465), og regelen ble
   stående uten en eneste bruker. `.knapp--lenke` gjør det samme og er en del
   av knappesystemet — en fjerde variant utenfor systemet er nettopp det vi
   holder på å bli kvitt. Slettet 2026-08-09. */

/* ---- Klasser som ble skrevet i templates uten å bli laget ----------------
   `.plain-list`, `.lead` og `.pick-methods` sto i markupen uten en eneste
   regel bak seg (funnet 2026-08-08). `.plain-list` var verst: en <ul> uten
   `list-style: none` beholder nettleserens 40 px innrykk, så spillerlista lå
   forskjøvet i forhold til filtrene og overskriften over den — det så ut som
   en layoutfeil, og var en klasse som aldri ble skrevet. */
.plain-list { list-style: none; margin: 0; padding: 0; }

.lead { font-size: 1.05rem; line-height: 1.6; }

/* To likestilte valg. De var `.btn-white` uten ramme på hvit bakgrunn — altså
   to setninger som ikke så ut som noe å trykke på. */
.pick-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ax-gap);
  margin: var(--ax-gap-lg) 0;
}
.pick-methods button {
  margin: 0;
  padding: var(--ax-gap) var(--ax-gap-sm);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg);
  color: var(--ax-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pick-methods button:hover { border-color: var(--ax-ink); }

/* ---- Formasjonsgrupper --------------------------------------------------
   Sju formasjoner lå i én klump og ba brukeren velge uten å si hva valget
   betyr. Gruppene sorterer dem på antall spisser — altså på hvor stor risiko
   formasjonen tvinger deg til å stille med. */
.formasjonsgruppe { margin-bottom: var(--ax-gap-lg); }
.formasjonsgruppe h3 { margin: 0 0 var(--ax-gap-xs); }
.formasjonsgruppe > .muted { margin: 0 0 var(--ax-gap); line-height: 1.5; }

/* ---- Fibbos side -------------------------------------------------------- */
.rad-fibbo {
  border-top: 1px solid var(--ax-line);
  padding-top: var(--ax-gap);
  margin-top: var(--ax-gap-lg);
}
.rad-fibbo h3 { margin: 0 0 var(--ax-gap-sm); }
.rad-fibbo p  { margin: 0 0 var(--ax-gap-sm); line-height: 1.6; }

/* ---- Bunntekst ---------------------------------------------------------- */
.site-footer {
  margin-top: var(--ax-gap-lg);
  padding: var(--ax-gap) 0;
  border-top: 1px solid var(--ax-line);
  color: var(--ax-muted);
  font-size: 0.85rem;
  text-align: center;
}
.site-footer a { color: inherit; }

/* ---- Vilkårssiden ------------------------------------------------------- */
.vilkar { max-width: 42rem; }
.vilkar h3 { margin-top: var(--ax-gap-lg); }
.vilkar p  { line-height: 1.6; }

/* ---- Regelboka (#6156) ---------------------------------------------------
   Ingen egen bredde: `.body-container` gir allerede appens delte lesekolonne
   (--ax-kolonne), og ni seksjoner med korte punktlister trenger ikke mer. */
.regelbok__seksjon { margin-top: var(--ax-gap-lg); }
.regelbok__seksjon h2 { margin-bottom: var(--ax-gap-xs); }
.regelbok__ingress { color: var(--ax-muted); margin: 0 0 var(--ax-gap-sm); }
.regelbok__liste { margin: 0; padding-left: 1.25em; line-height: 1.6; }
.regelbok__liste li { margin-bottom: var(--ax-gap-xs); }
/* Ordbok-lenker inline i prosaen — dotted i stedet for en vanlig understrek,
   så de ikke leses som en vanlig navigasjonslenke midt i en setning. */
.regelbok__ord {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--ax-muted);
}
.regelbok__ord:hover { border-bottom-style: solid; }

/* ---- Selskapslogo = spillerens ansikt -----------------------------------
   Sirkelen er lys fordi banen er mørkegrønn og logoene er alt fra svarte
   ordbilder til fargede merker. En nøytral, lys skive er det eneste
   underlaget alle 210 logoene leser på — testet mot de styggeste vi har.

   Tickeren ligger under bildet og kommer fram av seg selv når `onerror`
   fjerner en logo vi ikke har. Ingen ekstra forespørsel, ingen brutt-bilde-
   ikon, og ingen generisk trøye som later som at hullet ikke finnes.

   BRUKES IKKE PÅ BANEN LENGER (#6291): der er spilleren en drakt, se
   `.drakt` under. Skiven står igjen i spillerlista (`ui.player_row`).

   EN SIRKEL KAN IKKE VÆRE OVAL (#6291). `width` og `height` sto som hver
   sin `var(--logo-kant)`, og det gikk bra helt til noen satte variabelen til
   `min(46px, 100%)` på banen: da regnes de to prosentene mot HVER SIN akse i
   en flex-celle som ikke er kvadratisk, og `border-radius: 50 %` tegnet en
   ellipse. Høyden er derfor `aspect-ratio: 1` nå — ett mål, aldri to.
   Verdien er uendret for alle brukssteder som er igjen (24 px i lista,
   88 px på spillerkortet); banen bruker ikke `.logo` lenger, den bruker
   `.drakt` under. */
.logo {
  position: relative; display: inline-grid; place-items: center;
  width: var(--logo-kant, 24px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: var(--ax-logo-bg);
  flex: none;
}
.logo--256 { --logo-kant: 88px; }
.logo__ticker {
  font-size: calc(var(--logo-kant, 24px) * 0.3);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  color: var(--ax-logo-ticker); padding: 0 2px;
  overflow: hidden; text-overflow: clip; max-width: 100%;
}
.logo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* ---- Drakta = spilleren (#6291) -----------------------------------------
   Erik 2026-09-07: «spillerne skal være en hvit fotballtrøye (SVG e.l.) med
   logoen oppå – ikke en sirkel (som nå også er blitt oval)». Gjelder alle
   baner (forsiden, Mitt lag, forhåndsvisningen) og spillersiden.

   ÉN BREDDE, ALDRI TO PROSENTER. `--drakt-kant` setter bredden;
   `aspect-ratio: 1` gir høyden. Det er hele fiksen på ovalen: den gamle
   `.bane .logo` satte `min(46px, 100%)` på både `width` og `height`, og
   prosenten regnes mot hver sin akse i en flex-celle som ikke er
   kvadratisk.

   Selve stien er ett `<symbol id="drakt">` i `base.html` og ett `<use>` per
   spiller — elleve trøyer er elleve referanser, ikke elleve kopier.
   Fargen (fra 2026-09-11: LANDSFARGENE under) settes med `var(--…)` på
   selve stiene i `base.html`, ikke her — se forklaringen ved `.drakt--no`
   noen linjer ned for hvorfor en klasse-regel FRA DETTE STILARKET aldri
   kunne truffet inn i `<use>`-instansen. */
.drakt {
  position: relative;
  display: block;
  width: var(--drakt-kant, 46px);
  aspect-ratio: 1;
  flex: none;
  /* Tickeren på brystet skal skalere med TRØYA. `calc(var(--drakt-kant) *
     0.115)` ville sett riktig ut og vært feil: en prosent i en `font-size`
     regnes mot forelderens skriftstørrelse, ikke mot bredden — og
     `--drakt-kant` er `min(58px, 100%)` på banen og `100%` på spillersiden.
     `cqw` er 1 % av containerens bredde, som er nøyaktig det vi mente. */
  container-type: inline-size;
}
.drakt__form {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* LANDSFARGENE (#6423, Erik 2026-09-11): drakta i `<symbol id="drakt">` er nå
   TRE stier (`base.html`), farget derfra med `fill="var(--drakt-body-farge,
   …)"` osv. — ALDRI en hex-verdi.

   DETTE MÅ VÆRE EGENDEFINERTE VARIABLER PÅ `.drakt--no` SELV, IKKE EN
   ETTERKOMMER-SELEKTOR MOT EN KLASSE INNI SYMBOLET (rødtestet 2026-09-11,
   scratch/drakt-test.html). En `.drakt--no .drakt__body { fill: … }`-regel
   traff ALDRI: `<use>` kobler inn en shadow-aktig instans, og en
   klasse-selektor fra dokumentet treffer ikke ned i den — alle fem testdraktene
   kom ut identisk hvite med den regelen. CSS-variabler ARVER derimot ned
   gjennom `<use>` som `fill`/`stroke` alltid har gjort, og det er nettopp
   den mekanismen `base.html` sine `var(--drakt-body-farge, …)`-attributter
   leser. Uten et kjent land (eller et land utenfor de fire) er variablene
   usatt, og fallback-kjeden i attributtene ender på hvit/`none` — «uten
   land: hvit som i dag» — HELT UTEN en egen regel for det tilfellet. */
/* KROPPEN ER HVIT FOR ALLE, LANDET SITTER I BÅNDENE (Erik 2026-09-11, etter
   å ha sett fargede trøyer på localhost: «bakgrunnsfargene må være hvite på
   draktene, men kanskje båndene på armene og i kantene på trøya kan
   indikere land»). Logoen ligger rett på stoffet (multiply, se
   `.drakt__img`), og en farget kropp gjorde fargede logoer mørke — hvit
   kropp løser det uten unntak. `--drakt-body-farge` settes derfor IKKE her
   lenger; symbolet faller tilbake på `--ax-drakt`. Krage = flaggets
   hovedfarge, mansjetter + linning = flaggets andre farge der det finnes
   (NO rød/blå, SE blå/gul), ellers samme (DK rød, FI blå). Tokens i
   tokens.css (`--ax-drakt-*`). */
.drakt--no {
  --drakt-collar-farge: var(--ax-drakt-no);
  --drakt-cuff-farge:   var(--ax-drakt-no-trim2);
}
.drakt--se {
  --drakt-collar-farge: var(--ax-drakt-se);
  --drakt-cuff-farge:   var(--ax-drakt-se-trim);
}
.drakt--dk {
  --drakt-collar-farge: var(--ax-drakt-dk);
  --drakt-cuff-farge:   var(--ax-drakt-dk);
}
.drakt--fi {
  --drakt-collar-farge: var(--ax-drakt-fi);
  --drakt-cuff-farge:   var(--ax-drakt-fi);
}

/* Merket på brystet. 44 % av trøyas bredde — torsoen i symbolet er x 27→73,
   altså 46 %, så merket står innenfor med en knapp margin på hver side
   uansett hvor mye trøya krymper. Sentrert litt under midten (55 %), der en
   klubblogo sitter: over midtlinja ville den ligget i V-halsen.

   `aspect-ratio: 1` av samme grunn som over — merket er kvadratisk fordi
   logoene er det, og `object-fit: contain` bevarer resten. */
.drakt__merke {
  position: absolute;
  /* Sentrum i (50 %, 55 %), bredde 44 % → venstre 28 %, topp 33 %. Regnet
     ut i stedet for `transform: translate(-50%, -50%)` fordi en transform
     lager en STACKING CONTEXT, og `mix-blend-mode` på bildet blander da
     bare mot merkets egen (tomme) bakgrunn — den hvite ruta sto igjen,
     målt 2026-09-11. Uten transform er `.drakt` (container-type) gruppa,
     og bildet blander mot selve trøya. */
  left: 28%; top: 33%;
  width: 44%;
  aspect-ratio: 1;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 2px;
}
/* Tickeren PÅ trøya, for de 33 % uten logo. Skalerer med trøya, som
   `.logo__ticker` gjør med skiva. */
.drakt__ticker {
  font-size: 11cqw;
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ax-logo-ticker);
  overflow: hidden; text-overflow: clip; max-width: 100%;
  white-space: nowrap;
}
/* INGEN HVIT RUTE BAK LOGOEN (Erik 2026-09-11: «fjerne den hvite bakgrunnen
   bak logoene»). Fram til da hadde `.drakt__img` sin egen ugjennomsiktige
   bakgrunn, av en ekte grunn: en logo med gjennomsiktig bakgrunn lot tickeren
   under lyse gjennom (Sampo og Novo Nordisk ble to lag tekst). Den jobben
   gjør `:has()` nå — finnes bildet i merket, er tickeren skjult; fjerner
   `onerror` bildet, kommer den tilbake. Ingen JS utover den `onerror` som
   alt sto der.

   `mix-blend-mode: multiply` er den andre halvparten, og den er MÅLT
   (2026-09-11, 201 logoer i blob): 79 har HVITT bakt inn i selve PNG-en,
   103 er gjennomsiktige, 19 har en egen farget bakgrunn (Nokia, Nordea …).
   Uten multiply ville 79 av 201 fortsatt stått i en hvit rute på en rød
   trøye — sju av elleve på laget Erik så. Multiply gjør hvitt til trøyas
   farge og lar mørkt stå; prisen er at fargede logoer mørkner mot en mørk
   trøye (derfor er landsfargene lysere fra samme dag, tokens.css), og at
   åtte gjennomsiktige logoer med mest HVITT innhold (NOTE 84 %, SOFF,
   PNDORA, DNO, SAAB-B, MEDI, DANSKE, MATAS) toner bort på trøya — de var
   usynlige mot den lyse ruta fra før, så ingen mister noe de hadde. */
.drakt__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}
.drakt__merke:has(.drakt__img) .drakt__ticker { display: none; }
/* Symbolet selv skal ikke ta plass i flyten. */
.drakt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Klubbkortet — /onboarding/club (Notask #6423) ----------------------
   Live-forhåndsvisning av laget mens hun fyller ut managernavn og lagnavn
   (`static/js/club.js` oppdaterer teksten, malen bare rendrer starttilstanden
   fra `form.*`). MOBIL FØRST: ett rutenett-kolonne, kortet over skjemaet i
   DOM-rekkefølgen — «ved siden av/over skjemaet» i speccen betyr begge deler
   ETTER bredde, ikke det ene i stedet for det andre. Fra 640px blir kortet
   en fast venstrekolonne, «ved siden av».

   Plassert HER, ETTER `.drakt`/`.drakt-sprite` over — ikke av smak, men
   fordi `tests/ops_floor.py` sin `_regel()`-hjelper tar det FØRSTE treffet
   på en selektor i fila. En `.klubbkort .drakt { … }`-regel FØR den ekte
   `.drakt { … }` (#6291) ville kapret #6291-vaktens `aspect-ratio: 1`-sjekk
   og gjort den rød uten at noe faktisk var i stykker. */
.klubb-oppsett {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ax-gap-lg);
  align-items: start;
}
@media (min-width: 640px) {
  .klubb-oppsett { grid-template-columns: 220px 1fr; }
}

.klubbkort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ax-gap-sm);
  padding: var(--ax-gap);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-alt);
  text-align: center;
}
/* Samme drakt-symbol og samme `.drakt`-mål som resten av appen — bare en
   annen `--drakt-kant`. Gjenbruker spillersidens token (`--ax-drakt-topp`)
   i stedet for å finne opp et tredje tall: begge er «én stor trøye alene»,
   ikke banens mange små. Ingen `.drakt__merke` her (se malen) — klubben har
   ingen spillere ennå, så det er ingen logo å vise fram. */
.klubbkort .drakt { --drakt-kant: var(--ax-drakt-topp); }
.klubbkort__lag {
  font-family: var(--ax-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  overflow-wrap: break-word;
}
.klubbkort__manager { margin: 0; color: var(--ax-muted); }

/* ---- Banen — den grønne flaten med klassiske fotballbanestreker ----------
   ÉN implementasjon (2026-08-10), delt av forsiden, lagsiden og
   forhåndsvisningen under onboardingen — alle tre kaller `ui.pitch()`.

   Fram til nå tegnet forsiden sin egen `.bane` i landing.css: ingen streker,
   `--ax-green`, 46 px logo. Lagsiden tegnet `.pitch-wrapper` i team.css: SVG-
   streker, den mørkere `--ax-bane`, og logoer som falt til 24 px fordi
   `logo--96` ikke hadde noen regel. Samme komponent, to implementasjoner, og
   hvilken grønn og hvilken logostørrelse som vant avhengte av hvilket
   stilark siden lastet. Hjemmesiden er fasit — se tokens.css.

   `.bane__linjer` (SVG) ligger bak `.bane__spillere` (z-index), så streken
   aldri konkurrerer med en logo eller ticker om å bli lest. */
.bane {
  position: relative;
  width: 100%;
  max-width: var(--ax-kolonne); /* = 600px, banens egen bredde uansett hvor den står */
  margin: 0 auto;
  margin-top: 0 !important;
  aspect-ratio: 3 / 5;
  height: auto;
  max-height: 90vh;
  background: var(--ax-green);
  border-radius: var(--ax-radius);
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  /* Banen er MÅLESTOKKEN for trøyene i den (#6291). Rekkene ligger 20
     prosentpoeng fra hverandre, og banen har fast sideforhold, så
     rekkeavstanden i piksler ER en funksjon av banens bredde — da må trøya
     være det også, ellers vokser brikken inn i rekka under på en smal
     skjerm. `container-type: inline-size` gjør banen til det `19cqw` i
     `--ax-drakt-bane` måler mot. */
  container-type: inline-size;
}

.bane__linjer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.bane__spillere {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
}

/* EN REKKE BRYTES ALDRI. Det er ikke en stilregel, det er en riktighetsregel:
   en femmannsrekke tegnet som fire pluss én viser en annen formasjon enn den
   brukeren har valgt. Med `flex-wrap: wrap` skjedde nøyaktig det på 390 px —
   fem spillere à 80 px i 358 px tilgjengelig, og den femte havnet på egen
   linje midt i rekka over. Nå krymper spillerne i stedet, som de skal: en
   trang rekke er fortsatt en rekke. */
.bane__rekke {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  gap: clamp(2px, 2vw, 12px);
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.5rem;
}
/* `min-width: 0` opphever flexboksens standard om at et element aldri krymper
   under sitt eget innhold. Uten den ville tickerteksten holdt rekka bred og
   dyttet den ut av banen i stedet for å brekke den.

   `flex: 1 1 0` (ikke `0 1 auto`) — MÅLT 2026-08-10: kvoten per posisjon er
   fri etter onboardingen, så en rekke kan ha opptil elleve (f.eks. et lag
   som er «0-0-11»). Med `0 1 auto` krympet brikkene fra sitt NATURLIGE
   innhold, mens logoen (under) hadde en fast bunngrense på 32 px — fra ni i
   rekka overlappet ansiktene hverandre (8 overlapp ved n=9, 10 ved n=11).
   `1 1 0` gir hver brikke en LIK ANDEL av rekka i stedet, uansett hvor mange
   som deler den — samme prinsipp som Eriks formulering «sett av x % av banen
   til hver rekke og fordel det riktig». `.pitch-player` sin egen
   `max-width: 100px` er fortsatt taket, så en rekke med få spillere ser helt
   lik ut som før (den når taket uansett, og har rom til overs — se
   `justify-content: space-evenly` over). */
.bane__rekke > * {
  min-width: 0;
  flex: 1 1 0;
}
.bane__rekke:last-child { margin-bottom: 0; }

.bane__rekke--goalkeeper   { bottom: 3%; }
.bane__rekke--defenders    { top: 60%; }
.bane__rekke--midfielders  { top: 40%; }
.bane__rekke--forwards     { top: 20%; }

/* Rekka avviker fra formasjonen laget VALGTE (services/oppstilling.py) — men
   det er lovlig HELE uka og koster ingenting: det er et ufullstendig LAG
   (ikke elleve), ikke en avvikende rekke, som mister scoren. Markeringen skal
   derfor lese som en KRITTSTREK på gresset, ikke som et varsel — samme
   --ax-bane-strek som resten av banens egne streker (.bane__linjer). Lagt TIL
   rekka uten å røre målene over (posisjon, flex, gap — de vokter mot
   overlappende logoer). */
.bane__rekke--avvik { border-bottom: 1px dashed var(--ax-bane-strek); }

/* Trøya er spilleren (#6291). Sto som `.bane .logo` med samme uttrykk fram
   til 2026-09-09; drakta arver målingen under, men ikke sirkelen.
   `ui.drakt(p, 96)` gir klassen `drakt--96`, som ikke har noen egen regel
   her; uten denne linja falt lagsidens spillere til standarden på 46 px.

   FYLLER SIN EGEN PLASS, MÅLER IKKE VINDUET (2026-08-10, rettet). Sto som
   `clamp(32px, 11vw, 46px)` — bundet til SKJERMBREDDEN, mens plassen logoen
   faktisk har avhenger av hvor mange som deler REKKA (`.bane__rekke > *` sin
   `flex: 1 1 0`, rett over). To ulike ting, og bare den ene ble tatt hensyn
   til: fra ni spillere i én rekke overlappet ansiktene hverandre, fordi
   32 px-bunnen ikke ga etter når elleve delte en telefonbredde.
   `.drakt` setter bredden av `--drakt-kant` og høyden av `aspect-ratio: 1`,
   og `.drakt__ticker` skalerer fonten av samme variabel, så alt følger med
   av seg selv når variabelen er en ANDEL av brikken (100%) i stedet for en
   andel av vinduet (vw).

   DEN GAMLE 32 PX-BUNNEN ER BEVISST FORLATT, IKKE GLEMT: begrunnelsen den
   hadde («under det er en logo ikke lenger et ansikt, bare en farge») holder
   ikke når elleve skal dele en telefonbredde — da MÅ noe gi etter, og et
   lite ansikt er bedre enn to som ligger oppå hverandre. `.drakt` har
   `flex: none`, men det gjelder HØYDEN i `.pitch-player` sin kolonne
   (`flex-direction: column`) — bredden styres av `width`, ikke av flex, så
   den regelen er ikke i veien her.

   TAKET ER 58 PX, IKKE 46 (#6291), og det er ikke smak. En logo på brystet
   kan ikke være bredere enn torsoen: `.drakt__merke` er 44 % av trøya, så en
   46 px trøye ville gitt et 20 px merke der sirkelen ga 46 — logoen ville
   blitt mindre enn før på nøyaktig det stedet den skal leses.

   MÅLT i Edge 2026-09-09, i en IFRAME med ekte viewport (et headless-vindu
   nekter å gå under ~477 px og lyver om bredden), getBoundingClientRect på
   hver trøye, hver brikke og hver rekke, på `/` (demolaget, 2-5-3-1),
   `/team/1` (1-5-3-2) og `/team/246` (2-4-4-1):

     bredde  bane    trøye (4 i rekka)  brikke   rekkeavstand  overlapp
     320 px  258 px   46,4 px            70,4 px   86,0 px       0
     360 px  298 px   53,6 px            77,6 px   99,3 px       0
     600 px  538 px   58,0 px            84,0 px  179,3 px       0

   Med FEM i rekka er trøya den samme helt til cella blir smalere enn
   `--ax-drakt-bane` (på `/`, 320 px: 46,4 px også der). Forsidens brikke er
   7 px høyere enn lagsidens fordi den har ukesprosenten under tickeren, og
   den er med i målingen: 77,4 px på 320 px, mot 79,6 px tilgjengelig.

   «Overlapp» teller alle tre: trøyer som ligger oppå hverandre, brikker
   utenfor banekanten, og rekker som når ned i rekka under. Alle tre er null
   på alle tre breddene og på alle tre sidene, og `scrollWidth ==
   clientWidth` overalt.

   Den trangeste plassen er ikke en rekke, men avstanden fra forsvaret
   (`top: 60%`) til keeperen (`bottom: 3%`): to brikker skal dele 0,37 av
   banehøyden. På 360 px er det 91,9 px hver, og brikken er 77,6.
   Den bredeste rekka er testet med 5 (4-5-1 sin midtbane) og 4 (forsvaret),
   som Erik ba om. Det var her første forsøk falt: med 58 px trøye, 8 px
   padding og formkula på egen linje ble brikken 105 px, og forsvaret lå
   27 px inne i keeperrekka. */
.bane .drakt { --drakt-kant: var(--ax-drakt-bane); }

/* Navnet under ansiktet skal aldri være det som sprenger rekka. «TEL (NO)»
   (#6291) er lengre enn «TEL», så ellipsen betyr noe nå: den spiser
   landkoden før den spiser rekka.

   Taket er senket fra 0,8 til 0,72 rem av samme grunn, målt: brikken er
   `max-width: 100px`, og med 12 px padding, formkula og mellomrommet foran
   den er det 72 px igjen til teksten. «NOVO-B (DK)» og «ERIC-B (SE)» er 11
   tegn og ble kuttet til «NOVO-B …» selv på 600 px, der det er rikelig med
   plass. Ellipsen skal være siste utvei på en trang rekke, ikke normalen. */
.bane .pitch-player__navn,
.bane .brikke__ticker {
  font-size: clamp(0.58rem, 2.2vw, 0.72rem);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UNDER 400 PX SPISER ELLIPSEN TICKEREN, IKKE BARE LANDET (#6296). Målt i en
   Edge-iframe med ekte viewport (320 px, `/team/246`, forsvarsrekka med fire
   spillere): «SAAB-B (SE)», «ATCO-A (SE)», «SWED-A (SE)» klippet med
   `scrollWidth` 9-12 px over `clientWidth` — på en trang rad krever
   TICKEREN ALENE (uten land) allerede 75-85 % av cella, og for en avnotert
   aksje uten land ER tickeren strengens slutt, så den blir det ellipsen
   spiser.

   `ticker_land()` (ui.html) skriver nå landkoden i et eget spenn
   (`.ticker-land__land`), ikke i samme tekstnode som tickeren — det er det
   som gjør det mulig å gi de to ulik skjebne her. Cella blir en flexboks som
   får BRYTE til to linjer (landkoden alene på linje to) i stedet for å
   ellipsere — native wrapping, så en rad med god plass (som forsidens
   enkeltstående «NOVO-B (DK)», MÅLT: aldri klippet i denne bredden) forblir
   én linje og trøyehøyden rører seg ikke. Ellipsen fjernes IKKE — for en
   tickerlengde CSS ikke kan forutse (et avnotert selskap uten land, eller et
   land-navn lengre enn to bokstaver) er den fortsatt siste utvei, nå bare på
   `.ticker-land__ticker` alene, aldri på landkoden foran den. */
@media (max-width: 400px) {
  .bane .pitch-player__navn,
  .bane .brikke__ticker {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .bane .ticker-land__ticker {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .bane .ticker-land__land {
    white-space: nowrap;
    font-size: 0.85em;
    opacity: 0.8;
  }
}

/* HER STO `.bane .logo__ticker { display: none }` (#6291 fjernet den).
   Grunnen var ekte: en logo med gjennomsiktig bakgrunn lot reserveteksten
   lyse gjennom bildet, og Sampo og Novo Nordisk ble to lag tekst oppå
   hverandre. Men å SKJULE reserven løste symptomet ved å ta bort det den
   logoløse tredjedelen hadde igjen. Drakta gir i stedet BILDET en
   ugjennomsiktig bakgrunn (`.drakt__img`), så teksten er dekket når logoen
   finnes og synlig når den ikke gjør det — én regel i stedet for to som
   trekker hver sin vei. */

.bane .tall { font-size: 0.72rem; }
/* På banen leses tallene mot mørk grønn, ikke hvit bakgrunn — derfor et eget
   sett med farger, ikke de samme som resten av siden bruker. */
.bane .tall--up   { color: var(--ax-up); }
.bane .tall--flat { color: var(--ax-green-soft); }

/* ---- Spiller på banen --------------------------------------------------
   Slått sammen fra to forekomster (components.css og team.css, audit
   2026-08-10) — de gjaldt samtidig for enhver `.pitch-player` og satte ulike
   deler av samme brikke (tekst/farge her, mål/form der). `.player` var en
   død medselektor: ingen template skriver `class="player"` alene. */
.pitch-player {
  text-decoration: none;
  color: inherit;
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  /* 4 px, ikke 8 (#6291). Brikken er høyere nå — en drakt er kvadratisk der
     skiva var 46×33 — og rekkene ligger fast der de ligger. Målt: med 8 px
     og formkulen på egen linje ble brikken 105 px høy mot 91,9 px
     tilgjengelig mellom forsvaret og keeperen på 360 px, og de to rekkene
     lå oppå hverandre. Luften på siden er urørt. */
  padding: 4px 6px;
  /* 108 px, ikke 100 (#6291). Merkingen er «NOVO-B (DK)» nå, ikke «NOVO-B»,
     og den ENESTE spissen i en 4-5-1 — som har hele rekka for seg selv —
     ble likevel kuttet til «NOVO-B …» av taket her. Taket biter bare når
     rekka har rikelig plass; med fem i rekka er cella 107 px på 600 px bane,
     så ingenting flytter seg der. */
  max-width: 108px;
  /* INGEN min-width. Den sto på 80 px, og fem spillere à 80 px pluss mellomrom
     er 431 px — mer enn banen er bred på en telefon, så ytterspillerne ble
     klippet av bakgrunnen. En brikke er så bred som ansiktet sitt; avstanden
     mellom dem er rekkas ansvar (`space-evenly`), ikke brikkens. */
  border-radius: 12px;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pitch-player .drakt { margin-bottom: 4px; }
/* FORMKULEN STÅR PÅ TICKERLINJA (#6291), ikke på sin egen linje under.
   Drakta er kvadratisk der skiva var 46×33, og de 16 pikslene kula tok
   alene var nettopp det som dyttet forsvaret ned i keeperrekka på 360 px.
   Den sier fortsatt det samme og står like nær spilleren.

   Linja er en flexboks, og ELLIPSEN FLYTTET MED, ned på `__navn`: sto den
   igjen på linja selv, ville en trang rekke klippet vekk formkulen i stedet
   for slutten av tickeren — `flex: none` på kula sier hvem som skal gi. */
.pitch-player__ticker {
  font-weight: 600; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  max-width: 100%;
}
.pitch-player__navn {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ball {
  width: 12px; height: 12px; border-radius: 50%;
  flex: none; margin: 0;
}
.ball--up   { background: var(--ax-up); }
.ball--flat { background: var(--ax-flat); }
.ball--down { background: var(--ax-down); }

/* ---- Oppstillingen — stripa rett under banen ----------------------------
   Hva troppen FAKTISK stiller, mot formasjonen som ble VALGT
   (services/oppstilling.py). Et lag som stiller 4-3-3 når det valgte 4-4-2
   er lovlig HELE uka og koster ingenting — det er et ufullstendig LAG (ikke
   elleve) som mister scoren, aldri en avvikende rekke. Derfor skal --avvik
   ALDRI være rød, oransje eller gul: de fargene er allerede brukt opp av
   ting som faktisk koster poeng (.banner--warn, .points--down), og ville
   løyet om konsekvensen her. Markøren er i stedet banens EGEN krittfarge
   (--ax-bane-strek, se .bane__linjer og .bane__rekke--avvik over) —
   «krittstrek på gresset», ikke en feilmelding ved siden av den. Rå
   --ax-bane-strek er tegnet halvgjennomsiktig hvit for å ligge på --ax-green
   og forsvinner på stripas lyse bunn; color-mix() henter samme kritt-familie
   opp i lesbar kontrast der, i stedet for å finne på en ny farge. */
.oppstilling {
  list-style: none;
  display: flex;
  flex-wrap: nowrap; /* fire celler, aldri en femte linje */
  gap: clamp(2px, 2vw, 12px);
  width: 100%;
  max-width: var(--ax-kolonne); /* samme bredde som .bane — de hører sammen */
  margin: var(--ax-gap-xs) auto 0;
  padding: var(--ax-gap-xs);
  background: var(--ax-bg-alt);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
}

/* Samme oppskrift som `.bane__rekke > *`: fire celler skal få plass på
   320 px uten horisontal scroll, så cellene krymper i stedet for å skyve
   naboen ut eller åpne for scroll. */
.oppstilling__rekke {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px;
  text-align: center;
}

.oppstilling__navn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ax-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Hovedtallet — størst i stripa, det er det brukeren skal lese først. */
.oppstilling__tall {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ax-ink);
  font-variant-numeric: tabular-nums;
}

/* Sekundærinfo, bare til stede på rekker som avviker (ui.html) — skal ikke
   konkurrere med hovedtallet om oppmerksomheten. */
.oppstilling__valgt {
  font-size: 0.65rem;
  color: var(--ax-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Selve markøren: en stiplet ramme i kritt-familien — se begrunnelsen over
   blokken. En tydeligere ramme, ikke en signalfarge. */
.oppstilling__rekke--avvik {
  border: 1px dashed color-mix(in srgb, var(--ax-bane-strek) 55%, var(--ax-muted) 45%);
  border-radius: var(--ax-radius);
}

/* Regnestykket skal gå opp: en avnotert spiller står i elleveren og teller
   0 % hver uke, men har ingen rekke å stå i. Uten denne linja summerer stripa
   til ni for et lag som har elleve. Dempet — den forklarer et fravær, den
   varsler ikke om det (varselet står i .banner--warn lenger oppe). */
.oppstilling__utenfor {
  max-width: var(--ax-kolonne);
  margin: var(--ax-gap-xs) auto 0;
  font-size: 0.75rem;
  color: var(--ax-muted);
  text-align: center;
}

/* ---- Legenden under banen (#6109/#6110, 2026-09-06) ---------------------
   Brukertesten «Pedro» så bare logoer på banen og spurte «hvem er ATCO-A og
   INVE-B?». `.pitch-player` er pikselmålt (se `.bane .logo` over) og skal
   IKKE bære navnet — legenden står i stedet RETT UNDER, som en vanlig liste.

   Flex, ikke en tabell: `.oppstilling__rekke` over måtte krympe FIRE LIKE
   kolonner for å unngå scroll på 320 px. Her er kolonnene ulikt lange — et
   selskapsnavn har ingen fast bredde — så en tabell ville enten klippet
   navn eller åpnet for horisontal scroll. `flex-wrap` lar rada brekke i
   stedet, ett felt om gangen, uten å miste tekst. */
.pitch-legende {
  list-style: none;
  margin: var(--ax-gap-sm) auto 0;
  padding: 0;
  max-width: var(--ax-kolonne);
}
.pitch-legende__rad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ax-gap-sm);
  padding: var(--ax-gap-xs) 0;
  border-bottom: 1px solid var(--ax-line);
}
.pitch-legende__rad:last-child { border-bottom: none; }

/* Egen, smal etikett — ikke klassen `.muted` direkte, den skal ikke vokse
   med posisjonsnavnets lengde («spiss» mot «midtbanespiller») og få
   navnekolonnen til å slingre nedover lista. */
.pitch-legende__rekke {
  flex: 0 0 auto;
  min-width: 6rem;
  font-size: 0.8rem;
  color: var(--ax-muted);
}
.pitch-legende__navn { flex: 1 1 12rem; min-width: 0; }
.pitch-legende__bytt { flex: 0 0 auto; font-size: 0.85rem; white-space: nowrap; }

/* ---- «Troppen så langt» (#6146, brutt om i #6354) ------------------------
   Spillerlista har 300+ rader og bare en ✓ per rad — denne stripa er ett
   blikk på hele laget, øverst på siden, FØR de 300 radene. Rekkefølgen er
   KEEPER FØRST, som lista under og som `utils.formation.ORDER` — se
   `services/oppstilling.STRIPENS_REKKEFOLGE` for hvorfor den ikke lenger
   følger banen.

   #6354 («Sondre»: «scroller sidelengs og kuttes i høyre kant»): stripa
   BRYTER nå i stedet for å scrolle. Fram til 2026-09-10 sto den med
   `width: max-content` i en `overflow-x: auto`-container — samme knep som
   `.table-wrap` — og det er riktig for en TABELL, der kolonnene hører
   sammen på én linje og en avkuttet rad er synlig avkuttet. Denne stripa er
   fire uavhengige grupper: brytes den mellom to grupper, mister leseren
   ingenting, mens en horisontal scroll gjemmer angrepet helt til noen
   oppdager at feltet kan dras. Et blikk som må dras er ikke et blikk.

   `min-width: 0` på gruppa er det som faktisk lar `flex-wrap` bite på
   `.tropp-stripe__plasser` under (en flex-item har `min-width: auto` som
   standard og nekter å bli smalere enn innholdet sitt). Cellene krympes
   fortsatt ikke — `white-space: nowrap` på `.tropp-stripe__plass` står — så
   en tickeren blir aldri ulesbar; det er RADEN som gir etter, ikke teksten. */
.tropp-stripe-wrap {
  margin-bottom: var(--ax-gap);
}
.tropp-stripe {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap);
  margin: 0;
  padding: var(--ax-gap-sm);
  background: var(--ax-bg-alt);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
}
.tropp-stripe__rekke {
  display: flex;
  flex-direction: column;
  gap: var(--ax-gap-xs);
  min-width: 0;
}
.tropp-stripe__rekke-navn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ax-muted);
  text-decoration: none;
  white-space: nowrap;
}
.tropp-stripe__rekke-navn:hover { text-decoration: underline; }
.tropp-stripe__plasser {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}
.tropp-stripe__plass {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 3.2rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg);
  font-size: 0.78rem;
  white-space: nowrap;
}
/* Fylt plass — banens egen grønnfamilie (samme kant som en «på laget»-
   tilstand andre steder), IKKE en signalfarge: å være fylt koster ingenting,
   det er bare hyggeligere å skille fra en ledig plass i et raskt blikk. */
.tropp-stripe__plass--fylt { border-color: var(--ax-green-light); }
.tropp-stripe__plass a { text-decoration: none; color: inherit; }
.tropp-stripe__plass--fylt a:first-child { font-weight: 600; color: var(--ax-ink); }
.tropp-stripe__tom { color: var(--ax-muted); }
.tropp-stripe__bytt {
  font-size: 0.68rem;
  color: var(--ax-muted) !important;
  border-left: 1px solid var(--ax-line);
  padding-left: 0.3rem;
}

/* ---- Spillerprofil ------------------------------------------------------
   Fem akser som beskriver selskapet. Ingen farge rangerer: en akse er ikke
   grønn fordi den er høy, for høy Prising betyr dyr — ikke god (#5359). */
.profil { display: grid; gap: var(--ax-gap); }
@media (min-width: 640px) {
  .profil { grid-template-columns: minmax(0, 260px) 1fr; align-items: start; }
  .profil__fot { grid-column: 1 / -1; }
  /* Spillerkortet sluttet å tegne radar_svg (2026-08-13, se components/
     spillerkort.html) — uten den skal stolpelista bruke HELE bredden i
     stedet for å stå igjen i venstrekolonnen radaren pleide å eie. */
  .profil--uten-radar { grid-template-columns: 1fr; }
}

/* 340px, ikke 260 (#6092): viewBox vokste fra 260 til 340 (utils/radar.py,
   MIDT 130 -> 170) for å gi de avkuttede etikettene faktisk margin. Samme
   forhold holder ringens absolutte pikselstørrelse uendret — det er lerretet
   rundt som ble større, ikke selve figuren. */
.profil__radar { width: 100%; height: auto; max-width: 340px; }
.profil__ring  { fill: none; stroke: var(--ax-line); stroke-width: 1; }
.profil__eike  { stroke: var(--ax-line); stroke-width: 1; }
/* Stiplet eike = vi har ikke tallet. Figuren hopper over hjørnet i stedet for
   å trekke det inn til midten, som ville tegnet en null vi ikke kan belegge. */
.profil__eike--tom { stroke-dasharray: 3 3; }
.profil__form  { fill: var(--ax-green-soft); fill-opacity: 0.75;
                 stroke: var(--ax-green); stroke-width: 2; stroke-linejoin: round; }
.profil__navn  { font-size: 11px; font-weight: 600; fill: var(--ax-ink); }
.profil__navn--tom { fill: var(--ax-muted); font-weight: 500; }

.profil__liste { list-style: none; margin: 0; padding: 0; display: grid;
                 gap: var(--ax-gap-sm); }
/* Spillerkortet vokser fra fire akser (profilen) til seks — snart sju-åtte.
   Fra og med fem strammes rytmen, så lista ikke blir en vegg av tekst
   (2026-08-13). Terskelen sitter i `radar_liste` (components/radar.html),
   ikke her — denne klassen bare vet hvordan «tett» ser ut. */
.profil__liste--tett { gap: var(--ax-gap-xs); }
/* ÉN SKALA PER RAD (Erik 2026-09-13): aksenavnet er overskrift over sporet,
   tallet står over prikken, og skalaens endepunkter («rolig … urolig») under
   sporet. Før sto navnet i en kolonne til venstre og tallet i en til høyre,
   og «Formtesten 3» leste som en karakter. Radene er én kolonne nå; sporet
   får hele bredden også på mobil. */
.profil__rad { display: grid; grid-template-columns: 1fr;
               gap: 2px; align-items: center; font-size: 0.9rem; }
.profil__rad-navn { font-weight: 600; }
.profil__skala { display: flex; justify-content: space-between;
                 color: var(--ax-muted); font-size: 0.75rem; line-height: 1.2; }
/* Uvær og Medvind — samme måling i to markedstilstander, vises alltid
   sammen (services/spillerkort.py). Rammen er en GRUPPERING, ikke et
   varsel: bare nøytrale tokens, ALDRI --ax-down/--ax-flat/--ax-up (Fargen
   følger konsekvensen — et par koster ingen poeng). Ingen bakgrunnsfarge
   med vilje: --ax-bg-alt er allerede sporet under stolpen (under), og en
   lik bakgrunn på ramma ville slukt sporet for den utfylte delen av baren. */
.profil__rad--par { border: 1px solid var(--ax-line); border-radius: var(--ax-radius);
                     padding: var(--ax-gap-xs) var(--ax-gap-sm); }
/* PRIKK PÅ ET SPOR, ikke en fylt stolpe (Erik 2026-08-13). Åtte fylte
   stolper leses som en rangering — den lengste ser ut som den beste, og på
   disse aksene finnes det ingen beste. En prikk har ingen lengde. Se
   `components/radar.html` for de to grunnene og for hva `spenn` er. */
.profil__spor { position: relative; height: 14px; display: block; }
.profil__spor::before { content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 3px; transform: translateY(-50%);
    background: var(--ax-line); border-radius: 3px; }
/* Rekkas midtre halvdel. Ingen signalfarge: båndet sier «her ligger de
   fleste i din rekke», ikke «her BØR du ligge» (Fargen følger konsekvensen). */
.profil__band { position: absolute; top: 50%; height: 8px;
    transform: translateY(-50%); background: var(--ax-green-soft);
    border: 1px solid var(--ax-green-light); border-radius: 99px;
    box-sizing: border-box; }
.profil__band-midt { position: absolute; top: 50%; width: 2px; height: 8px;
    transform: translate(-50%, -50%); background: var(--ax-green-light);
    border-radius: 1px; }
/* Ringen i flatens egen farge løfter prikken av båndet uten en ny farge. */
.profil__prikk { position: absolute; top: 50%; width: 10px; height: 10px;
    border-radius: 50%; transform: translate(-50%, -50%);
    background: var(--ax-green); box-shadow: 0 0 0 2px var(--ax-bg); }
.profil__prikk--tom { background: transparent; box-shadow: none;
    border: 2px dashed var(--ax-muted); }
/* Tallet over prikken: samme `left` som prikken, sentrert, i sporets øvre
   del. `.profil__spor--tall` gir sporet plass over linja; det vanlige
   sporet (tyngdepunkt.html) er urørt. */
.profil__spor--tall { height: 30px; }
.profil__spor--tall::before, .profil__spor--tall .profil__band,
.profil__spor--tall .profil__band-midt, .profil__spor--tall .profil__prikk { top: 22px; }
.profil__tall { position: absolute; top: 0; transform: translateX(-50%);
                font-variant-numeric: tabular-nums; font-weight: 700;
                font-size: 0.85rem; line-height: 1; }
.profil__tall--tom { color: var(--ax-muted); font-weight: 500; }
/* Forklaringen står under raden, ikke i en tooltip: den sier hva HØY betyr,
   og det er hele grunnen til at profilen ikke lyver som en FIFA-radar. */
.profil__forklaring { grid-column: 1 / -1; color: var(--ax-muted);
                      font-size: 0.8rem; margin-top: 2px; }
/* Dempes videre i tett modus — men fjernes ALDRI (se radar_liste-kommentaren):
   uten den leses persentiltallet som en karakter, ikke en plassering. */
.profil__liste--tett .profil__forklaring { font-size: 0.75rem; line-height: 1.3; }
.profil__fot { color: var(--ax-muted); font-size: 0.85rem; margin: 0; }

/* ============================================
   Ordlisten — services/ordbok.py tegnet ut
   Koblingstypen er fargekodet fordi den er poenget: en «oppfinnelse» skal
   ikke se ut som en oversettelse.
============================================ */

.ordbok { list-style: none; padding: 0; margin: 0 0 var(--ax-gap-lg) 0; }

.ordbok__gruppe { margin-top: var(--ax-gap-lg); }

.ordbok__rad {
  border-left: 3px solid var(--ax-line);
  padding: 10px 0 10px 14px;
  margin-bottom: 14px;
}

.ordbok__rad--oppfinnelse { border-left-color: var(--ax-green-light); }

.ordbok__par {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.ordbok__spill { font-weight: 700; }
.ordbok__pil { color: var(--ax-muted); }
.ordbok__marked { color: var(--ax-ink); }

.ordbok__kobling {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ax-muted);
  border: 1px solid var(--ax-line);
  border-radius: 999px;
  padding: 2px 8px;
}

.ordbok__rad--oppfinnelse .ordbok__kobling {
  color: var(--ax-green-light);
  border-color: var(--ax-green-light);
}

.ordbok__forklaring { margin: 6px 0 2px; }

.ordbok__egentlig,
.ordbok__merknad { margin: 2px 0; color: var(--ax-muted); font-size: 0.92rem; }

.ordbok__merknad { font-style: italic; }

/* MÅLT — historikk, aldri et løfte. Skal stå fram (Erik 2026-08-10): alt
   annet i raden er dempet i --ax-muted, denne skal ikke være det. Det er
   tilliten en skeptisk leser (Erik: «noen fra Nordnet») kommer for. */
.ordbok__maalt {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--ax-green-soft);
  border-radius: var(--ax-radius);
  color: var(--ax-ink);
  font-size: 0.92rem;
}
.ordbok__maalt strong { color: var(--ax-green); }

/* UNDER PANSERET — oppskriften, for den som vil etterprøve tallet mot koden.
   Lukket som standard: tilgjengelig, men ikke i veien for nybegynneren. Ren
   <details>/<summary>, ingen JS — samme mønster som filtrene i players_v4.html. */
.ordbok__detaljer { margin-top: 8px; font-size: 0.92rem; }
.ordbok__detaljer summary { cursor: pointer; color: var(--ax-muted); font-weight: 600; }
.ordbok__formel { margin: 6px 0 2px; color: var(--ax-ink); }
.ordbok__kilde { margin: 2px 0; color: var(--ax-muted); font-size: 0.82rem; }
.ordbok__kilde code {
  background: var(--ax-bg-alt);
  padding: 1px 5px;
  border-radius: 4px;
}

/* STOCK MODE — én bryter over samme register (Erik 2026-08-10, tillegg).
   `aria-current="page"` er samme mønster hovedmenyen bruker i site.html for
   å markere hvor du er, gjenbrukt her framfor en ny egen "aktiv"-klasse. */
.ordbok__bryter {
  display: flex;
  gap: var(--ax-gap-sm);
  margin-bottom: var(--ax-gap);
}
.ordbok__bryter-lenke {
  padding: 4px 12px;
  border: 1px solid var(--ax-line);
  border-radius: 999px;
  color: var(--ax-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.ordbok__bryter-lenke[aria-current] {
  color: var(--ax-bg);
  background: var(--ax-green);
  border-color: var(--ax-green);
}

/* Fotballordets henvisning i Stock mode — dempet, det er ikke lenger
   overskriften, bare kvitteringen på at det er samme ordliste. */
.ordbok__i-spillet { margin: 4px 0 2px; color: var(--ax-muted); font-size: 0.82rem; }

/* «Fram i lyset», ikke bak en <details>: Stock mode ER siden for den som vil
   se panseret uten å klikke seg dit (Erik: «dokumentasjon til managere»). */
.ordbok__panser {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--ax-bg-alt);
  border-radius: var(--ax-radius);
  font-size: 0.92rem;
}
.ordbok__panser-tittel {
  margin: 0 0 4px;
  color: var(--ax-muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================
   Linjesidene — services/linjer.py tegnet ut
============================================ */

.understeg {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ax-muted);
}

/* #6080: leddene ble lenker (til /onboarding/line/{rolle}) i stedet for tekst
   som bare SÅ klikkbar ut. Nøytraliser nettleserens standard lenkefarge/
   -understrek, samme grep som `.player-row__name` — fargen skal fortsatt
   komme fra --her/--ferdig under, ikke fra at elementet er en `<a>`. */
.understeg__ledd { text-decoration: none; color: inherit; }
.understeg__ledd--her { color: var(--ax-ink); font-weight: 700; }
.understeg__ledd--ferdig { color: var(--ax-green-light); }

.linje__hva {
  background: var(--ax-bg-alt);
  border-radius: var(--ax-radius);
  padding: 12px 14px;
  margin-bottom: var(--ax-gap);
}

.linje__overskrift { font-size: 1.05rem; margin-bottom: var(--ax-gap-sm); }

.linje__punkter { padding-left: 1.1rem; margin: 0 0 var(--ax-gap) 0; }
.linje__punkter li { margin-bottom: var(--ax-gap-sm); }

/* «Sorter etter …» (#6287) — erstatter `.linje__punkter` i onboarding_line.html.
   Knapperad, samme `.knapp--lenke`-stil som resten av siden; den aktive
   sorteringen skiller seg ved farge og understrek, ikke ved en annen form. */
.linje__sorter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap-sm);
  padding: 0;
  margin: 0 0 var(--ax-gap) 0;
  list-style: none;
}
.linje__sorter-aktiv {
  color: var(--ax-ink);
  font-weight: 700;
  text-decoration: underline;
}

.linje__alt-gjort {
  border-left: 3px solid var(--ax-green-light);
  padding-left: 12px;
  color: var(--ax-muted);
  font-style: italic;
}

.linje__teller { margin: var(--ax-gap) 0 var(--ax-gap-sm); }
.linje__auto { margin-bottom: var(--ax-gap-sm); }
.linje__sortering { margin-top: 0; font-size: 0.85rem; }

/* Ligalista (/league, #6486): én rad per liga — navn til venstre, ukens
   ligaform til høyre. Bygger på .pitch-legende__rad (samme delelinje). */
.liga-rad { justify-content: space-between; }

/* Veien videre (#6056): full rekke får en tydelig primærlenke, en rekke som
   ikke er full får en diskret utvei. Samme plass i layouten uansett hvilken
   av de to som vises. */
.linje__videre { margin-bottom: var(--ax-gap); }
.linje__hopp-over { margin-bottom: var(--ax-gap-sm); }

/* ============================================
   KNAPPER — én base, tre varianter, og det er hele systemet.

   Fram til 2026-08-09 var hovedknappen `.btn-white`: hvit bakgrunn, ingen
   ramme, ingen skygge før hover. På et hvitt kort var den usynlig — Erik så
   «Send meg lenken →» og spurte om det i det hele tatt var en knapp.

   Regel: EN handling per side er primær. Alt annet er sekundært eller en
   lenke. Trenger du en fjerde variant, er det sannsynligvis siden som er feil.
============================================ */

.knapp {
  display: inline-block;
  padding: 12px 20px;
  min-height: 44px;              /* tommelen trenger 44 px, ikke 34 */
  border-radius: var(--ax-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.knapp:focus-visible {
  outline: 2px solid var(--ax-green-light);
  outline-offset: 2px;
}

/* Primær: den ene handlingen siden finnes for. */
.knapp--primar {
  background: var(--ax-green);
  border-color: var(--ax-green);
  color: var(--ax-bg);
}

.knapp--primar:hover { background: var(--ax-green-light); border-color: var(--ax-green-light); }

/* Sekundær: et ekte alternativ, men ikke det vi peker på. */
.knapp--sekundar {
  background: var(--ax-bg);
  border-color: var(--ax-line);
  color: var(--ax-ink);
}

.knapp--sekundar:hover { border-color: var(--ax-ink); }

/* Full bredde. Sier «dette er veien videre» uten å bli en fjerde farge —
   brukes der knappen er hele sidens poeng, som «Klar. Ta meg til laget.» */
.knapp--full { display: block; width: 100%; }

/* Lenke: en utvei, ikke en handling. Ser ut som tekst, fordi den er tekst. */
.knapp--lenke {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  color: var(--ax-muted);
  text-decoration: underline;
  font-weight: 400;
}

/* På telefon fyller knapper bredden. Én per linje er lettere å treffe. */
@media (max-width: 640px) {
  .knapp { display: block; width: 100%; }
  .knapp--lenke { display: inline; width: auto; }
}

/* ============================================
   Spillersiden (player_4.html) — topp, spillerprofil, grafer, nyheter (Notask 5467)

   Klassene het `chartBox`/`chartCard`/`playerRow` og lignende camelCase
   fram til nå — resten av appen er kebab-case, og filen hadde fem
   `<style>`-blokker med dødt innhold (en gradient-ramme og en OVR-stjerne
   som ikke lenger står i markupen, se ryddingen i Notask 5467). Bare det som
   faktisk brukes i player_4.html er flyttet hit.
============================================ */
.spillerside { display: grid; gap: var(--ax-gap); }

/* #6078: «Velg til laget» midt i uttaket. `.pick-btn` selv er upåvirket
   (samme knapp som rekkelista og spillerlista bruker) — bare litt luft rundt
   den her, siden den ikke lenger står i en tett rad. */
.spiller-velg { margin: 2px 0 var(--ax-gap-sm); }

/* `position: relative` og `overflow: hidden` sto her for en ::before-gradient
   som er slettet. En klipping uten noe å klippe er bare en felle for neste
   element som stikker utenfor. */
.spiller-topp {
  padding: 14px 16px 12px;
  display: grid;
  /* Kolonnen bar en fast 120 px. Drakta (#6291) bruker den bedre enn skiva
     gjorde — merket på brystet er 44 % av trøya, så bredden på kolonnen ER
     logostørrelsen — men den skal fortsatt ikke spise navnet på en telefon.
     `clamp` gir en bunn som holder logoen lesbar, en andel som gir etter for
     teksten, og et tak som ikke lager en plakat av en drakt. */
  grid-template-columns: 1fr var(--ax-drakt-topp);
  gap: 12px;
}
.spiller-topp__navn { margin-top: 2px; color: var(--ax-ink); font: 800 20px/1.15 var(--ax-font); }

/* ROLLEN — et tydelig overskriftselement (#5481), ikke gjemt i meta-linja.
   Bruker `.badge`/`.badge--flat` sine egne farger; ingen egen rollefarge her,
   for en rolle er ikke en dom (samme regel som spillerprofilen: ingen
   nivåfarge). `.badge--flat` gjenbrukes til «Ikke valgbar» — samme nøytrale
   tone som et uavgjort resultat, ikke rødt eller grønt. */
.spiller-topp__rolle { margin-top: 6px; padding: 2px var(--ax-gap-sm); font-size: 0.85rem; }

/* MARKEDSROLLEN (services/rolle.py, #5481-oppfølging) — en ANNEN akse enn
   `.spiller-topp__rolle` over («rolle» der betyr posisjon, i fotballspråket).
   Alltid `.badge--flat`: ingen av de tre båndene skal se ut som et bedre
   sted å være enn de andre — en rolle er en beskrivelse, ikke en dom, enda
   strengere enn posisjonen (som i det minste har «valgbar»/«ikke valgbar»
   å skille på). `inline-block` fra `.badge` gjør at den legger seg ved siden
   av posisjonsmerket i stedet for på egen linje. */
.spiller-topp__markedsrolle { margin-top: 6px; margin-left: 6px; padding: 2px var(--ax-gap-sm); font-size: 0.85rem; }

.spiller-topp__meta { margin-top: 4px; color: var(--ax-muted); font: 600 12px/1.2 var(--ax-font); }

/* Drakta fyller kolonnen sin (#6291) — «samme komponent som på banen, bare
   større», ikke en egen figur. Bredden er ETT mål, hentet fra samme token
   som kolonnen; høyden kommer av `aspect-ratio: 1` i `.drakt`, så den kan
   ikke bli oval her heller. */
.spiller-logo { position: relative; }
.spiller-logo .drakt { --drakt-kant: var(--ax-drakt-topp); }

/* #6353 (Sondre, docs/FEEDBACK-SONDRE-2026-09-09.md §4): «Trøyene på
   spillersiden er en annen stil (grå kontur, firkantet logo) enn på banen
   (hvit, fylt)». SAMME makro (`ui.drakt`), SAMME `.drakt`/`.drakt__form`
   -regel begge steder — verifisert, ingen egen kopi. Bare ÉN egenskap er
   feil: `.drakt__merke { border-radius: 2px }` er et FAST pikseltall i en
   ellers helt proporsjonal komponent.

   På banen er merket ~20-26 px bredt (44 % av 46-58 px trøye) — 2 px er da
   ~8-10 % av bredden, en tydelig avrundet firkant. På spillersiden er
   samme trøye 112-148 px (`--ax-drakt-topp`), merket ~49-65 px, og SAMME
   2 px er bare ~3-4 % av bredden — nesten usynlig avrunding, altså
   «firkantet logo». Ikke to stilarter; ett fast mål som ikke fulgte med
   når komponenten ble tre ganger så stor.

   Fiksen er skalert etter `.drakt` sin egen `container-type: inline-size`
   (samme knep som `.drakt__ticker` sin `11cqw`, over) — IKKE en endring i
   selve makroen eller den delte `.drakt__merke`-regelen (den skal fortsatt
   se riktig ut på banen ved 2px), bare et override for spillersidens
   STØRRE trøye, slik at avrundingen holder samme ANDEL av bredden begge
   steder. Den opplevde «grå konturen» er ikke et avvik: `.drakt__form` sin
   `stroke-width: 3` er tegnet i SVG-ens `viewBox`-enheter og skalerer
   proporsjonalt med trøya (samme 3 % av bredden på banen og her) — bare
   mer synlig i absolutte piksler når trøya er tre ganger så stor. Ingen
   egen kilde å rette, se rapporten. */
.spiller-logo .drakt__merke { border-radius: 4cqw; }

.chart-kort {
  background: var(--ax-bg);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  padding: 12px;
  box-shadow: var(--ax-shadow);
}
.chart-tittel { margin: 0 0 8px; font: 700 14px/1.2 var(--ax-font); color: var(--ax-ink); }

/* `.chart-rutenett` (to kolonner fra 980 px) fjernet 2026-09-16: bare
   player_4.html brukte den, og Erik vil ha de tre grafkortene under
   hverandre i full bredde. Kortene ligger nå som søsken-<section> med
   sidens vanlige avstand. */

/* Standard er 16:9. Twirl og pris hadde faste pikselhøyder i markupen
   (`style="height:400px"` / `300px`) — samme tall, nå som modifikator i
   stedet for et ekstra, tomt `.chart-wrap`-lag rundt canvaset. */
.chart-boks { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.chart-boks > canvas { width: 100% !important; height: 100% !important; display: block; }
.chart-boks--twirl { aspect-ratio: auto; height: 400px; }
.chart-boks--pris  { aspect-ratio: auto; height: 300px; }

/* #6063: .spiller-nyheter__* fjernet 2026-09-06 sammen med den tomme
   «Nyheter»-seksjonen på spillersiden — ingen mal brukte klassene lenger. */

/* ============================================
   Spillersiden snudd (Notask #6561, 2026-09-13) — faktarute, tallrekke og
   kjennetegn. FotMob/WhoScored som forbilde: verdi stort, etikett lite,
   ingen radar-pentagon her.
============================================ */

/* FAKTARUTA — 2 kolonner på mobil, 3 fra 480px (spec: «2 kolonner på mobil,
   3-6 på desktop»). Målt i skjermbildet (#6561, spillerside.png): appens
   lesekolonne er FAST `--ax-kolonne` (600px) uansett vindusbredde — den vokser
   ALDRI til en bredde der 6 kolonner har plass til «Finansligaen»/«280 mrd
   kr» uten å bli klippet av ellipsen. 6-kolonners varianten spec nevner er
   derfor droppet: 3 er taket her, og fyller 600px-kolonnen godt (også med
   alle seks cellene fylt, over to rader). En celle uten verdi er utelatt av
   ruta (`player_4.html`), så antallet celler varierer — `auto-fit` ville latt
   ÉN gjenværende celle på siste rad strekke seg over hele bredden, som ser
   ut som en feil; et fast kolonnetall unngår det. */
.faktarute {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ax-gap-sm) var(--ax-gap);
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ax-line);
  border-bottom: 1px solid var(--ax-line);
}
@media (min-width: 480px) {
  .faktarute { grid-template-columns: repeat(3, 1fr); }
}
.faktarute__celle { min-width: 0; }
.faktarute__verdi {
  display: block;
  font: 800 19px/1.2 var(--ax-font);
  color: var(--ax-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faktarute__verdi a { color: inherit; text-decoration: none; }
.faktarute__verdi a:hover { text-decoration: underline; }
.faktarute__etikett {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--ax-muted);
}

/* TALLREKKA — «Form» sine fire tall, øverst i chart-kortet. Fargen følger
   FORTEGNET (samme opp/ned-par som chart-segmentene og badge--up/down bruker
   ellers i appen), aldri en dom — et fall er ikke «dårlig», det er ned. */
.tallrekke {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ax-gap-sm) var(--ax-gap);
  margin-bottom: 10px;
}
@media (min-width: 480px) {
  .tallrekke { grid-template-columns: repeat(4, 1fr); }
}
.tallrekke__punkt { text-align: center; }
.tallrekke__verdi { display: block; font: 800 17px/1.2 var(--ax-font); color: var(--ax-ink); }
.tallrekke__verdi--opp { color: var(--ax-up); }
.tallrekke__verdi--ned { color: var(--ax-down); }
.tallrekke__etikett { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--ax-muted); }

/* KJENNETEGN — samme visuelle vekt som de andre klartekstlistene
   (`.muted`-listene under «På banen»/«Selskapet bak»), egen klasse fordi
   den er utvalget brukeren skal lese først, ikke en dempet fotnote. */
.kjennetegn { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.kjennetegn li { color: var(--ax-ink); font-size: 0.92rem; }

/* `.alle-tall` (brettet «Alle tallene», <details>/<summary> rundt alt det
   gamle innholdet) fjernet 2026-09-16: Erik så #6561 live og ville ha
   innholdet åpent igjen. Ingen mal bruker klassen lenger. */

/* ============================================
   Nyhetssidene (news_list.html, news_detail.html) — Notask 5467
============================================ */
.news-list { list-style: none; padding: 0; margin: 0; }

.news-item { padding: 1.2rem 0; border-bottom: 1px solid var(--ax-line); }

.news-link { display: block; text-decoration: none; color: inherit; }

.news-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  margin-bottom: 0.4rem;
}
/* Samme par som `.badge--up`/`.badge--down`/`.badge--flat` lenger opp i
   filen — sentimentet er samme slags dom (positiv/negativ/nøytral), så det
   skal lese med samme farger, ikke sin egen palett. */
.news-tag--positive { background: var(--ax-green-soft); color: var(--ax-green); }
.news-tag--negative { background: var(--ax-bg-alt);     color: var(--ax-down); }
.news-tag--neutral  { background: var(--ax-bg-alt);     color: var(--ax-muted); }

.news-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.25rem; }
.news-meta  { font-size: 0.85rem; color: var(--ax-muted); }

.news-detail__dato     { margin-top: 1rem; font-size: 0.9rem; color: var(--ax-muted); }
.news-detail__tittel   { margin: 0 0 1rem; }
.news-detail__mentions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.news-ticker {
  background: var(--ax-green-soft);
  color: var(--ax-green);
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  text-decoration: none;
}

/* ============================================
   Fasekartet (twirlen) — services/twirl.py tegnet ut

   Ingen fargede kvadranter. Grønt øverst til høyre og rødt nederst til venstre
   ville sagt «her er det bra å være» — en dom, malt i stedet for skrevet. Den
   eneste fargen er banen selv, og den siste uka som er tykkere enn de andre.
============================================ */

.twirl { margin: 0; display: grid; gap: var(--ax-gap-sm); }

.twirl__figur { width: 100%; height: auto; max-width: 260px; }

.twirl__ramme { fill: none; stroke: var(--ax-line); stroke-width: 1; }
.twirl__akse  { stroke: var(--ax-line); stroke-width: 1; }

/* Gjennomsiktigheten settes PER STREK i markupen, av `services/twirl.py`.
   Den kan ikke ligge her: hver uke har sin egen, og eldre uker skal tone ut. */
.twirl__ledd {
  stroke: var(--ax-green);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.twirl__punkt { fill: var(--ax-green); }

/* Siste uke er den eneste som er NÅ. Resten er der for å vise veien dit — den
   får en ring rundt seg så den finnes selv når banen krysser seg selv. */
.twirl__punkt--siste { stroke: var(--ax-bg); stroke-width: 2; }

/* Klippet mot kanten: uka var villere enn firkanten rommer. Vi tegner den på
   kanten og sier fra, i stedet for å strekke aksen — strekker vi, blir alle
   andre baner en prikk i midten. */
.twirl__punkt--klippet { stroke: var(--ax-down); stroke-width: 2; }

.twirl__merkelapp { font-size: 9px; fill: var(--ax-muted); }

.twirl__tekst { font-size: 0.85rem; line-height: 1.5; }

/* ------------------------------------------------------- Nytt: to kilder
   Liganyheter regnes av data ved forespørsel; Forbundet ligger i koden.
   Begge er lister med korte saker, så de deler form — men de skal ikke se
   IDENTISKE ut, for de har ulik troverdighet: den ene er en måling, den
   andre er oss. Derfor har liganyhetene en vindusetikett («etter kampen»)
   og Forbundet en dato. */

.liganytt,
.forbundet {
  list-style: none;
  padding: 0;
  margin: var(--ax-gap-lg) 0;
  display: grid;
  gap: var(--ax-gap-lg);
}

.liganytt__sak,
.forbundet__melding {
  border-left: 3px solid var(--ax-line);
  padding-left: var(--ax-gap);
}

/* Vinduet er meldingens viktigste egenskap: sier den noe om noe som har
   skjedd, eller om noe som skal skje? Se docs/UKESLOKKA.md. */
.liganytt__vindu {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ax-muted);
}

.liganytt__sak--cupkampen { border-left-color: var(--ax-green-light); }

.liganytt__tittel,
.forbundet__tittel {
  font-size: 1.15rem;
  margin: var(--ax-gap-xs) 0;
}

/* Tallet meldingen hviler på. Står alene, så det ikke kan forsvinne inn i
   en setning. */
.liganytt__tall {
  font-variant-numeric: tabular-nums;
  color: var(--ax-muted);
  margin: 0 0 var(--ax-gap-sm);
}

.liganytt__tekst,
.forbundet__melding p { margin: 0 0 var(--ax-gap-sm); }

.liganytt__stille {
  border: 1px dashed var(--ax-line);
  border-radius: var(--ax-radius);
  padding: var(--ax-gap);
  color: var(--ax-muted);
}

.forbundet__topp {
  display: flex;
  gap: var(--ax-gap-sm);
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
}

.forbundet__versjon {
  background: var(--ax-green-soft);
  color: var(--ax-green);
  border-radius: var(--ax-radius);
  padding: 0 var(--ax-gap-xs);
  font-weight: 600;
}

.forbundet__saker { font-size: 0.85rem; }

/* På landingssiden er det bare et utdrag — to meldinger, ett avsnitt hver. */
.forbundet--kort { gap: var(--ax-gap); margin-block: var(--ax-gap); }

/* Nøkkelen til båndet på spillerkortet (2026-08-13). Uten den er det lyse
   feltet dekorasjon; med den er raden en sammenligning mot spillerens EGEN
   rekke. Samme nøytrale tokens som båndet selv — ingen signalfarge. */
.profil__noekkel { display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--ax-gap-xs) var(--ax-gap); color: var(--ax-muted);
    font-size: 0.78rem; margin: var(--ax-gap-sm) 0 0; }
.profil__noekkel-prikk { width: 10px; height: 10px; border-radius: 50%;
    background: var(--ax-green); flex: none; margin-right: 2px; }
.profil__noekkel-band { width: 22px; height: 8px; border-radius: 99px;
    background: var(--ax-green-soft); border: 1px solid var(--ax-green-light);
    box-sizing: border-box; flex: none; margin: 0 2px 0 var(--ax-gap-sm); }

/* ============================================
   Ligatabellens filter på managerklasse (leaderboard.html, #6139)
   Samme pille-mønster som .ordbok__bryter over — `aria-current="page"`
   markerer valget, ingen egen "aktiv"-klasse. Egne klassenavn likevel: hver
   komponent eier sitt eget navnerom, selv om mekanikken er identisk.
============================================ */
.leaderboard__slag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap-sm);
  margin-bottom: var(--ax-gap);
}
.leaderboard__slag-lenke {
  padding: 4px 12px;
  border: 1px solid var(--ax-line);
  border-radius: 999px;
  color: var(--ax-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.leaderboard__slag-lenke[aria-current] {
  color: var(--ax-bg);
  background: var(--ax-green);
  border-color: var(--ax-green);
}

/* Forklarer merkene («modell»/«robot») og fraværet av dem («menneske»)
   rett under tabellen — dempet, det er en ordforklaring, ikke et varsel. */
.leaderboard__legende { font-size: 0.82rem; margin-top: var(--ax-gap-sm); }

/* ============================================
   TYNGDEPUNKTET (#5545) — services/tyngdepunkt.py tegnet ut

   Hvor stor del av lagets uke som kom fra hver rekke, under rekkegruppene på
   ukesdetaljen. Sporet og prikken er IKKE definert her: det er
   `.profil__spor`/`.profil__prikk` lenger opp, delt med spillerkortets akser
   med vilje. «Prikk på et spor» er ÉN primitiv — to kopier av den ville glidd
   fra hverandre, og formen er selve poenget (en fylt stolpe leses som en
   rangering, og en rekke med stor andel av bevegelsen er ikke den beste
   rekka, bare den største).

   Ingen signalfarge noe sted i blokka. Bidraget i prosentpoeng står som
   dempet tekst, ikke gjennom `.points--up/--down` — et ukesutfall er ikke et
   bevis på noe (CLAUDE.md «Fargen følger konsekvensen» og «Motstanderen»:
   ingen påstand som premierer utfall). Krittstrek, ikke varsel.
============================================ */
.tyngdepunkt { margin-top: var(--ax-gap-lg); }
.tyngdepunkt__liste {
  list-style: none;
  margin: 0 0 var(--ax-gap-sm);
  padding: 0;
  display: grid;
  gap: var(--ax-gap-sm);
}
.tyngdepunkt__rad {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: var(--ax-gap-sm);
  align-items: center;
  font-size: 0.9rem;
}
.tyngdepunkt__navn { font-weight: 600; }
.tyngdepunkt__tall {
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tyngdepunkt__fot { color: var(--ax-muted); font-size: 0.85rem; margin: 0; }

/* På telefon blir tre kolonner til to linjer: navnet over, sporet og tallet
   under. Sporet trenger bredde for å bety noe — en prikk på 40 px sier
   ingenting om 41 %. */
@media (max-width: 32rem) {
  .tyngdepunkt__rad { grid-template-columns: 1fr auto; }
  .tyngdepunkt__navn { grid-column: 1 / -1; }
}

/* ============================================
   HJALP BYTTENE? (#6260) — services/bytter.py tegnet ut

   Tre rader under tyngdepunktet: elleveren som spilte, forrige ellever målt
   over den samme uka, og forskjellen. Tabellen selv er den vanlige
   `.ax-table` (score_table-makroen) — ingen egen tabellstil, for dette er
   ikke en ny slags tabell.

   Ingen signalfarge, av samme grunn som over: forskjellen er en observasjon
   om ÉN uke, ikke en dom over et valg. `.points--up/--down` hører hjemme der
   noe faktisk vinner eller taper poeng, og et kontrafaktisk lag gjør ikke
   det — det teller ikke i ligaen.
============================================ */
.bytter { margin-top: var(--ax-gap-lg); }
.bytter__fot { color: var(--ax-muted); font-size: 0.85rem; margin: 0; }

/* ============================================
   SAMMENLIGN MED (#6261) — services/kamp.py tegnet ut

   To låste ellevere i samme uke, side om side. De FELLES aksjene er én dempet
   linje, ikke en tredje kolonne: de er nettopp det som IKKE skiller lagene,
   og en full liste over dem ville tatt plassen fra de valgene som gjør det.

   Forskjellen (`.kamp__gap`) står som dempet tekst uten signalfarge — den er
   en observasjon om én uke, ikke poeng noen har vunnet. Spillernes egne
   ukesavkastninger beholder `.points--up/--down`, for det ER de samme tallene
   som i rekketabellene lenger opp på sida.
============================================ */
.kamp { margin-top: var(--ax-gap-lg); }
.kamp__velger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap-sm);
  align-items: center;
  margin-bottom: var(--ax-gap-sm);
}
.kamp__velger label { color: var(--ax-muted); font-size: 0.85rem; }
.kamp__sider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-gap);
}
.kamp__side h4 { margin: 0 0 var(--ax-gap-sm); font-size: 0.9rem; }
.kamp__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.kamp__rad {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--ax-gap-sm);
  align-items: baseline;
  font-size: 0.9rem;
}
.kamp__navn { color: var(--ax-muted); overflow-wrap: anywhere; }
.kamp__pct { font-variant-numeric: tabular-nums; text-align: right; }
.kamp__felles { color: var(--ax-muted); font-size: 0.85rem; margin: 0 0 var(--ax-gap-sm); }
.kamp__gap {
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
  margin: var(--ax-gap-sm) 0 0;
}
.kamp__fot { color: var(--ax-muted); font-size: 0.85rem; margin: var(--ax-gap-sm) 0 0; }

/* På telefon står de to uttakene under hverandre — to kolonner à 40 % skjerm
   gjør både ticker og prosent uleselige. */
@media (max-width: 40rem) {
  .kamp__sider { grid-template-columns: 1fr; }
}

/* ============================================
   DIVISJONSTABELLEN (#6209/#6210, leaderboard_divisjon.html)
   Opprykks- og nedrykksstreken er en KRITTSTREK, ikke et varsel — fargen
   følger konsekvensen (docs/DIVISJONER.md §2), og en strek koster ingenting
   å stå på. Derfor nøytral, dempet farge, ALDRI --ax-up/--ax-down/--ax-green
   her — de er reservert til ting som faktisk vinner eller taper poeng.
============================================ */
.divisjon__bane { margin: 0 0 var(--ax-gap-lg); }
.divisjon__bane-tittel { margin: 0 0 var(--ax-gap-xs); }
.divisjon__befolkning { margin: 0 0 var(--ax-gap-sm); }

.divisjon__strek-over td {
  border-top: 2px dashed var(--ax-muted);
}
.divisjon__strek-tekst,
.divisjon__ingen-strek {
  font-size: 0.85rem;
  margin: calc(-1 * var(--ax-gap-sm)) 0 var(--ax-gap-sm);
}

/* Hjemkortet (#6230, Bygg 14, team_3.html): kompakt divisjonsstatus og sist
   avsluttede runde, samlet i én klikkbar boks som lenker til
   /leaderboard/divisjon. Samme nøytrale tokens og samme begrunnelse som
   streken over — dette er en telling, ikke et utfall som vinner eller taper
   poeng, så ALDRI --ax-up/--ax-down/--ax-green her. */
.divisjon__hjemkort {
  display: block;
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  background: var(--ax-bg-alt);
  padding: var(--ax-gap-sm) var(--ax-gap);
  margin: 0 0 var(--ax-gap);
  color: var(--ax-ink);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.6;
}
.divisjon__hjemkort:hover,
.divisjon__hjemkort:focus-visible { border-color: var(--ax-muted); }

/* ==========================================================================
   #6345 + #6347 — spillestripa og formkulens legende (brukertesten «Sondre»,
   2026-09-09). Egen blokk, lagt til nederst med vilje: `.spilluke-linje` og
   `.runde-linje` bor i base.css, som en annen gren jobbet i samme dag.
   ========================================================================== */

/* SPILLESTRIPA (#6345). Fram til 2026-09-10 sto spilluka og runden i hver
   sin `<div>` — to bakgrunner, to kanter, to sentreringer, og med
   steg-indikatoren under: tre vannrette bånd før overskriften. Nå er det ett
   element (`.spilluke-linje.spillestripe`, så bakgrunn/kant/padding arves
   uendret fra base.css) med to `<span>` inni. `.runde-linje` i base.css er
   dermed ubrukt; regelen står igjen der til noen med den fila i hånden
   rydder den.

   Prikkskillet er CSS og ikke tekst, av samme grunn som alt annet her: står
   det bare ÉN del — før SESONGSTART finnes ingen runde, og da har stripa
   bare uka — skal det ikke ligge en løs «·» igjen i enden. `+`-selektoren
   kan ikke gjøre den feilen.

   `flex-wrap` er ikke pynt: de to setningene er til sammen ~85 tegn, og på
   360 px brekker de. Da skal de brekke som TO linjer i én stripe, ikke
   presse sida bredere. */
.spillestripe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.35em;
}
.spillestripe__del + .spillestripe__del::before {
  content: "·";
  margin-right: 0.35em;
}
/* Lenka arver stripas dempede farge — den skal kunne klikkes, ikke rope.
   Understreken kommer først ved hover/fokus, som ellers i chrome. */
.spillestripe__runde {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.spillestripe__runde:hover,
.spillestripe__runde:focus-visible { text-decoration: underline; }

/* FORMKULENS LEGENDE (#6347). Én dempet linje under banen, og den vises BARE
   når minst én kule faktisk er tegnet (`ui.pitch()` teller dem) — en
   fargeforklaring uten farger å forklare er nettopp den slags fyll som lærte
   Sondre å slutte å lese. Ingen egen farge her: prikkene i teksten er de
   samme `.ball`-elementene som står på banen, så legenden kan ikke havne i
   utakt med det den forklarer. */
.bane-legende {
  font-size: 0.8rem;
  margin: calc(-1 * var(--ax-gap-sm)) 0 var(--ax-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em;
  justify-content: center;
}
.bane-legende .ball { width: 10px; height: 10px; }