/* ============== Designtokens ==============
   Flyttet til web/styles/tokens.css (lastes via egen <link> FØR app.css).
   Sannhetskilde for alle --fam-*-verdier. Eid av design-modulen.
   Se docs/modules/design.md.
   ============================================================ */

/* ============== Base reset ============== */

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

/* HTML5 [hidden] må alltid skjule. Uten !important kan en mer spesifikk
   regel som .toggle-row { display: flex } gjøre at hidden ignoreres. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fam-font);
  font-size: var(--fam-fs-body);
  line-height: 1.5;
  color: var(--fam-fg);
  background: var(--fam-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--fam-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

/* ============== Tilgjengelighet §11 ============== */

:focus-visible {
  outline: 2px solid var(--fam-accent);
  outline-offset: 2px;
  border-radius: var(--fam-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
    transition-property: opacity !important;
  }
}

/* ============== Mount-punkt ============== */

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Plassholder mens app booter — erstattes av views i K004/K005 */
.boot-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--fam-space-5);
  text-align: center;
  color: var(--fam-muted);
}

.boot-shell h1 {
  font-size: var(--fam-fs-h1);
  font-weight: 600;
  color: var(--fam-fg);
  margin-bottom: var(--fam-space-2);
}

.boot-shell p {
  font-size: var(--fam-fs-caption);
}

/* ============== Login-view (K004) ============== */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--fam-space-5);
}

.login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-4);
}

.login-title {
  font-size: var(--fam-fs-h1);
  font-weight: 600;
  color: var(--fam-fg);
  text-align: center;
}

.login-sub {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  text-align: center;
  margin-top: calc(-1 * var(--fam-space-3));
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-3);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-1);
}

.login-label {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}

.login-field input {
  width: 100%;
  min-height: 44px;
  padding: var(--fam-space-3);
  font-size: var(--fam-fs-body);
  background: var(--fam-bg);
  color: var(--fam-fg);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  transition: border-color var(--fam-dur) var(--fam-ease);
}

.login-field input:focus {
  outline: none;
  border-color: var(--fam-accent);
  box-shadow: 0 0 0 3px var(--fam-accent-weak);
}

.login-field input.has-error {
  border-color: var(--fam-danger);
}

.login-error {
  font-size: var(--fam-fs-caption);
  color: var(--fam-danger);
  padding: var(--fam-space-2) var(--fam-space-3);
  background: var(--fam-danger-weak);
  border: 1px solid var(--fam-danger);
  border-radius: var(--fam-radius-sm);
}

.login-submit {
  min-height: 48px;
  padding: var(--fam-space-3) var(--fam-space-4);
  font-size: var(--fam-fs-button);
  font-weight: 500;
  color: var(--fam-on-color);
  background: var(--fam-accent);
  border-radius: var(--fam-radius-md);
  transition: opacity var(--fam-dur) var(--fam-ease),
              transform var(--fam-dur) var(--fam-ease);
}

.login-submit:hover { opacity: 0.92; }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ============== PIN-login (K119-K120, endring login-pin) ============== */

/* Felles avatar for velger + tallpad. Farge via data-user (samme tokens som
   .fam-avatar); ukjente brukere faller tilbake til muted. */
.pin-av {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-muted);
  color: var(--fam-on-color);
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}
.pin-av[data-user="Bo"]      { background: var(--fam-user-1); }
.pin-av[data-user="Fride"]   { background: var(--fam-user-2); }
.pin-av[data-user="June"]    { background: var(--fam-user-3); }
.pin-av[data-user="Kristin"] { background: var(--fam-user-4); }
.pin-av[data-user="Martin"]  { background: var(--fam-user-5); }
.pin-av-lg { width: 64px; height: 64px; font-size: var(--fam-fs-h1); }

/* Avatar-velger */
.pin-roster {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
}
.pin-roster-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--fam-space-2) var(--fam-space-3);
  background: var(--fam-bg);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fam-dur) var(--fam-ease),
              background var(--fam-dur) var(--fam-ease);
}
.pin-roster-row:active { background: var(--fam-accent-weak); border-color: var(--fam-accent); }
.pin-roster-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pin-roster-name { font-size: var(--fam-fs-body); font-weight: 600; color: var(--fam-fg); }
.pin-roster-mail {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-other {
  margin-top: var(--fam-space-2);
  min-height: 44px;
  font-size: var(--fam-fs-button);
  font-weight: 600;
  color: var(--fam-accent);
  background: none;
  cursor: pointer;
}

/* Tallpad-skjerm */
.pin-card { align-items: stretch; }
.pin-back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--fam-space-1);
  font-size: var(--fam-fs-button);
  font-weight: 600;
  color: var(--fam-accent);
  background: none;
  cursor: pointer;
}
.pin-head { display: flex; flex-direction: column; align-items: center; gap: var(--fam-space-2); }
.pin-who { font-size: var(--fam-fs-h2); font-weight: 700; color: var(--fam-fg); text-align: center; }
.pin-dots {
  display: flex;
  gap: var(--fam-space-3);
  justify-content: center;
  margin: var(--fam-space-2) 0;
}
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--fam-muted);
  transition: background var(--fam-dur) var(--fam-ease), border-color var(--fam-dur) var(--fam-ease);
}
.pin-dot.is-on { background: var(--fam-fg); border-color: var(--fam-fg); }
.pin-error { text-align: center; }
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fam-space-3);
}
.pin-key {
  min-height: 64px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--fam-fg);
  background: var(--fam-bg);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  cursor: pointer;
  transition: background var(--fam-dur) var(--fam-ease);
}
.pin-key:active { background: var(--fam-accent-weak); }
.pin-key:disabled { opacity: 0.5; cursor: default; }
.pin-key-ghost { border: none; background: none; cursor: default; }
.pin-key-del { font-size: 1.25rem; color: var(--fam-muted); }
.pin-link {
  margin-top: var(--fam-space-2);
  min-height: 44px;
  font-size: var(--fam-fs-caption);
  font-weight: 500;
  color: var(--fam-accent);
  background: none;
  cursor: pointer;
}

/* ============== SR-only utility ============== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============== App-skall (oppgaver-view) ============== */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* .app er flex-item i #app (column-flex). Uten eksplisitt width: 100%
     krymper den til innholdets intrinsic-bredde — synlig f.eks. i månedsvisning
     der en tom måned blir smalere enn en med events (jf. BF-014). */
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  background: var(--fam-bg);
}

/* Sticky header §1 (h=56px) */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--fam-space-4);
  background: var(--fam-bg);
  border-bottom: 1px solid var(--fam-border);
  gap: var(--fam-space-3);
}
.app-header h1 {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fam-fs-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Søk i header (variant B) — delt av oppgaver + handleliste.
   Default-innholdet og søkefeltet bytter plass via .sok-aktiv på .app-header. */
.app-header .sok-default {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  flex: 1 1 auto;
  min-width: 0;
}
.app-header .sok-field {
  display: none;
  align-items: center;
  gap: var(--fam-space-2);
  flex: 1 1 auto;
  min-width: 0;
}
.app-header.sok-aktiv .sok-default { display: none; }
.app-header.sok-aktiv .sok-field { display: flex; }
.sok-field .sok-ikon {
  width: 18px;
  height: 18px;
  color: var(--fam-muted);
  flex: 0 0 auto;
}
.sok-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--fam-border);
  background: var(--fam-surface);
  border-radius: var(--fam-radius-pill);
  padding: 0 var(--fam-space-4);
  font: inherit;
  color: var(--fam-fg);
  outline: none;
}
.sok-input:focus { border-color: var(--fam-accent); }
/* Skjul nettleserens innebygde tøm-kryss — vi har egen lukke-X. */
.sok-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.logout-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--fam-space-3);
  font-size: var(--fam-fs-caption);
  font-weight: 500;
  color: var(--fam-muted);
  border-radius: var(--fam-radius-sm);
}
.logout-btn:hover { background: var(--fam-surface); color: var(--fam-fg); }

/* Aktivt-team-velger (dashboard-header) */
.team-title { flex: 1 1 auto; margin: 0; font-size: var(--fam-fs-h1); font-weight: 600; letter-spacing: -0.01em; }
.team-trigger {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  min-height: 44px;
  margin-left: calc(-1 * var(--fam-space-2));
  padding: 0 var(--fam-space-2);
  border-radius: var(--fam-radius-md);
}
.team-trigger:hover { background: var(--fam-surface); }
.team-trigger .team-name { font-size: var(--fam-fs-h1); font-weight: 600; letter-spacing: -0.01em; }
.team-trigger .team-chev { width: 18px; height: 18px; color: var(--fam-muted); flex: 0 0 auto; }

