/* ─────────────────────────────────────────────────────────────────────────────
   seksjon.css — forma ein seksjon har, utan ein einaste farge.

   /tog var den fyrste seksjonen på staden: eit nav, ei levande side, eit arkiv
   med faner og nedslag, og ein vegg. ADR 0022 samla paletten hans i éi fil.
   Denne fila tek steget etter: /bok og /film er same FORM med ein annan
   PALETT, så forma flyttar hit og paletten blir att hos kvar seksjon.

   Regelen som gjer kontrakten etterprøvbar:

     Denne fila deklarerer ingen farge. Kvar einaste verdi er ein var(--…).

   Ein seksjon som gløymer eit token får ei synleg brote side i staden for å
   arva nattblåtta til /tog i det stille, og test/seksjon.test.js kan slå fast
   fråværet med eit grep. (Nøytral rgba(255,255,255,…) er lov der ho berre
   tonar det som ligg under — ho hevdar ingen farge.)

   ── Kontrakten ──────────────────────────────────────────────────────────────
   Kvar seksjon deklarerer alle desse i sin eigen :root.

     Flater     --bg  --bg-2  --panel  --well
     Tekst      --ink  --muted  --line
     Aksentar   --varm   det MENNESKET laga — det Markus skreiv, valde eller
                         fotograferte — og kvart einaste tal
                --kald   det MASKINA utleidde — ein tur slutta frå eit
                         tidsstempel, ein utrekna prosent, ein dato
                --varm-lys  --varm eit hakk lysare; berre til fylte knappar
     Skrim      --glo  --scrim  --hero-scrim  --shadow  --shadow-card  --shadow-live

   --glo er heile radial-gradienten som ligg øvst på sida, ikkje ein farge.
   Han MÅ vera det: eit forsøk på å byggja han her av var(--kald) enda med
   `color-mix(… 0%, transparent)`, som er gjennomsiktig SVART og ikkje
   gjennomsiktig blått — vaskinga blei såvidt ei anna, og teksten over henne
   fekk ei anna kantutjamning. Målt, ikkje gjetta: sidene var pikselulike før
   dette blei eit token.
     Skrift     --font-disp  --font-ui  --font-lab

   Aksentane er SEMANTISKE, ikkje pynt. Det var ADR 0022 §2 for eitt tema; det
   er viktigare her, av di ein palett med to utbytelege aksentar blir brukt
   utbyteleg innan ein månad — og no er det tre seksjonar som les regelen.

   `--varm` er kvart tal av di eit tal er noko han gjorde. `--kald` er kvar
   dato, av di ein dato er noko me rekna ut av det.

   ── Lastrekkjefølgje ────────────────────────────────────────────────────────
   /vendor/leaflet.css (der eit kart finst) → /seksjon.css → seksjonen si eiga
   fil → sida si eiga. Lik spesifisitet, så den siste vinn: lastar seksjonsfila
   FØR denne, er overstyringane hennar usynlege i dag og feil etter fyrste
   justering. test/contrast.test.js slår fast rekkjefølgja per side.

   ── Kontrast ────────────────────────────────────────────────────────────────
   Porten er WCAG AA, AAA der ho er gratis — posituren /tog/selfie alltid har
   hatt, og den ADR 0002 set for staden. Kvart par står i test/contrast.test.js;
   forteljinga i docs/tilgjenge.md.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Geometri er form, ikkje palett, så desse har verdiar her. Ein seksjon som
     vil ha ei anna breidd deklererer dei på nytt i si eiga fil. */
  --page: min(1100px, 100%);
  --page-vid: min(1180px, 100%);
  --gutter: 16px;
}

/* Ein vegg av bilete vil ha den breie spalta; ei lesande side vil ikkje. Kvar
   seksjon vel sin eigen --page-vid; klassa er den same. */
body.sek-vid { --page: var(--page-vid); }

* { box-sizing: border-box; }
/* `background-attachment: fixed` under paints the gradient over the VIEWPORT, so
   it follows the reader down a long page — but only ever covers one viewport's
   worth. Anything outside its reach falls through to whatever `html` is, which
   is white by default. In a browser that is never visible; in a full-page
   capture (and in print) it is a white band under the footer. So `html` carries
   the ground colour too, and the gradient sits on top of it. */
