/* src/voteringsoversikt/web/static/stil.css
   Éin stad for all statisk stil. Dynamiske verdiar (stolpebreidder,
   partifargar) står som style-attributt i malane, av di dei er data.

   Plan III, oppgåve 1: tokenverdiane under uttrykkjer identitetsvalet —
   mørk grunn som heim, lys som likeverdig, ikkje-ettertanke alternativ.
   Berre verdiar er endra her; ingen mal er rørt. */

:root {
  /* Mørk grunn er heimen — sjå Plan III sin retningsavgjerd. Det lyse temaet
     under er ikkje ein ettertanke, men det er ikkje det designet er teikna for.

     2026-08-09: grunnen har fått ein KULØR. Dei gamle verdiane (#101317 /
     #fbfbfa) var reint nøytrale — den default-grå mørk modus kva som helst
     kunne hatt. No er mørk grunn blekk med blågrøn kast og lys grunn varmt
     protokollpapir, av di det er DEI to materiala emnet faktisk er laga av.
     Målt etter skiftet: --blekk-mjuk gjekk frå 5.19:1 til 6.37:1 mørkt og
     frå 6.02:1 til 5.35:1 lyst — begge godt over AA sitt 4.5:1, og ingen
     eksisterande kontrastmåling vart dårlegare enn kravet. */
  --papir: #0d1417;
  --blekk: #eef2f1;
  --blekk-mjuk: #8a9a9d;
  --kant: #1e2a2f;
  --kant-mjuk: #161f23;
  --flate: #131c20;
  --varsel-flate: #241f10;
  --varsel-kant: #6b5a2a;
  --varsel-blekk: #f0d68a;
  --lenkje: #8fbcf0;

  /* Lenkjefarge. Fanst IKKJE før, og det var ikkje eit stilval — arket hadde
     ingen `a`-regel i det heile, so kvar einaste lenkje utanom tre lokale
     unntak arva nettlesaren sin #0000EE/#551A8B. Målt mot --papir i mørkt
     tema gav det 1.98:1 og 1.69:1. WCAG AA krev 4.5:1, so ei vitja lenkje
     var under 40 % av kravet — praktisk talt usynleg, ikkje berre stygg.
     Verdiane under er målte: 9.42:1 mørkt, 9.08:1 lyst. */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --tal: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Typeskala. Held seg til desse — eit tal utanfor skalaen er alltid eit
     teikn på at noko anna skulle vore løyst med luft eller vekt. */
  --skrift-1: .78rem;
  --skrift-2: .9rem;
  --skrift-3: 1rem;
  --skrift-4: 1.25rem;
  --skrift-5: clamp(1.5rem, 5vw, 2rem);

  --luft-1: .4rem;
  --luft-2: .7rem;
  --luft-3: 1.2rem;
  --luft-4: 2rem;
}

/* Eksplisitt, sjølv om :root over alt har dei mørke verdiane som utgangspunkt
   — gjer heim-valet synleg i arket i staden for underforstått, og held
   symmetrien med det lyse media-uttrykket under. */
@media (prefers-color-scheme: dark) {
  :root {
    --papir: #0d1417; --blekk: #eef2f1; --blekk-mjuk: #8a9a9d;
    --kant: #1e2a2f; --kant-mjuk: #161f23; --flate: #131c20;
    --varsel-flate: #241f10; --varsel-kant: #6b5a2a; --varsel-blekk: #f0d68a;
    --lenkje: #8fbcf0;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --papir: #f6f3ec; --blekk: #14191b; --blekk-mjuk: #5b6668;
    --kant: #e2ddd0; --kant-mjuk: #edeade; --flate: #fffdf8;
    --varsel-flate: #fff3cd; --varsel-kant: #f0d783; --varsel-blekk: #6b5a2a;
    --lenkje: #15477e;
  }
}

/* Designspesifikasjonen (§9.1) bad opphavleg om eit `:root[data-theme]`-
   overstyr i tillegg til media-uttrykka over. Det er teke bort her, ikkje
   berre utelate: retta i Oppgåve 5 etter at gjennomgangen fann at "sida har
   ingen JavaScript" var ei påstand skriven inn i planen utan å sjekke om ho
   var sann — kommune.html har hatt eit partifilter sidan fyrste commit, og
   base.html set no i tillegg klassen `.js` (sjå der). Men INGEN av dei set
   `data-theme`, og det finst framleis ingen vertsapplikasjon som kunne gjere
   det for oss — konklusjonen frå før står altså ved lag av ein annan grunn:
   `[data-theme]` er udødeleg daud kode fordi ingen ting i denne kodebasen
   nokon gong set attributtet, ikkje fordi sida manglar skript i det heile.
   Om prosjektet seinare får ei vertsside som embeddar denne, eller ein
   server-sida temavelgar (t.d. eit ?tema=lys-spørjeparameter attribuert i
   malen), er dette den naturlege staden å leggje han attende — men fram til
   då lyg eit [data-theme]-utval om at nokon kan skru på det. */

/* ---------------------------------------------------------------------
   base.html — grunnstilen alle sider arvar.
   --------------------------------------------------------------------- */
body {
  /* `margin: <verdi>` åleine sette berre EIN margin på alle fire sidene, so
     sida klistra seg til venstre kant uansett kor brei skjermen var — ein
     max-width utan `auto` sentrerer ingenting. `auto` på sidene gjer det.
     Breidda er samstundes lyft frå 60rem: tabellane i saklista og
     røystestolpane har nytte av plassen, og på ein brei skjerm låg sida
     som ein smal stripe i venstre hjørne. Lesetekst er framleis smal der
     ho skal vere — landingssida set sin eigen 46rem. */
  font-family: var(--sans); margin: var(--luft-4) auto; max-width: 72rem;
  padding: 0 var(--luft-3);
  background: var(--papir); color: var(--blekk); font-size: var(--skrift-3);
  /* Arva av alt under — stemmetal dukkar opp fleire stader (.tal, men òg
     inne i vis_votering-makroen sitt umerkte avsnitt), og tabular-nums er
     eit reint skriftval utan strukturell verknad, difor sett éin stad. */
  font-variant-numeric: tabular-nums;
}
/* Lenkjer. Éin regel for heile sida; dei tre lokale unntaka lenger nede
   (.kontrollrad a, .sokrad > a, .doemekort h3 a) overstyrer med vilje.

   `:visited` får SAME farge som `:link`. Standardåtferda — lilla — er den
   verste av dei to på mørk grunn (1.69:1), og på ei side der ein lesar
   naturleg klikkar seg gjennom mange saker ville halve sida bli usynleg
   etter kvart som han las. Kva han har vitja er dessutan ikkje informasjon
   sida har noko å tene på å framheve.

   Understrekinga er dempa i kvile og full ved peikar/fokus, so lenkja er
   tydeleg utan å støye i ein tekst full av dei. */
a { color: var(--lenkje); text-decoration-color: color-mix(in srgb, var(--lenkje) 45%, transparent); text-underline-offset: .18em; }
a:visited { color: var(--lenkje); }
a:hover, a:focus-visible { text-decoration-color: currentColor; }

/* Synleg fokusring. Utan denne fell tastaturbrukaren attende på nettlesaren
   sin standard, som på mørk grunn er like vanskeleg å sjå som lenkjefargen
   var. */
:focus-visible { outline: 2px solid var(--lenkje); outline-offset: 2px; }

/* h1 — fyrste verkelege bruk av --skrift-5 (elles urørt sidan oppgåve 1).
   Clamp() krympar overskrifta på ein smal skjerm i staden for å halde fast
   på skrivebordsstorleiken — direkte til nytte for kommunesida sitt krav om
   at nav-et skal vere roleg (kommunenamnet skal ikkje ta uforholdsmessig
   mykje plass på ein telefon), og likeins for lange sakstitlar/arkivnummer
   i overskrifta på sak- og saksgangssida. */
