/* De åpne sidene: forsiden og «Om oss».

   GRUNNLAGET ER SVART-HVITT (Erik 2026-08-08). Sort tekst, hvit bakgrunn, grå
   linjer. Farge er et unntak, ikke en stil, og bare fire ting har lov:

     1. banen        — den skal se ut som en bane
     2. merkene      — de skal se ut som noe man samler på
     3. prosenttall  — grønt opp, rødt ned
     4. vinnerraden  — én markør, ikke en flate

   Alt annet, inkludert hovedknappen, er sort. På en hvit side er sort det
   kraftigste virkemiddelet vi har, og en grønn knapp ville kjempet med banen
   om det samme blikket.

   Ingen hex-verdier her. Alt kommer fra tokens.css. */

/* `base.css` gir alle sider `.body-container { max-width: 600px }`. Det er
   riktig for appen — en spillerliste skal leses i én kolonne — men de åpne
   sidene har en bane og en tabell ved siden av hverandre og trenger full
   bredde. Vi slipper den løs her og styrer bredden per seksjon i stedet, slik
   at ingen app-side påvirkes. */
.body-container {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Ekstra tokens som bare de åpne sidene bruker. Ligger her og ikke i
   tokens.css fordi de er sidens stemme, ikke produktets. */
.hero,
.blokk {
  --sidebredde: 68rem;
}

/* Toppmenyen bor i `components.css` sammen med resten av komponentene —
   appen og de åpne sidene deler den (2026-08-08). Her setter vi bare bredden,
   som er sidens sak og ikke komponentens. */
/* Forsiden er den brede kolonnen — bane og tabell side ved side. */
.site-head { --sidebredde: var(--ax-kolonne-bred); }

/* ------------------------------------------------------------------ hero */

/* `minmax(0, 1fr)`, ikke `1fr`. Et grid-spor har `auto` som minstemål, altså
   innholdets min-content — så et spor nekter å krympe under det bredeste
   elementet i seg, og hele siden blir bredere enn skjermen i stedet. Symptomet
   er lumsk: siden ser riktig ut på desktop og blir klippet på mobil, inkludert
   hamburgeren som havner utenfor kanten. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ax-gap-lg);
  align-items: center;
  max-width: var(--sidebredde);
  margin: 0 auto;
  padding: calc(var(--ax-gap-lg) * 2) var(--ax-gap-lg);
}

.hero h1 {
  font-family: var(--ax-display);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--ax-gap);
}
.hero h1 em { font-style: normal; color: var(--ax-muted); }

.hero__ingress {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ax-muted);
  max-width: 30rem;
  margin: 0 0 var(--ax-gap-lg);
}

/* Hovedknappen. Sort, stor, alene. */
.cta {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  background: var(--ax-ink);
  color: var(--ax-bg);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: var(--ax-radius);
  text-decoration: none;
}
.cta:hover { opacity: 0.88; }

.cta__note {
  margin: var(--ax-gap-sm) 0 0;
  font-size: 0.85rem;
  color: var(--ax-muted);
}

.motiv {
  list-style: none;
  padding: 0;
  margin: var(--ax-gap-lg) 0 0;
  display: grid;
  gap: var(--ax-gap);
}
.motiv li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ax-muted);
  padding-left: var(--ax-gap);
  border-left: 2px solid var(--ax-line);
}
.motiv strong {
  display: block;
  color: var(--ax-ink);
  font-weight: 600;
}

/* Prosenttall — det tredje av de fire stedene som har lov til å ha farge.
   Fortegnet skal leses uten å lese tallet. */
.tall { font-weight: 600; white-space: nowrap; }
.tall--up   { color: var(--ax-green-light); }
.tall--down { color: var(--ax-down); }
.tall--flat { color: var(--ax-muted); }

/* ------------------------------------------------------------------ banen */
/* Selve banen (grønn flate, streker, logostørrelse) er FELLES med lagsiden
   og forhåndsvisningen (2026-08-10) — se components.css (`.bane`), tegnet av
   `ui.pitch()`. Her står bare det som er forsidens eget: brikken som ikke
   lenker en utlogget besøkende inn i appen, og notisen under banen. */

