/* ══════════════════════════════════════════════════════════════════════
   Fit haust 2026 — Sjóðastýring Kviku

   Litir: dökkur grunnur úr Kviku-pallettunni (kvikaeignastyring.is).
   Gagnalitirnir þrír eru staðfestir með litaprófara dataviz-leiðbeininganna
   á móti fletinum #0f1226 — CVD ΔE 9.4, venjuleg sjón ΔE 20.9, allt yfir
   3:1 birtuskilum. Ekki skipta þeim út án þess að keyra prófarann aftur.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Fletir — Kviku ink #08091d er grunnurinn */
  --plane:      #08091d;
  --surface-1:  #0f1226;
  --surface-2:  #161a33;
  --surface-3:  #1e2340;

  /* Blek */
  --ink:        #f6f8f9;
  --ink-2:      #a9b4c6;
  --ink-muted:  #78839a;

  /* Línur */
  --line:       #232845;
  --line-soft:  #1a1e38;
  --baseline:   #2e3454;

  /* Gögn — staðfest sett */
  --move:       #3987e5;   /* hreyfing  */
  --diet:       #199e70;   /* mataræði  */
  --bonus:      #d95926;   /* bónus     */

  /* Ljósari græni fyrir TEXTA. #199e70 stenst 5,43:1 en er daufur; þessi
     gefur 7,82:1 og situr milli --ink-2 og --ink. Merki nota --diet áfram. */
  --diet-text:  #2dbe8f;

  /* Status — vísvitandi aðgreint frá gagnalitunum þremur svo það
     þykist ekki vera sería. Notað á ✕ í „Hvað má ekki?". */
  --forbidden:  #d03b3b;

  /* Raðbundinn blár stigi fyrir hitakortið (ein litblæ, ljósari = meira) */
  --seq-0:      #141833;
  --seq-1:      #1d3d68;
  --seq-2:      #2a6cb5;
  --seq-3:      #3987e5;

  /* Verðlaunasæti — skraut, ekki gögn */
  --gold:       #d9a441;
  --silver:     #b8bfc9;
  --bronze:     #b0764a;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.28);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* .gate og .panel setja display:grid og myndu annars yfirskrifa [hidden]. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  /* Hógvær ljómi í Kviku-bláu efst, svo flöturinn sé ekki alveg flatur */
  background-image:
    radial-gradient(1100px 520px at 50% -12%, rgba(57,135,229,.13), transparent 62%),
    radial-gradient(700px 380px at 88% 4%, rgba(25,158,112,.06), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

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

.gate__card {
  width: min(100%, 380px);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 30px 30px;
  text-align: center;
}

.gate__mark {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--surface-3);
  color: var(--move);
}

.gate__title { font-size: 21px; }
.gate__sub {
  margin: 5px 0 26px;
  color: var(--ink-muted);
  font-size: 13px;
}

.field { display: block; text-align: left; margin-bottom: 16px; }
.field__label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 7px;
  font-weight: 500;
}

input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s;
}
input[type="password"]:focus { border-color: var(--move); }
input::placeholder { color: #5a6379; }

.gate__error {
  margin: 14px 0 0;
  font-size: 13px;
  color: #ef8a7d;
}

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

.btn {
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 10px 16px;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:disabled { opacity: .55; cursor: default; }

.btn--primary {
  width: 100%;
  background: var(--move);
  color: #06182f;
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) { background: #4f97ea; }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
}
.btn--ghost:hover { border-color: var(--baseline); color: var(--ink); }

.btn--sm { padding: 6px 12px; font-size: 13px; }

:focus-visible { outline: 2px solid var(--move); outline-offset: 2px; }

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px clamp(14px, 4vw, 34px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--move);
  flex: none;
}
.topbar__brand strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.topbar__brand small { display: block; font-size: 12px; color: var(--ink-muted); }

.topbar__right { display: flex; align-items: center; gap: 14px; }
.countdown { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.countdown b { color: var(--ink); font-weight: 600; }

/* ─────────────────────────────────────────────────── flipar */

.tabs {
  display: flex;
  gap: 3px;
  padding: 0 clamp(14px, 4vw, 34px);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-muted);
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s, border-color .14s;
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--move); }

/* ─────────────────────────────────────────────────── grind */

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) clamp(14px, 4vw, 34px) 60px;
}

