/* Husprofilen (/husprofil): en ordnad inställningssida.

   Hjälten överst, en innehållslista till vänster som följer med på bred skärm (samma form som guiderna)
   och avsnitten i en spalt till höger, från huset till det som inte går att ångra. Brickorna med ikon är
   mjuka ytor och bär --on-soft, aldrig --on-color, som blev 1,3:1 i mörkt läge. Färgen är en flik att
   känna igen avsnittet på; rubriken bär alltid betydelsen. Läget för en byggdel står i ord i pillan. */

.hp { --hp-gap: 28px; }

/* ── Hjälten ─────────────────────────────────────────────────────────────── */
.hp-hjalte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin: 4px 0 var(--hp-gap); padding: 30px 32px;
  background: var(--sky-soft); color: var(--on-soft);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-l);
}
.hp-hjalte-text { display: grid; gap: 10px; min-width: 0; }
.hp-hjalte .eyebrow { margin: 0; color: var(--on-soft); }
.hp-hjalte h1 {
  margin: 0; font: 800 clamp(34px, 4.4vw, 54px)/1 var(--f-display); letter-spacing: -.03em;
  color: var(--on-soft); overflow-wrap: anywhere;
}
.hp-fakta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hp-fakta li { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15.5px; color: var(--on-soft); }
.hp-hjalte-lead { margin: 2px 0 0; max-width: 58ch; color: var(--on-soft); font-size: 15.5px; line-height: 1.5; }
.hp-hjalte-pillor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hp-hjalte-pillor .pill {
  min-height: 36px; padding: 6px 14px; font-size: 14px; text-decoration: none;
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line);
}
.hp-hjalte-pillor .pill:hover { border-color: var(--line-strong); }
.hp-hjalte-pillor .hp-pill-plan.is-plus { background: var(--sun-soft); color: var(--on-soft); border-color: transparent; }
.hp-hjalte-figur { display: grid; place-items: center; padding-right: 8px; }
.hp-hjalte-figur .husse { transform: rotate(-4deg); }

/* ── Bricka med ikon: avsnitten, listan och inbjudan ─────────────────────── */
.hp-ikon {
  --ton: var(--paper-2);
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--ton); color: var(--on-soft);
}
.hp-ton-himmel { --ton: var(--sky-soft); }
.hp-ton-sol { --ton: var(--sun-soft); }
.hp-ton-mint { --ton: var(--mint-soft); }
.hp-ton-syren { --ton: var(--lilac-soft); }
.hp-ton-rosa { --ton: var(--pink-soft); }
.hp-ton-tomat { --ton: var(--tomato-soft); }

/* ── Kroppen: listan till vänster, avsnitten till höger ──────────────────── */
.hp-kropp { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.hp-avsnitten { display: grid; gap: 52px; min-width: 0; }

.hp-toc { position: sticky; top: 96px; align-self: start; }
.hp-toc-rubrik {
  margin: 0 0 8px; font-size: var(--fs-eyebrow, 12px); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2);
}
.hp-toc ol, .hp-toc-smal ol { list-style: none; margin: 0; padding: 0; display: grid; }
.hp-toc a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px 6px 12px;
  color: var(--ink-2); font-weight: 600; font-size: 14.5px; text-decoration: none;
  border-left: 3px solid var(--line); transition: color .15s, border-color .15s, background-color .15s;
}
.hp-toc a svg { flex: none; }
.hp-toc a:hover { color: var(--ink); border-left-color: var(--line-strong); background: var(--paper-2); }
.hp-toc a[aria-current] { color: var(--ink); border-left-color: var(--ink); font-weight: 700; background: var(--paper-2); }
.hp-toc a.hp-toc-fara { margin-top: 10px; color: var(--tomato-ink); }
.hp-toc a.hp-toc-fara[aria-current] { border-left-color: var(--tomato-ink); }
/* Märket för ändringar som inte sparats: ord på papper med ram, så att det inte hänger på en färg. */
.hp-toc-osparat {
  margin-left: auto; flex: none; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  color: var(--ink); background: var(--card); border: var(--bw-thin) solid var(--line-strong);
}

.hp-toc-smal { display: none; }

