/* Stjórnborð inneignarkerfisins.

   Engin byggingarkeðja og ekkert ramma-safn: skráin er lesin eins og hún er
   skrifuð. Sá sem opnar hana eftir ár á að geta breytt henni án þess að setja
   upp neitt fyrst.

   ── UM LITINA ───────────────────────────────────────────────────────────────

   Kóralliturinn er SKRAUT, ekki merking. Hann er á hetjureitnum, á valda
   flipanum og hvergi annars staðar. Aðalhnappar eru nærri svartir — eins og í
   fyrirmyndinni — einmitt til að kóralinn þurfi ekki að keppa við þá.

   Ástæðan er ekki smekkur heldur að stöðulitirnir eiga rauða endann: villa er
   rauð. Væri kóralinn líka notaður sem „gerðu þetta"-litur myndi rautt hætta
   að þýða neitt sérstakt. Þess vegna eru þrír hópar og þeir blandast aldrei:

     SKRAUT     kórall og appelsínugulur — hetjureitur, valinn flipi, kubbar.
     STAÐA      grænt / gult / rautt. Aldrei sem skraut.
     SERÍUR     tveir litir grafsins. Þeir eiga gögnin og ekkert annað.

   Seríurnar stóðust próf á aðgreiningu fyrir litblindu (ΔE 26,6 ljóst /
   24,5 dökkt, þar sem 8 er markið) og á birtuskilum við flötinn. Dökka
   útgáfan er sérvalin fyrir dökkan flöt, ekki sjálfvirk speglun. */

:root {
  /* ── grunnur ── */
  --texti:      #17181F;
  --texti-medal:#4E515E;
  --dauft:      #767A88;
  --lina:       #E7E3DE;
  --lina-sterk: #D3CEC7;
  --bak:        #F5F2EE;
  --spjald:     #FFFFFF;
  --spjald-2:   #FAF8F5;

  /* ── rein ── */
  --rein:       #16171F;
  --rein-2:     #23252F;
  --rein-texti: #9297A6;
  --rein-bjart: #FFFFFF;

  /* ── skraut ── */
  --koral:      #F0546A;
  --koral-mjukt:#FDEAEC;
  --koral-lina: #F8C7CE;
  --hetja:      linear-gradient(135deg, #F4676F 0%, #F79B4E 100%);

  /* ── aðgerðir ── */
  --adal:       #17181F;
  --adal-dokk:  #000000;
  --adal-texti: #FFFFFF;

  /* ── staða ── */
  --godur:      #0E7A49;
  --godur-bak:  #E3F3EA;
  --advorun:    #9A5B00;
  --advorun-bak:#FDF0DC;
  --slaemur:    #B3261E;
  --slaemur-bak:#FBE7E5;
  --hlutlaus-bak:#F0EDE8;

  /* ── seríur ── */
  --serie-safnad: #2A6FD6;
  --serie-notad:  #D9541F;
  --grid:         #E9E5E0;

  /* ── form ── */
  --radius:     16px;
  --radius-sm:  10px;
  --radius-xs:  8px;
  --skuggi-1:   0 1px 2px rgba(23, 24, 31, .04);
  --skuggi-2:   0 1px 3px rgba(23, 24, 31, .06), 0 8px 24px -10px rgba(23, 24, 31, .12);
  --skuggi-upp: 0 10px 40px -10px rgba(23, 24, 31, .28);
  --rein-breidd:      236px;
  --rein-breidd-min:  72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --texti:      #ECEDF1;
    --texti-medal:#B6BAC6;
    --dauft:      #868B99;
    --lina:       #292B35;
    --lina-sterk: #3A3D4A;
    --bak:        #14151B;
    --spjald:     #1B1C24;
    --spjald-2:   #212330;

    --rein:       #101118;
    --rein-2:     #22242F;

    --koral:      #F4707F;
    --koral-mjukt:#2E1A20;
    --koral-lina: #4A2830;

    --adal:       #ECEDF1;
    --adal-dokk:  #FFFFFF;
    --adal-texti: #14151B;

    --godur:      #45C88A;
    --godur-bak:  #11301F;
    --advorun:    #E8A83A;
    --advorun-bak:#2E2413;
    --slaemur:    #F0736B;
    --slaemur-bak:#301A18;
    --hlutlaus-bak:#262833;

    --serie-safnad: #4A95E8;
    --serie-notad:  #DE6836;
    --grid:         #292B35;

    --skuggi-1:   0 1px 2px rgba(0, 0, 0, .35);
    --skuggi-2:   0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -10px rgba(0, 0, 0, .6);
    --skuggi-upp: 0 10px 40px -10px rgba(0, 0, 0, .75);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
  color: var(--texti); background: var(--bak);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; letter-spacing: -.3px; margin: 0 0 4px; }
h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dauft); margin: 34px 0 12px;
}
h3 { font-size: 15px; margin: 0 0 2px; }
.dauft { color: var(--dauft); }
.haegri { text-align: right; }
.midja-dalkur { text-align: center; }
.villa { color: var(--slaemur); }
.smatt { font-size: 12px; }
.taeki { font-variant-numeric: tabular-nums; }
.leidbeining { max-width: 68ch; margin: -4px 0 14px; font-size: 14px; color: var(--dauft); }