.team-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  background: var(--fam-bg);
  border-radius: var(--fam-radius-lg) var(--fam-radius-lg) 0 0;
  border-top: 1px solid var(--fam-border);
  z-index: 50;
  transform: translateY(100%);
  transition: transform var(--fam-dur) var(--fam-ease);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--fam-space-4) calc(var(--fam-space-5) + env(safe-area-inset-bottom, 0px));
}
.team-sheet.is-open { transform: translateY(0); }
.team-sheet-title {
  font-size: var(--fam-fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--fam-muted);
  margin: var(--fam-space-2) 0;
}
.team-list { list-style: none; margin: 0; padding: 0; }
.team-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--fam-space-2);
  border-radius: var(--fam-radius-md);
  text-align: left;
}
.team-row:hover { background: var(--fam-surface); }
.team-row[aria-checked="true"] { background: var(--fam-accent-weak); }
.team-ic {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--fam-radius-md);
  background: var(--fam-surface);
  color: var(--fam-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.team-row[aria-checked="true"] .team-ic { background: var(--fam-accent); color: var(--fam-on-color); }
.team-meta { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.team-meta .t { font-weight: 600; }
.team-meta .s { font-size: var(--fam-fs-caption); color: var(--fam-muted); }
.team-check { width: 22px; height: 22px; color: var(--fam-accent); flex: 0 0 auto; }

/* Ark-handlinger (Administrer medlemmer) */
.team-sheet-actions { border-top: 1px solid var(--fam-border); margin-top: var(--fam-space-2); padding-top: var(--fam-space-2); }
.team-action {
  display: flex; align-items: center; gap: var(--fam-space-3);
  width: 100%; min-height: 48px; padding: 0 var(--fam-space-2);
  border-radius: var(--fam-radius-md);
  color: var(--fam-accent); font-weight: 600;
}
.team-action:hover { background: var(--fam-accent-weak); }
.team-action svg { width: 20px; height: 20px; flex: 0 0 auto; }
.team-nytt-form { display: flex; gap: var(--fam-space-2); padding: var(--fam-space-2) var(--fam-space-2) 0; }
.team-nytt-form input {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  padding: 0 var(--fam-space-3);
  border: 1px solid var(--fam-border); border-radius: var(--fam-radius-md);
  background: var(--fam-bg); color: var(--fam-fg); font-size: var(--fam-fs-body);
}
.team-nytt-feil { color: var(--fam-danger); font-size: var(--fam-fs-caption); padding: var(--fam-space-2) var(--fam-space-2) 0; margin: 0; }

/* Medlemsadmin-skjerm */
.loading-state, .error-state { color: var(--fam-muted); padding: var(--fam-space-4) 0; }
.team-head { display: flex; align-items: center; gap: var(--fam-space-3); margin-bottom: var(--fam-space-4); }
.team-head-ic {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--fam-radius-md);
  background: var(--fam-accent); color: var(--fam-on-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fam-fs-h2);
}
.team-head-meta { display: flex; flex-direction: column; min-width: 0; }
.team-head-navn { font-size: var(--fam-fs-h2); font-weight: 600; }
.team-head-sub { font-size: var(--fam-fs-caption); color: var(--fam-muted); }

.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fam-space-1); }
.member-row { display: flex; align-items: center; gap: var(--fam-space-3); min-height: 56px; padding: var(--fam-space-2); border-radius: var(--fam-radius-md); }
.member-row .avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fam-accent); color: var(--fam-on-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.member-meta { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.member-name { font-weight: 600; }
.member-email { font-size: var(--fam-fs-caption); color: var(--fam-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-badge {
  flex: 0 0 auto; font-size: 0.6875rem; font-weight: 600;
  padding: 2px 8px; border-radius: var(--fam-radius-pill);
  background: var(--fam-accent-weak); color: var(--fam-accent);
}
.role-badge.medlem { background: var(--fam-surface); color: var(--fam-muted); }
.me-tag { flex: 0 0 auto; font-size: var(--fam-fs-caption); color: var(--fam-muted); }
.remove-btn {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--fam-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fam-muted);
}
.remove-btn:hover { background: var(--fam-danger-weak); color: var(--fam-danger); }
.remove-btn svg { width: 18px; height: 18px; }

.invite { margin-top: var(--fam-space-2); padding: var(--fam-space-4); background: var(--fam-surface); border-radius: var(--fam-radius-md); }
.invite label { display: block; font-weight: 600; margin-bottom: var(--fam-space-2); }
.invite-row { display: flex; gap: var(--fam-space-2); }
.invite-row input {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  padding: 0 var(--fam-space-3);
  border: 1px solid var(--fam-border); border-radius: var(--fam-radius-md);
  background: var(--fam-bg); color: var(--fam-fg); font-size: var(--fam-fs-body);
}
.invite-btn {
  flex: 0 0 auto; min-height: 48px; padding: 0 var(--fam-space-4);
  border-radius: var(--fam-radius-md);
  background: var(--fam-accent); color: var(--fam-on-color); font-weight: 600;
}
.invite-btn:hover { background: var(--fam-accent-strong); }
.invite-btn:disabled { opacity: 0.6; }
.invite-hint { font-size: var(--fam-fs-caption); color: var(--fam-muted); margin: var(--fam-space-2) 0 0; }
.invite-hint.is-error { color: var(--fam-danger); }

.back-btn,
.icon-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fam-radius-pill);
  color: var(--fam-fg);
}
.back-btn { margin-left: calc(-1 * var(--fam-space-2)); }
.back-btn:hover,
.icon-btn:hover { background: var(--fam-surface); }
.back-btn svg,
.icon-btn svg { width: 22px; height: 22px; }

/* ============== Dashboard (forside) ============== */

.dashboard-main {
  padding: var(--fam-space-5) var(--fam-space-4);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fam-space-3);
}
@media (min-width: 640px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
}
/* Pad i portrett (≥768px): dashboardet bruker bredden + større kort.
   Scopet til dashboard via :has() så andre views beholder 640px-layouten.
   Faller pent tilbake til 640px-2-kolonne på browsere uten :has(). */
@media (min-width: 768px) {
  .app:has(.dashboard-main) { max-width: 820px; }
  .dashboard-grid { gap: var(--fam-space-4); }
  .dashboard-card {
    min-height: 168px;
    padding: var(--fam-space-6);
    gap: var(--fam-space-3);
  }
  .dashboard-card-icon { width: 56px; height: 56px; }
  .dashboard-card-icon svg { width: 32px; height: 32px; }
  .dashboard-card-title { font-size: var(--fam-fs-h1); }
}
.dashboard-grid li { list-style: none; }

.dashboard-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fam-space-2);
  padding: var(--fam-space-5);
  min-height: 132px;
  background: var(--fam-bg);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-lg);
  text-align: left;
  cursor: pointer;
  transition: background var(--fam-dur) var(--fam-ease),
              border-color var(--fam-dur) var(--fam-ease),
              transform var(--fam-dur) var(--fam-ease);
}
.dashboard-card:hover {
  background: var(--fam-surface);
  border-color: var(--fam-fg);
}
.dashboard-card:active {
  transform: scale(0.985);
}
.dashboard-card-icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fam-radius-md);
  background: var(--fam-accent-weak);
  color: var(--fam-accent);
}
.dashboard-card-icon svg {
  width: 28px; height: 28px;
}
.dashboard-card-title {
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
}
.dashboard-card-caption {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}

/* ============== Install-prompt + iOS-banner ============== */

.install-slot:empty { display: none; }

.install-btn-wrap {
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-3) var(--fam-space-4);
  margin-bottom: var(--fam-space-4);
  background: var(--fam-accent-weak);
  border: 1px solid var(--fam-accent);
  border-radius: var(--fam-radius-md);
}
.install-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 var(--fam-space-3);
  font-size: var(--fam-fs-button);
  font-weight: 500;
  color: var(--fam-on-color);
  background: var(--fam-accent);
  border-radius: var(--fam-radius-sm);
}
.install-btn-dismiss {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  font-size: 1.125rem;
  color: var(--fam-muted);
  border-radius: var(--fam-radius-pill);
}
.install-btn-dismiss:hover { background: var(--fam-overlay-hover); color: var(--fam-fg); }

.install-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--fam-space-3);
  padding: var(--fam-space-3);
  margin-bottom: var(--fam-space-4);
  background: var(--fam-accent-weak);
  border: 1px solid var(--fam-accent);
  border-radius: var(--fam-radius-md);
  font-size: var(--fam-fs-caption);
  color: var(--fam-fg);
  line-height: 1.4;
}
.install-banner-text { flex: 1 1 auto; }
.install-banner-text strong { font-weight: 600; }
.install-banner-dismiss {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  font-size: 1.125rem;
  color: var(--fam-muted);
  border-radius: var(--fam-radius-pill);
  margin-top: -4px;
}
.install-banner-dismiss:hover { background: var(--fam-overlay-hover); color: var(--fam-fg); }

/* ============== Handleliste — kategori-grupper ============== */

.handle-section {
  margin-bottom: var(--fam-space-4);
}
.handle-section:last-child {
  margin-bottom: 0;
}
.handle-cat-heading {
  margin: 0 0 var(--fam-space-2) 0;
  font-size: var(--fam-fs-h2);
  font-weight: 600;
}
.handle-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  min-height: 60px;
  padding: var(--fam-space-3) var(--fam-space-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fam-border);
  font: inherit;
  font-weight: 600;
  color: var(--fam-fg);
  text-align: left;
  cursor: pointer;
}
.handle-cat-btn:hover {
  background: var(--fam-surface);
}
.handle-cat-icon {
  width: 24px;
  height: 24px;
  color: var(--fam-accent);
  flex: 0 0 auto;
}
.handle-cat-tittel {
  flex: 1 1 auto;
  font-size: var(--fam-fs-h2);
}
.handle-cat-antall {
  color: var(--fam-muted);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.handle-cat-antall.is-pulsing {
  animation: handlePulse 200ms var(--fam-ease);
}
@keyframes handlePulse {
  0%   { transform: scale(1);   color: var(--fam-muted); }
  50%  { transform: scale(1.4); color: var(--fam-accent); }
  100% { transform: scale(1);   color: var(--fam-muted); }
}
.handle-cat-chevron {
  width: 18px;
  height: 18px;
  color: var(--fam-muted);
  flex: 0 0 auto;
  transition: transform 150ms var(--fam-ease);
}
.handle-cat-btn[aria-expanded="true"] .handle-cat-chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .handle-cat-chevron {
    transition: none;
  }
  .handle-cat-antall.is-pulsing {
    animation: none;
  }
}

