/* =====================================================================
   Starfsmannagátt Fasvik: eitt stílblað
   - Hlutlaus, kaldur grunnur (zinc/slate) og EINN áherslulitur: Fasvik-blár.
   - Fasvik-rauður (#E5232B) aðeins sem eldingarmerki og villuvísir (3px rönd).
   - Letur: Geist (fyrirsagnir og meginmál), Geist Mono (tölur, kóðar, gildi).
   - Hreyfing: aðeins transform og opacity, cubic-bezier(.16, 1, .3, 1).
   Ljóst/dökkt eftir kerfi, eða data-theme á <html> ("light" | "dark").
   ===================================================================== */

:root {
  --navy: #1A2E8C;            /* HSL 229° 69 % 32 % (< 80 % mettun) */
  --navy-deep: #14246E;
  --red: #E5232B;             /* AÐEINS elding + villuvísir */

  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --subtle: #EEF0F3;
  --ink: #14161C;
  --ink-2: #3A3F4B;
  --muted: #5F6573;
  --faint: #7D8494;
  --line: #E2E5EA;
  --line-soft: #ECEEF2;

  --accent: var(--navy);                 /* tenglar, virk staða, tákn */
  --accent-fill: var(--navy);            /* fylling hnappa */
  --accent-fill-hover: var(--navy-deep);
  --accent-tint: #ECEFF8;
  --accent-line: rgba(26, 46, 140, .28);
  --focus: rgba(26, 46, 140, .5);

  --tile-bg: #1A2E8C;
  --tile-muted: rgba(255, 255, 255, .76);
  --tile-line: rgba(255, 255, 255, .18);

  --shadow-sm: 0 1px 2px rgba(20, 26, 48, .05);
  --shadow-lift: 0 1px 2px rgba(20, 26, 48, .04), 0 20px 36px -22px rgba(26, 46, 140, .34);
  --glass: rgba(246, 247, 249, .8);
  --code-bg: #12151C;
  --sk-base: #E8EBEF;
  --sk-shine: rgba(255, 255, 255, .75);
  --logo-light: block;
  --logo-dark: none;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-head: var(--font-sans);
  --font-body: var(--font-sans);

  --r-sm: 8px;
  --radius: 12px;
  --r-lg: 20px;
  --gutter: 24px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);       /* „spring“-ferill fyrir innkomu og hover */
  --ease-out: cubic-bezier(.23, 1, .32, 1);  /* snöggt svar við snertingu */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D12;
    --surface: #12151C;
    --subtle: #191D26;
    --ink: #E8EAEF;
    --ink-2: #C3C8D2;
    --muted: #9097A6;
    --faint: #737A8A;
    --line: #232835;
    --line-soft: #1B1F29;
    --accent: #98A9E8;
    --accent-fill: #3347A8;
    --accent-fill-hover: #3D52B8;
    --accent-tint: #1A2140;
    --accent-line: rgba(152, 169, 232, .35);
    --focus: rgba(152, 169, 232, .6);
    --tile-bg: #1B2459;
    --shadow-sm: 0 1px 2px rgba(3, 5, 12, .5);
    --shadow-lift: 0 1px 2px rgba(3, 5, 12, .5), 0 22px 40px -22px rgba(3, 5, 12, .95);
    --glass: rgba(11, 13, 18, .78);
    --code-bg: #08090D;
    --sk-base: #161A22;
    --sk-shine: rgba(255, 255, 255, .05);
    --logo-light: none;
    --logo-dark: block;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D12;
  --surface: #12151C;
  --subtle: #191D26;
  --ink: #E8EAEF;
  --ink-2: #C3C8D2;
  --muted: #9097A6;
  --faint: #737A8A;
  --line: #232835;
  --line-soft: #1B1F29;
  --accent: #98A9E8;
  --accent-fill: #3347A8;
  --accent-fill-hover: #3D52B8;
  --accent-tint: #1A2140;
  --accent-line: rgba(152, 169, 232, .35);
  --focus: rgba(152, 169, 232, .6);
  --tile-bg: #1B2459;
  --shadow-sm: 0 1px 2px rgba(3, 5, 12, .5);
  --shadow-lift: 0 1px 2px rgba(3, 5, 12, .5), 0 22px 40px -22px rgba(3, 5, 12, .95);
  --glass: rgba(11, 13, 18, .78);
  --code-bg: #08090D;
  --sk-base: #161A22;
  --sk-shine: rgba(255, 255, 255, .05);
  --logo-light: none;
  --logo-dark: block;
  color-scheme: dark;
}

