/* Stílblað VAR-herbergisins - sameiginlegt öllum síðum miðilsins.

   Litapallettan er "Flóðljósin" (tillaga 2, Task 13): ljós grunnur,
   skærgrænn haus (#076e45), rafgult (#ffd60a) á hnöppum/áherslum og
   kóral-appelsínugult (#f2620f) á sætistölum og áherslutölum í stað
   gamla gullsins (#a5821f). Bricolage Grotesque ber fyrirsagnir, Source
   Serif 4 ber lesmál - sama leturparið og áður, sótt á Google Fonts í
   `snid.py`.

   Viðbætur við grunninn úr draftannálnum, fyrir margar síður í stað einnar:
   - `.haus-nav`   valmyndarlínan í haus (Forsíða, Viðskipti, Verðlaun,
                   Draftannáll).
   - `.grein-listi` greinalisti forsíðunnar.
   - `.lidsnafn`   `overflow-wrap: anywhere` á hvern reit sem ber liðsheiti -
                   sjá CLAUDE.md um myndprófun: eitt langt liðsheiti í
                   flex-dálki þenur hann annars út fyrir skjáinn, því
                   `break-word` telur brotpunktana ekki með í lágmarksbreidd.
   - `.kr-plus`/`.kr-minus` litun upphæðareita eftir formerki (Task 13,
                   sjá `_kr_flokkur` í `midill/tolusidur.py`).

   Ljóst þema, af ásettu ráði og eingöngu (Task 18): notandinn skoðaði
   birtu síðuna í dökku kerfisþema og valdi ljósu pallettuna sem eina
   útlit miðilsins, óháð kerfisstillingu vafrans. Miðla-fyrirspurnin sem
   áður las dökka kerfisstillingu vafrans, og eiginleikamiðaða valkvæða
   þemablokkin sem hún deildi litagildum með, eru báðar fjarlægðar með
   öllu - ekki bara óvirkjaðar - svo tókarnir hér að neðan á berum `:root`
   eru EINA pallettan sem er til í skjalinu. `body` málar bakgrunn og
   letur beint úr þeim (`background: var(--grunnur)`, `color: var(--blek)`),
   og ekkert annað í skjalinu vísar í tóka sem tilheyrðu þeirri fjarlægðu
   blokk, svo síðan verður aldrei dökk, sama hvað stýrikerfi eða vafri
   lesandans segir.
*/