.app-main {
  flex: 1 1 auto;
  padding: var(--fam-space-3) var(--fam-space-4)
           calc(64px + var(--fam-space-5) + env(safe-area-inset-bottom, 0px))
           var(--fam-space-4);
  overflow-y: auto;
}

/* Loading skeleton */
.loading {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-3);
  padding-top: var(--fam-space-4);
}
.loading[hidden] { display: none; }
.skeleton {
  height: 56px;
  background: var(--fam-surface);
  border-radius: var(--fam-radius-md);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Error banner */
.error-banner {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  padding: var(--fam-space-3);
  margin: var(--fam-space-3) 0;
  background: var(--fam-danger-weak);
  border: 1px solid var(--fam-danger);
  border-radius: var(--fam-radius-md);
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
}
.error-banner[hidden] { display: none; }
.error-banner svg {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--fam-danger);
}
.error-banner .error-msg { flex: 1 1 auto; }
.error-banner .error-retry {
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--fam-accent);
  text-decoration: underline;
  min-height: 36px;
  padding: 0 var(--fam-space-2);
}

/* Listestruktur */
.task-list,
.task-list-done {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Skille mellom åpne og ferdig */
.done-section {
  margin-top: var(--fam-space-4);
  border-top: 1px solid var(--fam-border);
  padding-top: var(--fam-space-2);
}
.done-section[hidden] { display: none; }
.open-section[hidden] { display: none; }

.done-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-3) var(--fam-space-1);
  min-height: 44px;
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
  text-align: left;
  border-radius: var(--fam-radius-md);
}
.done-header:hover { background: var(--fam-surface); }
.done-header .chev {
  width: 20px; height: 20px;
  color: var(--fam-muted);
}
.done-count {
  color: var(--fam-muted);
  font-weight: 500;
}
.done-list-wrap[hidden] { display: none; }

/* ============== Oppgaverad ============== */

.task {
  position: relative;
  list-style: none;
  overflow: hidden;
  border-bottom: 1px solid var(--fam-border);
  background: var(--fam-bg);
}
.task:last-child { border-bottom: 0; }

.task.is-entering { animation: taskEnter 220ms var(--fam-ease) both; }
.task.is-leaving { animation: taskLeave 200ms var(--fam-ease) both; }
@keyframes taskEnter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes taskLeave {
  from { opacity: 1; max-height: 64px; }
  to { opacity: 0; max-height: 0; }
}

/* Slett-undertog */
.task::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fam-danger);
  z-index: 0;
  pointer-events: none;
}
.task::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--fam-space-4);
  width: 20px; height: 20px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M10 11v6'/><path d='M14 11v6'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 80ms linear;
  pointer-events: none;
}
.task.is-swiping::after { opacity: 1; }

.task-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  padding: var(--fam-space-3) var(--fam-space-2);
  min-height: 56px;
  background: var(--fam-bg);
  will-change: transform;
}
.task.is-dragging .task-row { transition: none; }
.task:not(.is-dragging) .task-row {
  transition: transform var(--fam-dur) var(--fam-ease);
}

.checkbox {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fam-radius-pill);
}
.checkbox:hover { background: var(--fam-accent-weak); }

/* Håndethet (Fase 13): høyrehendt flytter fullført-boblen til høyre side av
   raden. Tittel (flex:1) skyver boblen ut til kanten. Avatar blir stående.
   Default / venstrehendt = kildeorden (boble til venstre). Gjelder Oppgaver
   og Handleliste (begge bruker .task-row + .checkbox). */
body[data-hand="hoyre"] .task-row .checkbox { order: 9; }
.checkbox-box {
  position: relative;
  width: 24px; height: 24px;
  border: 2px solid var(--fam-muted);
  border-radius: 50%;
  transition: background var(--fam-dur) var(--fam-ease),
              border-color var(--fam-dur) var(--fam-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkbox[aria-checked="true"] .checkbox-box {
  background: var(--fam-success);
  border-color: var(--fam-success);
}
.checkbox-box .check-icon {
  width: 16px; height: 16px;
  color: var(--fam-on-color);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--fam-dur) var(--fam-ease),
              transform var(--fam-dur) var(--fam-ease);
}
.checkbox[aria-checked="true"] .check-icon {
  opacity: 1;
  transform: scale(1);
}

.fam-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--fam-muted);
  color: var(--fam-on-color);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  user-select: none;
}
.fam-avatar[data-user="Bo"]      { background: var(--fam-user-1); }
.fam-avatar[data-user="Fride"]   { background: var(--fam-user-2); }
.fam-avatar[data-user="June"]    { background: var(--fam-user-3); }
.fam-avatar[data-user="Kristin"] { background: var(--fam-user-4); }
.fam-avatar[data-user="Martin"]  { background: var(--fam-user-5); }
/* «Alle» = ingen spesifikk ansvarlig → nøytral A-avatar */
.fam-avatar.is-alle { background: var(--fam-muted); }

/* Header-avataren er inngang til Innstillinger (Fase 13). Knapp-reset +
   usynlig 44px tap-areal rundt den 24px boblen (touch-target uten å endre
   utseendet). Per-rad-avatarer (.fam-avatar uten -me) er uberørt. */
.fam-avatar-me {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.fam-avatar-me::after {
  content: "";
  position: absolute;
  inset: -10px; /* 24px + 2*10 = 44px hit-area */
  border-radius: 50%;
}
.fam-avatar-me:focus-visible {
  outline: 2px solid var(--fam-accent);
  outline-offset: 2px;
}

.task-title {
  flex: 1 1 auto;
  font-size: var(--fam-fs-body);
  line-height: 1.5;
  color: var(--fam-fg);
  word-break: break-word;
}
.task.is-done .task-title {
  color: var(--fam-completed);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Tittel + frist stables vertikalt i en wrapper (frist-merke under tittelen) */
.task-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-frist {
  display: inline-flex;
  align-items: center;
  gap: var(--fam-space-1);
  align-self: flex-start;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  font-weight: 500;
}
.task-frist svg { width: 14px; height: 14px; flex: 0 0 auto; }
.task-frist.is-soon { color: var(--fam-accent); }
.task-frist.is-overdue { color: var(--fam-danger); font-weight: 600; }
.task.is-done .task-frist { color: var(--fam-completed); font-weight: 500; }

/* Frist-seksjon i detaljkortet: native dato-velger + «Fjern» */
.frist-input-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
}
.frist-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: var(--fam-space-2) var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  font-family: inherit;
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
}
.frist-clear {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-muted);
  font-size: var(--fam-fs-caption);
}

/* ============== Empty states ============== */

.empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-7) var(--fam-space-4) var(--fam-space-6);
  text-align: center;
}
.empty.is-active { display: flex; }
.empty-icon {
  width: 64px; height: 64px;
  color: var(--fam-muted);
  margin-bottom: var(--fam-space-2);
}
.empty-title {
  margin: 0;
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
}
.empty-text {
  margin: 0;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}

/* ============== Add-bar ============== */

.add-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-2) var(--fam-space-4)
           max(var(--fam-space-2), env(safe-area-inset-bottom));
  background: var(--fam-bg);
  border-top: 1px solid var(--fam-border);
}
.add-input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-fg);
  font-size: var(--fam-fs-body);
  line-height: 1.5;
}
.add-input::placeholder { color: var(--fam-muted); }
.add-input:focus-visible {
  border-color: var(--fam-accent);
  outline: 2px solid var(--fam-accent);
  outline-offset: 0;
}
.add-input.has-error { border-color: var(--fam-danger); }
.add-send {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-muted);
  color: var(--fam-on-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--fam-dur) var(--fam-ease),
              transform var(--fam-dur) var(--fam-ease);
}
.add-send[disabled] { cursor: not-allowed; opacity: 0.6; }
.add-send:not([disabled]) { background: var(--fam-accent); }
.add-send:not([disabled]):active { transform: scale(0.95); }
.add-send svg { width: 22px; height: 22px; }

/* Privat-toggle i add-bar */
.privat-toggle {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fam-radius-pill);
  color: var(--fam-muted);
  background: transparent;
  transition: background var(--fam-dur) var(--fam-ease),
              color var(--fam-dur) var(--fam-ease);
}
.privat-toggle:hover { background: var(--fam-surface); color: var(--fam-fg); }
.privat-toggle.is-active {
  background: var(--fam-accent);
  color: var(--fam-on-color);
}
.privat-toggle svg { width: 20px; height: 20px; }

/* Lock-ikon på privat oppgave i listen */
.task-lock {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--fam-muted);
}
.task.is-privat .task-row {
  /* subtil indikasjon */
}

/* ============== Toast ============== */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--fam-space-3));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--fam-space-4)));
  z-index: 50;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  padding: var(--fam-space-3) var(--fam-space-3) var(--fam-space-3) var(--fam-space-4);
  background: var(--fam-surface-inverse);
  color: var(--fam-on-color);
  border-radius: var(--fam-radius-md);
  font-size: var(--fam-fs-body);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity var(--fam-dur) var(--fam-ease),
              transform var(--fam-dur) var(--fam-ease);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.toast-error { background: var(--fam-danger); }
