/* Husvo, riktning "Husse". Skalet (sidomeny, verktygsrad, flikraden på telefonen)
   och byggstenarna: Husse, ikoner, StatTile, StatusPill, PageHeader, EmptyState,
   firande och temaväxlare. Laddas efter husse.css och de gamla lagren och ska
   vinna utan !important; därför har skalets selektorer en klass mer än de gamla.

   Tokens delas med tokens.json (och på sikt en SwiftUI-app). Ljust är grund,
   mörkt läggs på av data-theme="dark" eller, när inget val gjorts, av systemet. */

:root {
  --paper: #F6F4EF; --paper-2: #EFECE5; --card: #FFFFFF;
  --ink: #1C1A24; --ink-2: #55515F; --ink-3: #6E6A78;
  --on-color: #1E1933;            /* text på färgblock är alltid mörk, även i mörkt läge */
  --on-soft: #1E1933;             /* text på de mjuka blocken (-soft): de blir mörka i mörkt läge, så texten följer med */
  /* Linjen är en ljus kant, inte en kontur: det vuxna uttrycket (docs/prototyper/D-vuxen).
     Fält som behöver en tydlig gräns använder --line-strong. */
  --line: #DCD7CD; --line-strong: #8D8898; --shadow-c: rgba(28, 26, 36, .06);
  --bar: #FFFFFF; --bar-text: #55515F;
  --tomato: #FF5B3A; --tomato-soft: #FFD8CD; --tomato-ink: #B3260A;
  --sun: #FFC631;    --sun-soft: #FFEBA8;    --sun-ink: #7A5200;
  --sky: #4560F5;    --sky-soft: #DAE0FF;    --sky-ink: #2A3FD0;
  --mint: #35C28E;   --mint-soft: #CDF2E1;   --mint-ink: #0A6E4B;
  --lilac: #BDA8FF;  --lilac-soft: #E7DEFF;  --lilac-ink: #5B3FC4;
  --pink: #FFA8CF;   --pink-soft: #FFDDEC;

  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-pill: 999px;
  --bw: 1px;
  --lift: 0 1px 2px rgba(28, 26, 36, .04), 0 6px 18px rgba(28, 26, 36, .05);
  /* Den lilla skuggan var en hård nederkant (0 3px 0 i linjens färg), kvar från det barnsliga
     uttrycket, medan tokens.json sa en mjuk. Den stora är för det som svävar: menyer, bekräftelser
     och ett klickbart kort under pekaren. */
  --lift-s: 0 1px 2px rgba(28, 26, 36, .04);
  --lift-l: 0 1px 2px rgba(28, 26, 36, .04), 0 12px 28px rgba(28, 26, 36, .1);
  /* Fokusringen: himmel i ljust, sol i mörkt, där blått mot mörkblått blev under 2:1. */
  --focus: var(--sky);
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sidebar-w: 268px;
}

/* Mörkt. Samma namn, andra värden: färgblocken behåller sin mättnad, det är papper,
   kort och linjer som byter. Linjen blir ljusare än kortet så att kanterna syns. */
:root[data-theme="dark"] {
  --paper: #131218; --paper-2: #1A1920; --card: #1E1D25;
  --ink: #F2F0F5; --ink-2: #B9B5C3; --ink-3: #9C98A7; --on-soft: #F2F0F5;
  --line: #34323D; --line-strong: #8A8696; --shadow-c: rgba(0, 0, 0, .35);
  --lift: 0 1px 2px rgba(0, 0, 0, .3);
  --lift-s: 0 1px 2px rgba(0, 0, 0, .3); --lift-l: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .45);
  --focus: var(--sun);
  --bar: #1E1D25; --bar-text: #B9B5C3;
  --tomato-soft: #4A2320; --tomato-ink: #FF9C86;
  --sun-soft: #4A3B12;    --sun-ink: #FFD66E;
  --sky-soft: #232C66;    --sky-ink: #9DB0FF;
  --mint-soft: #163D31;   --mint-ink: #6FE3B5;
  --lilac-soft: #342A63;  --lilac-ink: #CDBBFF;
  --pink-soft: #4A2540;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131218; --paper-2: #1A1920; --card: #1E1D25;
    --ink: #F2F0F5; --ink-2: #B9B5C3; --ink-3: #9C98A7; --on-soft: #F2F0F5;
    --line: #34323D; --line-strong: #8A8696; --shadow-c: rgba(0, 0, 0, .35);
    --lift: 0 1px 2px rgba(0, 0, 0, .3);
    --lift-s: 0 1px 2px rgba(0, 0, 0, .3); --lift-l: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .45);
    --focus: var(--sun);
    --bar: #1E1D25; --bar-text: #B9B5C3;
    --tomato-soft: #4A2320; --tomato-ink: #FF9C86;
    --sun-soft: #4A3B12;    --sun-ink: #FFD66E;
    --sky-soft: #232C66;    --sky-ink: #9DB0FF;
    --mint-soft: #163D31;   --mint-ink: #6FE3B5;
    --lilac-soft: #342A63;  --lilac-ink: #CDBBFF;
    --pink-soft: #4A2540;
    color-scheme: dark;
  }
}
:root[data-theme="light"] { color-scheme: light; }

/* Så länge sidorna inte är migrerade läser de Classicals variabler. I mörkt läge
   pekas de om hit, annars blir gammal mörk text kvar på mörk botten. Försvinner
   när classical.css och tema.css rensas. */
:root[data-theme="dark"] {
  --color-bg: var(--paper); --color-surface: var(--card); --color-text: var(--ink);
  --color-divider: color-mix(in srgb, var(--ink) 22%, transparent);
  --tema-kort: var(--card); --tema-kant: color-mix(in srgb, var(--ink) 25%, transparent);
  --color-neutral-100: #221C3E; --color-neutral-200: #2D2650; --color-neutral-300: #3C3466;
  --color-neutral-400: #6B6196; --color-neutral-500: #8A80B4; --color-neutral-600: #A79FC4;
  --color-neutral-700: #C4BCDD; --color-neutral-800: #E0DAF2; --color-neutral-900: #F3EEFF;
  --color-accent-100: #3A2F18; --color-accent-200: #4A3B1C; --color-accent-300: #6B5320;
  --color-accent-400: #A67F2F; --color-accent-500: #D6A24A; --color-accent-600: #E5B565;
  --color-accent-700: #F1CA8A; --color-accent-800: #F8DDB0; --color-accent-900: #FCEBD0;
  --tema-just-nu: #163D31; --tema-just-nu-kant: #2F6A57;
  --tema-sen-bg: #4A2320; --tema-sen-text: #FFB4A3; --tema-sen-kant: #8A4A3E;
  --tema-snart-bg: #4A3B12; --tema-snart-text: #FFD66E; --tema-snart-kant: #8A6F2A;
  --tema-klar-bg: #163D31; --tema-klar-text: #8AF0C4; --tema-klar-kant: #2F6A57;
  --tema-senare-bg: #2D2650; --tema-senare-text: #C4BCDD; --tema-senare-kant: #4A4170;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--paper); --color-surface: var(--card); --color-text: var(--ink);
    --color-divider: color-mix(in srgb, var(--ink) 22%, transparent);
    --tema-kort: var(--card); --tema-kant: color-mix(in srgb, var(--ink) 25%, transparent);
    --color-neutral-100: #221C3E; --color-neutral-200: #2D2650; --color-neutral-300: #3C3466;
    --color-neutral-400: #6B6196; --color-neutral-500: #8A80B4; --color-neutral-600: #A79FC4;
    --color-neutral-700: #C4BCDD; --color-neutral-800: #E0DAF2; --color-neutral-900: #F3EEFF;
    --color-accent-100: #3A2F18; --color-accent-200: #4A3B1C; --color-accent-300: #6B5320;
    --color-accent-400: #A67F2F; --color-accent-500: #D6A24A; --color-accent-600: #E5B565;
    --color-accent-700: #F1CA8A; --color-accent-800: #F8DDB0; --color-accent-900: #FCEBD0;
    --tema-just-nu: #163D31; --tema-just-nu-kant: #2F6A57;
    --tema-sen-bg: #4A2320; --tema-sen-text: #FFB4A3; --tema-sen-kant: #8A4A3E;
    --tema-snart-bg: #4A3B12; --tema-snart-text: #FFD66E; --tema-snart-kant: #8A6F2A;
    --tema-klar-bg: #163D31; --tema-klar-text: #8AF0C4; --tema-klar-kant: #2F6A57;
    --tema-senare-bg: #2D2650; --tema-senare-text: #C4BCDD; --tema-senare-kant: #4A4170;
  }
}