/* ---------- Grunnur ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--accent-fill-hover); } }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink); margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.mono, code, kbd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  background: var(--accent-fill); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 500; text-decoration: none;
  transform: translateY(-80px);
}
.skip-link:focus { transform: none; color: #fff; }

.ico { width: 24px; height: 24px; flex: none; display: block; }
.ico-sm { width: 18px; height: 18px; }
.bolt { width: 12px; height: 16px; color: var(--red); flex: none; display: inline-block; }
.bolt-xs { width: 9px; height: 12px; }
.bolt-sm { width: 10px; height: 14px; }

/* ---------- Efsta stika (gler með innri brún) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .1);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter);
  height: var(--topbar-h); display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-height: 44px; flex: none; }
.brand-logo { height: 22px; width: auto; }
.brand-logo--light { display: var(--logo-light); }
.brand-logo--dark { display: var(--logo-dark); }
.brand-divider { width: 1px; height: 20px; background: var(--line); }
.brand-name { font: 500 15px/1 var(--font-sans); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand-name { color: var(--accent); } }

.topnav { display: flex; gap: 28px; align-items: center; }
.topnav a {
  font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 22px 0 20px; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent;
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .topnav a:hover { color: var(--ink); } }
.topnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.usermenu { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--subtle); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 12px/1 var(--font-mono); letter-spacing: .02em;
}
.user-name { font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }

/* ---------- Flipastika neðst (sími) ---------- */
.tabbar { display: none; }

@media (max-width: 767px) {
  :root { --gutter: 16px; --topbar-h: 56px; }
  .topnav { display: none; }
  .user-name { display: none; }
  .brand { gap: 10px; }
  .brand-logo { height: 19px; }
  .brand-name { font-size: 14.5px; }
  .logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .logout { width: 44px; padding: 0; justify-content: center; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    position: relative; min-height: var(--tabbar-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
  }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a[aria-current="page"]::before {
    content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px;
    margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--accent);
  }
  .tabbar a:active { background: var(--subtle); }
  .tabbar a > * { transition: transform .12s var(--ease-out); }
  .tabbar a:active > * { transform: scale(.95); }
  .tabbar a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 359px) {
  .brand-divider, .brand-name { display: none; }
}

/* ---------- Hnappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: 500 15px/1.2 var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--ink); background: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
              transform .16s var(--ease-out), translate .6s var(--ease);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 22px; font-size: 15.5px; border-radius: 12px; }
.btn-primary, .btn-red {
  background: var(--accent-fill); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-red:hover { background: var(--accent-fill-hover); color: #fff; }
  .btn-primary:hover .ico:last-child, .btn-red:hover .ico:last-child { transform: translateX(2px); }
}
.btn-inverse { background: #F6F7F9; color: #14246E; box-shadow: inset 0 -1px 0 rgba(20, 36, 110, .12); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--accent-line); color: var(--accent); } }
.btn[aria-disabled="true"] { background: var(--subtle); color: var(--muted); border-color: var(--line); box-shadow: none; pointer-events: none; }

.icon-btn {
  position: relative;
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 10px; color: var(--faint); text-decoration: none; background: transparent; border: 0; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .14s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.icon-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--subtle); color: var(--accent); } }
.icon-btn .ico { width: 20px; height: 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0;
  padding: 7px 10px; border-radius: 999px;
}
.badge-live { background: var(--accent-tint); color: var(--accent); }
.badge-coming { background: var(--subtle); color: var(--muted); }

/* Eina sívirka smáhreyfingin: „andandi“ stöðupunktur á forritum í notkun.
   Einangruð í gervieiningu (transform + opacity), engin áhrif á útlit. */