.toast-text { flex: 1 1 auto; }
.toast-undo {
  display: inline-flex;
  align-items: center;
  gap: var(--fam-space-1);
  min-height: 36px;
  padding: var(--fam-space-1) var(--fam-space-3);
  border-radius: var(--fam-radius-sm);
  color: var(--fam-on-color);
  font-size: var(--fam-fs-button);
  font-weight: 500;
}
.toast-undo:hover { background: var(--fam-overlay-hover-inverse); }
.toast-undo svg { width: 18px; height: 18px; }

/* ============== Lister-velger ============== */

.lister-velger-main {
  padding: var(--fam-space-5) var(--fam-space-4)
           calc(var(--fam-space-6) + env(safe-area-inset-bottom, 0px));
}

.section-label {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: var(--fam-space-2) 0 var(--fam-space-3);
}

.all-card {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  padding: var(--fam-space-4) var(--fam-space-4);
  margin-bottom: var(--fam-space-4);
  background: var(--fam-fg);
  color: var(--fam-on-color);
  border-radius: var(--fam-radius-md);
  text-align: left;
  transition: transform var(--fam-dur) var(--fam-ease);
  min-height: 72px;
}
.all-card:active { transform: scale(0.98); }
/* «Mine oppgaver»-variant: accent-farget for å skille fra «Alle oppgaver» */
.all-card.mine-card { background: var(--fam-accent); }
.all-card-icon {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--fam-radius-md);
  background: var(--fam-overlay-tint-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.all-card-icon svg { width: 22px; height: 22px; color: var(--fam-on-color); }
.all-card-text { flex: 1 1 auto; min-width: 0; }
.all-card-title { display: block; font-size: var(--fam-fs-h2); font-weight: 600; }
.all-card-meta { display: block; font-size: var(--fam-fs-caption); opacity: 0.75; }

.list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fam-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fam-space-2);
  padding: var(--fam-space-4);
  min-height: 132px;
  background: var(--fam-surface);
  border-radius: var(--fam-radius-md);
  text-align: left;
  width: 100%;
  position: relative;
  transition: transform var(--fam-dur) var(--fam-ease);
}
.list-card .list-card-icon { margin-bottom: var(--fam-space-1); }
.list-card:active { transform: scale(0.98); }

.list-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--fam-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fam-on-color);
}
.list-card-icon svg { width: 20px; height: 20px; }
.list-card[data-color="1"] .list-card-icon { background: var(--fam-list-1); }
.list-card[data-color="2"] .list-card-icon { background: var(--fam-list-2); }
.list-card[data-color="3"] .list-card-icon { background: var(--fam-list-3); }
.list-card[data-color="4"] .list-card-icon { background: var(--fam-list-4); }
.list-card[data-color="5"] .list-card-icon { background: var(--fam-list-5); }

.list-card-title {
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--fam-space-1);
  word-break: break-word;
}
.list-card-title .lock-icon {
  width: 14px;
  height: 14px;
  color: var(--fam-muted);
  flex: 0 0 auto;
}
.list-card-meta {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}
.list-card-default {
  position: absolute;
  top: var(--fam-space-2);
  right: var(--fam-space-2);
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-accent-weak);
  color: var(--fam-accent);
  font-weight: 600;
}

.list-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-4);
  min-height: 132px;
  background: var(--fam-bg);
  border: 2px dashed var(--fam-border);
  border-radius: var(--fam-radius-md);
  color: var(--fam-muted);
  font-size: var(--fam-fs-body);
  width: 100%;
  transition: border-color var(--fam-dur) var(--fam-ease),
              color var(--fam-dur) var(--fam-ease),
              background var(--fam-dur) var(--fam-ease);
}
.list-card-add svg { width: 24px; height: 24px; }
.list-card-add:hover {
  border-color: var(--fam-accent);
  color: var(--fam-accent);
  background: var(--fam-accent-weak);
}

.lister-velger-empty-hint {
  margin-top: var(--fam-space-5);
  padding: var(--fam-space-4);
  background: var(--fam-surface);
  border-radius: var(--fam-radius-md);
  text-align: center;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  line-height: 1.55;
}

/* ============== Mine lister — oversikt ============== */

.lister-admin-main {
  padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
}

.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  padding: var(--fam-space-4) var(--fam-space-4);
  border-bottom: 1px solid var(--fam-border);
  text-align: left;
  background: var(--fam-bg);
  transition: background var(--fam-dur) var(--fam-ease);
  min-height: 72px;
}
.admin-row:hover { background: var(--fam-surface); }

.admin-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--fam-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fam-on-color);
  flex: 0 0 auto;
}
.admin-swatch svg { width: 18px; height: 18px; }
.admin-row[data-color="1"] .admin-swatch { background: var(--fam-list-1); }
.admin-row[data-color="2"] .admin-swatch { background: var(--fam-list-2); }
.admin-row[data-color="3"] .admin-swatch { background: var(--fam-list-3); }
.admin-row[data-color="4"] .admin-swatch { background: var(--fam-list-4); }
.admin-row[data-color="5"] .admin-swatch { background: var(--fam-list-5); }

.admin-info {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-name {
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
  word-break: break-word;
}
.admin-meta {
  display: block;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  margin-top: 4px;
}
.row-lock {
  width: 14px;
  height: 14px;
  color: var(--fam-muted);
  flex: 0 0 auto;
}
.row-default {
  font-size: 0.6875rem;
  padding: 1px 8px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-accent-weak);
  color: var(--fam-accent);
  font-weight: 600;
}
.admin-chev {
  width: 18px;
  height: 18px;
  color: var(--fam-muted);
  flex: 0 0 auto;
}

.admin-empty {
  padding: var(--fam-space-7) var(--fam-space-4);
  text-align: center;
  color: var(--fam-muted);
}

.admin-add {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  padding: var(--fam-space-4) var(--fam-space-4);
  color: var(--fam-accent);
  font-size: var(--fam-fs-body);
  font-weight: 500;
  border-bottom: 1px solid var(--fam-border);
  text-align: left;
  transition: background var(--fam-dur) var(--fam-ease);
  min-height: 64px;
  margin-top: var(--fam-space-2);
}
.admin-add:hover { background: var(--fam-accent-weak); }
.admin-add svg { width: 22px; height: 22px; }

/* ============== Rediger/Ny liste — skjema ============== */

.lister-edit-main {
  padding: var(--fam-space-5) var(--fam-space-4)
           calc(80px + env(safe-area-inset-bottom, 0px));
}

.liste-form .field {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
  margin-bottom: var(--fam-space-5);
}

.field-label {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.field-input {
  height: 44px;
  padding: 0 var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-fg);
  font-size: var(--fam-fs-body);
  line-height: 1.5;
}
.field-input:focus-visible {
  border-color: var(--fam-accent);
  outline: 2px solid var(--fam-accent);
  outline-offset: 0;
}

.swatch-row {
  display: flex;
  gap: var(--fam-space-2);
}
.swatch-pick {
  width: 40px;
  height: 40px;
  border-radius: var(--fam-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fam-on-color);
  transition: outline var(--fam-dur) var(--fam-ease);
}
.swatch-pick svg { width: 18px; height: 18px; opacity: 0; }
.swatch-pick.is-picked { outline: 2px solid var(--fam-fg); outline-offset: 2px; }
.swatch-pick.is-picked svg { opacity: 1; }
.swatch-pick[data-color="1"] { background: var(--fam-list-1); }
.swatch-pick[data-color="2"] { background: var(--fam-list-2); }
.swatch-pick[data-color="3"] { background: var(--fam-list-3); }
.swatch-pick[data-color="4"] { background: var(--fam-list-4); }
.swatch-pick[data-color="5"] { background: var(--fam-list-5); }

.icon-row {
  display: flex;
  gap: var(--fam-space-2);
  flex-wrap: wrap;
}
.icon-pick {
  width: 44px;
  height: 44px;
  border-radius: var(--fam-radius-md);
  background: var(--fam-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fam-muted);
  transition: background var(--fam-dur) var(--fam-ease),
              color var(--fam-dur) var(--fam-ease);
}
.icon-pick svg { width: 20px; height: 20px; }
.icon-pick.is-picked {
  background: var(--fam-accent);
  color: var(--fam-on-color);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  padding: var(--fam-space-3) var(--fam-space-4);
  background: var(--fam-surface);
  border-radius: var(--fam-radius-md);
  margin-bottom: var(--fam-space-3);
  min-height: 64px;
}
.toggle-info { flex: 1 1 auto; }
.toggle-info strong {
  display: block;
  font-size: var(--fam-fs-body);
  font-weight: 600;
}
.toggle-info small {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}
.toggle-switch {
  width: 44px;
  height: 26px;
  background: var(--fam-border);
  border-radius: var(--fam-radius-pill);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--fam-dur) var(--fam-ease);
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--fam-bg);
  border-radius: 50%;
  transition: transform var(--fam-dur) var(--fam-ease);
}
.toggle-row[data-on="true"] .toggle-switch { background: var(--fam-success); }
.toggle-row[data-on="true"] .toggle-switch::after { transform: translateX(18px); }

/* Moduler-konfig (team-moduler.js) — gjenbruker .toggle-row/.toggle-switch.
   Raden er en <button> her, så den trenger knapp-reset + et ledende ikon. */