body {
  background-color: var(--paper); color: var(--ink);
  font-family: var(--f-body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(color-mix(in srgb, var(--paper-2) 90%, transparent) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
}
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--sun); } }

.eyebrow, .kicker { font: 700 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ── Ikoner ─────────────────────────────────────────────────────────────── */
.hk-icon { flex: none; display: block; }

/* ── Husse ──────────────────────────────────────────────────────────────── */
.husse-wrap { display: inline-flex; align-items: flex-end; gap: 12px; }
.husse { display: block; flex: none; overflow: visible; }
.husse .eye { transform-box: fill-box; transform-origin: center; animation: hk-blink 5s infinite; }
.husse .eye + .eye { animation-delay: .02s; }
@keyframes hk-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.husse .arm { transform-box: fill-box; transform-origin: 20% 90%; }
.husse--vinkar .arm { animation: hk-wave 1.4s ease-in-out infinite; }
.husse--firar .arm--upp { transform-origin: 80% 90%; animation: hk-cheer .7s ease-in-out infinite alternate; }
.husse--firar .arm--vanster { transform-origin: 20% 90%; animation-direction: alternate-reverse; }
@keyframes hk-wave { 50% { transform: rotate(-22deg); } }
@keyframes hk-cheer { to { transform: rotate(-14deg); } }
.husse--firar, .husse--sover, .husse--orolig { animation: hk-bob 4.5s ease-in-out infinite; }
.husse--firar { animation-duration: 1s; }
.husse--sover { animation: none; }
@keyframes hk-bob { 50% { transform: translateY(-5px) rotate(1.2deg); } }
/* z:en och frågetecknet står utanför kroppen, direkt på det figuren står på. Med figurens fasta
   bläck blev de mörkt på mörkt papper i mörkt läge (#181). currentColor är textfärgen där figuren
   står, och den är redan vald för att synas mot just den ytan, även på ett färgblock. */
.husse .husse-tecken { fill: currentColor; }
.husse-z { animation: hk-z 2.4s ease-in-out infinite; }
.husse-z.z2 { animation-delay: 1.2s; }
@keyframes hk-z { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.husse-svett { animation: hk-drip 2.2s ease-in infinite; }
@keyframes hk-drip { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

.husse-bubble {
  position: relative; max-width: 28ch;
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l) var(--r-l) var(--r-l) 6px;
  padding: 14px 18px; box-shadow: 0 4px 0 var(--shadow-c); font-weight: 500;
}

/* ── Skal, skrivbord ────────────────────────────────────────────────────── */
/* Headern är en landmark för tillgänglighet och fokusfälla, inte en ruta. */
.app-header { display: contents; }

.hk-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 26;
  padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); border-right: var(--bw) solid var(--line);
}
.hk-sheet-grip { display: none; }

/* Husväljaren: figuren som märke och husets namn bredvid. Menyn med husen fälls ut i flödet under,
   inte som en flytande ruta: sidomenyn rullar, och en absolut placerad meny klipptes av vid kanten. */
.hk-brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px;
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--lift);
}
.hk-brand-mark {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-m);
  background: var(--paper-2);
}
.hk-brand-word { flex: 1 1 100%; padding: 2px 6px 0; font: 650 13px/1.2 var(--f-display); letter-spacing: .02em; color: var(--ink-2); }
.hk-house-anchor { display: contents; }
.hk-house {
  flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 0; border-radius: var(--r-m); background: transparent; color: var(--ink);
  text-align: left; cursor: pointer; font: inherit;
}
.hk-house:hover { background: var(--paper-2); }
.hk-house > .hk-icon { color: var(--ink-2); }
.hk-house-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.hk-house-name { font: 650 16px/1.2 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.hk-house-meta { font-size: 13px; color: var(--ink-2); }
.hk-brand .pop-houses { position: static; flex: 1 1 100%; width: auto; margin: 4px 0 0; box-shadow: none; }

.hk-nav.app-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 14px; }
.hk-nav-group { display: flex; flex-direction: column; gap: 2px; }
.hk-nav-head {
  margin: 0 0 4px; padding: 0 12px; font: 700 11.5px/1 var(--f-body); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.hk-nav.app-nav a {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 3px 12px 3px 8px;
  border: var(--bw) solid transparent; border-radius: var(--r-m);
  font: 550 15px/1.2 var(--f-body); color: var(--ink); text-decoration: none; background: transparent;
  transition: background .15s, border-color .15s;
}
.hk-nav.app-nav a:hover { background: var(--card); color: var(--ink); border-bottom-color: transparent; }
/* Aktiv sida: kortets yta, fet text och en linje i kanten. Linjen är en form, så det syns även
   för den som inte ser skillnad på bakgrunderna. */
.hk-nav.app-nav a.active { background: var(--card); border-color: var(--line); color: var(--ink); font-weight: 700; }
.hk-nav.app-nav a.active::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--ink);
}
.hk-ico {
  width: 30px; height: 30px; border-radius: var(--r-s); display: grid; place-items: center; flex: none;
  background: var(--paper-2); color: var(--ink-2);
}
.hk-nav.app-nav a:hover .hk-ico { color: var(--ink); }
.hk-nav.app-nav a.active .hk-ico { color: var(--on-color); }
.hk-nav.app-nav a.active .hk-ico--sol { background: var(--sun); }
.hk-nav.app-nav a.active .hk-ico--mint { background: var(--mint); }
.hk-nav.app-nav a.active .hk-ico--himmel { background: var(--sky-soft); color: var(--on-soft); }
.hk-nav.app-nav a.active .hk-ico--syren { background: var(--lilac); }

.hk-household {
  margin-top: auto; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.hk-people { display: flex; align-items: center; }
.hk-people-names { margin-left: 16px; font-weight: 600; font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.hk-av {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--card);
  display: grid; place-items: center; font: 750 14px var(--f-display); margin-right: -8px; flex: none;
  color: var(--on-color);
}
.hk-av--0 { background: var(--pink); } .hk-av--1 { background: var(--sky-soft); color: var(--on-soft); } .hk-av--2 { background: var(--mint); }
.hk-av--sm { width: 28px; height: 28px; font-size: 13px; margin-right: 0; background: var(--pink); }

.hk-topbar {
  position: sticky; top: 0; z-index: 25; margin-left: var(--sidebar-w);
  display: flex; align-items: center; gap: 16px; padding: 18px 40px;
  background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 60%, transparent);
}
.hk-pop-anchor { position: relative; }
.hk-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hk-top-house { display: none; }

.hk-topbar .house-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; min-height: 44px;
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  font: 700 15px/1 var(--f-body); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.hk-topbar .house-pick .name { font: 650 15px/1.1 var(--f-display); letter-spacing: 0; text-transform: none; }
.hk-topbar .house-pick:hover { background: var(--paper-2); }

/* ── Sökningen ── */
.hk-search { position: relative; flex: 1 1 320px; max-width: 580px; color: var(--ink-2); }
.hk-search-field { position: relative; display: flex; align-items: center; gap: 8px; }
.hk-search-field > .hk-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hk-search .input {
  width: 100%; min-height: 48px; padding: 12px 84px 12px 44px; border-radius: var(--r-pill);
  border: var(--bw) solid var(--line-strong); background: var(--card); color: var(--ink); font: 500 15.5px var(--f-body);
}
.hk-search .input::placeholder { color: var(--ink-2); opacity: 1; }
.hk-search .input:focus { outline: none; box-shadow: 0 0 0 3px var(--sky); }
:root[data-theme="dark"] .hk-search .input:focus { box-shadow: 0 0 0 3px var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hk-search .input:focus { box-shadow: 0 0 0 3px var(--sun); } }
.hk-search-key {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 600 12px/1 var(--f-body); color: var(--ink-2); background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: 6px; padding: 5px 7px;
}
.hk-search-field:has(.input:not(:placeholder-shown)) .hk-search-key { display: none; }
.hk-search-close, .hk-search-btn { display: none; }