/* ── Avsnitten ───────────────────────────────────────────────────────────── */
.hp-avsnitt { scroll-margin-top: 96px; min-width: 0; display: grid; gap: 14px; align-content: start; }
.hp-avsnitt-head { display: flex; align-items: flex-start; gap: 14px; }
.hp-avsnitt-head h2 { margin: 0; }
.hp-avsnitt-lead { margin: 4px 0 0; max-width: 64ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.hp-kort {
  min-width: 0; margin: 0; padding: 22px 24px;
  background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-l);
}
.hp .hp-kort > .card, .hp .hp-par > .card { margin: 0; }

/* Huset: delarna i formuläret, med en tunn linje emellan. */
.hp-form { padding-bottom: 0; }
.hp-del { display: grid; gap: 14px; padding: 4px 0 24px; scroll-margin-top: 96px; }
.hp-del + .hp-del { border-top: var(--bw-thin) solid var(--line); padding-top: 22px; }
.hp-del h3, .hp-underrubrik {
  margin: 0; font: 700 13px/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.hp-del .field { margin: 0; }
/* Rutnätets barn får krympa, annars drar växlaren för boendetyp ut sidan på en 360 px telefon. */
.hp-del > *, .hp-falt-rad > * { min-width: 0; }
.hp-falt-rad { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 260px); gap: 14px; }
.hp-del .check-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px 16px; }
/* Raden som rutnät: rutan, namnet och intervallet på en rad, en eventuell etikett under namnet. En
   lång etikett på samma rad ("Passar inte längre ...") sköt ut sidan 100 px i sidled på telefonen. */
.hp .check-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  min-height: 44px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-s); text-align: left;
}
.hp .check-row:hover { background: var(--paper-2); }
.hp .check-row > .small { text-align: right; }
.hp .check-row > .tag { grid-column: 2 / -1; justify-self: start; white-space: normal; line-height: 1.3; }
/* Underhållet per kategori. Rubriken är summary, så grupperna fälls ut utan skript och med tangentbordet. */
.hp-kategorier { display: grid; gap: 0; }
.hp-kat { border-top: var(--bw-thin) solid var(--line-soft); }
.hp-kat:last-child { border-bottom: var(--bw-thin) solid var(--line-soft); }
.hp-kat-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 8px 4px;
  cursor: pointer; list-style: none; border-radius: var(--r-s);
}
.hp-kat-head::-webkit-details-marker { display: none; }
.hp-kat-head::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.hp-kat[open] > .hp-kat-head::before { transform: rotate(45deg); }
.hp-kat-head:hover { background: var(--paper-2); }
.hp-kat-namn { font: 650 17px/1.25 var(--f-display); color: var(--ink); }
.hp-kat-n { color: var(--ink-2); font-size: var(--fs-small); }
.hp-kat-head > .tag { white-space: normal; }
.hp-kat > .check-grid { padding: 0 8px 12px 26px; }
@media (prefers-reduced-motion: reduce) { .hp-kat-head::before { transition: none; } }
.hp-hjalp { display: flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 66ch; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.hp-hjalp svg { flex: none; margin-top: 2px; }

/* Spara-raden följer med längst ner medan man är i formuläret, så knappen aldrig är en skärm bort. */
.hp-spara {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 -24px; padding: 14px 24px;
  background: var(--card); border-top: var(--bw-thin) solid var(--line);
  border-radius: 0 0 var(--r-l) var(--r-l);
}
.hp-sparad { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 650; color: var(--mint-ink); }
/* Läget vid sparaknappen. Det levande området ritas alltid, också tomt: ett område som dyker upp
   samtidigt som texten läses inte upp av alla skärmläsare. */
.hp-sparastatus { display: inline-flex; align-items: center; margin: 0; }
.hp-osparat { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); }
.hp-osparat svg, .hp-sparad svg { flex: none; }
.hp-spara-changed, .hp-spara-invalid { border-top-color: var(--line-strong); box-shadow: 0 -6px 18px var(--shadow-c, transparent); }
.hp-spara-fel { flex-basis: 100%; }

/* ── Fälten: etikett, fält, hjälprad, felrad (SettingsField) ─────────────── */
.st-falt { display: grid; gap: 6px; align-content: start; margin: 0; }
.st-falt > label { margin-bottom: 0; }
.st-hjalp { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
/* Felet är ord med en ikon under fältet, och ramen blir tjockare: rött ensamt säger ingenting. */
.st-fel {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--tomato-ink);
}
.st-fel svg { flex: none; margin-top: 2px; }
.st-falt.has-fel .input { border-color: var(--tomato-ink); border-width: 2px; }