.midja { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

svg.tn { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }

/* ── beinagrind ──────────────────────────────────────────────────────────── */

.skel { display: grid; grid-template-columns: var(--rein-breidd) 1fr; min-height: 100vh; }
.skel:has(.rein--minnkud) { grid-template-columns: var(--rein-breidd-min) 1fr; }

.efni { min-width: 0; }
main { max-width: 1120px; margin: 0 auto; padding: 0 28px 64px; }

@media (max-width: 860px) {
  .skel, .skel:has(.rein--minnkud) { grid-template-columns: var(--rein-breidd-min) 1fr; }
  main { padding: 0 18px 56px; }
}

/* ── rein ────────────────────────────────────────────────────────────────── */

.rein {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 12px 14px;
  background: var(--rein); color: var(--rein-texti);
  transition: padding .18s;
}

.rein-merki {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 8px 18px; color: var(--rein-bjart);
  font-weight: 650; letter-spacing: -.2px; white-space: nowrap;
}
.rein-merki svg { width: 32px; height: 32px; flex: none; border-radius: 10px; }

/* Nafn kerfisins og nafn búðarinnar í sama bálki. Búðin er í kóral og
   hástöfum en miklu smærri: hún á að svara „hvar er ég?" í einu augnakasti
   án þess að keppa við nafn kerfisins. Þetta er eina staðurinn í viðmótinu
   þar sem kórallinn ber texta. */
.rein-nafn { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rein-bud {
  font-size: 10.5px; font-weight: 700; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase; color: var(--koral);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis;
}
.rein-bud:empty { display: none; }

/* Flipar liggja lóðrétt í reininni. JS-ið þekkir þá enn á `.flipar button`
   og `data-flipi`, svo útlitsbreytingin snerti enga rökfræði. */
.flipar { display: flex; flex-direction: column; gap: 2px; }
.flipar button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--rein-texti);
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background .12s, color .12s;
}
.flipar button:hover { background: var(--rein-2); color: var(--rein-bjart); }
.flipar button[aria-selected="true"] {
  background: var(--rein-2); color: var(--rein-bjart); font-weight: 600;
}
/* Kórallinn merkir valinn flipa — það er eina merkingin sem hann ber í
   viðmótinu, og hún er ekki eina merkið: bakgrunnur og letur breytast líka. */
.flipar button[aria-selected="true"]::after {
  content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--koral); flex: none;
}
.flipar button:focus-visible { outline: 2px solid var(--koral); outline-offset: -2px; }

.rein-fotur { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.rein-fotur button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--rein-texti);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.rein-fotur button:hover { background: var(--rein-2); color: var(--rein-bjart); }
.rein-notandi {
  padding: 12px 12px 4px; border-top: 1px solid var(--rein-2); margin-top: 6px;
  font-size: 12px; color: var(--rein-texti);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Minnkuð rein: aðeins táknin. Textinn hverfur en `title` og aria-label
   standa eftir, svo hvorki bendill né skjálesari tapar heitinu. */
.rein--minnkud { padding-left: 10px; padding-right: 10px; }
.rein--minnkud .rein-merki { padding-left: 5px; }
.rein--minnkud .heiti-flipa,
.rein--minnkud .rein-nafn,
.rein--minnkud .rein-notandi { display: none; }
.rein--minnkud .flipar button,
.rein--minnkud .rein-fotur button { justify-content: center; padding: 11px 0; }
.rein--minnkud .flipar button[aria-selected="true"]::after { display: none; }
.rein--minnkud .flipar button[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--koral);
}
.rein--minnkud #minnka-tn { transform: rotate(180deg); }