.hk-topbar .popover.pop-search {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; width: auto; z-index: 40;
  max-height: min(70vh, 540px); overflow-y: auto; padding: 6px; color: var(--ink);
}
.hk-hit-group + .hk-hit-group { margin-top: 4px; padding-top: 4px; border-top: var(--bw) solid var(--line); }
.hk-hit-head {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px 4px;
  font: 700 12px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.hk-hit-more { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
.hk-hit {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; padding: 7px 12px;
  border-radius: var(--r-s); color: var(--ink); text-decoration: none; scroll-margin: 8px;
}
.hk-hit:hover { color: var(--ink); }
/* Den markerade träffen: mjuk yta och en linje i kanten, så att den syns även utan färg. */
.hk-hit.is-active { background: var(--sun-soft); color: var(--on-soft); box-shadow: inset 4px 0 0 var(--ink); }
.hk-hit-title { font: 600 15px/1.25 var(--f-body); overflow-wrap: anywhere; }
.hk-hit-detail { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.hk-hit.is-active .hk-hit-detail { color: var(--on-soft); }
.hk-search-none { margin: 0; padding: 12px; color: var(--ink); }
.hk-search-help { margin: 4px 0 0; padding: 8px 10px 4px; border-top: var(--bw) solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.hk-search-help kbd, .hk-search-key { font-family: var(--f-body); }
.hk-search-help kbd { font: 600 11.5px/1 var(--f-body); border: var(--bw) solid var(--line); border-radius: 5px; padding: 2px 5px; background: var(--paper); color: var(--ink); }
/* Sidorna och åtgärderna i samma lista: ikon till vänster, och en knapp som ser ut som träffarna. */
.hk-hit--cmd { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
button.hk-hit { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.hk-hit-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--paper); color: var(--ink); }
.hk-hit.is-active .hk-hit-ico { background: var(--card); color: var(--ink); }
.hk-hit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Rutan Kortkommandon (ShortcutsDialog). */
.hk-keys-list { margin: 0 0 var(--space-4); display: grid; gap: 2px; }
.hk-keys-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: var(--bw) solid var(--line); }
.hk-keys-row dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hk-keys-row dd { margin: 0; color: var(--ink); }
.hk-keys kbd { font: 600 13px/1 var(--f-body); border: var(--bw) solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--paper); color: var(--ink); min-width: 28px; text-align: center; }
.hk-keys-or { font-size: 13px; color: var(--ink-2); }
.hk-keys-av { color: var(--ink-2); }
.hk-keys-note { margin: 0 0 var(--space-3); }

.hk-round {
  width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--line);
  background: var(--card); color: var(--ink); place-items: center; cursor: pointer; padding: 0;
}

/* Knappar i skalet. Gamla .btn får samma uttryck så länge sidorna inte migrerats. */
.btn.hk-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 700 15px/1 var(--f-body); color: var(--on-color); background: var(--sun);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 10px 18px;
  text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--shadow-c);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring);
}
.btn.hk-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--shadow-c); background: var(--sun); color: var(--on-color); }
.btn.hk-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--shadow-c); }
.btn.hk-btn--vit { background: var(--card); color: var(--ink); }
.btn.hk-btn--vit:hover { background: var(--card); color: var(--ink); }
.btn.hk-btn:disabled { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
.btn.hk-btn:disabled:hover { transform: none; }
.hk-topbar .badge {
  background: var(--tomato); color: var(--on-color); border: var(--bw) solid var(--line);
  min-width: 22px; height: 22px; border-radius: var(--r-pill); font: 700 12px var(--f-body);
}
.hk-userbtn {
  width: 44px; height: 44px; border-radius: 50%; border: var(--bw) solid var(--line);
  background: var(--lilac); color: var(--on-color); font: 800 17px var(--f-display); cursor: pointer;
  transition: transform .2s var(--spring);
}
.hk-userbtn:hover { transform: rotate(-6deg) scale(1.06); }

/* Flytande paneler: kort med kontur och mjuk skugga, som allt annat. */
.app-header .popover {
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line);
  border-radius: var(--r-m); box-shadow: var(--lift); overflow: hidden;
}
.hk-topbar .popover { box-shadow: var(--lift-l); }
.hk-topbar .pop-user { width: 220px; right: 0; z-index: 30; }
.app-header .pop-item { border-left: 0; font-weight: 500; }
.app-header .pop-item:hover { background: var(--paper-2); }
.app-header .pop-item.current { background: var(--sun-soft); color: var(--on-soft); font-weight: 700; box-shadow: inset 4px 0 0 var(--ink); }
.app-header .pop-item.current .muted { color: var(--on-soft); }
.app-header .pop-title { font: 700 17px var(--f-display); }
.hk-topbar .activity-row .where { color: var(--ink-2); }
.hk-topbar .dot-unread { background: var(--tomato); width: 9px; height: 9px; border: 1.5px solid var(--line); }

.offline-bar { margin-left: var(--sidebar-w); background: var(--sun-soft); color: var(--ink); border-bottom: var(--bw) solid var(--line); font-weight: 600; }

.app-header ~ .app-main { margin: 0 auto 0 var(--sidebar-w); max-width: 1240px; padding: 16px 40px 88px; }

/* Under 980 px ligger sidomenyn inte längre vid sidan, så innehållet tar hela bredden. */
@media (max-width: 980px) {
  .hk-topbar { margin-left: 0; }
  .offline-bar { margin-left: 0; }
  .app-header ~ .app-main { margin: 0 auto; }
}

/* Mellanbred skärm (surfplatta, smalt fönster): sidomenyn blir ett band överst, grupperna på rad. */
@media (max-width: 980px) and (min-width: 761px) {
  .hk-side {
    position: static; width: auto; padding: 14px 16px 8px; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 10px 14px; overflow: visible; border-right: 0; border-bottom: var(--bw) solid var(--line);
  }
  .hk-brand { flex: 1 1 260px; box-shadow: none; }
  .hk-nav.app-nav { flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; gap: 8px 18px; }
  .hk-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
  .hk-nav-head { margin: 0 4px 0 0; padding: 0; }
  .hk-nav.app-nav a { padding: 4px 10px 4px 4px; }
  .hk-household { margin: 0 0 0 auto; flex-direction: row; align-items: center; padding: 6px 10px; }
  .hk-people-names { display: none; }
  .hk-topbar { margin-left: 0; padding: 10px 16px; position: static; }
  .offline-bar { margin-left: 0; }
  .app-header ~ .app-main { margin: 0 auto; padding: 8px 16px 72px; }
  .hk-theme-btn span { display: none; }
}

/* ── Temaväxlare ────────────────────────────────────────────────────────── */
.hk-theme { display: flex; gap: 4px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.hk-theme-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 0 4px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink);
  font: 700 12px var(--f-body); cursor: pointer; transition: background .2s, transform .18s var(--spring);
}
.hk-theme-btn:hover { transform: scale(1.05); }
.hk-theme-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.hk-theme--compact .hk-theme-btn { min-width: 36px; }