.toggle-row { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.toggle-row[data-locked="true"] { cursor: default; }
.toggle-ic { flex: 0 0 auto; width: 24px; height: 24px; color: var(--fam-muted); display: inline-flex; }
.toggle-ic svg { width: 24px; height: 24px; }
.toggle-row[data-on="true"] .toggle-ic { color: var(--fam-accent); }
.toggle-row.is-blink { animation: moduler-blink var(--fam-dur) var(--fam-ease) 2; }
@keyframes moduler-blink { 0%, 100% { background: var(--fam-surface); } 50% { background: var(--fam-danger-weak); } }
.moduler-hint { font-size: var(--fam-fs-caption); color: var(--fam-muted); margin: 0 0 var(--fam-space-4); }
.moduler-list { list-style: none; margin: 0; padding: 0; }
.moduler-saved { font-size: var(--fam-fs-caption); color: var(--fam-muted); text-align: center; margin-top: var(--fam-space-4); }
.moduler-saved.is-error { color: var(--fam-danger); }
.moduler-sok { display: flex; align-items: center; gap: var(--fam-space-2); background: var(--fam-surface); border: 1px solid var(--fam-border); border-radius: var(--fam-radius-pill); padding: 0 var(--fam-space-3); min-height: 44px; margin-bottom: var(--fam-space-3); }
.moduler-sok svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--fam-muted); }
.moduler-sok input { flex: 1 1 auto; border: 0; background: transparent; font-size: var(--fam-fs-body); color: var(--fam-fg); outline: none; min-height: 44px; }
.moduler-sok input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.danger-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fam-space-2);
  width: 100%;
  padding: var(--fam-space-3);
  margin-top: var(--fam-space-5);
  min-height: 48px;
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-danger);
  font-weight: 500;
  transition: background var(--fam-dur) var(--fam-ease),
              border-color var(--fam-dur) var(--fam-ease);
}
.danger-row:hover {
  background: var(--fam-danger-weak);
  border-color: var(--fam-danger);
}
.danger-row svg { width: 18px; height: 18px; }

.form-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  gap: var(--fam-space-2);
  padding: var(--fam-space-2) var(--fam-space-4)
           max(var(--fam-space-2), env(safe-area-inset-bottom));
  background: var(--fam-bg);
  border-top: 1px solid var(--fam-border);
}
.form-btn {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: var(--fam-radius-md);
  background: var(--fam-surface);
  font-size: var(--fam-fs-body);
  font-weight: 500;
  color: var(--fam-fg);
  transition: background var(--fam-dur) var(--fam-ease);
}
.form-btn:hover { background: var(--fam-border); }
.form-btn.primary {
  background: var(--fam-accent);
  color: var(--fam-on-color);
}
.form-btn.primary:hover { background: var(--fam-accent-strong); }
.form-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============== Task-detail-sheet (rediger oppgave) ============== */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--fam-scrim);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fam-dur) var(--fam-ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.task-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  background: var(--fam-bg);
  border-radius: var(--fam-radius-lg) var(--fam-radius-lg) 0 0;
  border-top: 1px solid var(--fam-border);
  z-index: 50;
  transform: translateY(100%);
  transition: transform var(--fam-dur) var(--fam-ease);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.task-sheet.is-open { transform: translateY(0); }

.task-sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--fam-border);
  border-radius: 2px;
  margin: var(--fam-space-2) auto var(--fam-space-1);
  flex: 0 0 auto;
}

.task-sheet-header {
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  padding: var(--fam-space-1) var(--fam-space-3);
  border-bottom: 1px solid var(--fam-border);
  flex: 0 0 auto;
}
.task-sheet-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fam-radius-pill);
  flex: 0 0 auto;
}
.task-sheet-close:hover { background: var(--fam-surface); }
.task-sheet-close svg { width: 22px; height: 22px; }
.task-sheet-title {
  flex: 1 1 auto;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: center;
}
.task-sheet-save {
  min-height: 44px;
  padding: 0 var(--fam-space-3);
  font-size: var(--fam-fs-button);
  font-weight: 600;
  color: var(--fam-accent);
  flex: 0 0 auto;
}
.task-sheet-save:hover { background: var(--fam-accent-weak); border-radius: var(--fam-radius-md); }
.task-sheet-save[disabled] { opacity: 0.5; cursor: not-allowed; }

.task-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--fam-space-5) var(--fam-space-4) var(--fam-space-4);
}
.task-sheet-meta {
  margin: 0 0 var(--fam-space-5);
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}
.task-sheet-section {
  margin-bottom: var(--fam-space-5);
}
.task-sheet-section .field-label { display: block; margin-bottom: var(--fam-space-2); }

.lister-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
}
.lister-check {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  padding: var(--fam-space-3) var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  text-align: left;
  font-size: var(--fam-fs-body);
  transition: border-color var(--fam-dur) var(--fam-ease),
              background var(--fam-dur) var(--fam-ease);
  min-height: 56px;
}
.lister-check[aria-checked="true"] {
  border-color: var(--fam-accent);
  background: var(--fam-accent-weak);
}
.lister-check.is-locked { opacity: 0.7; cursor: default; }

.lister-check .check-mark {
  width: 22px;
  height: 22px;
  border: 2px solid var(--fam-muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.lister-check[aria-checked="true"] .check-mark {
  background: var(--fam-accent);
  border-color: var(--fam-accent);
}
.lister-check .check-mark svg { width: 14px; height: 14px; color: var(--fam-on-color); opacity: 0; }
.lister-check[aria-checked="true"] .check-mark svg { opacity: 1; }

.lister-check .check-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--fam-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fam-on-color);
  flex: 0 0 auto;
}
.lister-check .check-swatch svg { width: 14px; height: 14px; }
.lister-check .all-swatch { background: var(--fam-fg); }
.lister-check[data-color="1"] .check-swatch { background: var(--fam-list-1); }
.lister-check[data-color="2"] .check-swatch { background: var(--fam-list-2); }
.lister-check[data-color="3"] .check-swatch { background: var(--fam-list-3); }
.lister-check[data-color="4"] .check-swatch { background: var(--fam-list-4); }
.lister-check[data-color="5"] .check-swatch { background: var(--fam-list-5); }

.lister-check .check-name {
  flex: 1 1 auto;
  word-break: break-word;
  color: var(--fam-fg);
}
.lister-check .check-auto {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  flex: 0 0 auto;
}

/* ============== Kalender (agenda) ============== */

.kal-agenda {
  padding-bottom: var(--fam-space-3);
}

.kal-agenda-dayhead {
  position: sticky;
  top: 56px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: var(--fam-space-2);
  padding: var(--fam-space-3) var(--fam-space-4) var(--fam-space-2);
  background: var(--fam-bg);
  border-bottom: 1px solid var(--fam-border);
}
.kal-agenda-big {
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
}
.kal-agenda-rel {
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}
.kal-agenda-dayhead.is-today .kal-agenda-big {
  color: var(--fam-accent);
}

.kal-evrow {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  padding: var(--fam-space-3) var(--fam-space-4);
  min-height: 56px;
  text-align: left;
  background: var(--fam-bg);
  border-bottom: 1px solid var(--fam-border);
  transition: background var(--fam-dur) var(--fam-ease);
}
.kal-evrow:hover { background: var(--fam-surface); }

.ev-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-accent);
}
.ev-dot[data-user="Bo"]      { background: var(--fam-user-1); }
.ev-dot[data-user="Fride"]   { background: var(--fam-user-2); }
.ev-dot[data-user="June"]    { background: var(--fam-user-3); }
.ev-dot[data-user="Kristin"] { background: var(--fam-user-4); }
.ev-dot[data-user="Martin"]  { background: var(--fam-user-5); }

.ev-time {
  flex: 0 0 auto;
  min-width: 84px;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  font-variant-numeric: tabular-nums;
}
.ev-title {
  flex: 1 1 auto;
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
  word-break: break-word;
}
.ev-title .ev-lock {
  margin-left: 4px;
  color: var(--fam-muted);
  vertical-align: -2px;
}
.ev-title .ev-lock svg { width: 13px; height: 13px; }

.kal-agenda-loadmore {
  display: block;
  width: 100%;
  padding: var(--fam-space-4);
  text-align: center;
  font-size: var(--fam-fs-caption);
  font-weight: 600;
  color: var(--fam-accent);
}
.kal-agenda-loadmore:hover { background: var(--fam-accent-weak); }

/* Hendelse-sheet — to tider side om side + notat-textarea */
.kal-sheet-times {
  display: flex;
  gap: var(--fam-space-3);
}
.kal-sheet-times .field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
}

.field-textarea {
  height: auto;
  min-height: 80px;
  padding: var(--fam-space-3);
  line-height: 1.5;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

/* Oppgave-sheet: redigerbart tittelfelt (erstatter ikke-redigerbar overskrift) */
.ts-title-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--fam-space-1);
  padding: var(--fam-space-2) var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-fg);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}
.ts-title-input:focus-visible {
  border-color: var(--fam-accent);
  outline: 2px solid var(--fam-accent);
  outline-offset: 0;
}

/* Oppgave-sheet: lister som sammenleggbar dropdown (sparer vertikal plass) */
.lister-dropdown summary { list-style: none; }
.lister-dropdown summary::-webkit-details-marker { display: none; }
.lister-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--fam-space-2);
  width: 100%;
  min-height: 56px;
  padding: var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  text-align: left;
  cursor: pointer;
}
.lister-dropdown-toggle .ldt-summary {
  flex: 1 1 auto;
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
}
.lister-dropdown-toggle .ldt-empty { color: var(--fam-muted); }
.lister-dropdown-toggle .chev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--fam-muted);
  transition: transform var(--fam-dur) var(--fam-ease);
}
.lister-dropdown[open] .lister-dropdown-toggle .chev { transform: rotate(90deg); }
.lister-dropdown .lister-checks { margin-top: var(--fam-space-2); }