@media (max-width: 860px) { .heiti-flipa, .rein-nafn, .rein-notandi { display: none; } }

/* ── haus ────────────────────────────────────────────────────────────────── */

.haus {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 22px 28px 16px;
}
.haus h1 { flex: none; }
.haus-haegri { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) { .haus { padding: 18px 18px 12px; } }

/* ── hnappar ─────────────────────────────────────────────────────────────── */

.takki {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--spjald); color: var(--texti); box-shadow: var(--skuggi-1);
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.takki:disabled { opacity: .45; cursor: default; box-shadow: none; }
.takki--adal { background: var(--adal); color: var(--adal-texti); }
.takki--adal:hover:not(:disabled) { background: var(--adal-dokk); }
.takki--utlina { border-color: var(--lina-sterk); }
.takki--utlina:hover:not(:disabled) { border-color: var(--dauft); background: var(--spjald-2); }
.takki--tomur { background: none; box-shadow: none; color: var(--texti-medal); }
.takki--tomur:hover:not(:disabled) { background: var(--hlutlaus-bak); color: var(--texti); }
.takki--haetta { background: none; box-shadow: none; color: var(--slaemur); }
.takki--haetta:hover:not(:disabled) { background: var(--slaemur-bak); }
.takki--smar { font-size: 13px; padding: 7px 13px; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--koral); outline-offset: 2px;
}

.hlekkur {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--texti);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.hlekkur:hover { color: var(--koral); }

/* ── form ────────────────────────────────────────────────────────────────── */

.innsl {
  font: inherit; font-size: 14px; color: var(--texti);
  background: var(--spjald); border: 1px solid var(--lina-sterk);
  border-radius: var(--radius-xs); padding: 9px 12px; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.innsl:focus { outline: none; border-color: var(--koral); box-shadow: 0 0 0 3px var(--koral-mjukt); }
.innsl::placeholder { color: var(--dauft); }
select.innsl { cursor: pointer; }
.innsl--throngt { width: auto; min-width: 150px; padding: 7px 11px; font-size: 13px; }

/* ── innskráning ─────────────────────────────────────────────────────────── */

.spjald {
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--skuggi-1);
}
.spjald--throngt { width: min(390px, calc(100vw - 40px)); box-shadow: var(--skuggi-2); }

/* Innskráningarsíðan ber gradientinn sjálf og spjaldið er hvítt ofan á honum.
   Öfugt við það sem var: beiges flötur með lituðu merki. Þetta er eina síðan
   sem enginn er innskráður á, svo hún má vera skrautlegasti flöturinn í
   kerfinu — hún hefur engum gögnum að spilla. */
.midja--inn {
  /* `main` er annars 1120px breitt og miðjað — gradientinn á að ná út í kant. */
  max-width: none; padding: 24px;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.30) 0%, transparent 55%),
    var(--hetja);
}
.spjald--inn { border-color: transparent; box-shadow: 0 18px 50px rgba(23,24,31,.22); }
.spjald--inn h1 { margin: 0 0 2px; font-size: 22px; letter-spacing: -.01em; }
.spjald--inn button[type="submit"] { margin-top: 18px; }
.innsvar {
  margin: 14px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45;
  color: var(--godur); background: var(--godur-bak); border-radius: var(--radius-xs);
}
.innsmatt { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--dauft); }
.spjald--throngt svg { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; }
.spjald label { display: block; margin: 16px 0 0; font-size: 13px; font-weight: 500; color: var(--texti-medal); }
.spjald input {
  width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--lina-sterk); border-radius: var(--radius-xs);
  background: var(--spjald); color: var(--texti);
}
.spjald input:focus { outline: none; border-color: var(--koral); box-shadow: 0 0 0 3px var(--koral-mjukt); }
.spjald button[type="submit"] {
  width: 100%; margin-top: 22px; padding: 12px; font: inherit; font-weight: 600;
  color: var(--adal-texti); background: var(--adal); border: 0;
  border-radius: 999px; cursor: pointer;
}