/* ── Installera Husvo (InstallApp) ─────────────────────────────────────── */
/* hemkoll.js sätter data-lage: "knapp" när webbläsaren erbjuder installation, "ios" i Safari på iPhone. */
.hk-install[hidden] { display: none; }
.hk-install-btn, .hk-install-ios { display: none; }
.hk-install[data-lage="knapp"] .hk-install-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 36px;
  padding: 0 12px; border: var(--bw) solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font: 700 13px var(--f-body); cursor: pointer;
}
.hk-install[data-lage="knapp"] .hk-install-btn:hover { background: var(--paper); }
.hk-install[data-lage="ios"] .hk-install-ios {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
.hk-install-ios .hk-icon { flex: none; margin-top: 1px; }

/* ── Sidhuvud, tomt läge, siffror, pills ───────────────────────────────── */
/* Rytmen i sidhuvudet: ögonbryn, rubrik och ingress på ett fast avstånd, rubriken i --fs-h1 (34 till
   54 px, som tokens.json säger; här stod 36 till 56) och ett jämnt luftrum ner till innehållet.
   text-wrap: balance håller en lång rubrik från att lämna ett ensamt ord på sista raden. */
.hk-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 8px 0 28px; }
.hk-pagehead .eyebrow { margin: 0 0 10px; }
.hk-pagehead h1 { font: 800 var(--fs-h1)/1.04 var(--f-display); letter-spacing: -.02em; margin: 0; max-width: 18ch; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
.hk-lead { margin: 12px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.hk-pagehead-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .hk-pagehead { margin: 4px 0 22px; }
  .hk-lead { font-size: 17px; }
}

/* Rubrikerna under sidrubriken, i tre nivåer. Varje sida hade satt sin egen storlek, så samma sak
   var 22 px på Husets år, 28 på Journalen och 32 på Översikten, och Rum hade 24 och 32 på samma
   sida. Sidans egen fil sätter bara marginalen. Sektion: ett avsnitt av sidan. Grupp: en rad saker
   med ett antal (Ej påbörjade, ett rum på Prylar). Kort: rubriken inuti ett kort. */
:is(.ov-sec-head h2, .ov-h2, .arkiv-sektion h2, .plan-h2, .hp-avsnitt-head h2, .kal-manad) {
  font: 650 clamp(24px, 2.6vw, var(--fs-h2))/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink);
}
:is(.uh-group .group-label h2, .uh-group .group-label h3, .parm-grupp > h2, .papper-sektion h2) {
  font: 650 clamp(21px, 2.2vw, 25px)/1.15 var(--f-display); letter-spacing: -.015em; color: var(--ink);
}
:is(.ov-h3, .arkiv-h2, .imp-h2, .tt-h2, .kal-panel-h, .ar-kort h2, .mt-meter-head h2, .buy-group .buy-head h2) {
  font: 650 var(--fs-h3)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink);
}

.hk-empty {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border: var(--bw) dashed var(--line); border-radius: var(--r-l); padding: 28px 32px; background: transparent;
}
.hk-empty-text { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hk-empty h2 { font: 800 28px/1.05 var(--f-display); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.hk-empty p { margin: 0; color: var(--ink-2); max-width: 48ch; }

/* ── Skelettet (Skeleton) ───────────────────────────────────────────────
   Formen följer det som kommer: rader för text, block för kort, listrader med en ruta för ikonen för
   journalen och prylarna. En lista som laddades med textrader och sedan blev kort hoppade en halv skärm. */
.skeleton-ruta { display: block; min-width: 0; }
.skeleton-rader { display: grid; gap: var(--space-2); }
.skeleton-rad {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 16px; border-radius: var(--r-m);
  border: var(--bw-thin) solid var(--line-soft); background: var(--card);
}
.skeleton-rad .skeleton { display: block; height: 14px; }
.skeleton-rad .skeleton-rad-ikon { flex: none; width: 40px; height: 40px; border-radius: var(--r-s); }
.skeleton-rad-text { flex: 1; min-width: 0; display: grid; gap: 8px; }
.skeleton-rad .skeleton-rad-under { height: 10px; opacity: .7; }

/* Ett hämtningsfel (FelRuta med Försök igen) står där listan skulle stått, och är mindre än en trasig sida. */
.fel-ruta.fel-ruta-hamta { margin: var(--space-2) 0 var(--space-4); gap: var(--space-4); }
.fel-ruta.fel-ruta-hamta h2 { font-size: 19px; }
@media (max-width: 520px) {
  .fel-ruta.fel-ruta-hamta { flex-direction: column; gap: var(--space-2); }
}

.stat.hk-stat {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; text-decoration: none;
  border: var(--bw) solid var(--line); box-shadow: 0 5px 0 var(--shadow-c); min-width: 0;
  transition: transform .25s var(--spring); color: var(--on-color);
}
.stat.hk-stat:nth-child(odd) { border-radius: 36px 36px 36px 10px; }
.stat.hk-stat:nth-child(even) { border-radius: 36px 10px 36px 36px; }
a.stat.hk-stat:hover { transform: translateY(-4px) rotate(-1deg); }
.hk-stat .num { font: 800 clamp(48px, 5vw, 68px)/.9 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hk-stat .lbl { font-weight: 700; }
.hk-stat small { font-size: 13px; color: inherit; }

/* Sifferraden. Sex sidor hade var sitt rutnät, mellanrum och siffra: på telefonen stod rutorna två
   och två på Översikten men en och en på Tidslinjen och Husets år, och samma "0" var 28 till 48 px.
   Raden delar bredden lika på datorn, går två och två på telefonen, och en ensam sista ruta tar
   hela raden. Siffran skalar med rutans bredd och bryts aldrig ("475" / "860 kr" på två rader
   läste som två tal). */
.stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 28px;
}
.stats:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.stats > .stat { container-type: inline-size; }
.stats > .stat.hk-stat { justify-content: flex-start; min-height: 0; }
.stats .stat .num { font-size: clamp(36px, 28cqi, 64px); white-space: nowrap; }
/* 18cqi rymmer "1 234 567 kr" (5,3 em) i rutans bredd. */
.stats .stat.hk-stat--lang .num { font-size: clamp(20px, 18cqi, 44px); }
@media (max-width: 1100px) {
  .stats:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stats, .stats:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats > .stat.hk-stat { padding: 14px 16px 16px; }
  .stats .stat .num { font-size: clamp(32px, 28cqi, 40px); }
  .stats .stat.hk-stat--lang .num { font-size: clamp(20px, 18cqi, 32px); }
}
.tone-tomat { background: var(--tomato); }
.tone-sol { background: var(--sun); }
.tone-himmel { background: var(--sky); color: #fff !important; }
.tone-mint { background: var(--mint); }
.tone-syren { background: var(--lilac); }

.pill.hk-pill {
  display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--f-body); color: var(--on-color);
  border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap;
}
.hk-pill.late { background: var(--tomato); }
.hk-pill.soon { background: var(--sun); }
.hk-pill.ok { background: var(--mint); }
.hk-pill.idea { background: var(--sky-soft); color: var(--ink); }

/* ── Firande ────────────────────────────────────────────────────────────── */
.hk-celebrate { display: contents; }
.hk-celebrate-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.hk-konfetti {
  position: absolute; width: 8px; height: 12px; border-radius: 3px; opacity: 0;
  animation: hk-konfetti .85s var(--ease) forwards;
}
@keyframes hk-konfetti {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}
.hk-celebrate-bubble {
  position: absolute; transform: translate(-50%, -100%); max-width: min(280px, calc(100vw - 24px));
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line);
  border-radius: var(--r-m) var(--r-m) var(--r-m) 6px; padding: 10px 14px; font: 600 14px/1.3 var(--f-body);
  box-shadow: var(--lift-l); animation: hk-pop 2s var(--spring) forwards;
}
@keyframes hk-pop {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1); }
}

/* ── Telefonen: flikrad, ark och bekräftelse ───────────────────────────────
   Samma sidor på alla skärmar. Under 760 px blir sidomenyn ett ark bakom Meny och flikraden i
   nederkant tar över, med tumvänliga mått (56 px) och säkra marginaler. På bred skärm finns
   flikraden inte alls (display: none), så den tar inga tabbstopp. */
.hk-tabs { display: none; }

.hk-toast-region {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 70; pointer-events: none;
  display: flex; justify-content: center; padding: 0 16px;
}
/* Notisen: text, Ångra när det finns något att ångra, och Stäng. Kortets yta och text i båda lägena;
   Ångra är ett solgult färgblock och bär därför --on-color. */