.live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  opacity: 0; pointer-events: none;
  animation: breathe 2.8s var(--ease) infinite;
}
@keyframes breathe {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

.meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.meta .mono { font-size: 13px; color: var(--ink-2); }

/* ---------- Síður og haus ---------- */
.page { flex: 1 0 auto; padding-bottom: 96px; }
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0;
  font: 400 12.5px/1.3 var(--font-mono); letter-spacing: 0; color: var(--muted);
}
.eyebrow .sep { color: var(--faint); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0 8px; }
.hero h1 {
  margin-top: 18px; max-width: 22ch;
  font-size: clamp(28px, 1.6vw + 20px, 40px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600;
}
.h1-name { color: var(--muted); }
.page-head { padding: 48px 0 8px; max-width: 760px; }
.page-head h1 { margin-top: 16px; font-size: clamp(28px, 1.4vw + 20px, 38px); line-height: 1.05; letter-spacing: -.03em; }
.lead { margin: 14px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--muted); }

.hero-aside { display: none; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 7vw, 120px); align-items: end; padding: 88px 0 16px; }
  .hero-aside { display: block; padding-bottom: 34px; }
  .page-head { padding-top: 72px; }
}

/* Lýsigögn í línum (dl): engin spjöld, aðeins 1px línur */
.stat-list { margin: 0; border-top: 1px solid var(--line); }
.stat-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stat-list dt { font-size: 14px; color: var(--muted); }
.stat-list dd { margin: 0; text-align: right; font: 500 13.5px/1.4 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

.crumbs { padding-top: 16px; }
.crumbs a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease), transform .14s var(--ease-out);
}
.crumbs a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--accent); } }

/* ---------- Form: merki fyrir ofan, hjálpartexti og villa fyrir neðan ---------- */
.field { display: grid; gap: 8px; margin-top: 32px; max-width: 620px; }
.field-label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.field-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.field-error { margin: 0; padding-left: 10px; border-left: 3px solid var(--red); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.field-error:empty { display: none; }

/* ---------- Leit ---------- */
.search { position: relative; }
.search-ico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search input {
  width: 100%; height: 52px; padding: 0 52px 0 46px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  font: 400 16px/1 var(--font-sans);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input::placeholder { color: var(--faint); opacity: 1; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); transition: none; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  min-width: 26px; height: 26px; display: grid; place-items: center; padding: 0 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  font: 500 12.5px/1 var(--font-mono); color: var(--muted); background: var(--subtle);
}
.search:focus-within .search-kbd, .search.has-value .search-kbd { display: none; }
@media (hover: none) { .search-kbd { display: none; } }

/* ---------- Hlutar ---------- */
.section { margin-top: 72px; }
.section:first-child { margin-top: 40px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head h2, .split-head h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; }
.count { font: 400 13px/1 var(--font-mono); color: var(--faint); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.more-link, .section-head a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--accent);
  transition: transform .14s var(--ease-out);
}
.more-link:active { transform: scale(.97); }
.more-link .ico { width: 16px; height: 16px; transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .more-link:hover .ico { transform: translateX(3px); } }

/* Ritstjórnarleg tvískipting: fyrirsögn vinstra megin, línulisti hægra megin */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.split-head p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 40ch; }
.split-head .more-link { margin-top: 4px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .split-head { position: sticky; top: calc(var(--topbar-h) + 24px); align-self: start; padding-top: 18px; }
}