/* Oppgave-sheet: ansvarlig som nedtrekk (skalerer til store familier) */
.ansv-dropdown summary { list-style: none; }
.ansv-dropdown summary::-webkit-details-marker { display: none; }
.ansv-toggle {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  text-align: left;
  cursor: pointer;
}
.ansv-toggle .ansv-name {
  flex: 1 1 auto;
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
}
.ansv-toggle .chev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--fam-muted);
  transition: transform var(--fam-dur) var(--fam-ease);
}
.ansv-dropdown[open] .ansv-toggle .chev { transform: rotate(90deg); }

.ansv-options {
  margin-top: var(--fam-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
  max-height: 280px;
  overflow-y: auto;
}
.ansv-opt {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  text-align: left;
  font-size: var(--fam-fs-body);
  transition: border-color var(--fam-dur) var(--fam-ease),
              background var(--fam-dur) var(--fam-ease);
}
.ansv-opt[aria-checked="true"] {
  border-color: var(--fam-accent);
  background: var(--fam-accent-weak);
}
.ansv-opt .ansv-opt-name {
  flex: 1 1 auto;
  word-break: break-word;
  color: var(--fam-fg);
}
.ansv-opt[aria-checked="true"] .ansv-opt-name {
  color: var(--fam-accent);
  font-weight: 600;
}
.ansv-opt .ansv-pick {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--fam-accent);
  opacity: 0;
}
.ansv-opt[aria-checked="true"] .ansv-pick { opacity: 1; }

/* Rad-indikator: oppgaven har en beskrivelse */
.task-note {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--fam-muted);
}

/* Native date/time-inputs: tving lesbar høyde + 16px (unngå iOS-zoom) */
.field-input[type="date"],
.field-input[type="time"] {
  min-height: 44px;
  font-size: var(--fam-fs-body);
}

/* ============== Kalender (uke + dag) ============== */

/* Segmentert kontroll [Kommende | Uke] under app-header */
.kal-seg {
  display: flex;
  gap: var(--fam-space-2);
  padding: var(--fam-space-2) var(--fam-space-4);
  border-bottom: 1px solid var(--fam-border);
}
.kal-seg button {
  flex: 1;
  min-height: 36px;
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-pill);
  font-size: var(--fam-fs-caption);
  font-weight: 600;
  color: var(--fam-muted);
  background: var(--fam-bg);
}
.kal-seg button.is-active {
  background: var(--fam-accent);
  border-color: var(--fam-accent);
  color: var(--fam-on-color);
}

/* Uke-nav-rad [‹] Uke NN · DD.–DD. mnd [›] */
.kal-nav {
  display: flex;
  align-items: center;
  padding: var(--fam-space-3) var(--fam-space-4) var(--fam-space-1);
  gap: var(--fam-space-2);
}
.kal-nav .kal-nav-title {
  flex: 1;
  text-align: center;
  font-size: var(--fam-fs-h2);
  font-weight: 600;
}

/* «Denne uka»-link på egen rad under nav-en */
.kal-today-row {
  text-align: right;
  padding: 0 var(--fam-space-4) var(--fam-space-2);
}
.today-link {
  font-size: var(--fam-fs-caption);
  color: var(--fam-accent);
  font-weight: 600;
  padding: var(--fam-space-1) var(--fam-space-2);
}

/* Dag-seksjon i ukevisning */
.kal-uke-day {
  margin-bottom: var(--fam-space-4);
}
.kal-uke-dayhead {
  position: sticky;
  top: 56px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: var(--fam-space-2);
  width: 100%;
  padding: var(--fam-space-3) var(--fam-space-4) var(--fam-space-2);
  background: var(--fam-bg);
  border-bottom: 1px solid var(--fam-border);
  text-align: left;
  font-size: var(--fam-fs-h2);
  font-weight: 600;
  color: var(--fam-fg);
}
.kal-uke-dayhead.is-today,
.kal-uke-dayhead.is-today .kal-uke-daytitle {
  color: var(--fam-accent);
}
.kal-uke-empty {
  padding: var(--fam-space-2) var(--fam-space-4) var(--fam-space-3);
  color: var(--fam-muted);
  font-size: var(--fam-fs-caption);
}

/* Dagsvisning — sticky full-bredde «+ Ny avtale»-knapp nederst */
.kal-day-add {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fam-space-2);
  width: 100%;
  min-height: 52px;
  padding: var(--fam-space-2) var(--fam-space-4)
           max(var(--fam-space-2), env(safe-area-inset-bottom));
  background: var(--fam-bg);
  border-top: 1px solid var(--fam-border);
  font-size: var(--fam-fs-body);
  font-weight: 500;
  color: var(--fam-accent);
  z-index: 30;
}
.kal-day-add:hover { background: var(--fam-accent-weak); }
.kal-day-add svg { width: 22px; height: 22px; }

/* Lang dato-tittel i dagsvisning kan bli lang ("Mandag 11. mai 2026") —
   sørg for at den ikke skubber avatar/Logg ut ut av headeren på 375px. */
.kal-dag-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============== Kalender (måneds-grid) ============== */

/* Grid-shell — kant-til-kant på 375px (negative margins kanselllerer
   .app-main sin horisontale padding) for å maksimere bredde per celle. */
.kal-grid-shell {
  margin-left: calc(-1 * var(--fam-space-4));
  margin-right: calc(-1 * var(--fam-space-4));
}
.kal-grid-shell[hidden] { display: none; }

.kal-weekdays {
  display: grid;
  /* minmax(0, 1fr) gjør at kolonnene blir nøyaktig 1/7 uansett innhold —
     uten dette utvider lange tekst-barer i .kal-ev intrinsic min-content og
     forskyver kolonnebredden, så bredden endrer seg mellom måneder. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  font-size: 0.6875rem;
  color: var(--fam-muted);
  text-align: center;
  padding: var(--fam-space-2) 0;
  border-bottom: 1px solid var(--fam-border);
  background: var(--fam-bg);
}

/* 1px-gap på border-farget bakgrunn = hårfine gridlinjer uten per-celle-border. */
.kal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--fam-border);
}

.kal-cell {
  background: var(--fam-bg);
  min-height: 78px;
  /* Eksplisitt min-width:0 så .kal-ev sin nowrap-tekst ikke forhindrer cellen
     i å krympe til sin 1/7-andel (jf. minmax(0, 1fr) på .kal-grid). */
  min-width: 0;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  text-align: left;
  align-items: stretch;
  cursor: pointer;
}
.kal-cell.is-other {
  background: var(--fam-surface);
}
.kal-cell.is-other .daynum {
  color: var(--fam-muted);
}

.daynum {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fam-fg);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2px;
}
.kal-cell.is-today .daynum {
  background: var(--fam-accent);
  color: var(--fam-on-color);
  border-radius: var(--fam-radius-pill);
  justify-content: center;
  padding-left: 0;
  align-self: flex-start;
  width: 22px;
  height: 22px;
}

/* Hendelses-bar i celle. Blokk-nivå = full cellebredde; ellipsis krever
   `white-space:nowrap`. Default blå (delt) — privat overstyres via data-priv. */
.kal-ev {
  font-size: 0.625rem;
  line-height: 1.25;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fam-on-color);
  background: var(--fam-accent);
  cursor: pointer;
  display: block;
  max-width: 100%;
}
.kal-ev[data-priv="true"][data-user="Bo"]      { background: var(--fam-user-1); }
.kal-ev[data-priv="true"][data-user="Fride"]   { background: var(--fam-user-2); }
.kal-ev[data-priv="true"][data-user="June"]    { background: var(--fam-user-3); }
.kal-ev[data-priv="true"][data-user="Kristin"] { background: var(--fam-user-4); }
.kal-ev[data-priv="true"][data-user="Martin"]  { background: var(--fam-user-5); }
/* Fallback for ukjent eier på privat avtale */
.kal-ev[data-priv="true"] { background: var(--fam-user-5); }

.kal-ev-more {
  font-size: 0.625rem;
  color: var(--fam-muted);
  padding-left: 4px;
  line-height: 1.25;
}

/* ============================================================
   Innstillinger (Fase 13). Generisk innstillingsliste — grupperbare
   seksjoner + radioliste-rader. Bygget for å vokse med flere innstillinger.
   ============================================================ */
.innstillinger-main {
  padding: var(--fam-space-5) var(--fam-space-4) var(--fam-space-6);
}
.settings-group { margin-bottom: var(--fam-space-6); }
.settings-group-title {
  margin: 0 0 var(--fam-space-3);
  padding-left: var(--fam-space-2);
  font-size: var(--fam-fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fam-muted);
}
.opt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-lg);
  overflow: hidden;
}
.opt-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--fam-space-4);
  background: var(--fam-bg);
  border: 0;
  font: inherit;
  font-size: var(--fam-fs-body);
  color: var(--fam-fg);
  text-align: left;
  cursor: pointer;
}
.opt-list li + li .opt-row { border-top: 1px solid var(--fam-border); }
.opt-row:hover { background: var(--fam-surface); }
.opt-icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--fam-muted);
}
.opt-label { flex: 1 1 auto; font-weight: 500; }
.opt-check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--fam-accent);
  opacity: 0;
}
.opt-row[aria-checked="true"] .opt-check { opacity: 1; }
.opt-row[aria-checked="true"] .opt-icon { color: var(--fam-accent); }