.hk-toast {
  pointer-events: auto; width: 100%; max-width: 480px; min-height: 48px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 18px; background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--lift-l); font-weight: 600;
  animation: hk-toast-in 180ms ease-out;
}
.hk-toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hk-toast-undo {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 16px; cursor: pointer;
  background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); font: 800 15px/1 var(--f-body);
}
.hk-toast-undo:disabled { opacity: .6; cursor: progress; }
.hk-toast-close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink); border: 0; border-radius: 50%;
}
.hk-toast-close:hover { background: var(--paper-2); }
@keyframes hk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hk-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes hk-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  /* Sidomenyn: dold tills Meny trycks, då ett ark som växer upp ur flikraden, med en mörk
     bakgrund bakom. Sidorna ligger som stora rutor två och två, så att tummen träffar. */
  .hk-side { display: none; }
  .hk-scrim {
    position: fixed; inset: 0; z-index: 28; background: rgba(20, 18, 28, .45);
    animation: hk-fade .18s ease-out;
  }
  .hk-side.is-open {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 29;
    max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 18px;
    padding: 10px max(16px, env(safe-area-inset-left)) calc(108px + env(safe-area-inset-bottom));
    background: var(--paper); color: var(--ink); border: 0; border-top: var(--bw) solid var(--line);
    border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    animation: hk-sheet-in .24s var(--ease);
  }
  .hk-side.is-open .hk-sheet-grip {
    display: block; flex: none; width: 40px; height: 5px; margin: 0 auto -6px; border-radius: 3px; background: var(--line-strong);
  }
  .hk-side.is-open .hk-brand { box-shadow: none; }
  .hk-side.is-open .hk-nav.app-nav { gap: 18px; }
  .hk-side.is-open .hk-nav-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hk-side.is-open .hk-nav-head { grid-column: 1 / -1; margin: 0; padding: 0 4px; }
  .hk-side.is-open .hk-nav.app-nav a {
    min-height: 56px; padding: 8px 10px; gap: 10px; background: var(--card); border-color: var(--line);
    font-size: 15.5px; min-width: 0;
  }
  .hk-side.is-open .hk-nav.app-nav a.active { border-color: var(--ink); }
  .hk-side.is-open .hk-nav-label { min-width: 0; overflow-wrap: anywhere; }
  .hk-side.is-open .hk-ico { width: 36px; height: 36px; border-radius: 10px; }
  .hk-side.is-open .hk-household { margin: 0; padding: 14px; }
  .hk-side.is-open .hk-theme-btn { min-height: 44px; }
  .hk-side.is-open .hk-theme-btn span { display: inline; }
  .hk-side.is-open .hk-install-btn { min-height: 44px; }

  /* Verktygsraden: husväljaren och runda knappar på en rad. Söket bor bakom en knapp och öppnas
     som ett eget lager över sidan, med tangentbordet uppe. */
  .hk-topbar {
    position: sticky; top: 0; margin-left: 0; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  }
  /* backdrop-filter gör verktygsraden till ram för fixed-element; då hamnade söklagret i raden. */
  .hk-topbar:has(.hk-search.is-open) { backdrop-filter: none; }
  .hk-top-house { display: block; flex: 1 1 0; min-width: 0; }
  .hk-topbar .house-pick { width: 100%; min-width: 0; }
  .hk-topbar .house-pick .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  .hk-topbar-right { margin-left: 0; gap: 8px; }
  .hk-topbar .hk-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hk-topbar .btn.hk-btn--vit { padding: 10px 12px; }
  .hk-topbar .hk-new-idea { display: none; }
  .hk-search-btn { display: grid; }
  .hk-search { display: none; }
  .hk-search.is-open {
    display: flex; flex-direction: column; gap: 10px; position: fixed; inset: 0; z-index: 31; max-width: none;
    padding: calc(10px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom));
    background: var(--paper);
  }
  .hk-search.is-open .hk-search-close {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
    border: var(--bw) solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink);
  }
  .hk-search .input { padding-right: 16px; font-size: 16px; }
  .hk-search-key, .hk-search-help { display: none; }
  .hk-search-field > .hk-icon { left: 16px; }
  .hk-topbar .popover.pop-search {
    position: static; flex: 1 1 auto; max-height: none; min-height: 0; max-width: none;
    box-shadow: none; border-radius: var(--r-l);
  }
  .hk-search-field:has(.hk-search-close) > .input { flex: 1 1 auto; }
  .hk-topbar .popover { max-width: calc(100vw - 32px); }

  .app-header ~ .app-main { padding: 8px 16px calc(120px + env(safe-area-inset-bottom)); }

  .hk-tabs {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 30;
    width: min(398px, calc(100% - 24px));
    display: flex; align-items: center; justify-content: space-around; gap: 2px;
    background: var(--bar); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
    padding: 6px 8px; box-shadow: var(--lift);
  }
  .hk-tab {
    flex: 1; min-width: 56px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 4px; border: 0; border-radius: 18px; background: transparent; color: var(--bar-text); cursor: pointer;
    font: 700 12px/1.1 var(--f-body); letter-spacing: 0; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hk-tab:hover { color: var(--bar-text); }
  .hk-tab:active { background: color-mix(in srgb, var(--bar-text) 14%, transparent); }
  .hk-tab.active, .hk-tab.active:active { background: var(--paper-2); color: var(--ink); }
  .hk-tab-add {
    flex: none; width: 58px; height: 58px; min-width: 58px; min-height: 58px; padding: 0; margin: 0;
    position: relative; top: -16px; border-radius: 50%;
    background: var(--tomato); color: var(--on-color); border: var(--bw) solid var(--line); box-shadow: var(--lift);
  }
  .hk-tab-add:active { transform: translateY(3px) scale(.96); box-shadow: none; background: var(--tomato); }
  .hk-tab-add:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
  .hk-add { width: 28px; height: 28px; display: grid; place-items: center; }

  /* Notiserna ligger ovanför flikraden, där tummen redan är. */
  .hk-toast-region { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Dialogerna blir ett ark nerifrån, i hela bredden: en ruta med marginaler runt var för smal att skriva
     i. Arket scrollar själv, med rubriken fast överst och knapparna fast nederst (husse-vuxen.css).
     --dlg-kb och --dlg-vh sätts av hemkoll.trapDialog ur visualViewport: tangentbordet täcker skärmen
     utan att fönstret krymper, så arket lyfts över det och blir aldrig högre än det som syns. */
  .dialog-backdrop {
    padding: calc(12px + env(safe-area-inset-top)) 0 var(--dlg-kb, 0px);
    align-items: end; justify-items: stretch; overflow: hidden;
  }
  .dialog, .dialog[class*="dlg-"] {
    width: 100%; max-width: none; margin: 0; align-self: end;
    max-height: calc(var(--dlg-vh, 100dvh) - 12px - env(safe-area-inset-top));
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px 24px 0 0; border-width: var(--bw) 0 0;
  }

  /* Tabellerna blir kort: en rad per kort, och cellens rubrik (data-label) skrivs ut framför värdet. */
  .table, .table tbody, .table tr, .table td, .table th { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr {
    background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-soft);
    border-radius: var(--r-m); padding: 10px 14px; margin: 0 0 10px;
  }
  .table tfoot { display: block; }
  /* Sifferkolumnerna har text-align: right inline för bred skärm. I ett kort hamnade "Kostnad: 145 000 kr"
     då ensam i högerkanten medan resten av kortet stod till vänster. */
  .table td, .table th[scope="row"] { border: 0; padding: 3px 0; text-align: left !important; }
  .table th[scope="row"] { background: none; color: var(--ink); font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; }
  .table caption { display: block; text-align: left; margin: 0 0 8px; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-2); font-weight: 600; }
  .table td:empty { display: none; }
  .table-scroll .table { min-width: 0; }
  /* Ramen runt tabellen blev en andra ram runt varje kort. Korten bär sin egen. */
  .table-scroll { border: 0; background: none; border-radius: 0; overflow: visible; }

  /* Kort med knapparna bredvid texten (Avtal, Hantverkare): knapparna tog 200 px av 330 och
     sköt ut sidan i sidled. Under texten i stället. */
  .card > .spread:has(> .plain-fieldset.row) { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .card > .spread > .plain-fieldset.row { flex-wrap: wrap; }

  /* Växlarna (Tavlans vyer med flera) får inte skjuta ut sidan i sidled: de delar raden lika. */
  .hk-pagehead-actions { max-width: 100%; }
  /* Lika delar räckte inte för "Övervåningen" och "Nedervåningen" på Tavlan: orden skrevs över
     varandra. Växlaren rullar i sidled inom sig själv när den inte får plats, sidan gör det inte. */
  .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-opt { flex: 1 0 auto; padding-inline: 12px; text-align: center; justify-content: center; white-space: nowrap; }

  /* Det man trycker på ska gå att träffa med en tumme. .tag.chip och .seg-opt har 40 px med högre
     specificitet i husse.css och vann över den här regeln. */
  .btn, .chip, .tag.chip, .tag-btn, .seg-btn, .seg-opt, .room-link { min-height: 44px; }
  /* Temaväxlaren på välkomstsidan och felsidorna var 36 x 32. */
  .hk-theme-btn, .hk-theme--compact .hk-theme-btn { min-height: 44px; min-width: 44px; }
  .tag-btn { min-width: 44px; justify-content: center; }
  /* Länkade pillor (rum på idékorten, hoppen i husprofilen) ser ut som etiketter men leder någonstans.
     Träffytan växer osynligt, så att pillan behåller sin storlek. */
  main :is(a, button).pill { position: relative; }
  /* Prickarna i matrisen är redan absolut placerade, så ::after utgår från dem. */
  main :is(a, button).pill::after, .matrix-dot::after { content: ""; position: absolute; inset: -9px -2px; }
  .matrix-dot::after { inset: -6px; border-radius: 50%; }
  .check-row { min-height: 44px; }
  /* Telefon och mejl till hantverkaren trycks med tummen, och raden runt dem är smal. */
  main :is(a[href^="tel:"], a[href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; }
  .papper-rad > .stack > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Mikrointeraktioner ─────────────────────────────────────────────────── */
/* Allt man trycker på svarar på samma sätt: kanten blir tydligare under pekaren, ett tryck sänker en
   pixel och övergången är kort (--dur-hover, --ease). Förut lyfte knappar, chips, kort, menyn och
   användarknappen var för sig (2 till 4 px, lutning, skala 1,05 till 1,08), kvar från det barnsliga
   uttrycket, och några bytte läge utan övergång alls.
   Textfärgen tonas aldrig: en växlare som tonade bakgrund och text samtidigt var grå på grått mitt i
   övergången, och kontrasttestet fångade det på .seg-opt. Därför bara kant, skugga, yta och rörelse. */
.btn, .step-btn, .hk-round, .hk-userbtn, a.card, .room-card, .duel-card {
  transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
/* Ett valt chip byter till bläck med papper som text. Ytan tonade förut medan texten bytte direkt. */
.chip, .tag-btn { transition: border-color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease); }
.hk-house, .hk-topbar .house-pick, .app-header .pop-item, .hk-install-btn {
  transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
/* Telefonens egen tryckblink är blågrå och syns som en ruta runt hela länken. */
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--ink) 8%, transparent); }

.hk-nav.app-nav a:hover { transform: none; }
.chip:hover { transform: none; }
.chip:hover:where(:not(:disabled)) { border-color: var(--line-strong); }
.chip:active:not(:disabled) { transform: translateY(1px); }
a.card:hover, .room-card:hover, .duel-card:hover {
  transform: none; border-color: var(--line-strong); box-shadow: var(--lift-l);
}
a.card:active, .room-card:active, .duel-card:active { transform: translateY(1px); box-shadow: var(--lift-s); }
.step-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--line-strong); transform: none; }
.hk-round:hover { background: var(--paper-2); border-color: var(--line-strong); }
.hk-round:active, .hk-userbtn:active { transform: translateY(1px); }
.hk-userbtn:hover { transform: none; border-color: var(--ink-3); }
.hk-theme-btn:hover { transform: none; }
.hk-theme-btn:not([aria-pressed="true"]):hover { background: var(--paper-2); }
.hk-hit:not(.is-active):hover { background: var(--paper-2); }
@media (hover: hover) {
  .hk-tab:not(.active):not(.hk-tab-add):hover { background: color-mix(in srgb, var(--bar-text) 8%, transparent); }
}