/* `.hero__bane` er ellers bare en gruppering (se landing.html) — trenger
   `position: relative` selv for at #6289 sin ukeetikett skal kunne posisjonere
   seg ABSOLUTT mot BANEN og ikke mot hele siden. `.bane` selv fyller alltid
   full bredde av denne gruppa på desktop (grid-kolonnen er ~496 px, godt
   under `.bane` sin egen `max-width: 600px`), så etikettens hjørne treffer
   pitchens hjørne — ikke gruppas, som også rommer notisene under. */
.hero__bane { position: relative; }

/* #6289: bittelite ukenummer i banens øvre hjørne, sammen med Eriks
   tilbakemelding om at man må lese teksten under banen for å se hvilken uke
   det er. Mørk, halvgjennomsiktig plate — samme knep som `.bane`s egen
   `box-shadow` (rgba, ikke hex) — fordi hvit tekst rett på gresset ellers
   ville vasket ut mot de lyse trøyene. */
.bane__uke {
  position: absolute;
  top: var(--ax-gap-sm);
  right: var(--ax-gap-sm);
  padding: 0.2rem 0.55rem;
  border-radius: var(--ax-radius);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ax-bg);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* #6100: den ENE setningen som forklarer mekanikken (posisjon er risiko),
   løftet ut av bane__note og inn i egen, stor linje — samme display-font som
   .blokk h2, sentrert som resten av .hero__bane. */
.bane__mekanikk {
  margin: var(--ax-gap) 0 0;
  text-align: center;
  font-family: var(--ax-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ax-ink);
}

/* Sitter nå UTENFOR `.bane` (i `.hero__bane`, ved siden av banens egen
   `box-shadow`-ramme), på hvit bakgrunn i stedet for mørk grønn — derfor
   `--ax-muted` og ikke `--ax-green-soft`, som ville vært nesten usynlig her. */
.bane__note {
  margin: var(--ax-gap-sm) 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ax-muted);
}

/* GRID KOLLAPSET LOGOEN TIL 0 PX HØYDE (#6064, 2026-09-06). `.logo` setter
   `height: var(--logo-kant)`, og `.bane .logo` gir den `min(46px, 100%)` — en
   PROSENT av `.brikke`s høyde. I et grid-rutenett regnes en auto-radhøyde av
   INNHOLDET FØR containeren selv har en fastsatt høyde, så prosenten kan ikke
   løses og telles som `auto`; eneste innhold i sirkelen er en absolutt
   posisjonert `<img>` (teller ikke med i auto-mål) og en skjult ticker
   (`.bane .logo__ticker { display:none }`) — dermed 0.

   `.pitch-player` (lagsiden, samme banekomponent) har ALDRI hatt dette
   problemet: den er `display:flex; flex-direction:column`, og fleksbositem
   som strekkes av `align-items:stretch` får en FASTSATT størrelse barna kan
   prosentregne mot — det er nøyaktig den forskjellen som gjorde at lagsiden
   virket mens forsiden ikke gjorde det. Målt med en isolert gjengivelse
   (samme components.css/landing.css som i prod, hentet og diffet 2026-09-06):
   `.brikke .logo` var 46×0 px, `.pitch-player .logo` 46×39 px på identisk
   markup. Med `display:flex` under er `.brikke` nå samme oppskrift som
   `.pitch-player` — retestet med samme metode: 46×38 px, og en trang rekke på
   åtte spillere krymper fortsatt bredden (27 px) uten overlapp, uendret fra
   før fiksen. */
.brikke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.brikke__ticker {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ax-bg);
}

/* ------------------------------------------------------------ aha-tallet */
/* #6264: den ENE observasjonen om laget som faktisk står på banen — samme
   nøkterne stemme som `.bane__note`, ingen signalfarge (det er en telling,
   ikke en dom, se services/konsentrasjon.py). */