h1 { font-size: var(--skrift-5); }
.tal { font-variant-numeric: tabular-nums; }
table { border-collapse: collapse; width: 100%; margin-bottom: var(--luft-4); }
th, td { border: 1px solid var(--kant); padding: var(--luft-1) .6rem; text-align: left; }
.utleidd { color: var(--blekk-mjuk); font-style: italic; }
/* Oppgåve 4: storleiken på begge desse linjene kom tidlegare frå eit eige
   .9rem-tal — same TAL som --skrift-2, men skrive som ein literal i staden
   for skalaen. Retta til var(--skrift-2) slik at «bruk skalaen, ikkje enda
   ein literal» gjeld her òg, og slik at ein test kan seie noko presist om
   KVA steg på skalaen linja står på, ikkje berre om talet tilfeldigvis er
   stort nok. Fargen (--blekk-mjuk) er urørt: målt kontrast mot --papir er
   5.19:1 (mørkt) / 5.93:1 (lyst) — godt over WCAG AA sitt 4.5:1-krav for
   brødtekst, so dette var aldri "grått ingen les" i fargeval, berre i at
   storleiken kunne drive vekk frå skalaen utan at nokon la merke til det. */
.kjeldelinje { color: var(--blekk-mjuk); font-size: var(--skrift-2); }
/* .dekning — dekningssetninga nedst i saklista (kommune.html, saker.html via
   `dekningssetning`-makroen i _makroar.html). Same dempa stil som
   .kjeldelinje: begge fortel om SIDA, ikkje om innhaldet på henne. */
.dekning { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin-top: var(--luft-3); }
pre { background: var(--flate); padding: .6rem; white-space: pre-wrap; }
.scroll-x { overflow-x: auto; }
/* .dobbeltroyst/.fane stilar vis_votering-makroen som sak.html OG
   saksgang.html deler — difor bur dei her, ikkje under eit sidespesifikt
   avsnitt lenger nede. */
.dobbeltroyst { border-left: 3px solid var(--blekk-mjuk); padding-left: .6rem; }
.dobbeltroyst .fane { display: block; font-weight: bold; }

/* .merknad seier at tala i protokollen ikkje går opp. Same form som
   .dobbeltroyst, av di dei to gjer same jobb — dei forklarar eit tal lesaren
   elles ville stussa på — men med varselfargen, av di denne peikar på ein
   feil i kjelda medan .dobbeltroyst peikar på ein lovleg mekanisme.
   Fargen er den same tokenen som `.varsel` på sakssida nyttar, so dei to
   ikkje kan sige frå kvarandre. */
.merknad {
  border-left: 3px solid var(--varsel-kant);
  padding-left: .6rem;
}
.merknad .fane { display: block; font-weight: bold; }

/* .roystestolpe — DEN grafiske stolpen for éi einskild votering. Éin
   definisjon, brukt av FIRE flater: den fulle voteringsdetaljen
   (vis_votering-makroen i sak.html, saksgang.html og organ.html sin
   voteringsdetalj) OG den kompakte saklistrada (kommune.html, organ.html,
   saker.html — `.kompakt`-modifikatoren under). Fiks-runde 1 fann at desse
   FIRE flatene tidlegare synte to ulike, usemde stolpar for same votering
   (éin dempa etter posisjon, éin etter utfall) — no er det éin macro
   (`makroar.roystestolpe`) og difor umogleg for dei å seie ulike ting.

   Same språk som .kammerstripe under (flex, flex-grow frå data), men delt i
   to sider (for/mot) i staden for eitt segment per parti på øvste nivå — kvar
   side har SO sine eigne partisegment nøysta inni seg (.parti under), farga
   frå `[partifargar]` via `farge()`-oppslaget malen får frå app.py, akkurat
   som kammerstripa sine segment. Ei side utan partidata fell attende på sin
   eigen, umerkte --blekk-bakgrunn (framleis synleg, berre utan oppløysing).

   Kven som TAPAR (dempa med opacity) er avgjort av v.utfall i makroen, ALDRI
   av om sida heiter "for" eller "mot" — mot vinn like ofte som for, so ei
   fast farge/dempingsregel etter posisjon ville hevda noko usant om lag
   halvparten av voteringane. */
.roystestolpe {
  display: flex; gap: 2px; height: 1.3rem; border-radius: .15rem; overflow: hidden;
  border: 1px solid var(--kant); margin: .4rem 0;
}
/* .kompakt — same stolpe, brukt i den tette saklistrada i staden for i den
   fulle voteringsdetaljen: halv høgd att, fast breidd i staden for å fylle
   rada, og ikkje ein eigen margin (rada sin eigen `gap` mellom elementa
   held avstanden). `.sakstabell .roystestolpe.kompakt` under smalnar henne
   ytterlegare inn i den trongare tabellcella. */
.roystestolpe.kompakt {
  height: .6rem; width: 12rem; flex: 0 0 auto; margin: 0; border-radius: .2rem;
  background: var(--kant-mjuk);
}
.sakstabell .roystestolpe.kompakt { width: 8rem; }
.roystestolpe .for, .roystestolpe .mot {
  display: flex; gap: 1px; background: var(--blekk); min-width: 3px;
}
/* 4px, same tal som .kammerstripe .segment (same visuelle språk for eit
   einskild partisegment, sjå kommentaren over .roystestolpe) — retta frå
   1px i sluttfiks-runden sitt Minor-funn (dei to hadde drifta frå kvarandre
   utan grunn). IKKJE det same som `min-width: 3px` på `.roystestolpe .for`/
   `.mot` to reglar over: DEN er FOR/MOT-SIDA sin eigen minstebreidd (gjer ein
   ekte null-stemme synleg som ein stubb, skild frå ei fråverande stolpe) og
   er urørt her. */
.roystestolpe .parti { min-width: 4px; }
/* .55, ikkje t.d. .4: målt (WCAG-relativ luminans, alfa-blanda i sRGB-rommet
   — same rommet skjermen faktisk blandar `opacity` i — deretter konvertert
   til lineært lys for sjølve kontrastformelen). Ved .4 hamna den dempa
   blokka på berre 2.52:1 mot --papir og 2.47:1 mot --kant-mjuk i det lyse
   temaet, under dei 3:1 WCAG 1.4.11 krev for grafiske objekt. Ved .55 er ho
   3.92:1 (lys) / 5.48:1 (mørk) mot papir, og 3.78:1 (lys) / 5.22:1 (mørk) mot
   --kant-mjuk (stolpe-sporet i .kompakt) — begge tema over 3:1 mot begge
   bakgrunnar. (Fiks-runde 1 retta --kant-mjuk-tala: dei stod som 2.23/3.46 i
   fyrste utkastet av denne målinga, ein reknefeil i det opphavlege skriptet
   — verken opacityvalet eller kva side av 3:1-grensa nokon av dei to
   temaa/opacitetane hamnar på endra seg, berre presisjonen i talet.)

   Sluttfiks (Finding 2, Important): denne regelen sat TIDLEGARE direkte på
   `.tapar` (wrapparen, `.for`/`.mot` sjølv) — same element som eig
   `background: var(--blekk)` to reglar over, bakgrunnen som syner gjennom
   1px-gapet MELLOM kvar `.parti`-blokk (skiljelinja mellom to parti, sjå
   task-2-report.md fiks-runde 1). Ei opacity på WRAPPAREN komposita difor
   HEILE undertreet — skiljelinja inkludert — so på taparsida vart linja
   sjølv dempa til .55, ned mot 1.15:1 mot enkelte partifargar (KRF, mørkt
   tema), godt under 3:1, sjølv om task-2-report.md hevda ho «alltid» heldt
   «uansett kor nære fargane er». Retta ved å flytte opacityen NED til berre
   `.parti`-borna (regelen rett under) — skiljelinja er no ALLTID full
   var(--blekk), uansett vinnar/tapar. Kontrasten på KVART .parti-segment
   sjølv er UENDRA (same komposittering same veg, berre eitt steg lenger ned
   i treet) — det er skiljelinja som er retta, ikkje sjølve partifargane
   (dei kan framleis liggje så nære kvarandre som 1.02:1 dempa mot dempa,
   noko farge åleine ikkje kan rette, jf. fiks-runde 1 sitt ærlege atterhald
   om raud/grøn-fargeblindheit). Sjå sluttfiks-report.md for full måling. */