/* Avstängt: ingen rörelse och en pekare som säger nej. Opaciteten står kvar där den redan fanns
   (.btn, .step-btn), eftersom kontrasttestet räknar med den. Ett avstängt fält får streckad kant,
   så att en förhandsgranskning syns som avstängd utan att färgen ensam säger det. */
:is(.btn, .chip, .tag-btn, .seg-btn, .step-btn, .hk-round, .hk-theme-btn, .dialog-close, .hk-tab):disabled {
  cursor: not-allowed; transform: none;
}
:is(.input, select.input, textarea.input):disabled { border-style: dashed; cursor: not-allowed; }

/* ── Rörelse ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .husse, .husse *, .hk-nav.app-nav a, .hk-tab, .hk-toast, .btn.hk-btn, .hk-userbtn, .hk-theme-btn, .stat.hk-stat,
  .hk-scrim, .hk-side.is-open, .hk-round, .hk-house, .hk-hit, .chip, .step-btn, a.card, .room-card, .duel-card {
    animation: none !important; transition-duration: .01ms !important;
  }
  /* Utan rörelse står allt stilla även när det trycks; kanten och ytan säger ändå att det tog. */
  :is(.btn, .chip, .hk-round, .hk-userbtn, a.card, .room-card, .duel-card):active { transform: none; }
  .husse-z { opacity: 1; }
  .hk-celebrate-bubble { animation: none; opacity: 1; transform: translate(-50%, -100%); }
  /* Konfettin är ren dekor och bubblan bär budskapet; utan rörelse blir bitarna bara fläckar. */
  .hk-konfetti { display: none; }
}

/* ══ Mörkt läge: text på mjuka block ═════════════════════════════════════
   De bjärta färgerna (--sky, --sun ...) behåller mörk text i båda lägena, men
   -soft-blocken blir mörka i mörkt läge. Mobilens rumsrutor och tidslinjens första
   rubrik hade ärvt mörk text på mörkblå botten (1,3:1) och var oläsliga.
   Sidfilerna sätter --on-color på dem; html-prefixet ger en klass mer så att
   den här regeln vinner utan !important och utan att röra de filerna. */
html .tl-tone-0 .tl-head { color: var(--on-soft); }

/* Kvadrantnamnen dämpades till 60 % och hamnade på 4,1:1 mot de mjuka bakgrunderna. */
html .matrix-plot .quadrant .q-name { opacity: .8; }

/* Hjulets fokusram var --sky mot mörkblå bit (under 2:1). Solgult syns mot allt i mörkt läge,
   precis som resten av fokusringarna. */
html[data-theme="dark"] .wseg:focus-visible path { stroke: var(--sun); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .wseg:focus-visible path { stroke: var(--sun); } }