.panel { display: grid; gap: 18px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card__head h2 { font-size: 15px; }
.card__note { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

/* ─────────────────────────────────────────────────── hetjutala */

.hero {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hero__avatar {
  width: clamp(66px, 12vw, 88px);
  height: clamp(66px, 12vw, 88px);
  flex: none;
}

.hero__body { min-width: 0; }
.hero__eyebrow {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  margin-bottom: 3px;
}
.hero__name {
  font-size: clamp(19px, 3.4vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__figure {
  font-size: clamp(44px, 8.5vw, 62px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-top: 4px;
}
.hero__figure span {
  font-size: .32em;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 8px;
}
.hero__lead { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.hero__empty { color: var(--ink-muted); font-size: 14px; }

/* ─────────────────────────────────────────────────── lykiltölur */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.kpi {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
}
.kpi__label { font-size: 12px; color: var(--ink-muted); }
.kpi__value {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.025em;
  margin-top: 3px;
}
.kpi__value small { font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-left: 4px; letter-spacing: 0; }
.kpi__foot { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }

/* ─────────────────────────────────────────────────── myndir */

.avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  flex: none;
  display: grid;
  place-items: center;
}
.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.avatar__initials {
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
  font-size: .38em;
}
.avatar--ring { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--rank-color, transparent); }

/* ─────────────────────────────────────────────────── stigatafla */

.table-scroll { overflow-x: auto; }

.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.board th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.board td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.board tbody tr:last-child td { border-bottom: 0; }
.board tbody tr:hover { background: rgba(255,255,255,.022); }

.board .num { text-align: right; font-variant-numeric: tabular-nums; }
.board__rank { width: 40px; }

.rank {
  display: inline-grid;
  place-items: center;
  width: 23px; height: 23px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  color: var(--ink-2);
}
.rank--1 { background: rgba(217,164,65,.16); color: var(--gold); }
.rank--2 { background: rgba(184,191,201,.14); color: var(--silver); }
.rank--3 { background: rgba(176,118,74,.16); color: var(--bronze); }

.who { display: flex; align-items: center; gap: 11px; min-width: 165px; }
.who .avatar { width: 34px; height: 34px; font-size: 34px; }
.who__name { font-weight: 500; white-space: nowrap; }
.who__sub { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }

/* Búin/n að hreyfa sig í dag */
.who__name--today { color: var(--diet-text); font-weight: 600; }
.who__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--diet);
  margin-right: 7px;
  vertical-align: middle;
}

.board__total { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.col-trend { width: 108px; }
.col-meter { width: 96px; }

/* mælir — ófyllti hlutinn er ljósari þrep sama stiga */
.meter {
  height: 7px;
  border-radius: 4px;
  background: var(--seq-0);
  overflow: hidden;
  min-width: 52px;
}
.meter__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--move);
}
.meter__row { display: flex; align-items: center; gap: 9px; }
.meter__pct {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* ─────────────────────────────────────────────────── lag dagsins */

.card--quiz { border-color: rgba(57, 135, 229, .32); }

.quiz { padding: 16px 20px 18px; display: grid; gap: 13px; }

.quiz__song { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.quiz__title {
  font-size: clamp(19px, 3vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.quiz__year { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.quiz__wait, .quiz__count, .quiz__msg {
  margin: 0; font-size: 12.5px; color: var(--ink-muted);
}
.quiz__msg { color: var(--ink-2); }

.quiz__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }

.quiz__who, .quiz__answer {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  outline: none;
  transition: border-color .15s;
}
.quiz__who { flex: none; min-width: 132px; }
.quiz__answer { flex: 1 1 200px; min-width: 0; }
.quiz__who:focus, .quiz__answer:focus { border-color: var(--move); }
.quiz__answer::placeholder { color: #5a6379; }

.btn--inline { width: auto; flex: none; white-space: nowrap; }

/* afhjúpun */
.quiz__reveal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.quiz__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted);
}
.quiz__reveal strong { font-size: 17px; font-weight: 600; color: var(--diet-text); }

.quiz__answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quiz__answer-row {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13px; color: var(--ink-muted);
}
.quiz__mark { color: var(--forbidden); font-size: 11px; flex: none; }
.quiz__answer-row.is-correct .quiz__mark { color: var(--diet); }
.quiz__person { color: var(--ink-2); min-width: 92px; }
.quiz__answer-row.is-correct .quiz__person { color: var(--ink); font-weight: 500; }
.quiz__said { color: var(--ink-muted); }

@media (max-width: 520px) {
  .quiz__who, .quiz__answer { flex: 1 1 100%; }
  .btn--inline { width: 100%; }
}

/* ─────────────────────────────────────────────── Hvað má ekki? */

.board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 18px;
  align-items: start;
}

.banned {
  list-style: none;
  margin: 0;
  padding: 14px 20px 8px;
  display: grid;
  gap: 13px;
}

.banned__item { display: flex; gap: 10px; align-items: baseline; }
.banned__x {
  color: var(--forbidden);
  font-size: 12px;
  line-height: 1.3;
  flex: none;
}
.banned__name { font-size: 13.5px; font-weight: 500; }
.banned__eg { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }

.banned__note {
  margin: 0;
  padding: 12px 20px 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1120px) {
  .board-layout { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────── skýringar */

.legend { display: flex; flex-wrap: wrap; gap: 14px; }
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.legend__swatch {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex: none;
}
.legend__swatch--line { height: 2px; border-radius: 1px; width: 15px; }

/* ─────────────────────────────────────────────────── vikuflakk */

.weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 14px;
}
.weeknav__label { text-align: center; line-height: 1.25; }
.weeknav__week { font-weight: 600; font-size: 15px; }
.weeknav__range { font-size: 12px; color: var(--ink-muted); }
.weeknav__btn {
  font: inherit;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
}
.weeknav__btn:hover:not(:disabled) { border-color: var(--baseline); color: var(--ink); }
.weeknav__btn:disabled { opacity: .3; cursor: default; }

/* ─────────────────────────────────────────────────── vikunet */

.grid {
  --cell: 40px;
  --namecol: 176px;
  display: grid;
  gap: 3px;
  padding: 16px 20px 20px;
}
.grid__row {
  display: grid;
  /* Reitirnir mega teygjast upp að 56px svo netið lesist sem net en ekki sem
     borðar, og fara aldrei undir --cell — þá tekur .table-scroll við og
     skrunar lárétt í staðinn. Afgangurinn af breidd spjaldsins verður að lofti
     beggja vegna. */
  grid-template-columns: var(--namecol) repeat(var(--days), minmax(var(--cell), 56px)) 62px;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
.grid__corner { font-size: 11.5px; color: var(--ink-muted); }
.grid__daylabel {
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.25;
  padding-bottom: 4px;
}
.grid__daylabel b { display: block; color: var(--ink-2); font-weight: 500; }
.grid__sumlabel { text-align: right; font-size: 11px; color: var(--ink-muted); }

.grid__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.grid__who .avatar { width: 26px; height: 26px; font-size: 26px; }
.grid__who span {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Samsett reitur: efri borði = hreyfing (raðbundinn), neðri = mataræði (tvíkosta).
   2px bil í flatarlitnum skilur þau að — ekki rammi. */
.cell {
  height: 38px;
  border-radius: 7px;
  background: var(--seq-0);
  display: grid;
  grid-template-rows: 1fr 9px;
  gap: 2px;
  padding: 2px;
  cursor: default;
}
.cell__move {
  border-radius: 5px 5px 3px 3px;
  background: var(--seq-0);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Reiturinn segir satt um stigin sem dagurinn skilaði.
   pending = æfing skráð en vikan náði ekki fjórum, svo hún gaf ekkert enn.
   Hún lýsist upp í `base` um leið og fjórða æfingin lendir. */
.cell__move { color: transparent; }
.cell__move[data-state="pending"] { box-shadow: inset 0 0 0 1px var(--baseline); }
.cell__move[data-state="extra"]   { background: var(--seq-1); color: var(--ink); }
.cell__move[data-state="base"]    { background: var(--seq-3); color: #06182f; }
.cell__diet { border-radius: 3px 3px 5px 5px; background: var(--surface-3); }
.cell__diet[data-on="1"] { background: var(--diet); }
.cell--future { opacity: .38; }
.cell--today { box-shadow: 0 0 0 1.5px var(--ink-muted); }

.grid__sum {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-right: 2px;
}
.grid__sum small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-muted); }

/* ─────────────────────────────────────────────────── fólkval */

.card--picker .card__head { border-bottom: 0; padding-bottom: 0; }

.people {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 18px;
}
.people--compact { padding: 14px 20px 4px; }

.person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.person .avatar { width: 26px; height: 26px; font-size: 26px; }
.person:hover { border-color: var(--baseline); color: var(--ink); }
.person[aria-pressed="true"] {
  border-color: var(--move);
  background: rgba(57,135,229,.13);
  color: var(--ink);
}

/* ─────────────────────────────────────────────────── skráning */

.log { padding: 8px 12px 12px; display: grid; gap: 4px; }

.notice {
  margin: 6px 10px 4px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(57, 135, 229, .1);
  border: 1px solid rgba(57, 135, 229, .28);
  font-size: 13px;
  color: var(--ink-2);
}
.notice b { color: var(--ink); font-weight: 600; }

.log__day {
  display: grid;
  /* auto + 1fr heldur rofanum fast við hnappana í stað þess að fleygja honum
     alla leið út á hægri brún á breiðum skjá. */
  grid-template-columns: 92px auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
}
.log__day > .toggle { justify-self: start; }
.log__day:hover { background: rgba(255,255,255,.022); }
.log__day--today { background: rgba(57,135,229,.075); }
.log__day--future { opacity: .45; }

.log__date { line-height: 1.25; }
.log__date b { display: block; font-size: 13.5px; font-weight: 600; }
.log__date small { font-size: 11.5px; color: var(--ink-muted); }

.toggle {
  font: inherit;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s;
}
.toggle__box {
  width: 15px; height: 15px;
  border-radius: 5px;
  border: 1.5px solid var(--baseline);
  display: grid;
  place-items: center;
  flex: none;
}
.toggle__box svg { opacity: 0; }
.toggle:hover:not(:disabled) { border-color: var(--baseline); color: var(--ink-2); }
.toggle[aria-pressed="true"] {
  border-color: var(--diet);
  background: rgba(25,158,112,.14);
  color: var(--ink);
}
.toggle[aria-pressed="true"] .toggle__box { background: var(--diet); border-color: var(--diet); }
.toggle[aria-pressed="true"] .toggle__box svg { opacity: 1; }
.toggle:disabled { cursor: default; }

/* Hreyfingarhakið ber sinn eigin lit, svo það lesist sem sami flokkur og
   bláu súlurnar og reitirnir annars staðar. */
.toggle--move[aria-pressed="true"] {
  border-color: var(--move);
  background: rgba(57, 135, 229, .14);
}
.toggle--move[aria-pressed="true"] .toggle__box {
  background: var(--move);
  border-color: var(--move);
}
.log__day > .toggle { min-width: 132px; }

.log__labels {
  display: grid;
  grid-template-columns: 92px auto minmax(0, 1fr);
  gap: 18px;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
}

/* vikusamtala */
.weeksum {
  border-top: 1px solid var(--line-soft);
  padding: 16px 20px 18px;
  display: grid;
  gap: 12px;
}
.weeksum__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.weeksum__figure { font-size: 30px; font-weight: 650; letter-spacing: -.03em; }
.weeksum__figure span { font-size: .45em; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.weeksum__hint { font-size: 12.5px; color: var(--ink-2); }
.weeksum__hint b { color: var(--bonus); font-weight: 600; }
.weeksum__hint--done b { color: var(--diet); }

.stackbar {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--seq-0);
}
.stackbar__seg { height: 100%; }
.stackbar__seg:first-child { border-radius: 5px 0 0 5px; }
.stackbar__seg:last-child  { border-radius: 0 5px 5px 0; }

.breakdown { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--ink-2); }
.breakdown__item { display: inline-flex; align-items: center; gap: 7px; }
.breakdown b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────── gröf */

.chart { padding: 8px 14px 18px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.axis-label { font-size: 10.5px; fill: var(--ink-muted); }
.grid-line { stroke: var(--line-soft); stroke-width: 1; }
.axis-line { stroke: var(--baseline); stroke-width: 1; }

.spark { display: block; }

.tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--surface-3);
  border: 1px solid var(--baseline);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: var(--shadow);
  max-width: 230px;
}
.tooltip b { font-weight: 600; }
.tooltip .t-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.tooltip .t-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip .t-muted { color: var(--ink-muted); }

/* ─────────────────────────────────────────────────── fótur */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px clamp(14px, 4vw, 34px) 34px;
  font-size: 11.5px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
}

/* ─────────────────────────────────────────────────── símar */

@media (max-width: 820px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .col-trend { display: none; }
  .log__day, .log__labels { grid-template-columns: 74px 1fr; }
  .log__day > .toggle { grid-column: 1 / -1; justify-self: start; }
  .log__labels > :last-child { display: none; }
  .grid { --cell: 34px; --namecol: 116px; }
  .grid__who .avatar { display: none; }
}

@media (max-width: 620px) {
  /* Heildarstigin mega aldrei skrunast út fyrir skjáinn — sundurliðunin er
     hvort eð er endurtekin í undirtextanum við nafnið. */
  .col-meter, .col-split { display: none; }
  .board th, .board td { padding: 10px 9px; }
  .who { min-width: 0; }
}

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