/* Stjórnborð kassanna — mælaborð, ekki söluvefur
   ═══════════════════════════════════════════════════════════════════════════

   Registrið er hljóðlátt og þétt: þetta er tæki sem er horft á í tíu sekúndur
   til að svara einni spurningu — er eitthvað að. Þess vegna er stærsta talan
   á síðunni fjöldi búða sem þarf að skoða, og ekkert annað keppir við hana.

   ── Liturinn ───────────────────────────────────────────────────────────────
   Fimm gildi úr nætur-þema kassans, svo þetta sé augljóslega sama kerfið, og
   EITT í viðbót: dempaður rauður. Húsreglan segir einn litblæ; hér eru tveir
   og það er ákvörðun — hinn sést AÐEINS þegar eitthvað er að. Síða þar sem
   allt er í lagi er einlit. Rauður sem er alltaf á skjánum hættir að þýða
   nokkuð, og þá er hann verri en enginn.                                    */
:root {
  --grunnur: #15181b;
  --flotur:  #1b1f23;
  --blek:    #e9eaec;
  --dauft:   #868e96;
  --stal:    #9db4c6;   /* áherslan */
  --rodi:    #c98b84;   /* sést aðeins þegar eitthvað er að */

  --rond: color-mix(in oklab, var(--blek) 12%, transparent);
  --mjukt: cubic-bezier(.19, 1, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` slokknar EKKI af sjálfu sér þegar klasi setur display.
   Sjálfgefni stíll vafrans er [hidden] { display: none }, en það er
   attribute-veljari og hver klasi með display slær hann út á sértækni.
   Bæði .hlid og .skel eru display: grid — svo hliðið OG borðið stóðu á
   síðunni samtímis og borðið lenti neðan við innskráningarformið.

   Stefán, 23. sept 2026: „birtist þetta hérna fyrir neðan? og login dótið
   situr eftir." Nákvæmlega. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grunnur);
  color: var(--blek);
  font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}

/* Fókushringurinn. Hann er hér EFST viljandi: allt annað í þessari skrá
   fjarlægir sjálfgefið útlit, og sjálfgefna fókusmerkið fer með því. */
:focus-visible {
  outline: 2px solid var(--stal);
  outline-offset: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Merkingar: einbreitt letur á 11 px, engin hástafabreikkun. */
.merki {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: -.01em;
  color: var(--dauft);
  margin: 0;
}

/* ── Hliðið ──────────────────────────────────────────────────────────────── */
.hlid {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 0 24px;
  max-width: 380px;
}
.hlid__titill { font-size: 30px; font-weight: 500; letter-spacing: -.035em; margin: 0 0 6px; }
.hlid__form { display: grid; gap: 8px; }
.hlid__villa { color: var(--rodi); font-size: 13px; margin: 0; min-height: 1.2em; }

.reitur {
  appearance: none;
  background: var(--flotur);
  border: 1px solid var(--rond);
  border-radius: 0;
  color: var(--blek);
  font: inherit;
  padding: 10px 12px;
}
.reitur:focus { border-color: var(--stal); }

.hnappur {
  appearance: none;
  background: var(--stal);
  color: var(--grunnur);
  border: 1px solid var(--stal);
  border-radius: 0;
  font: inherit;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  transition: opacity .3s var(--mjukt);
}
.hnappur:hover { opacity: .82; }
.hnappur--rond { background: none; color: var(--blek); border-color: var(--rond); }
.hnappur--rond:hover { border-color: var(--stal); opacity: 1; }

/* ── Skelin ──────────────────────────────────────────────────────────────── */
/* Tólf dálkar og greinileg bil. Innihaldið nær út í jaðarinn á báða vegu —
   engin miðjuð 1200 px kassi utan um mælaborð sem á að vera lesið hratt. */
.skel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 8px;
  padding: 28px 20px 60px;
}
.skel > * { grid-column: 1 / -1; }

.haus {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rond);
}
.haus__titill { font-size: 26px; font-weight: 500; letter-spacing: -.035em; margin: 0; }
.haus__sott { justify-self: end; }

/* ── Samtalan ────────────────────────────────────────────────────────────── */
.samtala { padding: 34px 0 30px; border-bottom: 1px solid var(--rond); }
/* Stærsta gerðin á síðunni og hún er 44 px. Mælaborð sem hrópar er ekki
   lesið hraðar — það er bara hávaðasamara. */
.samtala__tala {
  font-size: 44px;
  line-height: .9;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: 0 0 6px;
}
.samtala__tala--ilagi { color: var(--stal); }
.samtala__tala--athuga { color: var(--rodi); }
.samtala__texti { margin: 0; color: var(--dauft); font-size: 13px; max-width: 38ch; }

/* ── Listinn ─────────────────────────────────────────────────────────────── */
.listi__haus,
.rod__efri {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 8px;
  align-items: baseline;
}
.listi__haus { padding: 16px 0 10px 13px; }

/* Ein hugmynd í gegnum allt: LÓÐRÉTT RÖND vinstra megin við hverja búð.
   Hún er eina merkið um ástand — ekki tákn, ekki litaður texti, ekki kassi.
   Búð í lagi ber daufa rönd; búð sem þarf athygli ber rauða. Augað les
   dálkinn af röndum áður en það les nokkurn staf. */
.rod {
  border-left: 2px solid var(--rond);
  padding: 14px 0 14px 12px;
  border-bottom: 1px solid var(--rond);
}
.rod--athuga { border-left-color: var(--rodi); }
.rod--ilagi  { border-left-color: color-mix(in oklab, var(--stal) 55%, transparent); }

.rod__nafn { font-weight: 500; letter-spacing: -.025em; margin: 0; }
.rod__slod { display: block; color: var(--dauft); text-decoration: none; }
.rod__slod:hover { color: var(--stal); }

.rod__gildi {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: -.02em;
  margin: 0;
}
.rod__gildi--dauft { color: var(--dauft); }
.rod__gildi--athuga { color: var(--rodi); }

/* Útgáfa sem er á eftir þeirri nýjustu fær skýringu undir sér, ekki lit:
   það er upplýsing en ekki bilun, og á ekki að keppa við rauða litinn. */
.rod__aeftir { display: block; color: var(--dauft); font-size: 11px; }

.rod__nedri {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}
.rod__villa {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--dauft);
  overflow-wrap: anywhere;
}
.rod__villa b { color: var(--rodi); font-weight: 400; }

.fotur { padding-top: 24px; max-width: 46ch; }

/* ── Síminn ──────────────────────────────────────────────────────────────── */
/* Fimm dálkar rúmast ekki á 375 px. Þá verður hver búð að lista þar sem
   merkingin stendur fyrir framan gildið — sama efni, önnur uppröðun. */
@media (max-width: 720px) {
  .listi__haus { display: none; }
  .rod__efri { grid-template-columns: 1fr; gap: 4px; }
  .rod__gildi::before {
    content: attr(data-merki) ' ';
    color: var(--dauft);
    font-size: 11px;
  }
  .samtala__tala { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Skrá út stendur hægra megin við „Spyrja núna" og er viljandi dauft: þetta
   er ekki hnappur sem á að ýta á fyrir slysni á sameiginlegri tölvu. */
.haus__ut { justify-self: end; }
.haus { grid-template-columns: 1fr auto auto auto; }

/* ── Breiddin ───────────────────────────────────────────────────────────────
   Fimm dálkar sem teygjast yfir 2000 px skjá standa 40 cm hver frá öðrum og
   augað hættir að tengja nafnið við töluna. Textinn fær því þak — en röndin
   vinstra megin og línan undir ná áfram út í jaðarinn. Það er FLÖTURINN sem á
   að vera breiður, ekki línan sem er lesin. */
.listi__haus,
.rod__efri { max-width: 1100px; }

/* Hópurinn: framlína er búð í rekstri, prufa er það ekki. Við tvær búðir er
   þetta augljóst; við fimmtíu er það eina leiðin til að sjá á augabragði
   hvort rauð lína er vandamál eða prufa. */
.rod__hopur {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--rond);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--dauft);
  vertical-align: 2px;
}
.rod__hopur--framlina { color: var(--stal); border-color: color-mix(in oklab, var(--stal) 35%, transparent); }

/* Röndin nær yfir alla línuna, ekki bara textann. Hún er 3 px þegar eitthvað
   er að: sá dálkur er það eina sem á að sjást úr augnkróknum. */
.rod { padding-left: 14px; }
.rod--athuga { border-left-width: 3px; }

/* Nafnið má vera aðeins stærra en gildin — það er akkerið sem augað leitar að. */
.rod__nafn { font-size: 16px; }

.samtala__texti { max-width: 52ch; font-size: 14px; }

/* ── Síða einnar búðar ──────────────────────────────────────────────────── */
.haus--bud { grid-template-columns: 1fr auto auto; grid-template-areas: "tilbaka tilbaka tilbaka" "titill sott hnappur"; }
.haus--bud > .merki:first-child { grid-area: tilbaka; margin-bottom: 10px; }
.haus--bud .haus__titill { grid-area: titill; }
.haus--bud .haus__sott { grid-area: sott; }
.haus--bud .hnappur { grid-area: hnappur; }

.tilbaka { color: var(--dauft); text-decoration: none; }
.tilbaka:hover { color: var(--stal); }

/* Tölurnar: eins margar og komast fyrir, aldrei mjórri en 150 px. Grid sem
   telur sjálft er rétta verkfærið þegar fjöldinn er fastur en breiddin ekki. */
.tolur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 8px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rond);
}
.tala__gildi {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 19px;
  letter-spacing: -.03em;
  margin: 3px 0 0;
}
.tala--athuga .tala__gildi { color: var(--rodi); }

.kafli { padding: 30px 0 4px; border-bottom: 1px solid var(--rond); }
.kafli__titill { font-size: 15px; font-weight: 500; letter-spacing: -.025em; margin: 0 0 14px; }

.villa { border-left: 2px solid var(--rond); padding: 0 0 0 12px; margin: 0 0 18px; max-width: 1100px; }
.villa__haus { margin: 0 0 3px; font-weight: 500; overflow-wrap: anywhere; }
.villa__stafli {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--dauft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
}

.tvidalkur { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; max-width: 1100px; }
.stilling { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--rond); }
.stilling__gildi { overflow-wrap: anywhere; }

/* Línan í yfirlitinu er hnappur: allur flöturinn, ekki bara nafnið. */
.rod--opnanleg { cursor: pointer; transition: background-color .25s var(--mjukt); }
.rod--opnanleg:hover { background: color-mix(in oklab, var(--blek) 4%, transparent); }
.rod__opna {
  appearance: none; background: none; border: 0; padding: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.rod__opna:hover { color: var(--stal); }

/* ── Tvær tölur efst ────────────────────────────────────────────────────────
   Veltan fyrst, athyglin á eftir. Á góðum degi er fyrri talan ástæðan fyrir
   að opna síðuna; á slæmum er það sú seinni. Báðar mega standa hlið við hlið
   því þær svara ólíkum spurningum og keppa ekki. */
.samtala--tvennt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 40px;
  max-width: 1100px;
}
.samtala--tvennt .samtala__tala { margin-bottom: 4px; }
/* Veltan er alltaf í hlutlausum lit: hún er upplýsing en ekki dómur. */
.samtala__tala--velta { color: var(--blek); font-size: 40px; }

.rod__gildi--sala { font-size: 14px; }
/* Útgáfumunur stendur undir NAFNINU en ekki í eigin dálki: hann skiptir
   aðeins máli þegar búðin er á eftir, og þá er hann athugasemd en ekki tala. */
.rod__aeftir--utgafa { margin-top: 3px; }

@media (max-width: 720px) {
  .samtala--tvennt { gap: 20px; }
  .samtala__tala--velta { font-size: 34px; }
}

/* ── Stillingar sem má breyta ───────────────────────────────────────────── */
.stilling__reitur {
  appearance: none;
  background: var(--flotur);
  border: 1px solid var(--rond);
  border-radius: 0;
  color: var(--blek);
  font: inherit;
  padding: 7px 10px;
  width: 100%;
  min-width: 0;
}
.stilling__reitur:focus { border-color: var(--stal); }
/* Reitur sem hefur verið breytt fær rönd — þá sést hvað er ósent. */
.stilling__reitur--breytt { border-color: var(--stal); }
.stillingar__fotur { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.stillingar__fotur .merki { max-width: 52ch; }

/* ── Vörulisti inn ──────────────────────────────────────────────────────── */
.innflutningur__val { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.innflutningur__skra { color: var(--dauft); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; }

.forskodun { max-width: 1100px; overflow-x: auto; }
.forskodun table { border-collapse: collapse; width: 100%; font-size: 13px; }
.forskodun th {
  text-align: left; font-weight: 400; padding: 0 14px 8px 0;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: var(--dauft);
  border-bottom: 1px solid var(--rond); white-space: nowrap;
}
.forskodun td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--rond); vertical-align: top; }
.forskodun td:nth-child(2), .forskodun td:nth-child(5) { font-family: 'Geist Mono', ui-monospace, monospace; }

/* Villurnar standa RAUÐAR og með línunúmeri. Innflutningur sem hendir línum
   þegjandi er verri en innflutningur sem neitar: búðin kemst að því þegar
   varan finnst ekki í hillunni. */
.innflutningur__villur { margin: 16px 0 0; padding: 0; list-style: none; max-width: 1100px; }
.innflutningur__villur li {
  color: var(--rodi); font-size: 12.5px; padding: 3px 0 3px 12px;
  border-left: 2px solid var(--rodi);
}

/* ── Fjórtán dagar ──────────────────────────────────────────────────────────
   Súlurnar eru þunnar og lágar viljandi. Þetta er ekki línurit til að lesa
   tölur af heldur LÖGUN: seldist meira í gær en í fyrradag, og var einhver
   dagur dauður. Talan sjálf stendur fyrir ofan. */
.saga { padding: 26px 0 24px; border-bottom: 1px solid var(--rond); max-width: 1100px; }
.saga__sulur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  align-items: end;
  height: 64px;
}
.saga__sula {
  background: color-mix(in oklab, var(--stal) 45%, transparent);
  min-height: 2px;
  height: calc(var(--haed, 0) * 1%);
  transition: height .5s var(--mjukt);
}
/* Dagurinn í dag er ekki búinn og á ekki að líta út eins og hinir. */
.saga__sula--idag { background: var(--stal); }
/* Dagur þar sem einhver búð náðist ekki. Röndin stendur undir súlunni og
   truflar hana ekki — hún er athugasemd, ekki tala. */
.saga__sula--misst { border-bottom: 2px solid var(--rodi); }
.saga__fotur { display: flex; justify-content: space-between; margin-top: 8px; }

/* ── Afritalistinn ──────────────────────────────────────────────────────── */
.afritalisti { display: grid; gap: 0; max-width: 1100px; }
.afritsradur {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rond);
}
.afritsradur__dags { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; }
.afritsradur__staerd { color: var(--dauft); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; }
/* Nýjasta afritið er það sem sótt er í 95% tilfella. */
.afritsradur--nyjast .afritsradur__dags { color: var(--stal); }

/* ── Áskriftin ──────────────────────────────────────────────────────────────
   Neðst og hljóðlát: hún er ekki spurning dagsins. En hún á að sjást, því
   enginn man hana eftir fjórar búðir. */
.askrift { padding: 24px 0; border-bottom: 1px solid var(--rond); max-width: 1100px; }
.askrift__tala {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 19px; letter-spacing: -.03em; margin: 0 0 4px;
}
.askrift__skuld { color: var(--rodi); }