/* ══ Mer kontrast (prefers-contrast: more) ═══════════════════════════════
   Dämpad text blir full text och linjerna tjockare. Den hårda skuggan är
   redan en kontur, så den behålls. */
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink); --bw: 3px; --bw-thin: 2.5px; --line: var(--ink); --line-soft: var(--ink); }
  :root[data-theme="dark"] { --line: #F3EEFF; --ink-2: #F3EEFF; --ink-3: #F3EEFF; }
  :root[data-theme="light"] { --ink-2: #1C1A24; --ink-3: #1C1A24; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --line: #F3EEFF; --ink-2: #F3EEFF; --ink-3: #F3EEFF; }
}

/* ══ Tvingade färger (Windows höga kontrast, forced-colors) ══════════════
   Webbläsaren byter alla färger mot systemets och släpper box-shadow, så den
   hårda skuggan som ger knappar och kort sin tyngd försvinner. Den ersätts av
   en tjockare nederkant. Avbockningsrutan bär sin status i bakgrundsfärgen,
   som också byts ut, så den får systemfärgerna själv. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  .btn, .stat, .room-tile, .card, .note-card, .popover, .dialog, .chip, .hk-toast {
    box-shadow: none; border-bottom-width: 5px;
  }
  .row-task .box, .box { forced-color-adjust: none; background: Canvas; border: 2px solid ButtonText; }
  .row-task input:checked ~ .box, input:checked ~ .box { background: Highlight; border-color: Highlight; }
  .row-task .box svg { stroke: HighlightText; }
  .husse { forced-color-adjust: none; }
}

/* Kom igång: kort med öppna steg för nya hus (GetStarted.razor). Ytan är kortets egen, så texten bär --ink. */
.hk-getstarted { background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); padding: 20px 22px; margin: 28px 0 0; display: grid; gap: 14px; }
.hk-getstarted-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hk-getstarted-head h2 { margin: 0; font: 800 22px/1.1 var(--f-display); letter-spacing: -.02em; }
.hk-getstarted-head p { margin: 4px 0 0; }
.hk-getstarted-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hk-getstarted-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: var(--bw-thin) solid var(--line-soft); }
.hk-getstarted-text { display: grid; gap: 2px; min-width: 0; }
.hk-getstarted-text b { font-weight: 800; }
.hk-getstarted-list .btn { flex: none; }
.hk-getstarted-husse { display: flex; align-items: center; gap: 12px; }
.hk-getstarted-husse .bubble { max-width: 46ch; font-size: 15px; background: var(--sun); color: var(--on-color); }
@media (max-width: 560px) {
  .hk-getstarted-list li { flex-direction: column; align-items: flex-start; }
}

/* Starten för ett nytt hus (StartSteps.razor): ett steg i taget. Märket vid varje steg är bara en bild;
   läget står också i ord under rubriken. Färgblocket bär --on-color, den mjuka ytan --on-soft. */
.hk-start { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: 20px 22px; margin: 28px 0 0; display: grid; gap: 14px; }
.hk-start-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hk-start-head .eyebrow { margin: 0 0 4px; }
.hk-start-head h2 { margin: 0; font: 800 22px/1.1 var(--f-display); letter-spacing: -.02em; }
.hk-start-head p { margin: 4px 0 0; }
.hk-start-bar { display: block; width: min(240px, 100%); height: 6px; margin-top: 8px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.hk-start-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mint); transition: width .6s var(--ease); }
.hk-start-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hk-start-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: var(--bw-thin) solid var(--line-soft); }
.hk-start-list li > .btn { flex: none; margin-left: auto; }
.hk-start-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 14px/1 var(--f-display); border: var(--bw-thin) solid var(--line); color: var(--ink-2); background: var(--card); }
.hk-start-list li[data-lage="klart"] .hk-start-mark { background: var(--mint-soft); color: var(--on-soft); border-color: transparent; }
.hk-start-list li[data-lage="hoppat"] .hk-start-mark { background: var(--paper-2); color: var(--ink-2); border-style: dashed; }
.hk-start-list li.is-current .hk-start-mark { background: var(--mint); color: var(--on-color); border-color: transparent; }
.hk-start-text { display: grid; gap: 2px; min-width: 0; }
.hk-start-text b { font-weight: 800; }
.hk-start-hint { margin-top: 4px; max-width: 60ch; }
.hk-start-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hk-start-husse { display: flex; align-items: center; gap: 12px; }
.hk-start-husse .bubble { max-width: 46ch; font-size: 15px; }
.hk-start-dold { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
@media (max-width: 560px) {
  .hk-start-list li { flex-wrap: wrap; }
  .hk-start-list li > .btn { margin-left: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-start-bar > span { transition: none; }
}

/* Första saken för ett nytt hus (FirstThingCard.razor). Kortets egen yta, så texten bär --ink. */
.hk-first { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: 20px 22px; margin: 28px 0 0; display: grid; gap: 10px; box-shadow: var(--lift-s); }
.hk-first .eyebrow { margin: 0; }
.hk-first h2 { margin: 0; font: 800 24px/1.1 var(--f-display); letter-spacing: -.02em; }
.hk-first-why { margin: 0; max-width: 64ch; }
.hk-first-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hk-first-basis { margin: 0; max-width: 64ch; }

/* ── Snabbläget (QuickIdea): ett ark med en rad, ett rum och kanske en bild ── */
.m-sheet-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.m-sheet-title { font: 800 28px/1 var(--f-display); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.m-photo { height: 132px; flex-direction: column; gap: 6px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--paper-2); border: var(--bw) dashed var(--line-soft); border-radius: var(--r-m); font-weight: 600; text-align: center; padding: 10px; }
.m-photo.has-thumb { height: auto; border-style: solid; border-color: var(--line); background: var(--card); }
.m-photo-thumb { width: 96px; height: 96px; max-height: none; object-fit: cover; border-radius: var(--r-l); border: var(--bw) solid var(--line); margin: 0; transform: rotate(-3deg); box-shadow: var(--lift-s); }
.m-line { border-bottom: var(--bw) solid var(--line); font-size: 20px; margin-top: 14px; width: 100%; }
.m-sheet-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; }
.m-sheet-links a { font-weight: 700; color: var(--sky-ink); min-height: 44px; display: inline-flex; align-items: center; }
.m-chip.chip-on { background: var(--sun); color: var(--on-color); border-color: var(--line); font-weight: 700; }
.m-chip.chip-off { background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-soft); }

/* Offlineraden: klistras överst på smal skärm, eftersom flikraden ligger fast nertill och en rad som
   rullar bort syns inte när man väl försöker spara. body.is-offline sätts av hemkoll.js. */
.offline-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
@media (max-width: 760px) {
  .offline-bar { position: sticky; top: 0; z-index: 27; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; font-size: 14.5px; line-height: 1.4; }
}

