
:root {
  --bg:#f4f5f3; --flotur:#ffffff; --hlid:#eaece8; --texti:#171c1a; --daufur:#56605c; --lina:#d9ddd8; --jadar:#7b8580;
  --litur:#0f6b5c; --litur-a:#ffffff; --litur-daufur:#e1eeea;
  --rautt:#a83226; --rautt-daufur:#f9e9e6; --graent:#0f6b5c;
  --skuggi:0 1px 2px rgb(23 28 26 / .05), 0 4px 14px rgb(23 28 26 / .04);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-utlit="ljost"]) {
    --bg:#111514; --flotur:#181d1b; --hlid:#0c0f0e; --texti:#e8ecea; --daufur:#9ba6a1; --lina:#2a312e; --jadar:#6f7b76;
    --litur:#5cc4b0; --litur-a:#06211c; --litur-daufur:#17302b;
    --rautt:#ff9488; --rautt-daufur:#371b17; --graent:#5cc4b0;
    --skuggi:none;
  }
}
:root[data-utlit="dokkt"] {
    --bg:#111514; --flotur:#181d1b; --hlid:#0c0f0e; --texti:#e8ecea; --daufur:#9ba6a1; --lina:#2a312e; --jadar:#6f7b76;
    --litur:#5cc4b0; --litur-a:#06211c; --litur-daufur:#17302b;
    --rautt:#ff9488; --rautt-daufur:#371b17; --graent:#5cc4b0;
    --skuggi:none;
  color-scheme: dark;
}
:root[data-utlit="ljost"] { color-scheme: light; }
*, *::before, *::after { box-sizing:border-box; }
html { scrollbar-color:var(--lina) transparent; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--texti); font:1rem/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif; caret-color:var(--litur); }
::selection { background:color-mix(in oklab, var(--litur) 28%, transparent); }
:focus-visible { outline:2px solid var(--litur); outline-offset:2px; border-radius:4px; }
a { color:var(--litur); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
b, strong { font-weight:650; }
.tala { font-variant-numeric:tabular-nums; }
.takn { vertical-align:-1px; }

.hoppa { position:absolute; left:8px; top:-60px; padding:10px 14px; background:var(--flotur); border-radius:8px; z-index:2; }
.hoppa:focus { top:8px; }

.skel { display:grid; grid-template-columns:232px minmax(0, 1fr); min-height:100dvh; }
.hlid { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:28px; padding:28px 16px 20px; background:var(--hlid); border-right:1px solid var(--lina); }
.ordmerki { padding:0 12px; font-size:1.25rem; font-weight:700; letter-spacing:-.02em; color:var(--texti); text-decoration:none; }
nav { display:flex; flex-direction:column; gap:2px; }
nav a { padding:9px 12px; border-radius:8px; color:var(--texti); text-decoration:none; font-weight:500; transition:background-color .15s ease-out; }
nav a:hover { background:color-mix(in oklab, var(--texti) 7%, transparent); }
nav a[aria-current] { background:var(--flotur); color:var(--litur); font-weight:650; box-shadow:var(--skuggi); }
.hlid-nedst { margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0 12px; font-size:.9375rem; }
.hlid-nedst form { margin:0; }
.nafn { color:var(--daufur); }

main { width:100%; max-width:1080px; padding:36px 40px 72px; }
.sidhaus { margin:0 0 24px; }
h1 { margin:0; font-size:1.625rem; line-height:1.2; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.sidhaus p { margin:4px 0 0; color:var(--daufur); }
h2 { margin:36px 0 12px; font-size:1.0625rem; line-height:1.3; font-weight:650; }
section:first-child > h2, .tvidalka h2:first-child, .sidhaus + section > h2 { margin-top:0; }
.tvidalka .skra > section + section > h2 { margin-top:32px; }
h3 { margin:0; font-size:1rem; font-weight:650; }
p { margin:0 0 12px; max-width:68ch; }
.auka, .hjalp, .tomt, .undir { color:var(--daufur); font-size:.9375rem; }
.hjalp { margin:0 0 14px; }
.rod + .hjalp { margin-top:-8px; }
div.flotur form { margin:4px 0 16px; }
.undir { margin-top:12px; }
.athuga li { grid-template-columns:minmax(0, 1fr); }
.manadaval { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.listi li.samtals { font-weight:600; }
.adgerdir { margin-top:28px; }

.flotur { background:var(--flotur); border:1px solid var(--lina); border-radius:12px; box-shadow:var(--skuggi); }
div.flotur, p.flotur, article.flotur { padding:20px; }
div.flotur > :last-child, article.flotur > :last-child { margin-bottom:0; }
.mjott { max-width:640px; }

.takki { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid transparent; border-radius:8px; background:var(--litur); color:var(--litur-a); font:inherit; font-weight:650; text-decoration:none; cursor:pointer; transition:background-color .15s ease-out, transform .1s ease-out; }
.takki:hover { background:color-mix(in oklab, var(--litur) 86%, var(--texti)); }
.takki:active { transform:translateY(1px); }
.takki.tonn { background:var(--litur-daufur); color:var(--litur); }
.takki.tonn:hover { background:color-mix(in oklab, var(--litur-daufur) 88%, var(--litur)); }
.takki:disabled { opacity:.5; cursor:not-allowed; }
button.hljod { padding:4px 0; border:0; background:none; color:var(--litur); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
button.hljod:hover { text-decoration-thickness:2px; }

.form { padding:20px; }
label { display:block; margin:0 0 6px; font-weight:600; font-size:.9375rem; }
input, select { display:block; width:100%; min-height:44px; margin:0 0 16px; padding:9px 12px; border:1px solid var(--jadar); border-radius:8px; background:var(--bg); color:inherit; font:inherit; transition:border-color .15s ease-out; }
input:hover, select:hover { border-color:var(--texti); }
input:focus-visible, select:focus-visible { outline:2px solid var(--litur); outline-offset:0; border-color:var(--litur); border-radius:8px; }
input::placeholder { color:var(--daufur); }
input[readonly] { border-style:dashed; color:var(--daufur); }
input[readonly]:hover { border-color:var(--jadar); }
/* minmax(0, …): dagsetningarreitur hefur innri lágmarksbreidd og ýtti annars út fyrir spjaldið. */
.rod { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:end; }
details { margin:0 0 18px; }
summary { color:var(--daufur); font-size:.9375rem; cursor:pointer; }
details[open] summary { margin-bottom:12px; }
details input { margin-bottom:0; }
input + .hjalp { margin-top:-8px; }
details input + .hjalp { margin-top:8px; }
details .takki { margin-bottom:4px; }
.form .takki { width:100%; }

.bod { padding:12px 14px; border-radius:8px; background:var(--litur-daufur); color:var(--texti); max-width:none; }
.bod.villa, .athugid { background:var(--rautt-daufur); }
.athugid { padding:12px 14px; border-radius:8px; max-width:none; margin-bottom:24px; }
.athugid b, .framyfir { color:var(--rautt); }

.ferli { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); background:var(--flotur); border:1px solid var(--lina); border-radius:12px; box-shadow:var(--skuggi); }
.ferli.eitt { grid-template-columns:minmax(0, 320px); }
.ferli li { position:relative; display:grid; gap:2px; padding:18px 20px; }
.ferli li + li { border-left:1px solid var(--lina); }
.ferli li + li::before { content:""; position:absolute; left:-6px; top:50%; width:10px; height:10px; margin-top:-5px; background:var(--flotur); border-top:1px solid var(--lina); border-right:1px solid var(--lina); transform:rotate(45deg); }
.ferli .heiti { color:var(--daufur); font-size:.9375rem; }
.ferli .tala { font-size:1.375rem; line-height:1.3; letter-spacing:-.01em; }

.listi, .faerslur { list-style:none; margin:0; padding:0; }
.listi li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px; padding:14px 20px; }
.listi li + li, .faerslur li + li { border-top:1px solid var(--lina); }
.listi div { display:grid; gap:1px; }
.h { text-align:right; justify-items:end; }
.faerslur li { display:grid; grid-template-columns:3.4rem minmax(0, 1fr) auto; gap:12px; padding:10px 0; align-items:baseline; overflow-wrap:anywhere; }
.faerslur.flotur li { grid-template-columns:3.4rem minmax(0, 1fr) auto 5.5rem; padding:10px 20px; }
.faerslur form { margin:0; }
.tafla td a { display:block; color:var(--litur); text-decoration:underline; text-underline-offset:3px; }
.strjuka { display:none; }
.faerslur .lysing { display:block; }
form:has(input[value="fast"]:checked) .verd-timar, form:has(input[value="timar"]:checked) .verd-fast { display:none; }
.efnisform:not(:has(input[value="akstur"]:checked)) .ef-akstur, .efnisform:has(input[value="akstur"]:checked) .ef-ekki-akstur,
.efnisform:not(:has(input[value="vara"]:checked)) .ef-vara, .efnisform:not(:has(input[value="kostnadur"]:checked)) .ef-kostnadur { display:none; }
.faerslur.drog li { grid-template-columns:minmax(0, 1fr) auto auto; }
.samtala { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 16px; margin:12px 0 16px; padding-top:12px; border-top:1px solid var(--lina); }
.samtala dt, .samtala dd { margin:0; }
.samtala dd { text-align:right; }
.dags { color:var(--daufur); }

.hopur { margin-bottom:16px; }
.hopur header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px; margin-bottom:6px; }
.hopur header p { margin:0; }
.hopur form { margin-top:14px; }
.hopur.ovist { border-color:var(--rautt); }
.val { display:flex; flex-wrap:wrap; gap:10px; }

.tvidalka { display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:40px; align-items:start; }
.skra { position:sticky; top:36px; }

.skref { margin:0 0 16px; padding-left:1.3em; }
.skref li { padding:2px 0; }
.skref li a { display:inline-flex; align-items:center; min-height:44px; padding:0 6px; }
.varakodi-leid .form .takki { margin-top:12px; }
.adeins-prenta { display:none; }
.kodi { display:inline-block; padding:12px 16px; border-radius:8px; background:var(--bg); border:1px solid var(--lina); font:650 1.25rem/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing:.06em; user-select:all; }
.daemi { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:.9375rem; }
/* QR-kóðinn hefur eigin hvítan grunn og jaðar, svo hann skannast líka í dökku útliti. */
.qr { display:block; width:100%; max-width:240px; height:auto; margin:0 0 16px; border-radius:8px; }
.leynd, .varakodar { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:1.0625rem; letter-spacing:.04em; }
.leynd { padding:10px 12px; border:1px dashed var(--jadar); border-radius:8px; user-select:all; overflow-wrap:anywhere; }
/* Einn dálkur: á tölvu og á blaði er hver varakóði heil lína. */
.varakodar { margin:0 0 16px; padding-left:2.2em; overflow-x:auto; }
.varakodar li { padding:4px 0; white-space:nowrap; user-select:all; }
/* Í síma er letrið jafnstórt og leiðbeiningarnar. Kóðinn brotnar þá á milli hópa (<wbr> eftir bandstrik), aldrei inni
   í hópi, svo ekkert falli út af skjánum. */
@media (max-width: 480px) {
  .varakodar { font-size:1rem; letter-spacing:0; padding-left:32px; }
  .varakodar li { white-space:normal; padding:6px 0; }
}
input.kodareitur[inputmode="numeric"] { font-size:1.25rem; letter-spacing:.12em; }
/* Summary heldur örinni (list-item) og nær 44 px með bili, svo sjáist að hægt sé að opna. */
.tveggja summary, .varakodi-leid summary { padding-block:11px; color:var(--litur); }
.tveggja button.hljod, p.undir > a:only-child { display:inline-flex; align-items:center; min-height:44px; }
@media (min-width: 861px) { .i-sima { display:none; } }
@media (max-width: 860px) { .a-tolvu { display:none; } }
@media print { .hlid, .hoppa, .adgerdir, .ekki-prenta { display:none; } .adeins-prenta { display:block; } body, main { background:#fff; color:#000; } }

.sjonlaust { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.smatakkar { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:4px 14px; }
.smatakkar form { margin:0; }
.smatakkar .takki { min-height:36px; padding:6px 12px; }
.faerslur.nylegt li { grid-template-columns:3.4rem minmax(0, 1fr) auto; }
.faerslur.nylegt .smatakkar { grid-column:2 / -1; justify-content:flex-start; font-size:.9375rem; }
.listi li.lokad { opacity:.65; }
/* Þjónustusaga nær yfir ár, svo dagurinn ber ártal og fær breiðari dálk en „20.10.“. */
.faerslur.flotur.saga li { grid-template-columns:auto minmax(0, 1fr) auto; }
.stokk { margin:-8px 0 20px; font-size:.9375rem; }
details.nyr { margin-top:20px; }
details.nyr > summary { display:inline-flex; list-style:none; color:var(--litur); }
details.nyr > summary::-webkit-details-marker { display:none; }
details.nyr[open] > summary { margin-bottom:16px; }
.faerslur.timabil li { grid-template-columns:minmax(0, 1fr) auto; }
.faerslur.timabil .smatakkar { grid-column:1 / -1; justify-content:flex-start; }
.saga .dags { white-space:nowrap; }
.hopur h4 { margin:14px 0 6px; font-size:.9375rem; font-weight:650; }
.stadur-haus { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 16px; }
.stadur-haus a { font-size:.9375rem; }

input[type="radio"], input[type="checkbox"] { display:inline-block; flex:none; width:1.25rem; height:1.25rem; min-height:0; margin:0 10px 0 0; accent-color:var(--litur); }
details.eyda { margin:0; }
details.eyda summary { list-style:none; color:var(--litur); font-size:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
details.eyda summary::-webkit-details-marker { display:none; }
details.eyda[open] { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
details.eyda[open] summary { margin:0; }
button.hljod.villa { color:var(--rautt); font-weight:650; }
fieldset { margin:0 0 16px; padding:0; border:0; min-width:0; }
legend { margin:0 0 6px; padding:0; font-weight:600; font-size:.9375rem; }
.valhnappar label, label.hak { display:flex; align-items:center; min-height:40px; font-weight:500; }
label.hak { margin:4px 0 16px; }

.klukka { margin-bottom:16px; }
details.klukka { padding:14px 20px; }
details.klukka[open] summary { margin-bottom:14px; }
details.klukka summary { color:var(--litur); font-weight:650; }
details.klukka input { margin-bottom:16px; }
.merki { margin:0 0 8px; font-weight:600; font-size:.9375rem; }
.utlitsval { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.klukka.gengur { border-color:var(--litur); }
.klukka-haus { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.punktur { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--litur); align-self:center; }
.klukka form { margin:0 0 10px; }
.klukka .takki { width:100%; }
.klukkubordi { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:14px 20px; }
.klukkubordi a { margin-left:auto; }

.vikuflakk { flex-direction:row; flex-wrap:wrap; gap:6px 20px; margin:0 0 16px; }
.vikuflakk a { padding:0; font-weight:500; color:var(--litur); }
.vikuflakk a:hover { background:none; text-decoration:underline; }
.vikuflakk .dauft { color:var(--daufur); }
/* Engin hliðarfylling: annars sést skrunað efni vinstra megin við kyrra dálkinn. */
div.tafla-rammi { overflow-x:auto; margin-bottom:8px; padding:4px 0; }
.tafla { width:100%; border-collapse:collapse; font-size:.9375rem; }
.tafla th, .tafla td { padding:10px 12px; text-align:right; border-bottom:1px solid var(--lina); white-space:nowrap; }
.tafla th:first-child { position:sticky; left:0; z-index:1; text-align:left; white-space:normal; min-width:11rem; background:var(--flotur); }
.tafla thead th { font-weight:600; color:var(--daufur); }
.tafla thead th span { display:block; font-weight:400; font-size:.8125rem; }
.tafla thead th.idag { color:var(--litur); }
.tafla tfoot th, .tafla tfoot td { border-bottom:0; font-weight:650; }
.vikudagar { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.vikudagar legend { grid-column:1 / -1; }
.vikudagar label { font-weight:500; font-size:.875rem; white-space:nowrap; }
.vikudagar input { margin:0; padding:9px 8px; text-align:center; }
.vikudagar input:disabled { opacity:.45; }
meter.stika { display:block; width:100%; max-width:240px; height:8px; margin-top:6px; }

body.uti { display:grid; place-items:center; min-height:100dvh; padding:24px 16px; }
body.uti main { max-width:380px; padding:0; }
body.uti .ordmerki { display:block; margin:0 0 28px; padding:0; font-size:1.5rem; }
body.uti h1 { margin-bottom:20px; font-size:1.25rem; }
body.uti .bod { margin-bottom:16px; }

@media (max-width: 860px) {
  .skel { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 1fr; }
  /* Ekki föst efst: valmyndin er þrjár línur í síma og tæki annars fjórðung skjásins við skrun. */
  .hlid { position:static; z-index:3; height:auto; flex-direction:row; align-items:center; gap:4px 12px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--lina); }
  .ordmerki { padding:0 6px 0 4px; font-size:1.0625rem; }
  .hlid { min-width:0; flex-wrap:wrap; }
  /* Öll valmyndin sést í síma: hún fer í eigin línu undir merkinu og brotnar frekar en að fela flipa. */
  nav { order:3; width:100%; flex-direction:row; flex-wrap:wrap; gap:2px 4px; }
  nav a { padding:8px 10px; white-space:nowrap; }
  .tafla th:first-child { min-width:7.5rem; }
  .vikudagar { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .faerslur.nylegt li { grid-template-columns:3.2rem minmax(0, 1fr) auto; padding:10px 16px; }
  .hlid-nedst { margin:0 0 0 auto; padding:0; }
  .hlid-nedst .ut, .nafn { display:none; }
  main { padding:24px 16px 56px; }
  .tvidalka { grid-template-columns:minmax(0, 1fr); gap:8px; }
  .skra { position:static; }
  .ferli { grid-template-columns:minmax(0, 1fr); }
  .ferli li { grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; padding:14px 16px; }
  .ferli li + li { border-left:0; border-top:1px solid var(--lina); }
  .ferli li + li::before { display:none; }
  .ferli .tala { font-size:1.125rem; text-align:right; }
  .ferli .auka { grid-column:1 / -1; }
  .listi li { padding:12px 16px; }
  .strjuka { display:block; margin-top:-8px; }
  .faerslur.drog li { grid-template-columns:minmax(0, 1fr) auto; gap:2px 12px; }
  .faerslur.drog li > span:first-child { grid-column:1 / -1; }
  /* Þumall: aðgerðir í listum fá hærri snertiflöt og meira bil, svo Eyða hittist ekki óvart. */
  .faerslur .smatakkar { gap:2px 18px; }
  .faerslur .smatakkar > a, .faerslur .smatakkar button.hljod, .faerslur details.eyda summary { display:inline-block; padding:10px 0; }
  /* Hnappur með löngum texta fer undir heitið, svo heitið fái alla breiddina. */
  .listi.stafla li { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .listi.stafla .h { text-align:left; justify-items:start; justify-content:flex-start; }
  div.flotur, p.flotur, article.flotur, .form { padding:16px; }
  .faerslur.flotur li { grid-template-columns:3.2rem minmax(0, 1fr) auto; padding:10px 16px; }
  .faerslur.flotur .h { grid-column:2 / -1; text-align:left; justify-items:start; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