.roystestolpe .tapar .parti { opacity: .55; }
/* Ei side utan partidata har ingen .parti-born (Jinja-loopen over renderer
   INGENTING, whitespacen trimma vekk på begge sider — sjå kommentaren i
   _makroar.html) — wrapparen sin eigen bakgrunn ER då heile sida sitt
   uttrykk, ikkje eit gap mellom noko. Han skal framleis sjåast dempa når han
   taper, men FLATT (eit ferdig blanda token), ikkje komposita: same
   var(--blekk-mjuk) som resten av sida sin sekundærtekst/-grafikk, urørt av
   opacity og difor umogleg å kompositere under den alt verifiserte
   5.19:1/6.02:1-marginen. `:empty` er reint CSS2.1, ingen ny føresetnad. */
.roystestolpe .tapar:empty { background: var(--blekk-mjuk); }
/* .ekstraroyst — møteleiaren si dobbeltrøyst (§ 11-9). Ho er korkje eit
   parti eller ei side i vanleg forstand, berre éi einskild røyst lagt til i
   tillegg — difor ikkje .for/.mot-fargen (ville sjåast ut som del av den
   sida) og ikkje ein tredje, oppdikta farge (ville sjåast ut som eit parti
   vi ikkje har). Skravering + kant i --blekk skil ho tydeleg frå for/mot-
   blokkene ved sida av. Erstattar ikkje setninga i .dobbeltroyst over —
   berre eit synleg tillegg til henne. */
.roystestolpe .ekstraroyst {
  background: repeating-linear-gradient(
    45deg, var(--papir), var(--papir) 2px, var(--blekk) 2px, var(--blekk) 4px
  );
  border-left: 1px solid var(--blekk);
  min-width: 4px;
}
/* .kjeldelenkje er lenkja til protokoll-PDF-en ved sida av «Råtekst frå
   protokollen» i vis_votering-makroen. .utilgjengeleg er teksten som
   erstattar lenkja når mote.protokoll_url manglar — han skal aldri sjå
   identisk ut som ei votering som HAR ei kjelde, sjølv om han held seg like
   tilbakehalden i stilen (visuell identitet kjem i eit seinare designpass). */
.kjeldelenkje { font-size: var(--skrift-2); margin-left: .5rem; }
.kjeldelenkje.utilgjengeleg { color: var(--blekk-mjuk); font-style: italic; }

/* ---------------------------------------------------------------------
   kommune.html — kammeret, saklista og kontrollrada.
   --------------------------------------------------------------------- */
.kammer { margin-bottom: 1.5rem; }
/* Halv høgd mot den opphavlege skissa (2.6rem) — sjå Plan III, oppgåve 2.
   gap: 2px opnar ein tynn glipe mellom kvart partisegment (fylt av sida sin
   eigen --papir-bakgrunn, sidan .kammerstripe ikkje set nokon eigen
   bakgrunnsfarge), so grensa mellom to parti er synleg utan at kvart segment
   treng ein eigen kant. */
/* .kammerstripe og .teiknforklaring stod her til 2026-08-09. Stripa vart bytt
   ut med seteruter (sjå «Kammeret på kommunesida» nedst) og forklaringa med
   den delte `partiforklaring`-makroen, so ingen mal viser dei lenger.
   Reglane er FJERNA og ikkje berre lét stå: ein CSS-regel utan element er
   ikkje harmlaus, han er ei felle for neste lesar som trur han stiler noko.
*/
/* Klikkbarheit for partifilteret (kommune.html sitt eine JS-innslag) er
   gøymt bak `html.js` (klassen sett av eit synkront skript i <head>, sjå
   base.html) — UTAN skript skal desse elementa ikkje sjå klikkbare ut, sidan
   filteret då aldri køyrer og ein musepeikar-cursor ville lyge om det.
   `.vald`-merket (feit + understreka) treng ikkje same vakt: klassen vert
   berre nokon gong sett AV skriptet sjølv, so ho kan aldri dukke opp utan
   at JavaScript alt køyrer. */
html.js .kammersete .parti-knapp, html.js .seteforklaring .parti-knapp { cursor: pointer; }
.parti-knapp.vald { font-weight: bold; text-decoration: underline; }

/* .varsel er delt av kommune.html, sak.html og saksgang.html — same boks,
   same margin-bottom. Kommune.html sin bruk hadde opphavleg ingen eigen
   margin-bottom, men fekk likevel nett same avstand til rada under av di
   nabomarginar i normal flyt slår seg saman (kontrollrada sin margin-top
   er òg 1rem) — å setje han her endrar difor ikkje utsjånaden nokon stad. */
.varsel {
  background: var(--varsel-flate); border: 1px solid var(--varsel-kant); padding: .6rem .8rem;
  border-radius: .25rem; margin-bottom: 1rem;
}

.saklist { list-style: none; padding: 0; margin: 0; }
/* Tettare enn før (.7rem -> .5rem, gap .5 -> .4): fem rader skal kunne
   skannast utan å rulle. Rada er framleis eit flex-wrap, so ho brekk pent
   på ein telefon — det er lufta MELLOM radene som er stramma inn, ikkje
   plassen innhaldet har. */
.sakrad {
  padding: .5rem 0; border-bottom: 1px solid var(--kant-mjuk);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem;
}
.sakrad:last-child { border-bottom: 0; }
/* Tittelen er sjølve hovudinnhaldet i rada (kva saka gjeld) — han skal difor
   stå i full blekk, ikkje ein dempa gråtone. Oppgåve 1 sin observasjon: den
   gamle #333-literalen var meint som ei mild nedtoning mot rein svart i eit
   lys-berre design, men #333 mot --papir i mørkt tema (#101317) målar til
   berre 2.5:1 kontrast — under WCAG AA sitt 4.5:1-krav for brødtekst, altså
   praktisk tala usynleg. var(--blekk) (full ink) er både det tokenet som
   faktisk finst for "hovudtekst", og det einaste som held kontrasten oppe i
   begge tema. */
.sakrad .tittel { color: var(--blekk); }
/* Sluttfiks (Finding 1, Critical): denne stod tidlegare som
   `.sakrad.samde { opacity: .65 }` — ein forelder-opacity som komposita HEILE
   undertreet, kjeldemerket (.kjelde/.kjelde.utleidd/.ingen-grunnlag) og
   .ordet-samde/.organ-namn inkludert. Dei brukar alle var(--blekk-mjuk),
   som isolert berre har 5.19:1 (mørkt) / 6.02:1 (lyst) i margin over WCAG AA
   sitt 4.5:1 — komposita med .65 fall dei til 2.88:1 / 2.83:1, godt under
   grensa, sjølv om kvar isolert token-måling såg trygg ut.

   .tittel er det EINASTE elementet i rada som treng eit eige dempingssignal:
   alt anna (kjeldemerket, .ordet-samde, .organ-namn) er ALT dempa til
   var(--blekk-mjuk) i BEGGE radtypar, samde eller ikkje — retta ved å
   dempe berre .tittel, med same token, ikkje ein gjennomsikt. Ein flat
   tokenbyte kan ikkje kompositere seg under AA slik ein prosentdel av eit
   ELLES trygt tal kan; kontrasten ER 5.19:1/6.02:1, urørt av kor mange
   foreldre elementet har. Sjå sluttfiks-report.md for målingane. */
.sakrad.samde .tittel { color: var(--blekk-mjuk); }
/* Møtedatoen i dei kompakte saklistene (kommune.html, organ.html). Same to
   tokena som .organ-namn og .kjelde ved sida av han — var(--skrift-1) og
   var(--blekk-mjuk) — av di han spelar same rolla: eit lite identitetsmerke
   framfor tittelen, ikkje eit innhald som skal konkurrere med han. Ein FLAT
   tokenbyte, aldri ein opacity: gjennomsikt her ville komposittert same
   undertreet som Finding 1 over handlar om.

   `nowrap` av same grunn som .sakstabell .motedato: datoen er ei fast, kort
   form, og utan han kan nettlesaren bryte han ved bindestrekane i ei trong
   flexrad og dele «2025-12-18» over tre linjer. */