/* ── Återanslutningsrutan ────────────────────────────────────────────────
   Låg som ReconnectModal.razor.css, men den scopade stilmallen länkas ingenstans
   (Hemkoll.styles.css ligger inte i App.razor), så rutan visade alla fem lägena
   samtidigt med webbläsarens grå knappar. Här laddas den med resten. */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    background-color: var(--card, #fff);
    color: var(--ink, #1e1933);
    width: min(21rem, calc(100vw - 32px));
    margin: auto auto calc(24px + env(safe-area-inset-bottom));
    padding: 1.5rem 1.25rem 1.25rem;
    border: var(--bw, 3px) solid var(--line, #1e1933);
    border-radius: var(--r-l, 28px);
    box-shadow: 0 6px 0 var(--line, #1e1933);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}

#components-reconnect-modal[open] {
    animation: components-reconnect-modal-slideUp 1s cubic-bezier(.34, 1.56, .64, 1) 0.2s, components-reconnect-modal-fadeInOpacity 0.4s ease-in-out 0.2s;
    animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(30, 25, 51, 0.5);
    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal p {
    font: 600 17px/1.35 var(--f-body, system-ui);
}

/* Samma tryckknapp som resten av appen: sol, kontur, hård skugga, minst 44 px hög. */
#components-reconnect-modal button {
    min-height: 48px;
    padding: 0 28px;
    font: 800 16px/1 var(--f-body, system-ui);
    color: var(--on-color, #1e1933);
    background-color: var(--sun, #ffc42e);
    border: var(--bw, 3px) solid var(--line, #1e1933);
    border-radius: 999px;
    box-shadow: 0 4px 0 var(--line, #1e1933);
    cursor: pointer;
}

#components-reconnect-modal button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--line, #1e1933);
}

.components-rejoining-animation {
    animation: components-husse-wobble 1.6s ease-in-out infinite;
}

@keyframes components-husse-wobble {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation { animation: none; }
}

/* Taken på Gratis och Plus-intresset (PlanLimitLink, PlusInterestForm, PlanPanel, PlusJournalOffer).
   Länken under ett tak ärver felets eller notisens färg: den står på en mjuk yta, och --sky-ink där
   hade inte hållit kontrasten i mörkt läge. Understrykningen skiljer den från texten, inte färgen. */
.plan-tak-lank { color: inherit; font-weight: 600; text-decoration: underline; }
.plan-tak-lank:hover { color: inherit; }

.plus-intresse { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); }
.plus-intresse-form { display: grid; gap: var(--space-3); justify-items: start; margin: 0; }
.plus-intresse-hus { display: grid; gap: var(--space-2); justify-items: start; }
.plus-intresse-namn { margin: 0; font-weight: 650; color: var(--ink); }
.plus-intresse-period {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; border: 0;
  color: var(--ink);
}
.plus-intresse-period legend { padding: 0; margin-bottom: var(--space-1); color: var(--ink-2); width: 100%; }
.plus-intresse-period label { display: inline-flex; gap: var(--space-2); align-items: center; }
.plus-intresse-period input { accent-color: var(--ink); }

/* En rad, inte ett kort: erbjudandet ska gå att läsa förbi. */
.plus-rad {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
  margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font-size: var(--fs-small); line-height: 1.5;
}
.plus-rad > span { flex: 1 1 24ch; }
.plus-rad-ikon { color: var(--ink-2); flex: none; }
.plus-rad-stang { margin-left: auto; }

/* ══ Idéns bilder i dialogen ═════════════════════════════════════════════ */
.idea-photos { display: grid; gap: 10px; min-width: 0; }
.idea-photos-drop { position: relative; }
.idea-photos-zone {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 14px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-m);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.idea-photos-zone:hover { border-color: var(--ink); background: var(--paper-2); }
/* Filfältet täcker ytan: ett klick öppnar väljaren, och en fil som dras hit hamnar i fältet. */
.idea-photos-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.idea-photos-input:disabled { cursor: not-allowed; }
.idea-photos-zone:has(.idea-photos-input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }
:root[data-theme="dark"] .idea-photos-zone:has(.idea-photos-input:focus-visible) { outline-color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .idea-photos-zone:has(.idea-photos-input:focus-visible) { outline-color: var(--sun); } }
.idea-photos-drop.is-busy .idea-photos-zone { cursor: progress; border-color: var(--sky); }
.idea-photos-drop.is-disabled .idea-photos-zone { cursor: not-allowed; background: var(--paper-2); }
.idea-photos-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-m);
  background: var(--sky-soft); color: var(--on-soft);
}
.idea-photos-text { display: grid; gap: 2px; min-width: 0; }
.idea-photos-title { font: 650 15.5px/1.25 var(--f-body); }
.idea-photos-hint { color: var(--ink-2); font-size: 14px; line-height: 1.4; }

.idea-photos-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.idea-photos-item {
  position: relative; display: grid; gap: 4px; padding: 6px; border: var(--bw-thin) solid var(--line);
  border-radius: var(--r-s); background: var(--card);
}
.idea-photos-item.is-cover { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.idea-photos-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); background: var(--paper-2); }
.idea-photos-badge {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--mint-soft); color: var(--on-soft);
  font-size: 12.5px; font-weight: 700; box-shadow: 0 0 0 1px var(--line);
}
.idea-photos-acts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; }
.idea-photos-acts .btn { padding-inline: 6px; }

/* Husets egenskaper: tomt och uthus som utfällbar grupp (HouseFeatureFields). */
.feat-more { border-top: var(--bw) solid var(--line); padding-top: 4px; }
.feat-more > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px;
  cursor: pointer; list-style: none; color: var(--ink); border-radius: var(--r-s);
}
.feat-more > summary::-webkit-details-marker { display: none; }
.feat-more > summary::before {
  content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s var(--ease);
}
.feat-more[open] > summary::before { transform: rotate(45deg); }
.feat-more-t { font-weight: 700; }
.feat-more-n { color: var(--ink-2); font-size: 14px; }
.feat-more-body { padding-top: 12px; }
.feat-hint { display: block; margin-top: 6px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .feat-more > summary::before { transition: none; } }
/* Husets saker: en ja/nej-fråga per rad, etiketten till vänster och chipsen till höger. Bryter till två
   rader när etiketten inte ryms, i stället för att trycka chipsen utanför kanten vid 360 px. */
.sak-lista { display: flex; flex-direction: column; max-width: 36rem; }
.sak-rad {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 8px 0; border-top: var(--bw-thin) solid var(--line-soft);
}
.sak-lista > .sak-rad:first-child, .sak-grupp-h + .sak-rad { border-top: 0; }
.sak-l { flex: 1 1 6em; min-width: 0; overflow-wrap: break-word; font-weight: 600; color: var(--ink); }
.sak-rad .chips { flex: 0 0 auto; gap: 6px; }
.sak-fler { align-self: flex-start; margin-top: var(--space-2); }
.sak-fler + .small { margin-top: 4px; }
.sak-fler-lista { display: flex; flex-direction: column; margin-top: var(--space-2); }
.sak-grupp-h { margin: var(--space-3) 0 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }

/* Provperioden (PlusTrialButton). Beskedet får en egen rad: inne i ett fel flöt det annars ihop med feltexten. */
.plus-prova { margin-top: var(--space-2); }
.plus-prova-besked { display: block; margin-top: var(--space-2); font-weight: 600; }

/* Bildvisaren (Lightbox). Mörk i båda lägena, som färgblocken: ett foto ser ut som det ska mot mörkt, och
   mot papperets kräm i ljust läge såg en mörk bild urblekt ut. Därför egna värden här och inte papperet.
   Ytan är ett <dialog> i översta lagret och tar hela skärmen, med säkra marginaler för telefonens kant. */
.lb {
  --lb-bg: #111317; --lb-fg: #f5f2ea; --lb-dim: #c9c5bb; --lb-btn: rgba(255, 255, 255, .12); --lb-kant: rgba(255, 255, 255, .55);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: var(--lb-bg); color: var(--lb-fg); overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; z-index: 1000;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.lb::backdrop { background: var(--lb-bg); }
html:has(.lb[open]) { overflow: hidden; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 6px 18px; }
.lb-count { margin: 0; font: 650 16px/1 var(--f-body); color: var(--lb-fg); min-height: 1em; }
.lb-stage {
  position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0;
  padding: 0 64px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.lb-img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center;
  cursor: zoom-in; -webkit-user-drag: none; will-change: transform;
}
.lb-stage.is-zoomed .lb-img { cursor: grab; }
.lb-stage.is-zoomed.is-dragging .lb-img { cursor: grabbing; }
.lb-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--lb-btn); color: var(--lb-fg); border: var(--bw) solid var(--lb-kant);
}
.lb-btn:hover { background: rgba(255, 255, 255, .22); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.lb-prev { left: max(10px, env(safe-area-inset-left)); }
.lb-next { right: max(10px, env(safe-area-inset-right)); }
.lb-foot { display: grid; justify-items: center; gap: 6px; padding: 8px 18px 14px; text-align: center; }
.lb-caption { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.4; color: var(--lb-fg); overflow-wrap: anywhere; }
.lb-orig { font-size: 14px; color: var(--lb-dim); text-decoration: underline; text-underline-offset: 3px; }
.lb-orig:hover { color: var(--lb-fg); }
/* Ytan är mörk i båda lägena, så ringen är solen också i ljust läge: himlen mot nästan svart blev för svag. */
.lb :focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (max-width: 760px) {
  .lb-stage { padding: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb-foot { padding: 8px 72px 18px; min-height: 72px; align-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: lb-in .16s var(--ease); }
  .lb-img { transition: transform .18s var(--ease); }
  .lb-stage.is-dragging .lb-img { transition: none; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (forced-colors: active) {
  .lb { background: Canvas; color: CanvasText; }
  .lb-btn { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}
/* Det som öppnar visaren: miniatyren själv är knappen. Ringen ritas innanför, eftersom ramen runt
   miniatyren klipper allt som sticker ut. */
.lb-trigger {
  display: block; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
  padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; border-radius: inherit;
}
.lb-trigger:focus-visible { outline-offset: -3px; }
.lb-trigger img { display: block; }
.jt-kvitto-open { position: relative; z-index: 1; width: auto; height: auto; flex: none; border-radius: 6px; }
.jt-kvitto-open:focus-visible { outline-offset: 3px; }
.idea-photos-item .lb-trigger { height: auto; border-radius: 8px; }