/* ── borði ───────────────────────────────────────────────────────────────── */

.bordi-umgjord { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 860px) { .bordi-umgjord { padding: 0 18px; } }
.bordi {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  margin: 4px 0 0; padding: 14px 18px;
  background: var(--advorun-bak); border: 1px solid var(--lina);
  border-left: 3px solid var(--advorun);
  border-radius: var(--radius); font-size: 14px; box-shadow: var(--skuggi-1);
}
.bordi-texti { flex: 1; }
.bordi .hlekkur { flex: none; white-space: nowrap; }

/* ── tölureitir ──────────────────────────────────────────────────────────── */

.rutur { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rutur { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rutur { grid-template-columns: 1fr; } }

.ruta {
  position: relative; overflow: hidden;
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); padding: 18px 20px 19px; box-shadow: var(--skuggi-1);
}
.ruta .heiti { font-size: 13px; font-weight: 500; color: var(--dauft); }
.ruta .tala { font-size: 27px; font-weight: 650; margin-top: 4px; letter-spacing: -.7px; }
.ruta .skyring { font-size: 12px; color: var(--dauft); margin-top: 3px; }

/* Litakubburinn er auka-auðkenni, ekki eina auðkennið: hver reitur ber heiti
   sitt í texta og litblindur lesandi tapar engu. */
.ruta-tn {
  width: 34px; height: 34px; border-radius: 11px; margin-bottom: 12px;
  display: grid; place-items: center;
  background: var(--kubbur-bak, var(--hlutlaus-bak)); color: var(--kubbur, var(--dauft));
}
.ruta-tn svg { width: 18px; height: 18px; }

/* Hetjureiturinn er svarið við spurningunni sem fólk kemur með inn á síðuna,
   og eini staðurinn þar sem kórallinn fyllir flöt. */
/* Hetjureiturinn tekur tvo dálka OG tvær raðir. Það er ekki bara stærð: með
   fimm minni reitum ganga einingarnar upp í nákvæmlega tvær raðir og enginn
   stakur reitur situr eftir í botninum. */
.ruta--adal {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column;
  border: 0; color: #fff; background: var(--hetja);
  box-shadow: 0 12px 34px -14px rgba(240, 84, 106, .55);
}
.ruta--adal .maelir { margin-top: auto; padding-top: 18px; }
@media (max-width: 900px) { .ruta--adal { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 520px) { .ruta--adal { grid-column: span 1; } }
.ruta--adal .heiti, .ruta--adal .skyring { color: rgba(255, 255, 255, .82); }
.ruta--adal .tala { font-size: 40px; letter-spacing: -1.4px; }
.ruta--adal .ruta-tn { background: rgba(255, 255, 255, .2); color: #fff; }
.ruta--tomt .tala { color: var(--dauft); font-weight: 500; }

.maelir { margin-top: 15px; }
.maelir-lina { height: 7px; border-radius: 999px; overflow: hidden; background: var(--hlutlaus-bak); }
.ruta--adal .maelir-lina { background: rgba(255, 255, 255, .28); }
.maelir-lina span { display: block; height: 100%; border-radius: 999px; background: var(--serie-notad); }
.ruta--adal .maelir-lina span { background: #fff; }
.maelir .skyring { margin-top: 7px; }

/* ── töflur ──────────────────────────────────────────────────────────────── */

.tafla-umgjord {
  overflow-x: auto; background: var(--spjald);
  border: 1px solid var(--lina); border-radius: var(--radius); box-shadow: var(--skuggi-1);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--dauft);
  letter-spacing: .03em; padding: 13px 18px; white-space: nowrap;
  background: var(--spjald-2); border-bottom: 1px solid var(--lina);
}
td { padding: 12px 18px; border-bottom: 1px solid var(--lina); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--spjald-2); }
tr.dauft td { color: var(--dauft); }

.merki {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--hlutlaus-bak); color: var(--texti-medal);
}
.merki--virk { background: var(--godur-bak); color: var(--godur); }
.merki--bid  { background: var(--hlutlaus-bak); color: var(--texti-medal); }
.merki--stopp{ background: var(--slaemur-bak); color: var(--slaemur); }
.ja  { color: var(--godur); font-weight: 700; }
.nei { color: var(--lina-sterk); }