:root {
  --grunnur: #f7fdf9;
  --flotur: #ffffff;
  --blek: #12291c;
  --daemt: #4d6a59;
  /* BRAND-TOKAR - sjalfvirkt skrifad ur deild.yaml, sjá scripts/skrifa_brand.py */
  --gras: #1d3557;
  --gras-blek: #ffffff;
  --gull: #457b9d;
  --gull-texti: #2b4c66;
  --rafgult: #e63946;
  --haus-grunnur: #1d3557;
  /* /BRAND-TOKAR */
  --lina: #d5e5da;
  --randi: #e9f9ef;
  --jakvaett: #0b7a47;
  --neikvaett: #c53030;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grunnur);
  color: var(--blek);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

/* --- Haus og valmynd --------------------------------------------------- */

.haus {
  background: var(--haus-grunnur);
  color: var(--gras-blek);
  padding: 1.4rem 1.25rem;
}

.haus-inn {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.heiti-tengill {
  color: inherit;
  text-decoration: none;
}

.heiti {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--rafgult);
}

.haus-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.haus-nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.haus-nav a:hover,
.haus-nav a:focus-visible {
  opacity: 1;
  border-bottom-color: currentColor;
}

.yfirskrift {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 0.75rem;
}

h1 {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
  /* Rytminn: h1 fær almennilegt loft undir sig áður en efnið tekur við -
     notandinn bað sérstaklega um bil á eftir aðalfyrirsögninni. */
  margin: 0 0 2.25rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h2 {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
}

h3 {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 1rem;
}

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.adferd {
  border-left: 3px solid var(--gull);
  padding: 0.25rem 0 0.25rem 1.1rem;
  color: var(--daemt);
  font-size: 0.95rem;
  margin: 0 0 2.5rem;
}

/* --- Greinar ------------------------------------------------------------ */

article {
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: 6px;
  padding: 1.6rem 1.5rem 1.4rem;
  margin: 0 0 1.5rem;
}

.saeti-lina {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.saeti {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gull);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

.uppnefni {
  font-style: italic;
  color: var(--daemt);
  margin: 0.35rem 0 0;
  font-size: 1rem;
}

.tolur {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--daemt);
  border-top: 1px solid var(--lina);
  border-bottom: 1px solid var(--lina);
  padding: 0.55rem 0;
  margin: 1.1rem 0;
  font-variant-numeric: tabular-nums;
}

.tolur strong { color: var(--blek); font-weight: 700; }

article p { margin: 0 0 0.9rem; }
article p:last-child { margin-bottom: 0; }

.ros-thyrnir { margin-top: 1.1rem; display: grid; gap: 0.45rem; font-size: 0.98rem; }

.ros-thyrnir b {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.ros b { color: var(--gras); }
.thyrnir b { color: var(--gull-texti); }

/* --- Hausmynd greina (Task 18b) ------------------------------------------

   Sjálfhýst, textalaus SVG-borði fyrir ofan `.grein-haus` í hverri grein
   (`midill/myndir/spa.svg`, `uppgjor.svg`, `annall.svg`) - flatir,
   rúmfræðilegir mótívar úr ljósu litapallettu síðunnar sjálfrar, engin
   ytri mynd sótt. `width: 100%` og engin fjarlægð `height` lætur
   `viewBox`-hlutfall SVG-skrárinnar sjálfrar ráða hæðinni, svo borðinn
   heldur lögun sinni á hvaða skjábreidd sem er. */
.grein-mynd {
  display: block;
  width: 100%;
  border-radius: 10px;
  margin: 0 0 1.5rem;
}

/* --- Grein-haus (draftannáll o.fl.) --------------------------------------

   Grænt kynningarkort ofan við meginmál greinar - sama sjónræna hugmynd og
   jaðar-í-jaðar borðinn í upprunalega (kyrrstæða) draftannáls-skjalinu, en
   sem kort INNAN `main` frekar en jaðar-í-jaðar borði fyrir ofan hann, því
   `sida()` límir `meginmal` inn í `<main>` sem þegar ber breiddartakmörkun
   og spássíu. `.haus` sjálft er þegar tekið af sídunavvalmyndinni í
   `snid._haus()`, þess vegna `.grein-`-forskeytið hér. */

.grein-haus {
  background: var(--haus-grunnur);
  color: var(--gras-blek);
  padding: 2.75rem 1.5rem 2.5rem;
  border-radius: 6px;
  margin: 0 0 2.5rem;
}

.grein-haus h1 { margin: 0 0 1rem; }

.grein-haus p {
  max-width: 36rem;
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.94;
}

/* Leikjabil í spá/uppgjörsgreinum (Task 16) - notandinn benti á að ekkert
   pláss væri fyrir framan fyrirsögnina milli leikja. Orsökin: `h2 { margin:
   0; }` hér að ofan gildir líka innan `.grein section`, svo hvert
   `<section>`-blokk (einn leikur) þarf sitt eigið `margin-top` til að
   mynda bilið - annars situr næsta fyrirsögn í kant við lokaorð leiksins á
   undan. `:not(.pallur)` heldur samantektarreitnum í lok greinar
   (`.pallur`, t.d. "Dýrasti bekkur umferðarinnar") í sinni eigin, stærri
   spássíu (`.pallur { margin-top: 3rem; }` að neðan) frekar en að
   endurskrifa hana. `.uppnefni` fær enga nýja spássíu - hennar núverandi
   `margin-top: 0.35rem` fellur saman við `h2`-spássíuna hér (mörk
   granna blokkelementa falla saman í venjulegu flæði), svo línan er þétt
   undir fyrirsögninni án frekari stillingar. */
.grein > section:not(.pallur) {
  margin: 3.25rem 0;
}

.grein > section:not(.pallur) h2 {
  margin: 0 0 0.35rem;
}

/* Greinar sem enda á eigin lokaorðum (t.d. fyrirvara um að staðan geti
   breyst) - létt á litinn, ekki jafn áberandi og `.adferd`-innskotið efst. */
.grein-fotur {
  color: var(--daemt);
  font-size: 0.9rem;
  margin-top: 2.5rem;
}

/* --- Greinalisti forsíðunnar --------------------------------------------- */

/* Loft milli megin-`<section>`-blokka hvaða síðu sem er (Task 18, útvíkkað
   í Task 18b á verðlauna-, viðskipta- og reglusíðuna): hver blokk með
   sína h2/h3-fyrirsögn fær rúman aðskilnað frá því sem er fyrir ofan -
   fyrst forsíðan ein ("Nýjustu greinar" og "Staðan", sjá `forsida()` í
   `midill/tolusidur.py`), nú sama flokkur á öllum kaflaskiptum síðum
   (`verdlaun_sida`, `vidskipti_sida`, `reglusida`) svo takturinn sé
   samræmdur, ekki bara á forsíðunni. `.sidu-hluti` er sett beint á
   `<section>`-stakið sjálft (því t.d. `.grein-listi` er `<ul>`-taflan
   INNAN blokkarinnar, ekki blokkin sjálf), óháð því hvort `.pallur`-
   flokkurinn er líka á staknum. */
.sidu-hluti {
  margin-top: 3rem;
}

.grein-listi {
  list-style: none;
  /* Bilið frá fyrirsögninni niður að fyrsta spjaldi er sama og bilið
     milli spjaldanna sjálfra (gap) - jafn taktur allan listann. */
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

/* Spjaldútlit (Task 16, tillaga 2 "Flóðljósin"): sami `--randi`-grunnur og
   sebrarendur taflnanna, rafgul vinstri rönd - sama pör og `.holl-spjald--
   igangi` notar nú þegar annars staðar í skjalinu, svo litaparið er þegar
   sannreynt. Flex-röð (Task 18b) svo smámyndin (þegar hún er til, sjá
   `.grein-smamynd`) og textadálkurinn standi hlið við hlið - `align-items:
   flex-start` heldur myndinni efst þótt lýsingartextinn undir titlinum
   lengi kortið. */
.grein-listi li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--randi);
  border-left: 4px solid var(--rafgult);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

/* `min-width: 0` er nauðsynlegt svo flex-liðurinn megi skreppa saman undir
   sína eigin efnisbreidd - annars neitar hann að minnka og ýtir smámyndinni
   út fyrir kortið þegar liðsheiti eða titill er langt (sama gildra og
   `.lidsnafn`/`overflow-wrap: anywhere` leysir í töflureitum). */
.grein-texti {
  flex: 1 1 auto;
  min-width: 0;
}

/* Smámynd hverrar greinartegundar (Task 18b) - sama SVG og hausmynd
   greinarinnar sjálfrar, en lítil og ferningslaga hér, `object-fit:
   contain` svo víðmynd borðans skerðist ekki heldur passi innan
   ferningsins með rúmu lofti. `flex: none` heldur stærðinni fastri óháð
   textalengdinni við hliðina. */
.grein-smamynd {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  background: var(--flotur);
  border-radius: 6px;
  padding: 0.3rem;
}

.grein-listi a {
  color: inherit;
  text-decoration: none;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.grein-listi a:hover { color: var(--gras); }

.grein-dags {
  display: block;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--daemt);
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.grein-lysing {
  margin: 0.4rem 0 0;
  color: var(--daemt);
  font-size: 0.95rem;
}

/* --- Hetja forsíðunnar (Task 25; endurhönnuð í Task 28) -------------------

   Nýjasta greinin fær hetjumeðferð efst á forsíðunni, fyrir OFAN "Nýjustu
   greinar" (sjá `tolusidur._greinahetja`/`forsida`): full breidd `<main>`
   (sama breidd og `.grein-mynd` í grein sjálfri, EKKI jaðar-í-jaðar eins
   og `.auglysing-bordi` hér að neðan). Borðamyndin birtist ÖLL og óhulin -
   ekkert stak ofan á henni - í sínu náttúrulega 1200x360-hlutfalli, og
   dökkgræna röndin (dagsetning, titill, lýsing) situr BEINT FYRIR NEÐAN
   hana í venjulegu skjalaflæði. Myndin ber ávöl EFRI horn, röndin ávöl
   NEÐRI horn - tvö stök sem staflast beint saman án bils á milli mynda því
   eitt samfellt spjald. Heilt spjaldið er einn tengill.

   Task 25 setti röndina OFAN Á neðri hluta myndarinnar (`position:
   absolute; bottom: 0`) svo aðeins sylla myndarinnar sæist fyrir ofan
   röndina - notandinn benti á að þetta huldi mest alla listamyndina. Sú
   útgáfa þurfti líka `min-height`-gólf á `.hetja-ramm` til að röndin
   skæri ekki dagsetningu/titil af sér á mjóum skjá með löngum titli.
   Hvort tveggja - yfirlagnin og gólfið - er fjarlægt hér: röndin er ekki
   lengur staðsett ofan á neinu, svo ekkert grípur til að skera hana af,
   og myndin þarf ekkert lágmarksgólf því hún ræður sinni eigin hæð sjálf
   (`aspect-ratio`) óháð lengd titilsins fyrir neðan.

   Birtuskilaandstæða `--gras-blek` (hvítt) á `--haus-grunnur` mælist
   ~6,3:1 - langt yfir 4,5:1 lágmarkinu fyrir venjulegt letur, svo engin
   gagnsæi er sett á textann (sjá athugasemdina í `_greinahetja`). */

.hetja-tengill {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hetja-ramm {
  display: block;
  background: var(--randi);
  border-radius: 10px;
}

.hetja-mynd {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 360;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.hetja-band {
  background: var(--haus-grunnur);
  color: var(--gras-blek);
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 0 0 10px 10px;
}

/* Grein án þekktrar myndar (óþekkt slóðarforskeyti, sjá `_grein_mynd`) á
   enga `.hetja-mynd` - röndin verður þá EINA stakið í `.hetja-ramm` og á
   að fá öll fjögur hornin ávöl, ekki bara neðri tvö, svo spjaldið haldi
   lögun sinni líka án myndar. */
.hetja-band:first-child {
  border-radius: 10px;
}

/* Task 29 ("Íþróttadeskið"): dagsetningarrönd hetjunnar (`.hetja-dags`)
   víkur fyrir flokkmerkinu hér að neðan - mockið sem notandinn valdi ber
   enga dagsetningu á hetjuspjaldinu sjálfu, aðeins flokk, titil og lýsingu.
   Dagsetningin lifir áfram á hverju spjaldi í þétta listanum fyrir neðan
   (`.grein-thett-undir`, "dags · flokkur"). */
.hetja-flokkur {
  display: block;
  color: var(--rafgult);
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hetja-titill {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hetja-lysing {
  margin: 0;
  font-size: 1rem;
  max-width: 36rem;
  overflow-wrap: anywhere;
}

/* --- Forsíðan ("Íþróttadeskið", Task 29) ---------------------------------

   Forsíðan ein af öllum síðum miðilsins fær breiðari `<main>`
   (`.main-breid`, sjá `breidd`-breytuna í `snid.sida`) og eigin þétt-
   pökkuðu grind - allar hinar síðurnar halda 42rem lestrardálknum
   óbreyttum (`main` sjálft, án flokks, að ofan).

   Litur: tillagan sem notandinn valdi kallaði dökka tóninn `--dokk`
   (#0d3f26) og aðgreindi hann frá ljósari `--gras` (#076e45) ofan á
   fréttaborðanum. `--dokk` er EKKI endurvakinn hér - #0d3f26 var
   nákvæmlega liturinn sem "skuggahlutfoll"-lagfæringin á `--haus-grunnur`
   fjarlægði úr skjalinu (sjá eldri git-sögu), af því hvítur texti ofan á
   honum féll undir 4,5:1 kröfuna. Fréttaborðinn hér að neðan notar því
   `--gras` (sama gildi og `--haus-grunnur` sem `.haus` og hetjan bera nú
   þegar) - hausinn og borðinn renna saman í eitt samfellt dökkgrænt
   blokk fremur en tvítóna eins og upprunalega tillagan sýndi, en halda
   sömu, þegar sannreyndu birtuskilaandstæðunni. */

.main-breid {
  max-width: 78rem;
}

/* Fréttaborðinn - beint undir haus, FYRIR UTAN `<main>` (sjá `snid.sida`,
   breytan `frettabordi`). Láréttur skruni á mjóum skjá (`overflow-x:
   auto` + `white-space: nowrap`) - ALDREI sjálfvirk hringekjuhreyfing
   (marquee), sjá brief-ið. */
.frettabordi {
  background: var(--gras);
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.6rem 1.25rem;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gras-blek);
}

.frettabordi span { margin-right: 2.4rem; }
.frettabordi span:last-child { margin-right: 0; }
.frettabordi b { color: var(--rafgult); margin-right: 0.4em; }

/* Aðalgrindin: hetja + þéttur listi vinstra megin, hliðardálkur hægra
   megin - hrynur í einn dálk undir ~52rem (grindin sjálf, ekki
   `<main>`, sem er þegar breiðari en það á öllum skjástærðum). */
.forsida-grind {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 1.6rem;
}

@media (max-width: 52rem) {
  .forsida-grind { grid-template-columns: 1fr; }
}

/* Þéttur tveggja-dálka listi greina undir hetjunni (Task 29) - kemur í
   STAÐ `.grein-listi`/`_greinalisti` á forsíðunni eina, sem er þó ekki
   fjarlægð úr skjalinu (getur nýst annars staðar, sjá CLAUDE.md).
   Auglýsingaspjaldið (`auglysingar.spjald_li_html`, `li.grein-listi-
   auglysing`) er ÞEGAR sjálfstætt sértækt (`display: block; padding: 0`)
   og passar því óbreytt inn í þennan lista líka - sama HTML-búnt, tveir
   listar. */
.grein-thett-listi {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 34rem) {
  .grein-thett-listi { grid-template-columns: 1fr; }
}

.grein-thett a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: 8px;
  padding: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.grein-thett a:hover { border-color: var(--gras); }

.grein-thett-mynd {
  flex: none;
  width: 4.4rem;
  height: 3.2rem;
  object-fit: contain;
  background: var(--randi);
  border-radius: 6px;
  padding: 0.3rem;
}

/* `min-width: 0` - sama gildra og `.grein-texti` leysir: án hennar neitar
   flex-liðurinn að skreppa saman undir eigin efnisbreidd og ýtir
   smámyndinni út fyrir kortið þegar titillinn er langur. */
.grein-thett-texti { min-width: 0; }

.grein-thett-titill {
  display: block;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.grein-thett-undir {
  display: block;
  color: var(--daemt);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* Hliðardálkur forsíðunnar: þrjú spjöld - Staðan, Peningarnir og
   auglýsingaplássið "hlið" (Task 29 víkkar `auglysingar.hlid_html` út í
   þetta pláss líka, sjá `data/auglysingar/README.md`). */
.forsida-hlid {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.spjald {
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: 10px;
  overflow: hidden;
}

.spjald-haus {
  margin: 0;
  padding: 0.6rem 1rem;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gras);
  color: var(--gras);
}

/* Töflur ERFÐAR óbreyttar úr `_stodutafla` (sama fall og aðrar síður
   nota) - `.tafla-umbud` ber sinn eigin kant/radíus annars staðar í
   skjalinu, sem verður tvöfaldur ramma hér inni í `.spjald`. Fjarlægður
   hér, þrengt í staðinn, EINGÖNGU innan hliðardálksins. */
.forsida-hlid .spjald .tafla-umbud {
  border: none;
  border-radius: 0;
}

.forsida-hlid .spjald table { font-size: 0.85rem; }
.forsida-hlid .spjald td,
.forsida-hlid .spjald th { padding: 0.45rem 1rem; }

/* Liðalisti óhafins tímabils (`_stodutafla_ohafid`) er EIN `<td>` á röð -
   `td:first-child` reglan annars staðar í skjalinu (feitletrun/há-stafir/
   `--gull`) er ætluð sætistölum, ekki liðsheitum, og er hlutlaus gerð hér. */
.tafla-ohafid td:first-child {
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.peningur-lina {
  margin: 0;
  padding: 0.8rem 1rem;
}

.peningur-lina + .peningur-lina { padding-top: 0; }
.peningur-lina:last-child { padding-bottom: 0.9rem; }

/* Auglýsingaspjaldið (plássið "hlið") endurnýtir `auglysingar.hlid_html`
   óbreytt (`<aside class="auglysing-hlid">`, sjá Auglýsingar-kaflann hér
   að neðan) - `.spjald-augl` gefur því einfaldlega innri spássíu svo það
   sitji jafn þétt og hinar tvær spjöldin. */
.spjald-augl { padding: 0.9rem; }

/* "Liðin tólf" - kortanetið (`.lida-net`) er ALLTAF birt undir grindinni
   núna (Task 29), ekki bara meðan tímabilið er óhafið eins og áður -
   almenn liðaskrá, ekki árangursröðuð. "Deildarstíllinn" er þykk
   toppröndin + hástafafyrirsögnin, sótt úr tillögu A í forsíðumockinu. */
.deildarhaus {
  border-top: 3px solid var(--blek);
  padding-top: 0.6rem;
}

.deildarhaus h2 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Falið sjónrænt en til staðar fyrir skjálesara - forsíðan ber enga
   sýnilega "VAR-herbergið"-fyrirsögn lengur (`.haus` segir nafnið nú
   þegar), en síðan á samt að bera nákvæmlega eitt `<h1>`. */
.skjalesari-eingongu {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Auglýsingar (Task 25) --------------------------------------------

   Fjögur pláss, sjá `fantraxagent.midill.auglysingar` fyrir gagnahliðina
   og `data/auglysingar/README.md` fyrir sniðið sem notandinn fyllir út.
   Hvert pláss er einfaldlega FJARVERANDI (ekkert `<div>`, ekkert autt
   pláss) þegar engin virk auglýsing er til - birtingarföllin í
   `auglysingar.py` skila tómum streng þá, og engin regla hér að neðan á
   við neitt sem er ekki til í merkjamálinu. */

/* (a) Borði - jaðar-í-jaðar undir haus, á ÖLLUM byggðum síðum (ekki
   kyrrstæðum greinum, sjá `snid.sida`). Sama form og `.haus`/`.haus-inn`:
   full-breiður grunnur, innihaldið sjálft haldið í 42rem. */
.auglysing-bordi {
  background: var(--randi);
  border-bottom: 1px solid var(--lina);
}

.auglysing-bordi-inn {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
}

.auglysing-bordi-inn a { display: block; }

.auglysing-bordi img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Sameiginlegt merki fyrir öll fjögur plássin - lítill hástafapillur,
   sama sjónræna hugmynd og `.flagg` annars staðar í skjalinu. Sama
   litapar og `.hetja-band` (`--haus-grunnur`/`--gras-blek`, ~6,3:1) -
   ekki `--gull`, sem er of ljóst fyrir hvítan texta ofan á (þess vegna á
   `--gull-texti` yfirhöfuð til, sjá `.thyrnir b` annars staðar). */
.auglysing-tag {
  display: inline-block;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--haus-grunnur);
  color: var(--gras-blek);
}

/* (b) Spjald - kort inni í `.grein-listi`, sama `<li>`-lögun og
   greinaspjöldin (`.grein-listi li` að ofan sér um bakgrunn/rönd/radíus),
   en innihaldið er lóðrétt: merki, svo full-breið mynd. Sértækni
   `.grein-listi li.grein-listi-auglysing` (tveir flokkar + staka)
   VERÐUR að slá út `.grein-listi li` (flokkur + staka) hér að ofan -
   annars vinnur röð/flex-eiginleikar grunnreglunnar, óháð skráarröð. */
.grein-listi li.grein-listi-auglysing {
  display: block;
  padding: 0;
  overflow: hidden;
}

.grein-listi-auglysing a {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
}

.auglysing-mynd {
  display: block;
  width: 100%;
  border-radius: 6px;
}

/* (c) Hlið - dálkur við hlið greinarefnis, aðeins á breiðum skjá (>=
   75rem). Höfundur greinar (`docs/vaktir/*.md`) vefur eigið `meginmal`
   inn í `.grein-med-hlid`/`.grein-megin` áður en `snid.sida()` er kölluð
   - sjá `fantraxagent.midill.auglysingar.hlid_html`. Undir 75rem stendur
   dálkurinn einfaldlega fyrir neðan greinarefnið í venjulegu flæði -
   aldrei falinn, bara ekki hlið við hlið. */
.grein-med-hlid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.grein-megin { min-width: 0; }

.auglysing-hlid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-self: flex-start;
}

.auglysing-hlid img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

@media (min-width: 75rem) {
  .grein-med-hlid { flex-direction: row; align-items: flex-start; }
  .grein-megin { flex: 1 1 auto; }
  .auglysing-hlid { flex: none; width: 14rem; position: sticky; top: 1.5rem; }
}

/* (d) Greinabotn - milli greinarloka og fótar. Höfundur greinar bætir
   þessu aftast við eigið `meginmal` - sjá
   `fantraxagent.midill.auglysingar.greinabotn_html`. */
.auglysing-greinabotn {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 2.5rem;
}

.auglysing-greinabotn img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

/* --- Töflur -------------------------------------------------------------- */

.pallur { margin-top: 3rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

td, th { padding: 0.6rem 0.75rem; vertical-align: top; text-align: left; }

/* Töfluhaus og randir (Task 16, tillaga 2 "Flóðljósin"): allir `th` fá
   kant-lit og 2px undirstrik í grasgrænu - `td:first-child, th:first-child`
   hér fyrir neðan bætir feitletruninni/há-stöfunum ofan á, ekki í staðinn
   fyrir. Randirnar (sebrarönd) miðast við `tbody`, ekki `table`, því
   `thead` er sér-foreldri - annars myndi fyrsta gagnalínan (barn #1 í
   `tbody`) teljast "slétt" og fá ekki sömu tölu og hausinn gerði í mock-
   inu. */
th {
  color: var(--gras);
  border-bottom: 2px solid var(--gras);
}

tbody tr:nth-child(even) td { background: var(--randi); }

td:first-child,
th:first-child {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gras);
}

/* Reitir sem bera liðsheiti: liðaheiti í deildinni koma frá stjórunum
   sjálfum og geta verið hvað sem er, löng orð meðtalin (sjá dæmi:
   "HorniCek: Saka DeezNuts?"). `anywhere` brýtur ef þarf, ólíkt
   `break-word` sem lætur reitinn þenjast út fyrir skjáinn í staðinn. */
.lidsnafn { overflow-wrap: anywhere; }

/* Upphæðareitir litaðir eftir formerki (Task 13) - `_kr_flokkur` í
   tolusidur.py velur flokkinn: `kr-plus` fyrir jákvæðar nettóstöður og
   verðlaunaupphæðir, `kr-minus` fyrir neikvæðar nettóstöður og sektir. */
.kr-plus,
.kr-minus {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kr-plus { color: var(--jakvaett); }
.kr-minus { color: var(--neikvaett); }

/* Sama formerkjalitun og `.kr-plus`/`.kr-minus`, sömu tveir tókar, en fyrir
   tölur sem eru ekki krónur (Task 22, tölfræðisíðan: heppnistuðull, styrkur
   andstæðinga) - eigið nafn svo "kr" standi ekki framan við H2H-stig. */
.tala-plus,
.tala-minus {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tala-plus { color: var(--jakvaett); }
.tala-minus { color: var(--neikvaett); }

/* Form-bönd (S/J/T, Task 21) - liðasíðan sjálf ("Staðan núna") og "Form
   andstæðings" í "Næstu 5 umferðir"-töflunni. Sömu þrjú litapör og
   `.kr-plus`/`.kr-minus` nota fyrir jákvæð/neikvæð gildi, auk `--daemt`
   fyrir jafntefli - engir nýir tókar. */
.form-s, .form-j, .form-t {
  display: inline-block;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  width: 1.35em;
  text-align: center;
}

.form-s { color: var(--jakvaett); }
.form-j { color: var(--daemt); }
.form-t { color: var(--neikvaett); }

.form-lina { color: var(--daemt); font-size: 0.95rem; }

/* --- Liðamerki (Task 21, verkþáttur A; kortanetið er Task 23) -------------

   Sjálfhýst lógó liðanna, sótt og geymd af `midill/lidamerki.py` - sjá
   `scripts/midill_byggja.py`. Lið án eigin lógós hjá Fantrax (Task 23) fá
   sjálfgefið SVG-merki úr sömu einingu - sama `<img>`-tag, kallandinn
   greinir aldrei mun á alvöru mynd og sjálfgefinni. Þrjú stærðarsvið,
   hvert á sínum stað: liðasíðuhausinn sjálfur (~4rem), liðakortin
   (`.lida-merki`, ~5rem - sjá kaflann hér fyrir neðan) og lítil táknmynd
   fyrir framan liðsheiti í stöðutöflu forsíðunnar (~1.75rem). `flex-wrap`
   á haus-röðinni ver gegn því að stórt lógó við hlið langs liðsheitis
   þenji síðuna út á mjóum skjám (sjá CLAUDE.md um að mæla yfirflæðið). */
.lids-nafn-og-merki {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
}

.lids-nafn-og-merki h1 { margin: 0; }

.lids-merki {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: 8px;
  padding: 0.3rem;
}

.stodu-merki {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 4px;
  background: var(--flotur);
}

/* --- Liðakort í neti (Task 23) --------------------------------------------

   Sama kortaform á tveimur stöðum - `_lida_kort` í `midill/tolusidur.py`,
   deilt með `midill/lidsida.py`: forsíðan áður en fyrsta umferð er spiluð
   (`_oradad_listi`) og /lid/-yfirlitið (`lidayfirlit`, sem bætir uppnefni
   og annálssæti við sem `undirtexti` undir nafninu). Stöðutaflan sjálf,
   eftir að umferðir eru spilaðar (`_stodutafla`), heldur sínu litla
   lárétta `.stodu-merki` í töfluröð - alveg ósnert af þessum kafla.

   Þrjú kort í línu á breiðum skjá og eitt í línu á mjóum - að ósk
   notandans (aldrei fjögur). Kortið sjálft er `<a>` - allt kortið er
   tengillinn, ekki bara nafnið - svo `text-decoration` og `color` eru
   núllstillt hér og `.lidsnafn` ber alla leturáherslu. */
.lida-net {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 40rem) {
  .lida-net { grid-template-columns: 1fr; }
}

.lida-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--randi);
  border: 1px solid var(--lina);
  border-radius: 8px;
  padding: 1.1rem 0.75rem;
  text-decoration: none;
  color: inherit;
}

.lida-kort:hover { border-color: var(--gras); }

.lida-merki {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: 10px;
  padding: 0.4rem;
}

.lida-kort .lidsnafn {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.lida-kort .grein-dags { margin: 0.2rem 0 0; }
.lida-kort .uppnefni { margin: 0; font-size: 0.85rem; }

.tafla-umbud {
  overflow-x: auto;
  border: 1px solid var(--lina);
  border-radius: 6px;
}

/* --- Hollaspjöld ("Eins og staðan er", Task 15) --------------------------

   Eitt spjald á holl A-E í verðlaunasíðunni, stöðuflaggað eftir því hvort
   hollið er óhafið, í gangi eða lokið - vinstri rönd og `.flagg` bera
   sama merki. Öll litapörin eru þegar sannreynd annars staðar í
   skjalinu: `--haus-grunnur`/`--gras-blek` er sama parið og `.haus`
   sjálft notar (leiðrétt eftir endurskoðun - `--gras` eitt og sér nær
   aðeins ~3,17:1 á móti `--gras-blek` í dökku þema á þessum litla,
   feitletraða texta, langt undir 4,5:1 kröfunni; `--haus-grunnur` er
   dökkgrænt í BÁÐUM þemum og er einmitt tókinn sem til varð fyrir þessa
   nákvæmu ástæðu, sjá skýringuna efst í skjalinu). Sjálfgefna
   `.flagg`-parið (`--lina`/`--daemt`, fyrir óhafið) er sama parið og
   létt lesmál (`.adferd`, `.grein-lysing`) notar á ljósum grunni.
   `--rafgult` er fast (#ffd60a) í báðum þemum og `--haus-grunnur` er
   dökkgrænt í báðum þemum, svo dökkur texti á skæru gulu er alltaf
   nægilega skýr. */

.holl-spjold {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}

.holl-spjald {
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-left: 4px solid var(--lina);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
}

.holl-spjald--igangi { border-left-color: var(--rafgult); }
.holl-spjald--lokid { border-left-color: var(--gras); }
.holl-spjald--ohafid { border-left-color: var(--lina); }

.holl-spjald p { margin: 0 0 0.5rem; }
.holl-spjald p:last-child { margin-bottom: 0; }

.flagg {
  display: inline-block;
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin: 0 0 0.6rem;
  background: var(--lina);
  color: var(--daemt);
}

.holl-spjald--igangi .flagg { background: var(--rafgult); color: var(--haus-grunnur); }
.holl-spjald--lokid .flagg { background: var(--haus-grunnur); color: var(--gras-blek); }

/* --- Fótur ---------------------------------------------------------------- */

footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  color: var(--daemt);
  font-size: 0.9rem;
}

/* Undirskrift ritstjorans undir fyrirsogn greina - erfir lit umhverfisins. */
.ritstjori {
  font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
  margin: 0.2rem 0 0;
}