html { background: var(--bg); }
html, body { margin: 0; min-height: 100%; }

body {
  color: var(--ink);
  background:
    var(--glo),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  background-attachment: fixed;
  font: 15px/1.55 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

a { color: var(--varm); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kald);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hopp til innhaldet (WCAG 2.4.1). Fyrste element i <body> på kvar side i kvar
   seksjon; test/a11y.test.js slår fast det og at målet finst. */
.skip-link {
  position: fixed; top: -100%; left: 0.75rem; z-index: 1000;
  padding: 0.65rem 1.1rem; border-radius: 0.5rem;
  background: var(--panel); color: var(--ink); border: 2px solid var(--varm);
  font: 600 1rem var(--font-ui); text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

/* ── Statuslinja ─────────────────────────────────────────────────────────────
   Kvar side i ein seksjon ber ho, i kvar skjermbreidd, og ho svarar på det
   seksjonen sitt eige spørsmål er: kvar er toget, kva les han, kva såg han
   sist. sekStripStart() i /seksjon.js teiknar; seksjonen leverer svaret.

   Fast (`fixed`) ville teke dei øvste 40 px av heltebiletet med seg; `sticky`
   på top:0 held linja unna til sida rullar under ho. `top: 64px` på margen
   nedanfor er målt mot denne. */
.sek-strip {
  position: sticky; top: 0; z-index: 30;
  background: rgba(var(--bg-rgb), 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.sek-strip-in {
  width: var(--page); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--gutter);
}
.sek-strip-back {
  flex: none; font-size: 1.05rem; color: var(--kald); text-decoration: none;
  line-height: 1;
}
/* Dei tre datadrivne delane ligg i si eiga flex-rad, så /seksjon.js kan byta
   alle tre på ein gong utan å røra tilbakelenkja. */
.sek-strip-state {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.sek-pill {
  flex: none;
  font: 700 0.62rem/1 var(--font-lab);
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 8px;
  border: 1px solid var(--line); color: var(--muted);
}
/* To pillar og ikkje fleire, av di skiljet er det semantiske: det han GJER er
   varmt, det maskina GJETTAR seg til er kaldt. */
.sek-pill--varm {
  color: var(--varm);
  border-color: rgba(var(--varm-rgb), 0.5);
}
.sek-pill--kald {
  color: var(--kald);
  border-color: rgba(var(--kald-rgb), 0.45);
}

.sek-strip-tekst {
  min-width: 0;
  font-size: 0.82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sek-strip-hogre {
  margin-left: auto; flex: none;
  font: 600 0.82rem var(--font-lab); color: var(--muted);
}

/* ── Oppsett ─────────────────────────────────────────────────────────────────
   Mobil fyrst, og utan ein einaste media query: innhaldsspalta og margen er éi
   flex-rad som brekk, så margen fell under innhaldet når det ikkje er plass
   til båe. Det degraderer betre enn eit brotpunkt — det brekk der INNHALDET
   tek slutt, ikkje ved eit tal nokon gjetta.

   Margen er sideeige innhald (stopplista, filtera, rekordane), aldri ein andre
   navigasjon. */
.sek-wrap { width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.sek-cols {
  width: var(--page); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: flex-start;
  padding: 18px var(--gutter) 0;
}
.sek-main { flex: 1 1 420px; min-width: 0; }
.sek-rail {
  flex: 1 1 260px; max-width: 340px; min-width: 0;
  position: sticky; top: 64px; align-self: flex-start;
  display: grid; gap: 14px;
}
/* Ei side der margen ER innhaldet — stopp for stopp — vil ha breidda. */
.sek-rail--brei { flex-basis: 280px; max-width: 360px; }

/* ── Primitiv ────────────────────────────────────────────────────────────── */
.sek-kort {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px;
  box-shadow: var(--shadow-card);
}
/* Eit kort som flyt over noko som går bak det. */
.sek-kort--live { border-radius: 18px; padding: 17px; box-shadow: var(--shadow-live); }
/* Eit panel som held ei liste heilt ut i kantane: hovudstreken og radene vil ha
   hjørna, så luftinga bur på borna. */
.sek-panel {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.sek-panel-hovud {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--line);
}

/* Augnebryn / merkelapp / kapitéloverskrift. Skrifta i --font-lab MÅ vera
   lasta av sida: ho var deklarert og aldri henta på tre sider i månadsvis, og
   test/contrast.test.js gjer det no til ein port (ADR 0022 §5). */
.sek-auga {
  margin: 0;
  font: 700 0.7rem var(--font-lab);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.sek-auga--varm { color: var(--varm); letter-spacing: 0.2em; font-size: 0.66rem; }
.sek-auga--kald { color: var(--kald); }
/* Prikken dei levande merka opnar med. */
.sek-auga .prikk {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 7px; vertical-align: 0.1em;
}

/* Kvart tal er varmt, i kvar seksjon. Sjå kontrakten øvst: eit tal er noko han
   gjorde. */
.sek-tal {
  font-family: var(--font-disp); font-weight: 700; line-height: 1;
  color: var(--varm);
}
.sek-tal--stor { font-size: clamp(2rem, 4.5vw, 2.6rem); }

h1.sek-h1 {
  margin: 0;
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.2rem); line-height: 1.02;
  letter-spacing: -0.015em; text-wrap: pretty;
}
.sek-h2 {
  margin: 0;
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.08;
  letter-spacing: -0.015em;
}
.sek-lede { color: var(--muted); margin: 0; max-width: 52ch; }

/* Kort som er lenkjer: navraden, ei reise, eit land, ein sjanger. */
.sek-rutenett {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Bilete: auto-fill, aldri auto-fit — ein vegg med to bilete skal bli ståande
   to fliser brei i staden for å strekkja kvar over ein halv skjerm. */
.sek-rutenett--foto {
  gap: 3px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Kontrollar. 44 px er golvet for alt ein trykkjer på — desse seksjonane blir
   lesne på ein telefon, med éi hand. */
.sek-knapp {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
  font: 600 0.86rem var(--font-ui);
}
.sek-knapp:hover { color: var(--ink); border-color: var(--kald); }
/* `display` ovanfor ville elles slå [hidden]-regelen i nettlesaren sitt ark. */
.sek-knapp[hidden] { display: none; }
.sek-knapp--fyll {
  background: var(--varm); color: var(--bg); border-color: var(--varm);
  font-weight: 700;
}
.sek-knapp--fyll:hover { background: var(--varm-lys); color: var(--bg); }

/* Faner. role="tablist" står i markupen; dette er berre måling. */
.sek-faner {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.sek-faner button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: var(--muted); font: 600 0.9rem var(--font-ui);
  padding: 7px 15px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 0.45em;
  transition: background 0.15s ease, color 0.15s ease;
}
.sek-faner button:hover { color: var(--ink); }
.sek-faner button[aria-selected="true"] {
  background: rgba(var(--kald-rgb), 0.16);
  color: var(--ink);
}
.sek-faner button[hidden] { display: none; }

/* ── Opphavsmerke ────────────────────────────────────────────────────────────
   To reglar heile staden held, og som desse seksjonane seier i CSS:

   ADR 0010 — noko UTREKNA i staden for målt seier det, i --kald, med ein strek
   til venstre. Aldri forkledd som ei måling.
   ADR 0015 — noko USIKKERT blir verande usikkert: skraveringa er den visuelle
   forma til "dette er ei grense, ikkje eit tal". */
.sek-rekna {
  border-left: 3px solid var(--kald); padding: 2px 0 2px 11px;
  color: var(--muted); font-size: 0.83rem; line-height: 1.55;
}
.sek-rekna b { color: var(--kald); font-weight: 600; }

/* Gamalt: ei innskoten merknad på DET KORTET det gjeld, aldri eit banner over
   heile sida. Lesaren får vita kva som fall tilbake til kva, der talet han ser
   på faktisk står. */
.sek-gamal {
  margin: 13px 0 0;
  border-left: 3px solid var(--varm); padding: 2px 0 2px 11px;
  color: var(--muted); font-size: 0.83rem; line-height: 1.55;
}
.sek-gamal b { color: var(--varm); font-weight: 600; }

/* Framdrift. Heil --varm når nokon MÅLTE ho; skravert når me rekna ho ut. */
.sek-framdrift {
  position: relative; height: 0.75rem; border-radius: 999px;
  background: var(--bg); overflow: hidden;
}
.sek-framdrift > span {
  display: block; height: 100%; border-radius: 999px; background: var(--varm);
  transition: width 0.4s ease;
}
.sek-framdrift--rekna > span {
  background: repeating-linear-gradient(135deg,
    var(--varm) 0 8px, rgba(var(--varm-rgb), 0.4) 8px 16px);
}

/* ── Usikre tal (ADR 0015) ───────────────────────────────────────────────────
   Skravering er korleis eit tal seier at det ikkje kan samanliknast med nabo-
   talet sitt. Fire grunnar, av di "delvis" finst i sortar og sida ordlegg kvar
   sort ulikt — sjå lib/dekning.js, som er den eine definisjonen båe sidene
   les:

     importert tala skildrar ein import, ikkje ein periode han levde gjennom
     ujamn     det finst rader, men han logga ikkje jamt — ein rest
     tom       kjelda har ingen rader her i det heile
     lopande   perioden er ikkje slutt enno (ADR 0021)

   Alle fire teiknar likt med vilje: lesaren skal sjå AT det ikkje kan
   samanliknast, og få vita KVIFOR i teksten, ikkje av fargen. Ei skravering
   som kodar grunnen i farge ville krevja at lesaren lærte ein kode for å lesa
   ei åtvaring. */
.sek-hatch {
  background-image: repeating-linear-gradient(135deg,
    rgba(var(--kald-rgb), 0.34) 0 3px,
    transparent 3px 7px);
}
.sek-legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 10px 0 0; padding: 0; list-style: none;
  color: var(--muted); font-size: 0.78rem;
}
.sek-legende li { display: flex; align-items: center; gap: 7px; }
.sek-legende .rute {
  width: 15px; height: 12px; border-radius: 3px; flex: none;
  border: 1px solid var(--line); background: var(--bg-2);
}
/* Kva ei rangering heldt utanfor. Aldri skjult: ei rangering som ikkje seier
   kva ho sleppte, påstår at ho såg alt. */
.sek-atterhald {
  margin: 10px 0 0; color: var(--muted);
  font-size: 0.8rem; line-height: 1.55;
}

/* ── Lastar / tomt ───────────────────────────────────────────────────────────
   Skjelett forma som det som kjem, ikkje ordet "Lastar…". Ei blokk i storleiken
   og på staden til det som er på veg er ein lovnad sida held; ein snurrande
   ring midt på er ei side som innrømmer at ho ikkje veit. */
@keyframes sek-sk { 0%, 100% { opacity: 0.5 } 50% { opacity: 0.85 } }
.sek-sk {
  background: var(--panel); border-radius: 8px;
  animation: sek-sk 1.6s ease-in-out infinite;
}
.sek-sk--linje { height: 0.9rem; }
.sek-sk--tittel { height: 1.9rem; border-radius: 10px; }
.sek-sk--kort { height: 120px; border-radius: 14px; }
.sek-sk--foto { aspect-ratio: 1; border-radius: 0; }

.sek-tomt {
  border: 1px dashed var(--line); border-radius: 16px;
  padding: 34px 20px; text-align: center;
}
.sek-tomt .glyf { margin: 0 0 8px; font-size: 2rem; line-height: 1; }
.sek-tomt .tittel {
  margin: 0 0 6px;
  font-family: var(--font-disp); font-weight: 600; font-size: 1.15rem;
}
.sek-tomt p.tekst { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.sek-tomt .sek-knapp { margin-top: 14px; }

/* ── Botn ────────────────────────────────────────────────────────────────── */
.sek-foot {
  width: var(--page); margin: 0 auto;
  padding: 26px var(--gutter) 34px;
  color: var(--muted); font-size: 0.84rem;
}
.sek-foot p { margin: 0 0 8px; max-width: 70ch; line-height: 1.6; }
.sek-foot p:last-child { margin-bottom: 0; }
.sek-foot a { color: var(--kald); text-decoration: none; }
.sek-foot a:hover { text-decoration: underline; }

/* ── Mindre rørsle ───────────────────────────────────────────────────────────
   Skjelettpulsen, framdriftsovergangen og glatt rulling er alt saman rørsle
   ingen bad om. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .sek-sk { animation: none; }
  .sek-framdrift > span { transition: none; }
  .sek-faner button { transition: none; }
}