.sakrad .motedato {
  font-size: var(--skrift-1); color: var(--blekk-mjuk); white-space: nowrap;
}
/* Den kompakte for/mot-stolpen i saklistene (kommune.html, organ.html,
   saksstabellen under) er IKKJE lenger sin eigen klasse/regel her — ho er no
   berre `.roystestolpe.kompakt` (delt macro, sjå grunngjevinga attmed
   .roystestolpe over). Fiks-runde 1: dei tre malane sine identiske kopiar av
   markupen (som gjorde vinnaroppslag umogleg å leggje til utan å røre tre
   filer samstundes) er samla til éin macro i _makroar.html. */
.ordet-samde { font-style: italic; color: var(--blekk-mjuk); }
.fleire { font-weight: 600; }

/* .organ-namn — kva organ raden kjem frå, på kommunesida sitt nav der dei
   fem øvste sakene er henta på tvers av ALLE organ (sjå kommune.html). Utan
   denne er ei areal-sak og ei kommunestyre-sak umogleg å skilje frå
   kvarandre. Same pille-form som .kjelde, men eiga farge/kant slik at dei to
   merka ikkje kan forvekslast. Storleiken (var(--skrift-1), skalaen sitt
   minste steg) og fargen (var(--blekk-mjuk), sekundærtekst) er dei same to
   tokena som .kjelde nedanfor brukar til sin pille-form — same språk for to
   ulike merke, i staden for to nesten-like literalar (.8em/#555 vs eit anna
   nesten-likt tal). */
.organ-namn {
  font-size: var(--skrift-1); padding: .05rem .5rem; border-radius: 1rem;
  border: 1px solid var(--kant); background: var(--flate); color: var(--blekk-mjuk);
  white-space: nowrap;
}

/* .organliste — nav-et sin andre del, sjølve inngangane til kvart utval. */
.organliste ul { list-style: none; padding: 0; }
.organliste li {
  padding: .5rem 0; border-bottom: 1px solid var(--kant-mjuk);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
.organ-tal { color: var(--blekk-mjuk); font-size: var(--skrift-2); }

/* .kjelde/.kjelde.utleidd er delt av vis_votering-makroen (sak.html og
   saksgang.html — identisk der, utan eigen tekstfarge på grunnlaget) OG av
   kjeldemerke-makroen (kommune.html og tabellvisninga — som i staden tonar
   HEILE merket grått). Basisregelen under er difor sak.html/saksgang.html
   sin variant; kommune.html og tabellvisninga legg på fargen sin via dei
   meir spesifikke ".sakrad .kjelde"/".sakstabell .kjelde" nedanfor. */
.kjelde {
  font-size: var(--skrift-1); padding: .05rem .5rem; border-radius: 1rem; border: 1px solid var(--kant);
}
.kjelde.utleidd { font-style: italic; border-style: dashed; color: var(--blekk-mjuk); }
.sakrad .kjelde, .sakstabell .kjelde { color: var(--blekk-mjuk); }

/* Del av `kjeldemerke`-makroen (_makroar.html) — nådd frå saksgang.html
   (§ Task 3) OG kommune.html/tabellvisninga (Task 4 sitt ansvar for resten
   av dei to sidene sin eigen stil). Same dempa token som resten av sida sin
   sekundærtekst, i staden for ein eigen hardkoda gråtone som var usynleg mot
   --papir i mørkt tema. */
.ingen-grunnlag { color: var(--blekk-mjuk); }

/* Delt mellom kommune.html og tabellvisninga (saker.html) — identisk begge
   stader, difor éin definisjon. */
.kontrollrad { margin: 1rem 0; padding: .6rem 0; border-top: 1px solid var(--kant-mjuk);
  border-bottom: 1px solid var(--kant-mjuk); }
.kontrollrad ul { list-style: none; padding: 0; margin: 0 0 .3rem;
  display: flex; flex-wrap: wrap; gap: 1rem; }
/* Heile kontrollrada var del av Task 1 sin observasjon (43 hardkoda hex,
   usynlege mot --papir i mørkt tema). Ikkje-vald lenkje: dempa sekundærtekst
   (var(--blekk-mjuk), same token som resten av sida sin sekundærtekst) — vald
   lenkje: full blekk (var(--blekk)), sidan "kva sortering/filter er aktivt"
   er noko lesaren skal SJÅ med det same, ikkje leite etter. */
.kontrollrad a { text-decoration: none; color: var(--blekk-mjuk); }
.kontrollrad a[aria-current] { color: var(--blekk); font-weight: bold; text-decoration: underline; }
.filtervarsel { margin: .3rem 0; color: var(--blekk-mjuk); font-size: var(--skrift-2); }

/* .skiljelinje brukast både på ei <li> (kommune.html) og ei <tr> (saker.html,
   sjå .skiljelinje td lenger nede). Trygt: padding verkar ikkje på <tr>
   (cellene sin eigen padding styrer der), og .skiljelinje td vinn uansett på
   fargen/kursiven i tabellen — dei to bruksmåtane kolliderer ikkje. */
.skiljelinje { color: var(--blekk-mjuk); font-style: italic; padding: .6rem 0 .2rem; }

/* Delt mellom kommune.html og tabellvisninga — identisk begge stader. Talet
   i <summary> er akkurat den typen "gøymt, men framleis talt" oppgåve-
   skildringa krev (referatsaker/saker utan votering skal ikkje forsvinne
   stillteiande) — difor må sjølve TALET vere lesbart, ikkje ein hardkoda
   gråtone som druknar mot --papir i mørkt tema. */
details.utan-votering { margin-top: 1rem; color: var(--blekk-mjuk); }
details.utan-votering summary { cursor: pointer; }

/* ---------------------------------------------------------------------
   saker.html — tabellvisninga. Den tette flata: her skal ei rad kunne
   skannast utan å måtte lese kvart einaste ord, difor .sakstabell td under
   (konsekvent toppjustering — celler med fleire linjer, t.d. protokoll-
   setninga attåt framleggsteksten, skal ikkje seie at innhaldet startar
   midt i rada) og overskriftsraden sin eigen bakgrunn (skil rad frå
   kolonneoverskrift utan ekstra kant).
   --------------------------------------------------------------------- */
table.sakstabell { width: max-content; min-width: 100%; }
.sakstabell thead th { background: var(--flate); }
.sakstabell td { vertical-align: top; }
.sakstabell .kjelde { white-space: nowrap; }

/* Møtedatoen er ei fast, kort form (YYYY-MM-DD). Utan nowrap kan nettlesaren
   bryte han ved bindestrekane når tabellen er trong, og ein dato delt over tre
   linjer er verre å skanne enn ein kolonne som tek nokre piksler meir. */
.sakstabell .motedato { white-space: nowrap; }

/* .protokollsetning er den ordrette protokollsetninga i radprotokoll-makroen
   (_makroar.html, brukt av saker.html) — alltid synleg attåt framlegget sin
   eigen tekst i same celle, dempa for å skilje henne frå hovudinnhaldet i
   cella utan å gøyme henne bak eit klikk (den ordrette protokollsetninga skal
   alltid vere synleg der ei votering vert vist, ikkje berre eitt klikk unna). */
.sakstabell .protokollsetning { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin: .3rem 0 0; }

/* .lenkje-merknad er delt av sak.html og saksgang.html (boks, inni ei
   .framlegg-ramme) og tabellvisninga (berre tekst, inni ei tabellcelle) —
   difor to fullstendige, ikkje-overlappande reglar i staden for éin regel
   med unntak. */
.sakstabell .lenkje-merknad { color: var(--blekk-mjuk); font-style: italic; overflow-wrap: anywhere; }

.skiljelinje td { color: var(--blekk-mjuk); font-style: italic; }

.saksgang-lenkje { display: block; font-size: var(--skrift-1); color: var(--blekk-mjuk); white-space: nowrap; }

/* ---------------------------------------------------------------------
   sak.html — éi sak.
   --------------------------------------------------------------------- */
.framlegg {
  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kant-mjuk);
}
.framlegg .lenkje-merknad {
  border: 1px dashed var(--kant); padding: .5rem .8rem; border-radius: .25rem;
  color: var(--blekk-mjuk); overflow-wrap: anywhere;
}