/* ---------- Bento: forrit í notkun ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; grid-auto-flow: row dense; }
  .tile--major, .sk-major { grid-column: span 7; }
  .tile--minor, .sk-minor { grid-column: span 5; }
  .toolpanel, .sk-panel { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento.has-aside .tile--major, .bento.has-aside .sk-major { grid-row: span 2; }
  .toolpanel, .sk-panel { grid-column: span 5; }
  .toolpanel--full { grid-column: 1 / -1; }
}

.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 28px; border-radius: var(--r-lg);
  transition: transform .5s var(--ease);
}
/* Skuggi í gervieiningu: hover breytir aðeins opacity, aldrei box-shadow beint */
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .5s var(--ease);
}
.tile--major {
  min-height: 400px; color: #fff;
  background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M10.5 0 L2 13 L7.5 13 L6 24 L16 9.5 L10.5 9.5 Z' fill='%23ffffff' fill-opacity='.06'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -48px top -36px; background-size: auto 135%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-lift);
}
.tile--minor { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--accent-tint); color: var(--accent);
}
.tile--major .badge-live { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tile--major .tile-icon { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.tile-title { margin: auto 0 0; padding-top: 56px; font-size: clamp(26px, 1.4vw + 16px, 34px); line-height: 1.04; letter-spacing: -.03em; }
.tile--major .tile-title { color: #fff; }
.tile--minor .tile-title { padding-top: 32px; font-size: 22px; line-height: 1.1; letter-spacing: -.025em; }
.tile-desc { margin: 12px 0 0; max-width: 54ch; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.tile--major .tile-desc { color: var(--tile-muted); }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin-top: 28px; }
.tile .btn { pointer-events: none; }   /* skrautlegur: smellur fer í .card-link */
.tile-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 10px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .14s var(--ease-out);
}
.tile-link .ico { width: 18px; height: 18px; }
.tile-link:active { transform: scale(.97); }
.tile--major .tile-link { color: rgba(255, 255, 255, .86); }
@media (hover: hover) and (pointer: fine) {
  .tile-link:hover { background: var(--subtle); color: var(--accent); }
  .tile--major .tile-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .tile:hover { transform: translateY(-3px); }
  .tile:hover::after { opacity: 1; }
  .tile:hover .btn .ico { transform: translateX(3px); }
  .tile--minor:hover .btn-primary { background: var(--accent-fill-hover); }
}
.tile:active { transform: scale(.99); transition-duration: .16s; }
.tile:active .btn { transform: scale(.97); }

/* Búnaður: tækjaheiti í Geist Mono */
.equip { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.equip li { font: 400 12.5px/1 var(--font-mono); padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.tile--major .equip li { border-color: var(--tile-line); color: rgba(255, 255, 255, .9); }

/* Útvíkkaður tengill: titill nær yfir allt spjaldið/röðina */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .card-link:hover { color: inherit; } }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.tile--major .card-link:focus-visible::after { outline-color: #fff; }

/* Verkfæri í bento: flokkað með línum, ekki kassi */
.toolpanel { display: flex; flex-direction: column; min-width: 0; }
.toolpanel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 4px 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); }

/* ---------- Línulistar (skjöl, tenglar, leiðbeiningar, verkfæri) ---------- */
.list { border-top: 1px solid var(--line); min-width: 0; }
.row {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px;
  min-height: 68px; padding: 14px 8px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease), transform .16s var(--ease-out);
}
.row-icon { display: grid; place-items: center; color: var(--accent); }
.row-icon .ico { width: 22px; height: 22px; }
.row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { font-weight: 500; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; }
.row-desc { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 65ch; }
.row-meta { font: 400 12.5px/1.3 var(--font-mono); color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-go { width: 18px; height: 18px; color: var(--faint); flex: none; transition: transform .4s var(--ease), color .2s var(--ease); }
.row-info { margin: -10px -8px -10px 0; }
.row:active { background: var(--subtle); transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: var(--surface); color: var(--ink); }
  .row:hover .row-go { color: var(--accent); transform: translateX(3px); }
  .row:hover .row-title { color: var(--accent); }
}
.row.is-coming .row-icon { color: var(--faint); }
.row.is-coming .row-title { color: var(--ink-2); }
@media (max-width: 767px) {
  .row { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; padding: 14px 4px; }
  .row-icon { margin-top: 1px; }
  .row-meta { grid-column: 2; grid-row: 2; margin-top: 6px; white-space: normal; overflow-wrap: anywhere; }
  .row-go, .row-info { grid-column: 3; grid-row: 1; }
  .row-go { margin-top: 2px; }
}

/* ---------- Ástand: hleðsla (skeleton), villa, tómt ---------- */
.skeleton { display: block; }
.sk { position: relative; overflow: hidden; display: block; background: var(--sk-base); border-radius: var(--r-sm); }
.sk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sk-shine), transparent);
  transform: translateX(-100%);
  animation: sk-shimmer 1.6s var(--ease) infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