/* Kategori-velger (handleliste): balanserer sentrert tittel i ark-headeren
   uten en lagre-knapp, og signaliserer at varenavnet kan tappes. */
.hl-cat-spacer { flex: 0 0 auto; width: 44px; }
.handle-section .task-title { cursor: pointer; }
.settings-hint {
  margin: var(--fam-space-3) var(--fam-space-2) 0;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
  line-height: 1.4;
}
.opt-chevron {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--fam-muted);
}

/* ===== Innmelding (Feil & idéer) ===== */
.innmelding-main {
  padding: var(--fam-space-4) var(--fam-space-4) var(--fam-space-6);
}
/* Type-segment [Feil | Idé] — egen variant med 44px touch-target */
.innm-seg {
  display: flex;
  gap: var(--fam-space-2);
  margin-bottom: var(--fam-space-5);
}
.innm-seg-btn {
  flex: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fam-space-2);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-pill);
  background: var(--fam-bg);
  font: inherit;
  font-size: var(--fam-fs-button);
  font-weight: 600;
  color: var(--fam-muted);
  cursor: pointer;
}
.innm-seg-btn svg { width: 18px; height: 18px; }
.innm-seg-btn.is-active {
  background: var(--fam-accent);
  border-color: var(--fam-accent);
  color: var(--fam-on-color);
}
/* Skjema */
.innm-form {
  display: flex;
  flex-direction: column;
  gap: var(--fam-space-2);
  margin-bottom: var(--fam-space-6);
}
.innm-form .field-label {
  margin-top: var(--fam-space-2);
  font-size: var(--fam-fs-caption);
  font-weight: 600;
  color: var(--fam-muted);
}
.innm-input, .innm-textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fam-fs-body);
  padding: var(--fam-space-3);
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  background: var(--fam-bg);
  color: var(--fam-fg);
}
.innm-textarea { min-height: 88px; resize: vertical; }
.innm-input:focus, .innm-textarea:focus {
  outline: 2px solid var(--fam-accent);
  outline-offset: 1px;
  border-color: var(--fam-accent);
}
.innm-send {
  margin-top: var(--fam-space-3);
  min-height: 48px;
  border: 0;
  border-radius: var(--fam-radius-md);
  background: var(--fam-accent);
  color: var(--fam-on-color);
  font: inherit;
  font-size: var(--fam-fs-button);
  font-weight: 600;
  cursor: pointer;
}
.innm-send:disabled { opacity: 0.5; cursor: default; }
/* Liste */
.innm-liste { list-style: none; margin: 0; padding: 0; }
.innm-rad {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  min-height: 56px;
  padding: var(--fam-space-3) var(--fam-space-2);
  border-bottom: 1px solid var(--fam-border);
}
.innm-num {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fam-fs-caption);
  padding: 4px 8px;
  border-radius: var(--fam-radius-sm);
  background: var(--fam-surface);
  color: var(--fam-muted);
}
.innm-num.feil { color: var(--fam-danger); background: var(--fam-danger-weak); }
.innm-num.ide { color: var(--fam-accent); background: var(--fam-accent-weak); }
.innm-tittel { flex: 1 1 auto; }
.innm-pill {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--fam-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.innm-pill.aktiv { background: var(--fam-accent-weak); color: var(--fam-accent); }
.innm-pill.inaktiv { background: var(--fam-surface); color: var(--fam-completed); }
.innm-rad.is-inaktiv .innm-tittel { color: var(--fam-completed); text-decoration: line-through; }
/* Aktive innmeldinger er redigerbare (tap → ark) */
.innm-rad.is-redigerbar { cursor: pointer; }
.innm-rad.is-redigerbar:hover { background: var(--fam-surface); }
.innm-empty {
  padding: var(--fam-space-5) var(--fam-space-2);
  color: var(--fam-muted);
  font-size: var(--fam-fs-caption);
}

/* ---- Anskaffelser ---- */
.ank-group { margin-bottom: var(--fam-space-2); }
.ank-group-heading { margin: 0; }
.ank-group-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  min-height: 56px;
  padding: var(--fam-space-3) var(--fam-space-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fam-border);
  font: inherit;
  font-weight: 600;
  color: var(--fam-fg);
  text-align: left;
  cursor: pointer;
}
.ank-group-btn:hover { background: var(--fam-surface); }
.ank-group-chev {
  width: 18px;
  height: 18px;
  color: var(--fam-muted);
  flex: 0 0 auto;
  transition: transform 150ms var(--fam-ease);
}
.ank-group-btn[aria-expanded="true"] .ank-group-chev { transform: rotate(180deg); }
.ank-group-ikon { width: 18px; height: 18px; flex: 0 0 auto; }
.ank-group-ikon-vurderes { color: var(--fam-muted); }
.ank-group-ikon-besluttet { color: var(--fam-accent); }
.ank-group-ikon-kjopt { color: var(--fam-success); }
.ank-group-tittel { flex: 1 1 auto; font-size: var(--fam-fs-h2); }
.ank-group-sum {
  color: var(--fam-muted);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.ank-group-antall {
  color: var(--fam-muted);
  font-weight: 500;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.ank-row { cursor: pointer; }
.ank-row .task-row {
  display: flex;
  align-items: center;
  gap: var(--fam-space-3);
  min-height: 60px;
  padding: var(--fam-space-3) var(--fam-space-2);
  border-bottom: 1px solid var(--fam-border);
}
.ank-row:hover .task-row { background: var(--fam-surface); }
.ank-main { flex: 1 1 auto; min-width: 0; }
.ank-row .task-title { display: block; }
.ank-row .task-title.is-done { color: var(--fam-completed); text-decoration: line-through; }
.ank-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fam-space-2);
  margin-top: 3px;
  font-size: var(--fam-fs-caption);
  color: var(--fam-muted);
}
.ank-pris { font-weight: 600; color: var(--fam-fg); font-variant-numeric: tabular-nums; }
.ank-prio { display: inline-flex; align-items: center; }
.ank-prio svg { width: 15px; height: 15px; }
.ank-prio-hoy { color: var(--fam-danger); }
.ank-prio-middels { color: var(--fam-accent); }
.ank-prio-lav { color: var(--fam-muted); }
.ank-frist { display: inline-flex; align-items: center; gap: 3px; }
.ank-frist svg { width: 13px; height: 13px; }
.ank-frist.is-forfalt { color: var(--fam-danger); font-weight: 600; }
/* Kategori-tag på raden (innmelding I-2) */
.ank-kat {
  padding: 1px 8px;
  border-radius: var(--fam-radius-pill);
  background: var(--fam-surface);
  color: var(--fam-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

/* «Kjøpt»-seksjonen dempes — ferdige innkjøp leses som avsluttet (innmelding I-1) */
.ank-group-kjopt .ank-group-btn,
.ank-group-kjopt .ank-group-ikon-kjopt { color: var(--fam-muted); }
.ank-group-kjopt .task-list { opacity: 0.6; }
/* Anskaffelser-rader sveipes aldri (sletting i arket) — fjern det røde slett-
   underlaget så det ikke lekker gjennom når Kjøpt-lista dempes med opacity. */
.ank-row::before { display: none; }
/* Ingen rad-skiller i Kjøpt — minst mulig oppmerksomhet til ferdige varer */
.ank-group-kjopt .ank-row,
.ank-group-kjopt .ank-row .task-row { border-bottom: 0; }

/* Segmentert kontroll (status + prioritet) i detalj-arket */
.ank-seg {
  display: flex;
  border: 1px solid var(--fam-border);
  border-radius: var(--fam-radius-md);
  overflow: hidden;
}
.ank-seg-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: var(--fam-space-2) var(--fam-space-1);
  background: var(--fam-bg);
  border: 0;
  border-left: 1px solid var(--fam-border);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fam-muted);
  cursor: pointer;
}
.ank-seg-btn:first-child { border-left: 0; }
.ank-seg-btn.is-active { background: var(--fam-accent); color: var(--fam-on-color); font-weight: 600; }

.ank-lenke-open {
  display: inline-flex;
  align-items: center;
  gap: var(--fam-space-1);
  margin-top: var(--fam-space-2);
  color: var(--fam-accent);
  font-size: var(--fam-fs-caption);
  text-decoration: none;
}
.ank-lenke-open svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .ank-group-chev { transition: none; }
}

/* ============== Endre-passord-ark (Fase 41) ============== */
.pw-form .field-input { width: 100%; box-sizing: border-box; }
.pw-form .login-error { margin-top: var(--fam-space-3); }

/* ============== Kunder (feature leveranser, Fase 6) ============== */
.header-add {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: none; background: var(--fam-accent); color: var(--fam-on-color);
  border-radius: var(--fam-radius-pill); cursor: pointer;
}
.header-add svg { width: 22px; height: 22px; }
.header-save {
  border: none; background: none; color: var(--fam-accent);
  font: inherit; font-weight: 600; font-size: var(--fam-fs-button);
  padding: var(--fam-space-2) var(--fam-space-3); cursor: pointer; min-height: 44px;
}
.header-save[disabled] { opacity: 0.5; cursor: not-allowed; }