/* .saksframlegg — kommunedirektøren sitt framlegg, ikkje utvalet sitt vedtak.
   Stiplet kant, same språk som .lenkje-merknad: begge seier «innhaldet står
   ikkje her, berre ei lenkje til det». Skiljet mellom framlegg og vedtak må
   aldri kunne lesast feil, og seksjonen skal difor ikkje sjå ut som ei
   .framlegg-ramme (som ALLTID har eit røystetal under seg). */
.saksframlegg {
  border: 1px dashed var(--kant); padding: .6rem .8rem; border-radius: .25rem;
  margin-bottom: 1.5rem; overflow-wrap: anywhere;
}
.saksframlegg h2 { margin-top: 0; }
.saksframlegg-merknad { color: var(--blekk-mjuk); font-size: var(--skrift-2); }
/* .saksframlegg-utfall — dokumentet finst, men vi fekk ikkje orda ut av det
   (skjerma, eller eit format vi ikkje les). Står i full blekkfarge, ikkje i
   den mjuke merknadsfargen: dette er ei opplysning om kva søket IKKJE dekkjer,
   og ho har ingen verdi om ho ser ut som ein fotnote. */
.saksframlegg-utfall { font-size: var(--skrift-2); margin-bottom: 0; }

/* .framleggshovud — stemmetal, utfall og forslagsstillar i eitt blikk, bygd
   av `framleggshovud`-makroen i _makroar.html og difor delt av sak.html og
   saksgang.html. Stemmetalet i --tal (same skriftstabel som resten av tala
   på sida) med tabular-nums (arva frå body, .tal-klassen gjer det uttrykkeleg
   her òg) og løfta til --skrift-4 sidan det er det fyrste ein lesar skal
   fange opp av blokka. Forslagsstillar dempa (--blekk-mjuk) i --skrift-2,
   attåt, ikkje konkurrerande.

   Design-avgjerd (§9.4): stemmetalet og utfallet høyrer HEIME her, på
   blokka — aldri på linjene i .endringsliste under. Sjå grunngjevinga i
   _makroar.html sin kommentar på `framleggshovud`. */
.framleggshovud {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  margin: .3rem 0 .7rem;
}
.framleggshovud .stemmetal {
  font-family: var(--tal); font-size: var(--skrift-4); font-weight: 600;
}
.framleggshovud .forslagsstillar { color: var(--blekk-mjuk); font-size: var(--skrift-2); }

/* .framleggstekst — <details> som klappar saman lang framleggstekst (§9.4,
   TERSKEL i `framleggstekst`-makroen). Råteksten frå protokollen og
   kjeldelenkja (i vis_votering, kalla ETTER denne makroen frå malane) ligg
   ALLTID utanfor <details>-en, same kor lang framleggsteksten er. */
.framleggstekst summary { cursor: pointer; color: var(--blekk-mjuk); }
/* .endringsliste — punktlista for framlegg med fleire protokollinjer (t.d.
   dei ti budsjettendringslinjene i framlegg 3, PS 158/25). Linjeskifta i
   `forslag.tekst` er ekte protokollstruktur, ikkje formatering vi har dikta
   opp — punkta har difor INGEN eiga stemmetal-vising kvar, sjå
   .framleggshovud over. */
.endringsliste { margin: .3rem 0; padding-left: 1.2rem; }
.endringsliste li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------------
   saksgang.html — saksgangen for éi arkivsak.
   --------------------------------------------------------------------- */
.handsaming {
  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kant-mjuk);
}
.handsaming .utval-og-dato { color: var(--blekk-mjuk); }
/* saksgang.html sin ".framlegg" var opphavleg ei fullstendig ramme (border på
   alle fire sider + radius) — .handsaming er ancestoren som finst berre her,
   så han skil dei to utan at nokon av sidene treng ein ny klasse. Plan III,
   §9.4 bad om mindre støy: éin venstrekant i --kant i staden for full ramme,
   same avgrensing mellom framlegg utan å teikne ein boks rundt kvart av dei.
   Botnstreken frå den delte `.framlegg`-regelen over står framleis att (tynn,
   --kant-mjuk) — venstrekanten legg berre til éi tydelegare markering av at
   dette er éi samla blokk, ikkje ei ny avgrensing åleine. */
.handsaming .framlegg {
  margin-bottom: 1rem; padding: .6rem .8rem .6rem 1rem;
  border-left: 3px solid var(--kant);
}
.ingen-votering { color: var(--blekk-mjuk); }

/* ---------------------------------------------------------------------
   organ.html — kvart utval si eiga side.
   --------------------------------------------------------------------- */
/* .organ-samandrag og .vindauge stod bevisst urørte til no (sjå progress.md
   for oppgåve 1-3) — oppgåve 4 er der det visuelle passet for organsida
   skjer. Begge er dempa sekundærtekst i --skrift-2, same språk som resten
   av sida sine småtekstar (.organ-tal, .kjeldelinje, .dekning): dei
   fortel LESAREN OM VINDAUGET/UTVALET, ikkje sjølve saksinnhaldet, og skal
   difor sjå ut som dei andre setningane av den typen, ikkje som brødtekst.
   .voteringsdetalj sin <summary> får same peikar+dempa stil som dei andre
   disclosure-elementa på sida (.framleggstekst summary,
   details.utan-votering) — éin, konsekvent måte å seie "her er meir" på. */
.organ-samandrag { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin: .2rem 0 1rem; }
.vindauge { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin: .2rem 0 1rem; }
.voteringsdetalj summary { cursor: pointer; color: var(--blekk-mjuk); }
.voteringsdetalj { margin-top: .4rem; }

/* .sokefelt — makroen delt av kommune.html, organ.html, saker.html OG
   sok.html (`makroar.sokefelt` i _makroar.html). Éitt skjema, éin klasse:
   sok.html hadde tidlegare sin eigen ".sokjeform" med nesten identiske
   reglar — fjerna når sida gjekk over til å kalle makroen, sidan to
   klassar for same felt er akkurat den drifta planet skal hindre.

   Oppgåve 4: feltet er hovudinngangen for fleirtalet (særleg på sok.html,
   der det er sida sitt einaste formål) og skal difor SJÅ ut som ein
   inngang, ikkje som eit skjemafelt blant mange — pilleforma (stor
   border-radius), eigen bakgrunn (--flate, skil seg frå --papir bak) og
   luftigare klikkflate enn nettlesaren sin standard-<input>. Same avrunda
   form på knappen, so feltet og knappen les som ÉIN samanhengande ting. */
.sokefelt { display: flex; gap: var(--luft-2); align-items: center; margin: var(--luft-3) 0 var(--luft-4); flex-wrap: wrap; }
.sokefelt label { font-size: var(--skrift-2); color: var(--blekk-mjuk); }
.sokefelt input[type="search"] {
  flex: 1 1 20rem; padding: var(--luft-2) var(--luft-3); font-size: var(--skrift-3);
  border: 1px solid var(--kant); border-radius: 2rem; background: var(--flate); color: var(--blekk);
}
.sokefelt button {
  padding: var(--luft-2) var(--luft-3); border-radius: 2rem; border: 1px solid var(--kant);
  background: var(--flate); color: var(--blekk); font-weight: 600; cursor: pointer;
}

/* ---------------------------------------------------------------------
   sok.html — resultatlista. Feltet sjølv er .sokefelt over (delt makro).
   Dette er sida ein innbyggjar møter etter lunsjpraten — jobben er å vere
   lesleg under uskikkerheit, difor full blekk (var(--blekk)) på tittel og
   ærleg skilje mellom «treff i tittelen»/«treff i eit framlegg» via same
   dempa sekundærtekst-token som resten av sida.
   --------------------------------------------------------------------- */
.soketreff { list-style: none; padding: 0; }
.sokrad {
  margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--kant-mjuk);
}
.sokrad > a { color: var(--blekk); font-weight: 600; }
.sok-meta { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin: .2rem 0; }
/* .sok-utdrag er ordrett protokolltekst (snippet()) — kursivert som sitat,
   same idé som .protokollsetning, men utan monospace sidan dette ikkje er
   heile råteksten, berre eit utsnitt. */