.sk-heading { width: 220px; max-width: 60%; height: 18px; margin: 46px 0 22px; }
.sk-major { min-height: 300px; border-radius: var(--r-lg); }
.sk-minor { min-height: 190px; border-radius: var(--r-lg); }
.sk-panel { display: block; }
.sk-label { width: 90px; height: 12px; margin: 8px 4px 16px; }
.sk-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 8px; border-top: 1px solid var(--line); }
.sk-dot { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.sk-lines { display: grid; gap: 8px; flex: 1; }
.sk-line { height: 12px; width: 70%; }
.sk-line--short { width: 45%; }
.sk-split { margin-top: 40px; }
.sk-split .sk-heading { margin: 18px 0 0; }
@media (min-width: 1024px) { .sk-major { min-height: 400px; } }

.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
  margin: 40px 0; padding: 20px 22px; max-width: 680px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.notice > :not(.notice-ico) { grid-column: 2; }
.notice-ico { grid-row: 1 / span 3; width: 22px; height: 22px; color: var(--muted); margin-top: 1px; }
.notice--error { border-left: 3px solid var(--red); }
.notice-title { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.notice-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.empty { margin: 40px 0; padding: 20px 0; color: var(--muted); border-top: 1px solid var(--line); max-width: 640px; }

.empty-state {
  display: grid; justify-items: start; gap: 10px;
  margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--line); max-width: 640px;
}
.empty-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--subtle); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.empty-icon .ico { width: 20px; height: 20px; }
.empty-title { margin: 8px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.empty-text { margin: 0; color: var(--muted); max-width: 56ch; font-size: 15px; }
.empty-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip-btn {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; color: var(--ink-2); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .14s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.chip-btn:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .chip-btn:hover { border-color: var(--accent-line); color: var(--accent); } }

/* ---------- Um forrit (app.php) ---------- */
.app-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 24px 0 48px; }
.app-kicker { display: flex; align-items: center; gap: 14px; }
.app-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); flex: none; }
.app-icon .ico { width: 26px; height: 26px; }
.app-hero.is-coming .app-icon { background: var(--subtle); color: var(--muted); }
.app-hero h1 { margin-top: 24px; font-size: clamp(28px, 1.6vw + 20px, 40px); line-height: 1.04; letter-spacing: -.03em; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (min-width: 1024px) {
  .app-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 7vw, 120px); align-items: end; padding-top: 40px; }
}
@media (max-width: 559px) { .app-actions .btn-lg { flex: 1 1 100%; } }
.facts { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-top: 32px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .facts { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 7vw, 120px); } }
.facts h2 { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin: 0 0 14px; }
.facts p { margin: 0 0 1em; font-size: 17px; line-height: 1.7; max-width: 65ch; color: var(--ink-2); }
.facts-side > * + * { margin-top: 32px; }
.facts .equip { margin-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li { font-size: 13px; line-height: 1; padding: 7px 10px; border-radius: 999px; background: var(--subtle); color: var(--muted); white-space: nowrap; }

/* ---------- Leiðbeiningar ---------- */
.guide-head { padding-top: 8px; max-width: 820px; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 24px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.task-progress { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.task-progress .txt { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.task-progress .bar { width: 96px; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.task-progress .bar span { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: inherit; transform: translateX(-100%); transition: transform .4s var(--ease); }
.task-progress button {
  background: none; border: 0; padding: 8px 4px; min-height: 40px; color: var(--accent); font-weight: 500; font-size: 14px; cursor: pointer;
  transition: transform .14s var(--ease-out);
}
.task-progress button:active { transform: scale(.96); }
@media (max-width: 559px) { .guide-actions { margin-left: 0; width: 100%; } .guide-actions .btn { flex: 1; } }

/* Ritstjórnardálkur vinstra megin, efnisyfirlit límt hægra megin */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.toc details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc summary {
  list-style: none; cursor: pointer; min-height: 48px; padding: 12px 4px; display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font: 400 18px/1 var(--font-mono); color: var(--muted); }
.toc details[open] summary::after { content: "\2013"; }
.toc ol { list-style: none; margin: 0; padding: 0 0 10px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: 12px; padding: 8px 4px 8px 12px; min-height: 40px; align-items: baseline;
  font-size: 14.5px; line-height: 1.4; color: var(--muted); text-decoration: none;
  box-shadow: inset 2px 0 0 transparent;
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.toc a::before { content: counter(toc, decimal-leading-zero); font: 400 12px/1 var(--font-mono); color: var(--faint); min-width: 18px; }
.toc a.is-active { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--accent); } }
@media (min-width: 1100px) {
  .guide-layout.has-toc { grid-template-columns: minmax(0, 68ch) minmax(200px, 260px); grid-template-areas: "prose toc"; column-gap: clamp(56px, 7vw, 112px); }
  .guide-layout.has-toc .prose { grid-area: prose; }
  .guide-layout.has-toc .toc { grid-area: toc; }
  .toc { position: sticky; top: calc(var(--topbar-h) + 24px); align-self: start; max-height: calc(100vh - var(--topbar-h) - 48px); max-height: calc(100dvh - var(--topbar-h) - 48px); overflow: auto; overscroll-behavior: contain; }
  .toc details { border: 0; }
  .toc summary { padding: 0 4px 12px; min-height: 0; pointer-events: none; font-size: 13.5px; color: var(--muted); }
  .toc summary::after { display: none; }
  .toc ol { border-left: 1px solid var(--line); }
}

/* Lesmál (Markdown) */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.72; color: var(--ink-2); min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 2.4em 0 .7em; padding-top: 1.2em; border-top: 1px solid var(--line);
  font-size: clamp(22px, 1vw + 16px, 26px); line-height: 1.15; letter-spacing: -.025em; color: var(--ink);
}
.prose > h2:first-child { border-top: 0; padding-top: 0; }
.prose h3 { margin: 1.9em 0 .5em; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.prose h4 { margin: 1.6em 0 .4em; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--topbar-h) + 20px); }
.prose p { margin: 0 0 1.05em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
@media (hover: hover) and (pointer: fine) { .prose a:hover { text-decoration-color: currentColor; } }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: .35em 0; padding-left: .2em; }
.prose li > ul, .prose li > ol { margin: .35em 0 .2em; }
.prose ul > li::marker { color: var(--faint); }
.prose ol > li::marker { font-family: var(--font-mono); font-size: .88em; color: var(--muted); }
/* Gátlisti: línur í stað kassa */
.prose ul.tasklist { list-style: none; padding-left: 0; margin: 0 0 1.4em; border-top: 1px solid var(--line); }
.prose li.task { margin: 0; padding: 0; }
.prose li.task > label {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 13px 6px; min-height: 52px; border-bottom: 1px solid var(--line);
  line-height: 1.5; color: var(--ink);
  transition: background-color .2s var(--ease), transform .14s var(--ease-out);
}
.prose li.task > label:active { transform: scale(.99); background: var(--subtle); }
@media (hover: hover) and (pointer: fine) { .prose li.task > label:hover { background: var(--surface); } }
.prose li.task input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent-fill); cursor: pointer; }
.prose li.task input:checked + span { color: var(--muted); }
.prose li.task > ul, .prose li.task > ol { margin: 6px 0 10px 40px; }
.prose code { font-size: .86em; line-height: 1.4; background: var(--subtle); border: 1px solid var(--line-soft); padding: .12em .38em; border-radius: 5px; overflow-wrap: anywhere; color: var(--ink); }
.prose pre { margin: 0 0 1.3em; padding: 16px 18px; border-radius: 10px; background: var(--code-bg); color: #E6E8EE; overflow-x: auto; font: 14px/1.6 var(--font-mono); }
.prose pre code { background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.prose blockquote { margin: 0 0 1.2em; padding: 2px 0 2px 18px; border-left: 2px solid var(--line); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); vertical-align: middle; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.prose del { color: var(--muted); }

.table-wrap { margin: 0 0 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.prose th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.prose td { padding: 11px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.prose tbody tr:first-child td { border-top: 0; }
.prose td:first-child { font-weight: 500; color: var(--ink); }
/* Miðjaðir/hægrijafnaðir dálkar eru tölur (skref, gildi): Geist Mono */
.prose td[style*="center"], .prose td[style*="right"] { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .prose tbody tr:hover td { background: var(--surface); } }

.callout { margin: 0 0 1.4em; padding: 14px 18px 4px; border-radius: 0 10px 10px 0; border-left: 2px solid var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); }
.callout-title { display: flex; align-items: center; gap: 8px; margin: 0 0 .4em !important; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--accent); }
.callout-title::before {
  content: ""; width: 9px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M10.5 0 L2 13 L7.5 13 L6 24 L16 9.5 L10.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M10.5 0 L2 13 L7.5 13 L6 24 L16 9.5 L10.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.callout p { margin: 0 0 .8em; }
.callout ul, .callout ol { margin-bottom: .8em; }
/* Viðvaranir: sterkari rönd í bleklit; eldingarmerkið (vörumerki) er rautt */
.callout-warning, .callout-caution { border-left-color: var(--ink); background: var(--subtle); }
.callout-warning .callout-title, .callout-caution .callout-title { color: var(--ink); }
.callout-warning .callout-title::before, .callout-caution .callout-title::before { background: var(--red); }

/* ---------- Fótur ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 24px 0; margin-top: auto; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.foot-brand { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.foot-brand .sep { color: var(--faint); }
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.theme-switch button {
  border: 0; background: none; cursor: pointer; min-height: 36px; padding: 0 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.theme-switch button:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .theme-switch button:hover { color: var(--ink); } }
.theme-switch button[aria-checked="true"] { background: var(--subtle); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Innskráning (partials/login-ui.html) ---------- */
.login-shell {
  min-height: 100vh; min-height: 100dvh; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}
.login-brand {
  display: flex; flex-direction: column; gap: 28px;
  padding: calc(24px + env(safe-area-inset-top)) 16px 28px;
  color: #fff; background-color: var(--tile-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M10.5 0 L2 13 L7.5 13 L6 24 L16 9.5 L10.5 9.5 Z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right -10vmax top -6vmax; background-size: auto 130%;
}
.login-logo { height: 26px; width: auto; align-self: flex-start; }
.login-logo--light { display: var(--logo-light); }
.login-logo--dark { display: var(--logo-dark); }
.login-logo--brand { display: block; }
.login-eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 12.5px/1.2 var(--font-mono); color: rgba(255, 255, 255, .78); }
.login-eyebrow svg { width: 10px; height: 14px; color: var(--red); }
.login-display { margin: 14px 0 0; max-width: 18ch; font-size: clamp(24px, 2vw + 14px, 38px); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.login-points { display: none; list-style: none; margin: 40px 0 0; padding: 0; max-width: 46ch; border-top: 1px solid var(--tile-line); }
.login-points li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--tile-line); }
.login-point-title { font-weight: 500; color: #fff; }
.login-point-text { font-size: 14.5px; color: var(--tile-muted); }
.login-foot { display: none; margin: auto 0 0; font: 400 12.5px/1.4 var(--font-mono); color: rgba(255, 255, 255, .6); }

.login-main { display: flex; flex-direction: column; justify-content: center; padding: 28px 16px calc(32px + env(safe-area-inset-bottom)); }
.login-card {
  width: 100%; max-width: 420px; padding: 28px 22px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-lift);
}
.login-title { margin: 0; font-size: clamp(24px, 1vw + 18px, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; color: var(--ink); }
.login-lead { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.login-error { margin: 20px 0 0; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--subtle); border-radius: 0 8px 8px 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.login-error:empty { display: none; }
.login-btn {
  margin-top: 28px; width: 100%; min-height: 54px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 12px; background: var(--accent-fill); color: #fff; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-sm);
  font: 500 16px/1.2 var(--font-sans); transition: background-color .2s var(--ease), transform .14s var(--ease-out); touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
@media (hover: hover) and (pointer: fine) { .login-btn:hover { background: var(--accent-fill-hover); color: #fff; } }
.login-btn:active { transform: scale(.97); }
.login-btn svg { width: 20px; height: 20px; flex: none; background: #fff; padding: 2px; border-radius: 3px; box-sizing: content-box; }
.login-note { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.login-note svg { width: 16px; height: 16px; flex: none; }
.login-note .mono { font-size: 13px; color: var(--ink-2); }

@media (min-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .login-brand { padding: 40px clamp(32px, 5vw, 80px); gap: 0; }
  .login-brand-body { margin: auto 0; padding: 48px 0; }
  .login-points { display: block; }
  .login-foot { display: block; }
  .login-main { padding: 40px clamp(32px, 5vw, 80px); align-items: flex-start; }
  .login-card { padding: 36px 32px 30px; }
}

/* ---------- Hreyfing ---------- */
/* Innkoma á forsíðu: einu sinni í lotu (portal.js setur .portal-enter og --i).
   Foss með 60 ms millibili, aðeins transform + opacity. */
@keyframes portal-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes portal-fade { from { opacity: 0; } }
.portal-enter .js-item, .portal-enter .js-reveal { animation: portal-in .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* Leit: færslur sem birtast aftur dofna inn (@starting-style; hunsað í eldri vöfrum) */
.is-filtering .js-item {
  transition-property: opacity, transform, background-color, color;
  transition-duration: .45s, .45s, .2s, .2s;
  transition-timing-function: var(--ease);
}
@starting-style {
  .is-filtering .js-item { opacity: 0; transform: translateY(6px); }
}

/* Segulhnappur (portal.js): færist að bendli með CSS `translate`, óháð transform */
.js-magnetic { will-change: translate; }

/* Minni hreyfing: engin færsla, engin sívirk hreyfing; ógegnsæi heldur sér */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile:hover, .tile:hover .btn .ico, .row:hover .row-go, .more-link:hover .ico,
  .btn-primary:hover .ico:last-child, .btn-red:hover .ico:last-child { transform: none; }
  .portal-enter .js-item, .portal-enter .js-reveal { animation-name: portal-fade; }
  .live-dot::after { animation: none; }
  .sk::after { animation: none; transform: none; opacity: 0; }
  .is-filtering .js-item { transition-property: opacity, background-color, color; }
  @starting-style { .is-filtering .js-item { transform: none; } }
  .js-magnetic { translate: none !important; will-change: auto; }
}

/* ---------- Prentun (leiðbeiningar) ---------- */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --subtle: #F2F3F5; --ink: #111318; --ink-2: #22252C; --muted: #45494F; --faint: #6A6E76;
    --line: #CCCED3; --line-soft: #DDDFE3; --accent: #1A2E8C; --accent-fill: #1A2E8C; --accent-tint: #ECEFF8;
    --logo-light: block; --logo-dark: none; color-scheme: light;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #111318; padding: 0 !important; font-size: 11pt; display: block; }
  .topbar, .tabbar, .site-foot, .toc, .crumbs, .guide-actions, .skip-link, .field, .task-progress button, .row-info { display: none !important; }
  .page { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .page-head { padding: 0 0 12pt; max-width: none; }
  .page-head h1 { font-size: 22pt; }
  .lead { font-size: 12pt; }
  .guide-layout { display: block; border-top: 1px solid #999; padding-top: 6pt; margin-top: 8pt; }
  .prose { max-width: none; font-size: 11pt; line-height: 1.5; color: #111318; }
  .prose h2 { font-size: 15pt; margin-top: 18pt; padding-top: 8pt; break-after: avoid; page-break-after: avoid; }
  .prose h3 { font-size: 12.5pt; break-after: avoid; page-break-after: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #45494F; word-break: break-all; }
  .prose li.task > label { border: 0; padding: 2pt 0; min-height: 0; background: none !important; }
  .prose li.task input { width: 13pt; height: 13pt; }
  .table-wrap, .callout, .prose pre, .prose li.task, .prose figure, .prose tr { break-inside: avoid; page-break-inside: avoid; }
  .table-wrap { overflow: visible; border-color: #999; }
  .callout, .prose th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prose pre { background: #F2F3F5; color: #111318; border: 1px solid #CCCED3; white-space: pre-wrap; }
}

/* Stjórnun */
.tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }  /* 3 eða 4 flipar */
.adm { min-width: 0; }
.adm-kv { margin: 0; border-top: 1px solid var(--line); min-width: 0; }
.adm-kv > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 12px 8px; border-bottom: 1px solid var(--line); align-items: baseline; }
.adm-kv dt { font-size: 14px; color: var(--muted); }
.adm-kv dd { margin: 0; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.adm-kv a, .adm-row a { color: var(--accent); text-underline-offset: 3px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.adm-actions .btn[disabled] { opacity: .6; cursor: progress; }
.adm-msg { margin: 14px 0 0; }
.adm-msg.is-ok { padding-left: 10px; border-left: 3px solid var(--accent); font-size: 13.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.adm-msg:empty { display: none; }
.adm-sub { margin: 32px 0 0; padding: 0 8px 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.adm-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; min-height: 60px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.adm-row .row-icon { color: var(--faint); }
.adm-row .row-title { font: 400 14.5px/1.35 var(--font-mono); }
.adm-body { min-width: 0; max-width: 68ch; }
.adm-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.adm-details { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adm-details summary { padding: 14px 8px; min-height: 44px; cursor: pointer; font-weight: 500; color: var(--accent); }
.adm-details .prose { padding: 4px 8px 16px; font-size: 15px; }
@media (max-width: 599px) {
  .adm-kv > div { grid-template-columns: minmax(0, 1fr); }
  .adm-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .adm-row .row-meta { grid-column: 2; grid-row: 2; margin-top: 4px; white-space: normal; }
  .adm-row > a { grid-column: 3; grid-row: 1; }
}