.aha__regel {
  margin: var(--ax-gap-sm) 0 0;
  color: var(--ax-muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- blokker */

.blokk {
  max-width: var(--sidebredde);
  margin: 0 auto;
  padding: calc(var(--ax-gap-lg) * 1.5) var(--ax-gap-lg);
  border-top: 1px solid var(--ax-line);
}
.blokk--tekst { max-width: 44rem; }
.blokk--slutt { text-align: center; }

/* #6264: undertekst i avslutningen, bare for en som ikke alt har et lag —
   samme dempede stemme som `.hero__ingress` sine notiser, ikke en ny farge. */
.slutt__undertekst {
  margin: 0 0 var(--ax-gap);
  color: var(--ax-muted);
  font-size: 1rem;
}

.blokk h2 {
  font-family: var(--ax-display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ax-gap-lg);
}

.undertittel {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ax-muted);
  margin: var(--ax-gap-lg) 0 var(--ax-gap-sm);
  font-weight: 600;
}

.ingress { font-size: 1.1rem; line-height: 1.6; }
.blokk--tekst p { line-height: 1.65; }

/* #6058: .plassholder ble fjernet 2026-09-06 sammen med [Plassholder]-teksten
   på /om-oss — den eneste bruken av klassen. */
.lenke { color: var(--ax-ink); font-weight: 600; }

/* ----------------------------------------------------------------- stallen */

.stall { display: flex; flex-wrap: wrap; gap: var(--ax-gap-lg); align-items: center; }
.stall p { margin: 0; flex: 1 1 22rem; line-height: 1.6; }
.stall__land {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--ax-gap-lg);
}
.stall__land li { font-size: 0.85rem; color: var(--ax-muted); }
.stall__land span {
  display: block;
  font-family: var(--ax-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ax-ink);
}

/* --------------------------------------------------------------- tabellen */

/* #6264: én dempet setning under overskriften — samme forbehold som
   `.aha__regel`, ikke en signalfarge på et resultat. */
.tabell__note {
  margin: 0 0 var(--ax-gap);
  color: var(--ax-muted);
  font-size: 0.9rem;
}

.tabell { width: 100%; border-collapse: collapse; }
.tabell td {
  padding: 0.65rem var(--ax-gap-sm);
  border-bottom: 1px solid var(--ax-line);
}
.tabell__plass {
  width: 2.5rem;
  color: var(--ax-muted);
  font-variant-numeric: tabular-nums;
}
.tabell .tall { text-align: right; font-variant-numeric: tabular-nums; }
.tabell__vinner td { font-weight: 600; }

/* Linjalene står under en tydeligere strek og uten plassering. */
.tabell__linjaler { border-top: 2px solid var(--ax-ink); }
.tabell__linjaler td { color: var(--ax-muted); }

.merkelapp {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ax-muted);
  border: 1px solid var(--ax-line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
.merkelapp--vinner {
  color: var(--ax-green);
  border-color: var(--ax-green);
}

/* ---------------------------------------------------------------- merkene */

.merker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ax-gap-sm);
}

.merke {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Vanene er skjold: noe som bygges opp. */
.merke--vane {
  background: var(--ax-green-soft);
  color: var(--ax-green);
  border-radius: var(--ax-radius) var(--ax-radius) 40% 40%;
}

/* Utfallene er billetter: én dato, revet av. Formen skal si at de ikke kan
   stables — se kommentaren i templaten. */
.merke--uke {
  background: var(--ax-bg-alt);
  color: var(--ax-ink);
  border: 1px dashed var(--ax-muted);
  border-radius: var(--ax-radius);
}

/* ------------------------------------------------------------------ steg */

.steg {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--ax-gap);
  max-width: 44rem;
}
.steg li { line-height: 1.55; color: var(--ax-muted); }
.steg strong { display: block; color: var(--ax-ink); }

/* #6103: .lares ble fjernet 2026-09-06 sammen med boksen «Du lærer mens du
   spiller» på forsiden — ingen annen side brukte klassen (sjekket med grep). */

/* ------------------------------------------------------------------ mobil */

@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--ax-gap-lg) var(--ax-gap);
  }
  .blokk { padding: var(--ax-gap-lg) var(--ax-gap); }

  /* Tabellen er det ene elementet som ikke kan krympes fritt — navn og
     prosent skal ikke brekke. Den får skrolle inne i sin egen ramme i stedet
     for å dra hele siden med seg. */
  .tabell-wrap { overflow-x: auto; }
  .tabell { min-width: 20rem; }
}

/* ------------------------------------------------------------- profilsiden */

.bio-form { display: grid; gap: var(--ax-gap-sm); max-width: 34rem; }
.bio-form label { font-size: 0.9rem; color: var(--ax-muted); }
.bio-form textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: var(--ax-gap-sm);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  resize: vertical;
}
.bio-form .cta { justify-self: start; padding: 0.6rem 1.4rem; font-size: 0.95rem; }

/* Merkene på profilen er ikke klikkbare og trenger ikke hjelpetekst under —
   forklaringen ligger i `title`, der man leter etter den. */
.blokk--tekst .merker { margin-bottom: var(--ax-gap); }