/* ── Livslängder: en stapel per byggdel ──────────────────────────────────── */
.hp-delar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hp-byggdel { display: grid; gap: 8px; padding: 16px 0; border-top: var(--bw-thin) solid var(--line); }
.hp-byggdel:first-child { border-top: 0; padding-top: 2px; }
.hp-byggdel-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hp-byggdel-namn { font: 650 18px/1.25 var(--f-display); color: var(--ink); }

.hp-stapel {
  --fyll: var(--mint);
  position: relative; height: 14px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--paper-2); border: var(--bw-thin) solid var(--line);
}
.hp-status-inom .hp-stapel { --fyll: var(--sun); }
.hp-status-passerad .hp-stapel { --fyll: var(--tomato); }
/* Det normala spannet som randigt fält; fyllningen ligger ovanpå och visar åldern. */
.hp-stapel-spann {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 3px, transparent 3px 8px);
}
.hp-stapel-fyllt {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill);
  background: var(--fyll); opacity: .9;
}
.hp-stapel-okand { background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--card) 6px 12px); }
.hp-stapel-skala { position: relative; height: 16px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hp-stapel-skala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.hp-stapel-skala span:first-child { left: 0; transform: none; }
.hp-stapel-skala span:last-child { transform: translateX(-60%); }

.hp-byggdel-rad { display: grid; gap: 2px; margin: 0; font-size: 14.5px; color: var(--ink); }
.hp-byggdel-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: -10px; }
.hp-byte {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 14px; background: var(--paper-2); border-radius: var(--r-m);
}
.hp-byte .field { flex: 0 1 220px; }
.lifespan-unknown { margin-top: 12px; }

/* ── Hushållet ───────────────────────────────────────────────────────────── */
.hp-medlemmar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hp-medlem {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 14px 16px; background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m);
}
.hp-medlem > .btn { grid-column: 2 / -1; justify-self: start; margin-left: -10px; }
.hp-initial {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 750 18px/1 var(--f-display); background: var(--pink-soft); color: var(--on-soft);
}
.hp-medlem:nth-child(3n+2) .hp-initial { background: var(--sky-soft); }
.hp-medlem:nth-child(3n) .hp-initial { background: var(--mint-soft); }
.hp-initial.is-agare { background: var(--lilac-soft); }
.hp-vantar .hp-initial { background: var(--paper-2); color: var(--ink-2); }
.hp-vantar { border-style: dashed; }
.hp-medlem-text { display: grid; gap: 2px; min-width: 0; }
.hp-medlem-text b { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.hp-medlem-text small { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.hp-medlem .pill { justify-self: end; }
.hp .pill.hp-pill-agare { background: var(--lilac-soft); color: var(--on-soft); border-color: transparent; }
.hp-underrubrik { margin-top: 22px; margin-bottom: 10px; }

.hp-bjud {
  display: grid; gap: 14px; margin-top: 16px; padding: 20px 22px;
  background: var(--pink-soft); color: var(--on-soft); border-radius: var(--r-l);
}
.hp-bjud-head { display: flex; align-items: center; gap: 12px; }
.hp-bjud-head .hp-ikon { background: var(--card); color: var(--ink); }
.hp-bjud-head h3 { margin: 0; font: 650 19px/1.2 var(--f-display); color: var(--on-soft); }
.hp-bjud-head p { margin: 2px 0 0; color: var(--on-soft); }
.hp-bjud-falt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 170px) auto; gap: 10px; align-items: end; }
.hp-bjud-falt .field { margin: 0; }
.hp-bjud-falt label { color: var(--on-soft); }
.hp-bjud .form-error, .hp-bjud .hp-sparad { color: var(--on-soft); }
.hp-bjud .hp-sparad { display: flex; align-items: flex-start; font-weight: 600; }
.hp-bjud .hp-sparad svg { flex: none; margin-top: 3px; }

/* ── Kalender och mejl, tipset ───────────────────────────────────────────── */
.hp-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.hp .calendar-feed, .hp .mail-choices, .hp .tip-neighbor, .hp .mail-address {
  max-width: none; margin: 0; padding: 22px 24px; background: var(--card);
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-l); box-shadow: none;
}
/* Adressen mejlen går till: under paret, så att kalendern och valen behåller sina två kolumner. */
.hp .mail-address { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; scroll-margin-top: 96px; }
.mail-address .kicker-sm { margin: 0; }
.mail-address b { overflow-wrap: anywhere; }
.mail-address-studs { display: flex; gap: 8px; align-items: flex-start; }
.mail-address-studs svg { flex: none; margin-top: 3px; }
.mail-address-form { display: grid; gap: 8px; max-width: 64ch; }
.mail-address-form label { font-weight: 700; }
.mail-address-rad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mail-address-rad .input { flex: 1 1 220px; min-width: 0; }