/* ── keyrslur ────────────────────────────────────────────────────────────── */

.keyrslulisti {
  list-style: none; margin: 0; padding: 0; font-size: 14px;
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--skuggi-1);
}
.keyrslulisti li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 11px 18px; border-bottom: 1px solid var(--lina);
}
.keyrslulisti li:last-child { border-bottom: 0; }
.keyrslumerki { display: inline-flex; align-items: center; }
.punktur { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

footer {
  max-width: 1120px; margin: 0 auto; padding: 0 28px 44px;
  font-size: 13px; color: var(--dauft);
}

/* ── graf ────────────────────────────────────────────────────────────────── */

.fyrirsogn-lina { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fyrirsogn-lina h2 { margin-bottom: 12px; }
.fyrirsogn-lina--takki h2 { margin-bottom: 12px; }

.tímabil { display: flex; gap: 2px; padding: 3px; background: var(--hlutlaus-bak); border-radius: 999px; }
.tímabil button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--dauft); cursor: pointer;
  background: none; border: 0; padding: 5px 13px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.tímabil button:hover { color: var(--texti); }
.tímabil button.valid { color: var(--texti); background: var(--spjald); font-weight: 600; box-shadow: var(--skuggi-1); }

.spjald--graf { padding: 20px 20px 12px; }
.graf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf-tomt { color: var(--dauft); padding: 28px 0; text-align: center; }

.skyringar { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--dauft); margin: 0 0 16px; }
.skyringar span { display: inline-flex; align-items: center; gap: 7px; }
.skyringar i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.skyringar b { color: var(--texti); font-weight: 600; }
.skyringar-tima { margin-left: auto; }
@media (max-width: 520px) { .skyringar-tima { margin-left: 0; } }

.as-texti { font-size: 11px; fill: var(--dauft); }
.hjalparlina { stroke: var(--grid); stroke-width: 1; }
.grip { fill: transparent; cursor: default; }
.grip:hover + .dagur-hlif, .grip:focus + .dagur-hlif { opacity: 1; }
.dagur-hlif { fill: var(--texti); opacity: 0; transition: opacity .1s; }

#graf-tooltip {
  position: fixed; pointer-events: none; z-index: 30;
  background: var(--rein); color: #fff;
  padding: 10px 12px; border-radius: var(--radius-xs); font-size: 12px; line-height: 1.5;
  white-space: nowrap; opacity: 0; transition: opacity .1s; box-shadow: var(--skuggi-upp);
}
#graf-tooltip strong { display: block; font-size: 12px; margin-bottom: 3px; }
#graf-tooltip .lykill { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* ── leit ────────────────────────────────────────────────────────────────── */

#leit, #handbokarleit {
  font: inherit; font-size: 14px; color: var(--texti);
  background: var(--spjald); border: 1px solid var(--lina-sterk);
  padding: 9px 16px; border-radius: 999px; min-width: 270px; box-shadow: var(--skuggi-1);
}
#leit:focus, #handbokarleit:focus {
  outline: none; border-color: var(--koral); box-shadow: 0 0 0 3px var(--koral-mjukt);
}
@media (max-width: 620px) {
  .fyrirsogn-lina { flex-wrap: wrap; }
  #leit, #handbokarleit { min-width: 0; width: 100%; }
}

/* ── póstritill ─────────────────────────────────────────────────────────── */

.ritilsspjald { margin-bottom: 24px; }
.ritilsspjald h3 { font-size: 15px; margin: 0 0 2px; }
.ritilsspjald .dauft { font-size: 13px; }
.ritilsdalkar { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .ritilsdalkar { grid-template-columns: 1fr; } }

.reitur { display: block; margin: 16px 0 0; font-size: 13px; font-weight: 500; color: var(--texti-medal); }
.reitur input, .reitur textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--texti);
  background: var(--spjald); border: 1px solid var(--lina-sterk); border-radius: var(--radius-xs);
}
.reitur textarea { min-height: 230px; resize: vertical; line-height: 1.65; }
.reitur input:focus, .reitur textarea:focus {
  outline: none; border-color: var(--koral); box-shadow: 0 0 0 3px var(--koral-mjukt);
}