.sok-traff { font-size: var(--skrift-2); }
.sok-utdrag { font-style: italic; }
/* .sok-traff-saksframlegg seier at ordet står i saksframlegget — eit dokument
   vi IKKJE har teksten til (kontentlaus indeks, migrering 0009). Difor ingen
   .sok-utdrag ved sida av han, og difor same dempa storleik som .sok-traff:
   det er ei opplysning om KVAR ordet stod, ikkje eit sitat. */
.sok-traff-saksframlegg { font-size: var(--skrift-2); }
/* Tomt resultat lese åleine seier «det skjedde ikkje» — difor full vekt og
   full blekk her, ikkje ein dempa gråtone, sjølv om resten av lista elles
   er nøktern. Setninga rett under (.sok-kva-vi-ser-i) står ved sida som den
   ærlege forklaringa på kva søket FAKTISK ser i — protokollteksten og orda i
   dei indekserte saksframlegga. Her stod dekningssetninga før, og ho peika på
   feil årsak: ei sak kan vere lesen heilt og likevel ikkje innehalde ordet. */
.sok-ingen-treff { font-weight: 600; color: var(--blekk); }
.sok-kva-vi-ser-i { color: var(--blekk-mjuk); font-size: var(--skrift-2); }

/* ---------------------------------------------------------------------
   kommuneliste.html — framsida, lista over kommunar. Same listespråk som
   .organliste (kommune.html): ingen punktmarkør, tynn kant-mjuk-strek
   mellom kvar rad i staden for eit hardt bord. */
.kommuneliste { list-style: none; padding: 0; }
.kommuneliste li { padding: var(--luft-2) 0; border-bottom: 1px solid var(--kant-mjuk); }

/* ── Landingssida ──────────────────────────────────────────────────────────
   Sida har MEDVITE ingen eigen aksentfarge. Den einaste kuløren er
   partifargane i røystestolpen, og det er poenget: det er dataen som får
   farge her, ikkje pynten. Ein introdusert aksent ville konkurrert med
   nettopp det elementet sida finst for å vise fram.

   Typografien ber sida i staden. --skrift-5 er alt clamp()-a i tokenane, so
   overskrifta skalerer med skjermen utan eige media-uttrykk. */

.framside { max-width: 46rem; margin: 0 auto; padding-bottom: var(--luft-4); }
.framside section + section { margin-top: calc(var(--luft-4) * 1.6); }

/* Opninga er asymmetrisk med vilje: kammeret til høgre, tesen til venstre.
   Ei sentrert opning ville vore det trygge valet, og det er nettopp difor ho
   ikkje er det — kammeret er det einaste elementet på sida ingen annan
   nettstad kan ha, og det skal stå som eit sidestilt element, ikkje som ein
   illustrasjon under overskrifta. Under 56rem stablar dei seg: teksten
   fyrst, av di ein lesar som ikkje veit kva sida er treng setninga før han
   treng grafikken. */
.opning { padding: var(--luft-4) 0 0; display: grid; gap: var(--luft-4); align-items: center; }
@media (min-width: 56rem) {
  .opning { grid-template-columns: 1.05fr .95fr; gap: calc(var(--luft-4) * 1.6); }
}
.opningskammer .setene { max-width: 26rem; }
.kammertekst {
  font-family: var(--tal); font-size: var(--skrift-1);
  color: var(--blekk-mjuk); margin: var(--luft-2) 0 0;
}
.augebryn {
  font-size: var(--skrift-1); letter-spacing: .09em; text-transform: uppercase;
  color: var(--blekk-mjuk); margin: 0 0 var(--luft-2);
}
/* Utan ei eiga displayskrift (bevisst val: ingen fontfil, ingen lisens å
   halde styr på) må skalakontrasten åleine bere typografien. Difor er h1
   både større og strammare knipt enn typeskalaen sitt øvste steg, og
   `em` innanfor henne dempar andrelinja til ei undertittel i staden for å
   krevje eit eige element. */
.framside h1 {
  font-size: clamp(2.4rem, 9vw, 4rem); line-height: .99; margin: 0;
  letter-spacing: -.035em; font-weight: 640; text-wrap: balance;
}
.framside h1 em { font-style: normal; color: var(--blekk-mjuk); }
.ingress {
  font-size: var(--skrift-4); line-height: 1.55; color: var(--blekk-mjuk);
  margin: var(--luft-3) 0 0; max-width: 34rem;
}

.seksjonstittel {
  font-size: var(--skrift-1); letter-spacing: .09em; text-transform: uppercase;
  color: var(--blekk-mjuk); font-weight: 600;
  margin: 0 0 var(--luft-3); padding-bottom: var(--luft-1);
  border-bottom: 1px solid var(--kant);
}

/* Dømekortet. Flata er lyftet frå grunnen, ikkje ramma inn — same språk som
   resten av sida, der --flate ber innhald og --kant berre skil. */
.doemekort {
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: 6px; padding: var(--luft-3);
}
.doemekjelde {
  font-family: var(--tal); font-size: var(--skrift-1);
  color: var(--blekk-mjuk); margin: 0 0 var(--luft-1);
}
.doemekort h3 { font-size: var(--skrift-4); margin: 0 0 var(--luft-3); line-height: 1.25; }
/* Sakstittelen i dømekortet ber blekkfargen, ikkje lenkjefargen — ei stor
   blå overskrift ville teke merksemda frå røystestolpen rett under, som er
   det kortet finst for å vise. Understrekinga gjer henne likevel tydeleg
   klikkbar, og ho tek lenkjefargen på peikar/fokus. */
.doemekort h3 a { color: inherit; text-decoration-color: var(--blekk-mjuk); }
.doemekort h3 a:hover, .doemekort h3 a:focus-visible { color: var(--lenkje); }
.doemetal {
  font-size: var(--skrift-2); color: var(--blekk-mjuk);
  margin: var(--luft-3) 0 0; max-width: 38rem;
  border-left: 2px solid var(--kant); padding-left: var(--luft-2);
}
.doemesitat {
  margin: var(--luft-3) 0 0; padding-left: var(--luft-2);
  border-left: 2px solid var(--kant);
  font-size: var(--skrift-2); line-height: 1.6; color: var(--blekk-mjuk);
}
.doemelenkje { margin: var(--luft-3) 0 0; font-size: var(--skrift-2); }

.stegliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--luft-3); }
.stegliste li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--luft-2) var(--luft-3);
  align-items: start;
}
.stegtal {
  grid-row: span 2; font-family: var(--tal); font-size: var(--skrift-4);
  color: var(--blekk-mjuk); border: 1px solid var(--kant); border-radius: 50%;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
}
.stegliste h3 { font-size: var(--skrift-3); margin: 0; align-self: center; }
.stegliste p { margin: 0; color: var(--blekk-mjuk); line-height: 1.6; grid-column: 2; }

/* Relaykorta — sjølve inngangen vidare til kommunen. */
.kommunekort {
  display: block; text-decoration: none; color: inherit;
  background: var(--flate); border: 1px solid var(--kant); border-radius: 6px;
  padding: var(--luft-3); margin-bottom: var(--luft-2);
}
.kommunekort:hover, .kommunekort:focus-visible { border-color: var(--blekk-mjuk); }
.kommunenamn { display: block; font-size: var(--skrift-5); line-height: 1.1; }
.kommunetal {
  display: flex; flex-wrap: wrap; gap: var(--luft-1) var(--luft-3);
  margin-top: var(--luft-2); font-size: var(--skrift-2); color: var(--blekk-mjuk);
}
.kommunetal strong { color: var(--blekk); font-family: var(--tal); font-weight: 600; }
.kommuneperiode {
  display: block; margin-top: var(--luft-1);
  font-size: var(--skrift-1); color: var(--blekk-mjuk); font-family: var(--tal);
}
.etterlysing {
  margin: var(--luft-3) 0 0; font-size: var(--skrift-2);
  color: var(--blekk-mjuk); line-height: 1.6;
}