/* Tipsens siffror: bara antal, tre rutor som bryts till en kolumn när de inte får plats. */
.tip-standing { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; margin: 0; }
.tip-standing dt { font-size: var(--fs-small); color: var(--ink-2); }
.tip-plus { display: flex; gap: 6px; align-items: center; margin: 0; }
.tip-plus svg { flex: none; }
.tip-standing dd { margin: 0; font: 650 22px/1.2 var(--f-display); }
.hp-ny-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 0 4px; }

/* ── Export och raderat ──────────────────────────────────────────────────── */
.hp-raderat { list-style: none; margin: 0; padding: 0; display: grid; }
.hp-raderat li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 0; border-bottom: var(--bw-thin) solid var(--line);
}

/* ── Farligt sist: lämna över, lämna huset, radera huset, radera kontot ─── */
.hp-fara-ruta {
  display: grid; gap: 0; padding: 6px 24px;
  background: var(--card); border: var(--bw) solid var(--tomato); border-radius: var(--r-l);
}
.hp-fara-rad {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 18px 0; border-top: var(--bw-thin) solid var(--line);
}
.hp-fara-ruta > .hp-fara-rad:first-child { border-top: 0; }
.hp-fara-text { flex: 1 1 320px; min-width: 0; }
.hp-fara-text h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 650 18px/1.25 var(--f-display); color: var(--ink); }
.hp-fara-text h3 svg { flex: none; color: var(--tomato-ink); }
/* Zonens etikett: ord och ikon överst i ramen, så att den röda kanten aldrig är det enda tecknet. */
.hp-fara-etikett {
  display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tomato-ink);
  border-bottom: var(--bw-thin) solid var(--line);
}
.hp-fara-etikett svg { flex: none; }
.hp-fara-etikett + .hp-fara-rad { border-top: 0; }
.hp-fara-knapp.btn, .hp-fara-knapp .btn { display: inline-flex; align-items: center; gap: 6px; }
.hp-fara-text p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.hp-fara-text p + p { margin-top: 6px; }
.hp-fara-text p.hp-fara-vantar { display: flex; align-items: flex-start; gap: 6px; color: var(--ink); }
.hp-fara-vantar svg { flex: none; margin-top: 3px; }
.hp-fara-knapp { flex: none; }
.hp-fara .hp-fara-knapp.btn, .hp-fara .hp-fara-knapp .btn { color: var(--tomato-ink); border-color: var(--tomato-ink); }
.hp-fara-fraga {
  display: grid; gap: 12px; margin: 0 0 18px; padding: 16px 18px;
  background: var(--tomato-soft); color: var(--on-soft); border-radius: var(--r-m);
}
.hp-fara-fraga .form-error { color: var(--on-soft); margin: 0; }
.hp-fara-fraga .btn-ghost { color: var(--on-soft); }

/* ── Smal skärm ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hp-kropp { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 760px) {
  .hp { --hp-gap: 18px; }
  .hp-hjalte { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 6px; }
  .hp-hjalte-figur { order: -1; justify-items: start; padding: 0; }
  .hp-hjalte-figur .husse { width: 84px; }

  .hp-kropp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hp-toc { display: none; }
  .hp-toc-smal {
    display: block; margin: 0 0 28px;
    background: var(--card); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m);
  }
  .hp-toc-smal summary {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
    font-weight: 650; color: var(--ink); cursor: pointer;
  }
  .hp-toc-smal ol { padding: 0 12px 8px; }
  .hp-toc-smal a {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px;
    color: var(--ink); font-weight: 600; text-decoration: none; border-top: var(--bw-thin) solid var(--line);
  }
  .hp-toc-smal .hp-ikon { width: 32px; height: 32px; border-radius: 10px; }
  .hp-toc-smal a[aria-current] { font-weight: 750; }
  .hp-toc-smal a[aria-current] > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
  .hp-toc-smal a.hp-toc-fara { color: var(--tomato-ink); }

  .hp-avsnitten { gap: 40px; }
  .hp-avsnitt { scroll-margin-top: 12px; }
  .hp-avsnitt-head .hp-ikon { width: 36px; height: 36px; }
  .hp-kort, .hp .calendar-feed, .hp .mail-choices, .hp .tip-neighbor, .hp .mail-address { padding: 18px 16px; }
  /* På telefonen tar flikraden redan nederkanten; en klistrad rad till ovanpå åt för mycket av skärmen. */
  .hp-spara { position: static; margin: 0 -16px; padding: 12px 16px; border-radius: 0 0 var(--r-l) var(--r-l); }
  .hp-falt-rad { grid-template-columns: minmax(0, 1fr); }
  .hp-bjud { padding: 18px 16px; }
  .hp-bjud-falt { grid-template-columns: minmax(0, 1fr); }
  .hp-bjud-falt .btn { justify-self: start; }
  .hp-fara-ruta { padding: 4px 16px; }
  .hp-fara-knapp { width: 100%; }
  .hp-fara-knapp .btn, .hp-fara-knapp.btn { width: 100%; }
  .hp-medlem { grid-template-columns: auto minmax(0, 1fr); }
  .hp-medlem .pill { grid-column: 2; justify-self: start; }
}