.breytur { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.breytur button {
  font: inherit; font-size: 12px; color: var(--texti-medal); cursor: pointer;
  background: var(--spjald-2); border: 1px solid var(--lina);
  padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.breytur button:hover { color: var(--koral); border-color: var(--koral-lina); background: var(--koral-mjukt); }

.ritilsstika { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.stada { font-size: 13px; color: var(--dauft); }
.stada.tokst { color: var(--godur); font-weight: 500; }
.stada.villa { color: var(--slaemur); font-weight: 500; }

/* Forskoðunin er mynd af pósti, ekki hluti af stjórnborðinu. Hún fær hvítan
   flöt í báðum stillingum, því pósturinn er hvítur hjá viðtakandanum. */
.forskodun {
  border: 1px solid var(--lina); border-radius: var(--radius);
  background: #fff; color: #1a1a1a; overflow: hidden; box-shadow: var(--skuggi-1);
}
.forskodun .efni { padding: 4px 14px; font-size: 14px; }
.forskodun .linan {
  padding: 11px 16px; border-bottom: 1px solid #e5e5e5;
  font-size: 13px; color: #555; background: #fafafa;
}
.forskodun .linan strong { color: #1a1a1a; }

/* ── stillingar ─────────────────────────────────────────────────────────── */

.stillingalisti {
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--skuggi-1);
}
.stilling {
  display: grid; gap: 5px 20px; align-items: baseline;
  grid-template-columns: 220px minmax(140px, auto) 1fr;
  padding: 14px 20px; border-bottom: 1px solid var(--lina); font-size: 14px;
}
.stilling:last-child { border-bottom: 0; }
.stilling:hover { background: var(--spjald-2); }
.stilling-heiti { color: var(--texti-medal); font-weight: 500; }
.stilling-gildi { font-weight: 650; font-variant-numeric: tabular-nums; }
.stilling-skyring { font-size: 13px; color: var(--dauft); }
@media (max-width: 760px) {
  .stilling { grid-template-columns: 1fr auto; }
  .stilling-skyring { grid-column: 1 / -1; }
}
.stilling--taeki { align-items: center; }
.stilling-adgerd { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.stilling-adgerd label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--dauft); white-space: nowrap;
}
.stilling-adgerd input[type="date"] {
  font: inherit; font-size: 13px; padding: 6px 9px;
  background: var(--spjald); color: var(--texti);
  border: 1px solid var(--lina-sterk); border-radius: var(--radius-xs);
}

.form-spjald {
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--skuggi-1);
}
.form-rutur { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 560px) { .form-rutur { grid-template-columns: 1fr; } }

.svid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.svid > span { font-size: 13px; font-weight: 500; color: var(--texti-medal); }
.svid small { font-size: 12px; color: var(--dauft); line-height: 1.4; }
.svid--breitt { grid-column: 1 / -1; }

.med-einingu { display: flex; align-items: stretch; }
.med-einingu .innsl { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.med-einingu .eining {
  display: inline-flex; align-items: center; padding: 0 11px;
  font-size: 13px; color: var(--dauft); background: var(--spjald-2);
  border: 1px solid var(--lina-sterk); border-left: 0;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.rofi { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.rofi input { width: 16px; height: 16px; accent-color: var(--koral); cursor: pointer; }

.stika {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lina);
}
.stika-haegri { margin-left: auto; }
.adgerdir { display: flex; gap: 4px; justify-content: flex-end; }
.tomt-svid { padding: 30px 20px; text-align: center; color: var(--dauft); font-size: 14px; }
.bodsform { display: grid; gap: 14px 16px; grid-template-columns: 1fr 1fr auto auto; align-items: end; }
@media (max-width: 760px) { .bodsform { grid-template-columns: 1fr; } }

/* ── skýring við bendil ─────────────────────────────────────────────────── */
/* Ekki `title`: vafrinn bíður sekúndu, felur það eftir aðra, og
   lyklaborðsnotandi sér það aldrei. Skýring sem enginn les er engin skýring. */

.hjalp {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: middle;
  border: 1px solid var(--lina-sterk); border-radius: 50%;
  font-size: 10px; font-weight: 700; color: var(--dauft);
  cursor: help; flex: none; user-select: none;
}
.hjalp::after { content: "i"; font-style: italic; line-height: 1; }
.hjalp:hover, .hjalp:focus { color: var(--koral); border-color: var(--koral); outline: none; }
.hjalp-bolla {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 340px; z-index: 25;
  padding: 11px 13px; border-radius: var(--radius-xs);
  background: var(--rein); color: #fff;
  font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.5;
  text-align: left; white-space: normal; letter-spacing: normal; text-transform: none;
  box-shadow: var(--skuggi-upp); opacity: 0; visibility: hidden; transition: opacity .12s;
}
.hjalp:hover .hjalp-bolla, .hjalp:focus .hjalp-bolla { opacity: 1; visibility: visible; }
.svid:first-child .hjalp-bolla, .stilling-heiti .hjalp-bolla { left: 0; transform: none; }

/* ── handbók ────────────────────────────────────────────────────────────── */

.kafli {
  background: var(--spjald); border: 1px solid var(--lina);
  border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--skuggi-1); overflow: hidden;
}
.kafli summary {
  padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 11px;
}
.kafli summary::-webkit-details-marker { display: none; }
.kafli summary::before {
  content: "›"; font-size: 19px; color: var(--dauft);
  transition: transform .15s; display: inline-block;
}
.kafli[open] summary::before { transform: rotate(90deg); color: var(--koral); }
.kafli summary:hover { background: var(--spjald-2); }
.kafli summary > span:first-of-type { flex: 1; }
.kafli[data-ovirkur] summary > span:first-of-type { color: var(--dauft); }
.kafli-efni code, .leidbeining code {
  font-size: 12.5px; padding: 1px 5px; border-radius: 5px;
  background: var(--hlutlaus-bak); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#k-efni { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.kafli-efni { padding: 0 20px 18px 42px; font-size: 14px; color: var(--texti-medal); line-height: 1.65; }
.kafli-efni p { margin: 0 0 10px; }
.kafli-efni ul { margin: 0 0 10px; padding-left: 20px; }
.kafli-efni li { margin-bottom: 5px; }
.kafli-efni strong { color: var(--texti); }
.kafli-efni a { color: var(--koral); }
.kafli-efni blockquote {
  margin: 0 0 12px; padding: 13px 16px;
  background: var(--koral-mjukt); border-left: 3px solid var(--koral);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  color: var(--texti); font-style: italic;
}

/* ── merkið á vörusíðunni ────────────────────────────────────────────────
   Nákvæmlega sama stílblað og þemað fær í snippetinu. Það er afritað hingað
   viljandi: forskoðun sem er eftirlíking lýgur í smáatriðum sem enginn tekur
   eftir fyrr en merkið er komið út á allar vörusíður. Breytist annað þarf að
   breyta hinu — og prófið er að bera þau saman, ekki að treysta minninu. */

.vk {
  --vk-fra: #F4676F;
  --vk-til: #F79B4E;
  --vk-skali: 1;
  display: block; text-align: left; margin: 0;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, var(--vk-fra), var(--vk-til));
  color: #fff;
  box-shadow: 0 10px 26px -12px var(--vk-fra);
}
.vk__haus { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.vk__takn {
  flex: none; width: calc(40px * var(--vk-skali)); height: calc(40px * var(--vk-skali));
  border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22);
}
.vk__takn svg { width: calc(22px * var(--vk-skali)); height: calc(22px * var(--vk-skali)); }
.vk__mid { flex: 1; min-width: 0; }
.vk__yfir {
  display: block; font-size: calc(11px * var(--vk-skali)); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; opacity: .85; margin-bottom: 3px;
}
.vk__texti { display: block; font-size: calc(15px * var(--vk-skali)); line-height: 1.4; }
.vk__upphaed {
  font-size: calc(21px * var(--vk-skali)); font-weight: 700;
  letter-spacing: -.3px; white-space: nowrap;
}
.vk__hnappur {
  flex: none; font: inherit; font-size: calc(14px * var(--vk-skali)); font-weight: 650;
  cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 0;
  /* Dekkri útgáfa af merkislitnum, ekki `filter` á hnappinn: filter deyfir
     líka hvíta flötinn og hnappurinn varð grár. */
  background: #fff; color: var(--vk-fra);
  color: color-mix(in srgb, var(--vk-fra) 70%, #17181F);
}
.vk--solid { background: var(--vk-fra); box-shadow: 0 10px 26px -14px var(--vk-fra); }
.vk--outline {
  background: none; color: inherit; border: 2px solid var(--vk-fra); box-shadow: none;
}
.vk--outline .vk__takn { background: color-mix(in srgb, var(--vk-fra) 14%, transparent); color: var(--vk-fra); }
.vk--outline .vk__upphaed, .vk--outline .vk__yfir { color: var(--vk-fra); opacity: 1; }
.vk--outline .vk__hnappur { background: var(--vk-fra); color: #fff; }
.vk--minimal {
  background: none; color: inherit; box-shadow: none; border-radius: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.vk--minimal .vk__takn { background: color-mix(in srgb, var(--vk-fra) 12%, transparent); color: var(--vk-fra); }
.vk--minimal .vk__upphaed, .vk--minimal .vk__yfir { color: var(--vk-fra); opacity: 1; }
.vk--minimal .vk__hnappur { background: none; color: var(--vk-fra); border: 1px solid currentColor; }
.vk--stor .vk__haus { flex-wrap: wrap; padding: 20px; }
.vk--stor .vk__texti { font-size: calc(16px * var(--vk-skali)); }
.vk--stor .vk__upphaed { font-size: calc(30px * var(--vk-skali)); display: block; margin: 2px 0 4px; }
.vk--stor .vk__hnappur { width: 100%; padding: 13px; font-size: calc(15px * var(--vk-skali)); }
.vk__skraning { padding: 0 18px 18px; }
.vk__label {
  display: block; margin: 10px 0 4px;
  font-size: calc(12px * var(--vk-skali)); font-weight: 600; opacity: .9;
}
.vk__reitur {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px;
  font: inherit; font-size: calc(14px * var(--vk-skali));
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 10px;
  background: rgba(255, 255, 255, .94); color: #17181F;
}
.vk__senda {
  margin-top: 14px; width: 100%; padding: 12px; cursor: pointer;
  font: inherit; font-weight: 650; font-size: calc(15px * var(--vk-skali));
  border: 0; border-radius: 999px; background: #fff; color: var(--vk-fra);
  color: color-mix(in srgb, var(--vk-fra) 70%, #17181F);
}
.vk__smatt { margin: 10px 0 0; font-size: calc(12px * var(--vk-skali)); line-height: 1.5; opacity: .85; }
.vk__smatt a { color: inherit; }
.vk__takk { margin: 10px 0 0; font-weight: 650; }
.vk--outline .vk__reitur, .vk--minimal .vk__reitur {
  background: transparent; color: inherit;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.vk--outline .vk__senda { background: var(--vk-fra); color: #fff; }
.vk--minimal .vk__senda { background: var(--vk-fra); color: #fff; }

/* Litavalsreitir eiga að líta út eins og litur, ekki eins og reitur. */
.svid input[type="color"] {
  width: 100%; height: 40px; padding: 3px; cursor: pointer;
  border: 1px solid var(--lina-sterk); border-radius: var(--radius-xs);
  background: var(--spjald);
}

/* ── öryggisventillinn ───────────────────────────────────────────────────── */
/* Gult en ekki rautt: þetta er eitthvað til að líta á, ekki bilun. Rauði
   endinn á að vera frátekinn fyrir það sem er raunverulega að. */

.spjald--vidvorun {
  border-left: 3px solid var(--advorun);
  background: var(--spjald);
  margin-bottom: 26px;
}
.spjald--vidvorun h2 { margin: 0; }
.merkimidi {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.merkimidi--advorun { color: var(--advorun); background: var(--advorun-bak); }

.fravikalisti { display: grid; gap: 10px; }
.fravik {
  display: grid; gap: 10px; padding: 14px;
  border: 1px solid var(--lina); border-radius: var(--radius-xs);
  background: var(--spjald-2);
}
.fravik-adal { display: grid; gap: 2px; }
.fravik-tolur { font-size: 13px; color: var(--texti-medal); }
.fravik-afgreidsla { display: flex; gap: 8px; align-items: center; }
.fravik-afgreidsla .innsl { flex: 1; min-width: 0; }
.fravik-afgreidsla .takki { flex: none; }
.fravik .stada:empty { display: none; }
@media (max-width: 620px) {
  .fravik-afgreidsla { flex-wrap: wrap; }
  .fravik-afgreidsla .takki { width: 100%; }
}