.aerlegrutene { display: grid; gap: var(--luft-3); }
@media (min-width: 34rem) { .aerlegrutene { grid-template-columns: 1fr 1fr; gap: var(--luft-3) var(--luft-4); } }
.aerlegrutene h3 { font-size: var(--skrift-3); margin: 0 0 var(--luft-1); }
.aerlegrutene p { margin: 0; color: var(--blekk-mjuk); line-height: 1.6; font-size: var(--skrift-2); }

/* ── Seteoppgjeret (makroen `seterad`) ─────────────────────────────────────
   Éi rute = éin folkevald. Sjå makrokommentaren for kvifor dette ikkje er
   same sak som .roystestolpe, som lever vidare i den kompakte saklista.

   Rutene er kvadratiske og faste i storleik — dei skal TELJAST, so dei kan
   ikkje skalere med breidda slik ein stolpe gjer. Dei brekk over fleire
   liner på ein telefon, og det er greitt: 21 ruter i tre rader er framleis
   21 ruter, medan ein stolpe som krympar sluttar å vere teljande. */
.seteoppgjer { display: grid; gap: var(--luft-3); margin: var(--luft-3) 0; }
@media (min-width: 40rem) { .seteoppgjer { grid-template-columns: 1fr 1fr; gap: var(--luft-4); } }

.seteside h4 {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 var(--luft-2); font-size: var(--skrift-1);
  letter-spacing: .12em; text-transform: uppercase; color: var(--blekk-mjuk);
  font-weight: 600; border-bottom: 1px solid var(--kant); padding-bottom: var(--luft-1);
}
.seteside h4 b {
  font-family: var(--tal); font-size: var(--skrift-5);
  color: var(--blekk); letter-spacing: -.02em; line-height: 1;
}
/* Taparsida er dempa på TALET og overskrifta, ikkje på rutene — same lærdom
   som fiks-runde 1 av Plan III: opacity på ein forelder komposittar heile
   undertreet og drog kjeldemerket under AA. Partifargane i rutene skal stå
   like sanne på begge sider; kven som tapte les ein av talet. */
.seteside.tapar h4 b { color: var(--blekk-mjuk); }

.setene { display: flex; flex-wrap: wrap; gap: 4px; }
.sete {
  width: 20px; height: 20px; border-radius: 3px; background: var(--blekk-mjuk);
  animation: sete-kjem .45s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--i, 0) * 16ms);
}
/* Ei røyst protokollen ikkje fordelte på parti. Hol, ikkje farga: ho skal
   telje like mykje som dei andre, men ikkje hevde eit parti vi ikkje veit. */
.sete.utan-parti { background: transparent; border: 1px solid var(--kant-hard, var(--kant)); }
/* Dobbeltrøysta. Ramma inn av di ho ikkje er ein folkevald til — det er same
   person som tel to gonger. Ho kjem seinast av alle (sjå --i + 4 i makroen),
   so lesaren ser at ho vart lagd til etter at det stod likt. */
.sete.avgjerande { outline: 2px solid var(--blekk); outline-offset: 2px; }

@keyframes sete-kjem { from { opacity: 0; transform: translateY(5px) scale(.8); } }

/* Rørsla er det einaste ornamentet på sida, og ho fortel noko: kammeret som
   deler seg. Blir ho slått av, skal rutene stå der med ein gong — ikkje
   forsvinne, som `animation: none` på ein `backwards`-fyllt keyframe ville
   gjort om utgangstilstanden var usynleg. */
@media (prefers-reduced-motion: reduce) {
  .sete { animation: none; }
}

/* ── Teiknforklaringa under ei seterad ────────────────────────────────────
   Rutene kan teljast, men ingen SKAL måtte telje dei. Kortkoden og talet
   står difor under kvar rad, og dei er den autoritative kjelda — rutene er
   biletet av det same. Same visuelle språk som .teiknforklaring på
   kommunesida (fargeboks + kode + tal), so dei to les likt. */