/* ── Kontosidan (/konto) ─────────────────────────────────────────────────
   Samma ram som husprofilen. Raderna under Inloggad på är kort på papper, inte mjuka ytor, och den här
   webbläsaren har både en pilla med ord och en bock: färgen ensam säger inget. */
.konto .hp-hjalte { background: var(--lilac-soft); }
.konto-adress { overflow-wrap: anywhere; }
.konto-profil { display: grid; gap: 14px; }
.konto-rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.konto-rad .field { flex: 1 1 260px; margin: 0; }
/* Namnet har en hjälprad under fältet; knappen står i höjd med fältet, inte med hjälpraden. */
.konto-rad:has(> .st-falt) { align-items: flex-start; }
.konto-rad > .konto-spara { margin-top: 24px; }
.konto-h3 { margin: 0 0 2px; font: 650 17px/1.25 var(--f-display); color: var(--ink); }
.konto-adressrad {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 14px; border-top: var(--bw-thin) solid var(--line);
}
.konto-byte { display: grid; gap: 10px; padding: 14px; background: var(--paper-2); border-radius: var(--r-m); }
.konto-inloggningar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.konto-inloggning {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px;
  padding: 12px 14px; border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); background: var(--card);
}
.konto-inloggning.is-har { border-color: var(--line-strong); background: var(--paper-2); }
.konto-inloggning-ikon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sky-soft); color: var(--on-soft);
}
.konto-inloggning-text { display: grid; gap: 2px; min-width: 0; }
.konto-inloggning-text b { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.konto-inloggning-text small { font-size: 13px; color: var(--ink-2); }
.konto-utform { margin: 0; }
.konto-alla { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.konto-hus .hp-medlem { grid-template-columns: auto minmax(0, 1fr) auto; }
.konto-hus-knappar { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.konto-hus-not { grid-column: 2 / -1; font-size: 13px; color: var(--ink-2); }
.konto-hus-fraga { grid-column: 1 / -1; margin-top: 8px; }
.hp-flyttat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }

@media (max-width: 760px) {
  .konto-inloggning { grid-template-columns: auto minmax(0, 1fr); }
  .konto-inloggning > .pill, .konto-inloggning > .btn, .konto-utform { grid-column: 2; justify-self: start; }
  .konto-inloggning > .btn, .konto-utform .btn { margin-left: -10px; }
  .konto-alla .btn { width: 100%; }
  .konto-rad > .konto-spara { margin-top: 0; }
  .konto-hus .hp-medlem { grid-template-columns: auto minmax(0, 1fr); }
}

@media (prefers-contrast: more) {
  .konto-inloggning-text small, .konto-hus-not { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-toc a { transition: none; }
}

@media (prefers-contrast: more) {
  .hp-toc a, .hp-avsnitt-lead, .hp-hjalp, .hp-stapel-skala, .hp-medlem-text small, .hp-fara-text p, .st-hjalp { color: var(--ink); }
}

/* ── Påminnelser: mejlen och notiserna i samma kort ─────────────────────── */
.hp .mail-choices .push-rubrik { margin: 0; font-size: 1rem; font-weight: 700; }
.push-notiser {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: var(--space-3); border-top: var(--bw-thin) solid var(--line);
}
.push-pa { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.push-pa svg { flex: none; }
.push-enheter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.push-enheter li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; }
.push-enhet-text { display: flex; flex-direction: column; min-width: 0; }
.push-enhet-namn { font-weight: 600; overflow-wrap: anywhere; }