.kunde-list { list-style: none; margin: 0; padding: 0; }
.kunde-row {
  width: 100%; display: flex; align-items: center; gap: var(--fam-space-3);
  padding: var(--fam-space-3) 0; min-height: 56px;
  border: none; background: none; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--fam-border);
}
.kunde-row:active { background: var(--fam-surface); }
.kunde-ic {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--fam-radius-md); background: var(--fam-accent-weak);
  color: var(--fam-accent); font-weight: 700;
}
.kunde-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kunde-meta .t { font-weight: 600; color: var(--fam-fg); }
.kunde-meta .s { font-size: var(--fam-fs-caption); color: var(--fam-muted); }
.kunde-chev { width: 18px; height: 18px; color: var(--fam-muted); flex: 0 0 auto; }

.empty-state { padding: var(--fam-space-6) var(--fam-space-4); text-align: center; color: var(--fam-muted); }
.empty-state p { margin: 0 0 var(--fam-space-4); }
.field-feil { color: var(--fam-danger); font-size: var(--fam-fs-caption); margin: 0 0 var(--fam-space-3); }

/* ============== Leveranser (feature leveranser, Fase 7) ============== */
/* Filter-sone (kompakt, ingen horisontal scroll) */
.lev-filters { margin-bottom: var(--fam-space-2); }
.searchrow { display: flex; gap: var(--fam-space-2); margin-bottom: var(--fam-space-2); }
.search { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--fam-border); border-radius: var(--fam-radius-sm); font: inherit; font-size: var(--fam-fs-body); min-height: 44px; }
.search:focus-visible { outline: none; border-color: var(--fam-accent); }
.filter-btn { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--fam-border); background: var(--fam-bg); border-radius: var(--fam-radius-sm); cursor: pointer; position: relative; }
.filter-btn svg { width: 20px; height: 20px; color: var(--fam-fg); }
.filter-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: var(--fam-radius-pill); background: var(--fam-accent); }
.status-select { width: 100%; padding: 11px 12px; border: 1px solid var(--fam-border); border-radius: var(--fam-radius-sm); font: inherit; font-size: var(--fam-fs-body); background: var(--fam-bg); min-height: 44px; margin-bottom: var(--fam-space-2); }
.lev-filterpanel { display: flex; flex-direction: column; gap: var(--fam-space-2); margin-bottom: var(--fam-space-2); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--fam-space-2); }
.chip { display: inline-flex; align-items: center; background: var(--fam-accent-weak); color: var(--fam-accent); border: none; border-radius: var(--fam-radius-sm); padding: 6px 10px; font-size: var(--fam-fs-caption); font-weight: 600; cursor: pointer; }
.chip-add-select { border: 1px dashed var(--fam-border); color: var(--fam-muted); border-radius: var(--fam-radius-sm); padding: 6px 10px; font: inherit; font-size: var(--fam-fs-caption); background: var(--fam-bg); cursor: pointer; min-height: 40px; }

/* Liste */
.lev-list { list-style: none; margin: 0; padding: 0; }
.lev-row { width: 100%; display: flex; align-items: center; gap: var(--fam-space-3); padding: var(--fam-space-3) 0; min-height: 56px; border: none; background: none; text-align: left; cursor: pointer; border-bottom: 1px solid var(--fam-border); }
.lev-row:active { background: var(--fam-surface); }
.lev-row .meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lev-row .meta .t { font-weight: 600; color: var(--fam-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lev-row .meta .s { font-size: var(--fam-fs-caption); color: var(--fam-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lev-right { display: flex; align-items: center; gap: var(--fam-space-2); flex: 0 0 auto; }
.lev-st { width: 20px; height: 20px; color: var(--fam-muted); flex: 0 0 auto; }
.lev-av { width: 22px; height: 22px; border-radius: var(--fam-radius-pill); background: var(--fam-surface); color: var(--fam-fg); border: 1px solid var(--fam-border); display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; flex: 0 0 auto; }
.lev-chev { width: 18px; height: 18px; color: var(--fam-muted); flex: 0 0 auto; }

/* Detalj — seksjoner */
.sec { margin-bottom: var(--fam-space-5); }
.sec-h { font-size: var(--fam-fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fam-muted); font-weight: 600; margin: 0 0 var(--fam-space-3); }
.segment { display: flex; gap: 6px; }
.segment button { flex: 1; padding: 10px 4px; border: 1px solid var(--fam-border); background: var(--fam-bg); border-radius: var(--fam-radius-sm); font: inherit; font-size: var(--fam-fs-caption); cursor: pointer; min-height: 44px; }
.segment button.on { background: var(--fam-accent); color: var(--fam-on-color); border-color: var(--fam-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Sjekkliste */
.punkt-list { list-style: none; margin: 0; padding: 0; }
.punkt-row { display: flex; align-items: center; gap: var(--fam-space-3); padding: 10px 0; border-bottom: 1px solid var(--fam-border); }
.punkt-box { width: 26px; height: 26px; min-width: 26px; flex: 0 0 auto; border: 2px solid var(--fam-border); border-radius: var(--fam-radius-sm); background: var(--fam-bg); cursor: pointer; display: grid; place-items: center; padding: 0; }
.punkt-box.on { background: var(--fam-success); border-color: var(--fam-success); }
.punkt-box svg { width: 16px; height: 16px; color: var(--fam-on-color); }
.punkt-t { flex: 1 1 auto; min-width: 0; }
.punkt-row.done .punkt-t { color: var(--fam-completed); text-decoration: line-through; }
.punkt-del { width: 40px; height: 40px; flex: 0 0 auto; border: none; background: none; cursor: pointer; display: grid; place-items: center; color: var(--fam-muted); }
.punkt-del svg { width: 18px; height: 18px; }
.punkt-add { display: flex; gap: var(--fam-space-2); margin-top: var(--fam-space-3); }
.punkt-add .field-input { flex: 1 1 auto; }
.lev-hint { color: var(--fam-muted); font-size: var(--fam-fs-caption); margin: 0; }

/* ============== Leveranse-deling (feature leveranse-deling, Fase 9) ============== */
.punkt-eye { width: 40px; height: 40px; flex: 0 0 auto; border: none; background: none; cursor: pointer; display: grid; place-items: center; color: var(--fam-muted); }
.punkt-eye svg { width: 20px; height: 20px; }
.punkt-eye.on { color: var(--fam-accent); }

.linkbox { display: flex; gap: var(--fam-space-2); margin-top: var(--fam-space-3); }
.linkbox .field-input { flex: 1 1 auto; min-width: 0; background: var(--fam-surface); color: var(--fam-muted); font-size: var(--fam-fs-caption); }
.kopier { flex: 0 0 auto; border: 1px solid var(--fam-accent); color: var(--fam-accent); background: none; border-radius: var(--fam-radius-sm); padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; white-space: nowrap; }
.kopier:active { background: var(--fam-accent-weak); }

/* Offentlig kundevisning */
.kv { min-height: 100vh; background: var(--fam-surface); }
.kv-wrap { max-width: 640px; margin: 0 auto; }
.kv-head { padding: var(--fam-space-5) var(--fam-space-4) var(--fam-space-4); background: var(--fam-bg); border-bottom: 1px solid var(--fam-border); }
.kv-avsender { font-size: var(--fam-fs-caption); color: var(--fam-muted); margin: 0 0 var(--fam-space-2); }
.kv-tittel { font-size: 1.4rem; font-weight: 700; margin: 0 0 var(--fam-space-3); }
.kv-meta { display: flex; gap: var(--fam-space-4); align-items: center; flex-wrap: wrap; }
.kv-badge { font-size: var(--fam-fs-caption); font-weight: 600; padding: 4px 12px; border-radius: var(--fam-radius-sm); background: var(--fam-surface); color: var(--fam-muted); }
.kv-frist { font-size: var(--fam-fs-caption); color: var(--fam-muted); }
.kv-body { padding: var(--fam-space-4); }
.kv-card { background: var(--fam-bg); border: 1px solid var(--fam-border); border-radius: var(--fam-radius-md); padding: var(--fam-space-4); margin-bottom: var(--fam-space-4); }
.kv-card h2 { font-size: var(--fam-fs-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fam-muted); font-weight: 600; margin: 0 0 var(--fam-space-2); }
.kv-card p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.kv-progress { height: 6px; background: var(--fam-border); border-radius: var(--fam-radius-pill); overflow: hidden; margin: var(--fam-space-2) 0 var(--fam-space-3); }
.kv-progress-bar { display: block; height: 100%; width: 0; background: var(--fam-success); transition: width var(--fam-dur) var(--fam-ease); }
.kv-punkt { display: flex; align-items: center; gap: var(--fam-space-3); padding: var(--fam-space-2) 0; }
.kv-box { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--fam-border); border-radius: var(--fam-radius-sm); display: grid; place-items: center; color: var(--fam-on-color); }
.kv-box.on { background: var(--fam-success); border-color: var(--fam-success); }
.kv-box svg { width: 14px; height: 14px; }
.kv-punkt-t.done { color: var(--fam-completed); text-decoration: line-through; }
.kv-foot { padding: var(--fam-space-4); text-align: center; color: var(--fam-muted); font-size: var(--fam-fs-caption); }
.kv-feil { padding: var(--fam-space-7) var(--fam-space-4); text-align: center; }
.kv-feil h1 { font-size: var(--fam-fs-h1); margin: 0 0 var(--fam-space-3); }
.kv-feil p { color: var(--fam-muted); margin: 0; }