.seteforklaring {
  list-style: none; margin: var(--luft-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--luft-1) var(--luft-2);
  font-size: var(--skrift-1); color: var(--blekk-mjuk);
}
.seteforklaring li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.seteforklaring b {
  font-family: var(--tal); color: var(--blekk); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.seteforklaring .fargeboks {
  width: 10px; height: 10px; border-radius: 2px; display: block; flex: none;
}
/* Same to unntaka som rutene har: ei røyst utan parti er hol, og
   dobbeltrøysta er ramma inn. Forklaringa må vise NØYAKTIG same form som
   ruta ho forklarar, elles er ho ei anna påstand enn biletet. */
.seteforklaring .fargeboks.tom { background: transparent; border: 1px solid var(--kant); }
.seteforklaring .fargeboks.ramma { background: transparent; outline: 2px solid var(--blekk); outline-offset: -2px; }

/* Dømemerket. Landingssida viser ekte tal frå ein ekte kommune, men som eit
   DØME på kva lesaren kan vente å finne — ikkje som «kommunestyret». Merket
   er ei fane, ikkje ein parentes, so det ikkje kan lesast som ein bisetning. */
.doemefane {
  display: inline-block; font-size: var(--skrift-1); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: var(--papir); background: var(--blekk-mjuk);
  padding: .1rem .4rem; border-radius: 3px; margin-right: .4rem;
}
.doememerknad { font-size: var(--skrift-2); color: var(--blekk-mjuk); margin: 0 0 var(--luft-3); }

/* Organlinja under kommunenamnet — kven som sit i salen, og kor mange. */
.organlinje {
  margin: calc(var(--luft-2) * -1) 0 var(--luft-3);
  font-size: var(--skrift-2); color: var(--blekk-mjuk);
}

/* ── Kommunesida ──────────────────────────────────────────────────────────
   Mastheaden samlar dei fire blokkene som alle svarar på «kva kommune ser
   du på»: namn, organ, søk og samansetjing. Kammeret står ved sida i staden
   for under, same grep som opninga på landingssida — det er det einaste
   elementet her som ikkje er tekst, og det fortener den plassen. */
.masthead {
  display: grid; gap: var(--luft-3);
  padding-bottom: var(--luft-3); margin-bottom: var(--luft-4);
  border-bottom: 1px solid var(--kant);
}
@media (min-width: 52rem) {
  .masthead { grid-template-columns: 1fr 1fr; gap: var(--luft-4); align-items: end; }
}
.masthead h1 { margin: 0; letter-spacing: -.02em; }
.masthead .organlinje { margin: var(--luft-1) 0 var(--luft-3); }
.masthead .kammer { margin-bottom: 0; }

/* Seksjonshovudet lèt tittelen og vegen vidare stå på same linje. Lenkja
   til heile tabellen låg tidlegare som eit lause avsnitt langt nede, der
   ho las som ein ettertanke i staden for som alternativet til dei fem
   radene rett over. */
.seksjonshovud {
  display: flex; flex-wrap: wrap; gap: var(--luft-2);
  justify-content: space-between; align-items: baseline;
}
.seksjonshovud .seksjonstittel { flex: 1 1 auto; }
.seksjonshovud a { font-size: var(--skrift-2); white-space: nowrap; }

/* Kommunesida arvar seksjonstittelen frå landingssida, so dei to sidene
   markerer eit avsnitt på same måte. `.seksjonstittel` er definert éin
   stad (landingsside-blokka over); her står berre lufta rundt han. */
.mest-omstridde, .organliste { margin-bottom: var(--luft-4); }

.organrutene { display: grid; gap: var(--luft-2); }
@media (min-width: 34rem) { .organrutene { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .organrutene { grid-template-columns: 1fr 1fr 1fr; } }
.organkort {
  display: flex; flex-direction: column; gap: var(--luft-2);
  text-decoration: none; color: inherit;
  background: var(--flate); border: 1px solid var(--kant); border-radius: 6px;
  padding: var(--luft-2) var(--luft-3);
}
.organkort:hover, .organkort:focus-visible { border-color: var(--blekk-mjuk); }
.organkortnamn { font-size: var(--skrift-3); line-height: 1.3; }
/* Tala er det som skil utvala frå kvarandre, so dei ber vekta og
   merkelappen står dempa attmed — ikkje omvendt, som i den gamle lista der
   heile linja stod i småskrift og ingenting kunne samanliknast på tvers. */
.organkorttal {
  display: flex; flex-wrap: wrap; gap: var(--luft-1) var(--luft-3);
  font-size: var(--skrift-1); color: var(--blekk-mjuk); margin-top: auto;
}
.organkorttal b {
  font-family: var(--tal); font-size: var(--skrift-3); color: var(--blekk);
  font-weight: 600; margin-right: .2rem;
}

/* Sidefoten samlar det som fortel om SIDA i staden for om sakene: kva som er
   utelate, og kor langt uttrekket er kome. Dei to stod tidlegare som lause
   blokker rett under saklista, der dei las som endå ein seksjon på lik linje
   med innhaldet. */
.sidefot {
  margin-top: var(--luft-4); padding-top: var(--luft-3);
  border-top: 1px solid var(--kant);
}
.sidefot .dekning { margin-top: var(--luft-2); }

/* Organsida har ikkje noko kammer å stille ved sida av namnet, so
   mastheaden hennar er éinspalta — men beheld linja under og lufta, so dei
   to sidene kjennest som same produkt. */
.masthead.einspalta { grid-template-columns: 1fr; }
/* `.attende` stod her til 2026-08-09 og stila dei tre ad hoc-tilbakelenkjene
   i organ.html, api.html og saker.html. Alle tre er erstatta av den eine
   stien i base.html (.brodsmuler nedst i dette arket), so regelen er
   FJERNA og ikkje berre lét stå — ein CSS-regel utan element er ei felle for
   neste lesar som trur han stiler noko. Same grunngjeving som .kammerstripe. */
.masthead .organ-samandrag { margin: var(--luft-1) 0 var(--luft-3); color: var(--blekk-mjuk); }

/* ── Kammeret på kommunesida ──────────────────────────────────────────────
   Same seteruter som landingssida. Den proporsjonale stripa som stod her sa
   kor STOR ei partigruppe er i høve til dei andre; rutene seier kor mange
   folk ho består av — og det er talet ein lesar faktisk kan bruke.

   Partigruppene har større mellomrom seg imellom (10px) enn rutene inni dei
   (4px), so ein ser kvar éi gruppe sluttar utan å telje. Forklaringa under
   er den autoritative kjelda; rutene er biletet av det same. */
.kammersete { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.partigruppe { display: flex; flex-wrap: wrap; gap: 4px; border-radius: 4px; }
.kammersete .sete { animation-delay: calc(var(--i, 0) * 12ms); }

/* Filtermarkeringa sit på GRUPPA og på posten i forklaringa, aldri på kvar
   einskild rute: ein ring rundt 41 småruter ville vore støy, og ein opacity
   på gruppa ville komposittert partifargen ned under kontrastkravet — same
   lærdom som .sakrad.samde og .roystestolpe .tapar. */
.kammersete .parti-knapp.vald { outline: 2px solid var(--blekk); outline-offset: 3px; }

/* ── API-dokumentasjonen ──────────────────────────────────────────────────
   Ei tettare side enn resten: lesaren skannar etter eit endepunkt eller eit
   døme, han les ikkje frå topp til botn. */
.apibolk { margin-bottom: var(--luft-4); }
.apivarsel {
  background: var(--varsel-flate); border: 1px solid var(--varsel-kant);
  color: var(--varsel-blekk); border-radius: 6px;
  padding: var(--luft-2) var(--luft-3); margin: 0 0 var(--luft-3);
}
.apimerknad { color: var(--blekk-mjuk); font-size: var(--skrift-2); margin: var(--luft-2) 0 0; }

.endepunkt { margin: 0; }
.endepunkt dt {
  margin-top: var(--luft-3); font-weight: 600;
  border-top: 1px solid var(--kant-mjuk); padding-top: var(--luft-2);
}
.endepunkt dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.endepunkt dd { margin: var(--luft-1) 0 0; color: var(--blekk-mjuk); }
.endepunkt code, .apibolk td code, .apimerknad code {
  font-family: var(--tal); font-size: .92em;
  background: var(--flate); border: 1px solid var(--kant);
  border-radius: 3px; padding: .05em .3em;
}
.parameterliste { margin: var(--luft-2) 0 0; padding-left: var(--luft-3); }
.parameterliste li { margin-bottom: var(--luft-1); }

/* Kvart døme er eit spørsmål ein lesar faktisk har, ikkje eit endepunkt. Det
   er skiljet mellom dokumentasjon som blir lesen og dokumentasjon som blir
   skumma forbi. */
.scenario {
  border-left: 2px solid var(--kant-hard, var(--kant)); padding-left: var(--luft-3);
  margin-bottom: var(--luft-4);
}
.scenario h3 { font-size: var(--skrift-3); margin: 0 0 var(--luft-2); }
.scenario pre {
  background: var(--flate); border: 1px solid var(--kant); border-radius: 6px;
  padding: var(--luft-2); font-size: var(--skrift-1); line-height: 1.55;
  margin: 0;
}

/* ── Brødsmulene ──────────────────────────────────────────────────────────
   Heile stien ned til sida, øvst på kvar underside (base.html). Erstattar
   opp-lenkja (`.opp`/`.opplenkje`), som berre gjekk eitt steg og difor
   sluste ein lesar frå ei sakside til utvalet i staden for til kommunen han
   kom frå. Reglane under er arva derfrå, ikkje funne opp på nytt.

   MOBIL FYRST. Fire ledd blir fort breiare enn ein telefon, og då skal dei
   bryte til ei ny linje INNE i sin eigen boks — sjølve sida skal aldri rulle
   sidelengs (jf. .scroll-x, den einaste staden i arket som har lov til å
   rulle). `flex-wrap: wrap` gjer bryting mellom ledda; `overflow-wrap:
   anywhere` på sjølve smula gjer at eit einskilt langt organnamn («Utval for
   levekår og folkehelse») heller ikkje kan skuve sidebreidda ut.

   Trykkflata er poenget, og ho er viktigare no enn før: det er fire mål å
   bomme på i staden for eitt. Sida blir lesen på telefon, og ei lenkje på éi
   linje med --skrift-2 er om lag 22 px høg — under halvparten av det ein
   tommel treng. `inline-flex` er det som gjer at både høgda og lufta i det
   heile verkar (ein rein inline-<a> tek verken min-height eller loddrett
   padding i flyten), og 2.75rem = 44 px er den minste flata som er trygg å
   treffe. Same idé som .sokefelt sine kontrollar, som får høgda si frå
   luft-token-padding: klikkflata er sett med vilje, ikkje arva frå teksten.

   Ingen `opacity` nokon stad her. Lenkjesmulene arvar sida sin --lenkje; den
   siste smula (sida ein står på) og skiljeteikna er dempa med ein FLAT
   tokenbyte til var(--blekk-mjuk), som måler 5.19:1 (mørkt) / 6.02:1 (lyst)
   mot --papir og difor står trygt over WCAG AA sitt 4.5:1 uansett kor mange
   foreldre elementet har. Ein gjennomsikt ville komposittert HEILE
   undertreet — same felle som .sakrad.samde, .kammersete .parti-knapp og
   .roystestolpe .tapar er dokumenterte for, og som ein gong drog eit merke
   frå 5.19:1 til 2.88:1 utan at nokon regel for det merket var endra. */
.brodsmuler { margin: 0 0 var(--luft-1); }
.brodsmuler ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
}
.brodsmuler li { display: flex; align-items: center; min-width: 0; }
.brodsmule {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-right: var(--luft-1);
  font-size: var(--skrift-2); overflow-wrap: anywhere;
}
/* Skiljeteiknet ber ingen informasjon (det er aria-hidden i markupen), so det
   skal heller ikkje trekkje blikket: same dempingstoken som den gjeldande
   smula, og lufta ligg symmetrisk rundt det. */
.brodsmuler .skiljeteikn { color: var(--blekk-mjuk); padding-right: var(--luft-1); }
/* Sida du står på. Ho er ikkje ei lenkje, og skal ikkje sjå ut som ei —
   dempinga er skiljet mellom «hit kan du gå» og «her er du». */
.brodsmule.gjeldande { color: var(--blekk-mjuk); }