/* 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); }
}

/* 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); }
}
/* ── Byggstenarnas familj: siffror, pillor, växlare, chips och rumsblock ──
   De små byggstenarna står på varje sida och hade vuxit fram var för sig: pillorna var tre storlekar
   (12, 12,5 och 13 px med ikoner på 12 och 13 px), siffrorutornas pil fanns bara på översikten och var
   ett tecken, statuslinjen upptill var 3, 4 eller 5 px beroende på sida, och rumsblocket var ett mättat
   syrénblock som lyste i mörkt läge medan allt annat blivit lugna kort. Här bor de på ett ställe och
   delar samma mått: kort på --card med 1 px --line, --r-l, --lift, statuslinjen --mark, pillan --pill-h
   med text i --fs-pill, siffror i Bricolage 600 med tabulära siffror. Sidornas egna filer sätter bara
   placering, aldrig utseendet. */

/* Siffrorutan (StatTile). Siffran bär lägets färg i -ink, etiketten är bläck: förut var både siffra och
   etikett färgade, och fyra rutor bredvid varandra blev fyra färgade textblock som tävlade. */
.stat, .stat.hk-stat, .stat.hk-stat:nth-child(n),
.stat:is(.late, .soon, .ok, .idea, .room, .people),
.stat:is(.tone-tomat, .tone-sol, .tone-himmel, .tone-mint, .tone-syren) {
  --stat: var(--card); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px 20px 18px; text-decoration: none;
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--mark);
  background: var(--stat-mark, var(--line-strong));
}
.stat:is(.late, .tone-tomat) { --stat-mark: var(--tomato); --stat-ink: var(--tomato-ink); }
.stat:is(.soon, .tone-sol) { --stat-mark: var(--sun); --stat-ink: var(--sun-ink); }
.stat:is(.ok, .tone-mint) { --stat-mark: var(--mint); --stat-ink: var(--mint-ink); }
.stat:is(.idea, .tone-himmel) { --stat-mark: var(--sky); --stat-ink: var(--sky-ink); }
.stat:is(.room, .tone-syren) { --stat-mark: var(--lilac); --stat-ink: var(--lilac-ink); }
.stat.people { --stat-mark: var(--pink); }
.stat .num {
  font: 600 var(--fs-stat)/1 var(--f-display); font-optical-sizing: auto; letter-spacing: -.035em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--stat-ink, var(--ink)); margin: 0 0 8px;
}
.stat .lbl { font: 600 15px/1.3 var(--f-body); color: var(--ink); text-wrap: balance; }
.stat small { font: 400 13.5px/1.4 var(--f-body); color: var(--ink-2); }
/* Pilen säger att rutan leder vidare. Siffran håller sig undan den, så att ett långt belopp inte
   skrivs in under pilen. */
.hk-stat-pil {
  position: absolute; top: 18px; right: 16px; color: var(--stat-ink, var(--ink-2));
  transition: transform var(--dur-hover) var(--ease);
}
a.stat .num { padding-right: 24px; }
a.stat:hover, button.stat:hover, a.stat.hk-stat:hover {
  transform: none; border-color: var(--line-strong); box-shadow: var(--lift-l);
}
a.stat:hover .hk-stat-pil { transform: translateX(3px); }
a.stat:active, a.stat.hk-stat:active { transform: translateY(1px); box-shadow: var(--lift-s); }
@media (max-width: 760px) {
  .stat, .stat.hk-stat:nth-child(n) { padding: 16px 16px 14px; }
  .stat .lbl { font-size: 14.5px; }
  .stat small { font-size: 13px; }
  .hk-stat-pil { top: 14px; right: 12px; }
}

/* Statuspillan (StatusPill, WarrantyPill, uppgiftskortets läge). En höjd, en textstorlek och en
   ikonstorlek överallt. Mjuk yta med texten i lägets -ink, som tokens.json säger; ytan och texten
   byter tillsammans i mörkt läge. Ikonen och ordet bär läget, färgen följer med. */
.pill, .pill.hk-pill {
  display: inline-flex; align-items: center; gap: 5px; min-height: var(--pill-h); padding: 3px 10px;
  font: 600 var(--fs-pill)/1.2 var(--f-body); letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  border: var(--bw) solid transparent; border-radius: var(--r-pill);
}
/* Ikonen sitter optiskt i mitten av sin rundning: lite mindre luft på den sidan än på ordets. */
.pill:has(> .hk-icon:first-child) { padding-left: 8px; }
.pill > .hk-icon, .pill > svg { width: 14px; height: 14px; flex: none; }
.tag-due-late, .pill.late, .pill-late, .hk-pill.late { background: var(--tomato-soft); color: var(--tomato-ink); border-color: transparent; }
.tag-due-soon, .pill.soon, .pill-soon, .hk-pill.soon { background: var(--sun-soft); color: var(--sun-ink); border-color: transparent; }
.tag-ok, .tag-due-ok, .pill.ok, .pill-ok, .hk-pill.ok { background: var(--mint-soft); color: var(--mint-ink); border-color: transparent; }
.pill.idea, .pill-idea, .hk-pill.idea { background: var(--sky-soft); color: var(--sky-ink); border-color: transparent; }
.tag-due-later, .pill.later, .pill-later { background: var(--paper-2); color: var(--ink); border-color: transparent; }
/* Den neutrala pillan står ofta på ett kort i samma färg; kanten är det enda som ritar den. */
.pill.plain { background: var(--card); color: var(--ink); border-color: var(--line); }

/* Växlaren (Segmented, .seg). Ett spår i --paper-2 där det valda är bläck, så att valet syns utan färg.
   Förut delade tunna streck alternativen och rundningen klippte ytterkanten på det valda. Spåret har
   4 px luft runt alternativen, så att fokusringen (3 px med 1 px avstånd) ryms även när växlaren
   rullar i sidled på telefonen och klipper det som sticker ut. */
.seg {
  display: inline-flex; gap: 2px; padding: 4px; overflow: visible;
  background: var(--paper-2); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
}
.seg .seg-opt, .seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--r-pill);
  font: 600 14.5px/1.2 var(--f-body); color: var(--ink);
}
.seg-opt + .seg-opt { border-left: 0; }
.seg-btn:focus-visible { outline-offset: 1px; }
.seg-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
.seg-opt:has(input:checked), .seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--lift-s); }
.seg-opt:not(:has(input:checked)):hover, .seg-btn[aria-pressed="false"]:hover { background: var(--card); }

/* Chips (ChoiceChips, .chip). Samma höjd och vikt som växlaren; ett val är bläck som där. Kanten på
   ett ovalt chip är --line-strong, eftersom det är en kontroll: --line var 1,3:1 mot kortet och
   chipet syntes bara som text. "Vet ej" som förval är streckat och dämpat: det är inget svar. */
.chip, .tag.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  font: 600 14.5px/1.2 var(--f-body); border-radius: var(--r-pill);
}
.chip.chip-off, .tag.chip.chip-off { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line-strong); }
.chip.chip-on, .tag.chip.chip-on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border: var(--bw) solid var(--ink); }
.chip.chip-unset, .tag.chip.chip-unset { background: var(--paper-2); color: var(--ink-2); border: var(--bw) dashed var(--line-strong); }

/* Rumsblocket (OversiktRumsblock och .room-tile). Ett lugnt kort som siffrorna; rummets färg sitter i
   ikonens bricka (--tile, en -soft-färg, med --on-soft), inte i hela ytan. Ett helt syrénblock med
   mörk text var det enda som lyste på en mörk sida. */
.room-tile, .room-tile:nth-child(n) {
  --tile: var(--lilac-soft); display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 140px; padding: 16px 18px 18px; text-decoration: none;
  background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-l); box-shadow: var(--lift);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.room-tile:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--lift-l); }
.room-tile:active { transform: translateY(1px); box-shadow: var(--lift-s); }
.room-tile b { display: block; font: 650 18px/1.2 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.room-tile .n {
  display: block; margin-top: 4px; font: 600 30px/1 var(--f-display); letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
}
.room-tile .n small { margin-left: 5px; font: 500 14px/1 var(--f-body); letter-spacing: 0; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .stat, .hk-stat-pil, .room-tile { transition: none; }
  a.stat:hover .hk-stat-pil, a.stat:active, .room-tile:active { transform: none; }
}

/* ── 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. Tidslinjen
   har inga färgade rubriker längre; regeln för den togs bort med dem. */

/* 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; }

/* ══ Stapeldiagrammet (BarChart) ═════════════════════════════════════════
   Byggstenen, så att den ser likadan ut var den än står. Inline-svg med bredden i procent och texten i
   pixlar, så att etiketterna har samma storlek på telefonen som på datorn. Allt färgas med tokens, så
   mörkt läge följer med utan egna regler. Texten bär --ink och --ink-2, aldrig seriens färg: himmel på
   mörkt kort når inte 4,5:1.
   Texten har en kant i --bc-bg (paint-order), så att rutnätet och de streckade linjerna bryts bakom den.
   Står diagrammet på ett kort eller i en dialog blir --bc-bg kortets yta; en annan yta sätter variabeln själv. */
.bc { --bc-bg: var(--paper); margin: 14px 0 0; min-width: 0; max-width: 720px; }
:is(.card, .dialog) .bc { --bc-bg: var(--card); }
.bc-rubrik { margin: 0 0 6px; font: 650 18px/1.25 var(--f-display); color: var(--ink); }
.bc-svg { display: block; overflow: visible; font-family: var(--f-body); }
.bc-etikett, .bc-belopp, .bc-axel, .bc-linjetext {
  paint-order: stroke; stroke: var(--bc-bg); stroke-width: 4px; stroke-linejoin: round;
}
.bc-etikett { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.bc-belopp { font-size: 13.5px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc-axel { font-size: 12px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.bc-linjetext { font-size: 12px; font-weight: 650; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-spar { fill: var(--paper-2); }
.bc-lagt { fill: var(--ink-3); }
.bc-plan { fill: var(--sky); }
.bc-rand-a { fill: var(--sky); }
.bc-rand-b { fill: var(--sky-soft); }
/* Sorten Split: lagt på värdehöjande helt, underhåll randigt, båda i grått som det lagda på /budget. */
.bc-rand-c { fill: var(--ink-3); }
.bc-rand-d { fill: color-mix(in srgb, var(--ink-3) 28%, var(--paper-2)); }
.bc-linje { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; }
.bc-utfall { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }

/* Teckenförklaringen: samma rutor som staplarna, i samma ordning som de står i diagrammet. */
.bc-nycklar { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; }
.bc-nyckel { display: inline-flex; align-items: center; gap: 6px; }
.bc-key { flex: none; display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
.bc-key--lagt { background: var(--ink-3); }
.bc-key--plan { background: var(--sky); }
.bc-key--rand { background: repeating-linear-gradient(135deg, var(--sky) 0 3px, var(--sky-soft) 3px 7px); }
.bc-key--rand-lagt { background: repeating-linear-gradient(135deg, var(--ink-3) 0 3px, color-mix(in srgb, var(--ink-3) 28%, var(--paper-2)) 3px 7px); }
.bc-key--utfall { width: 4px; height: 14px; border-radius: 2px; background: var(--ink); }
.bc-key--linje { height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.bc-nyckel .bc-key--plan + .bc-key { margin-left: -3px; }

.bc-mening { margin-top: 6px; }
.bc-tabell { margin-top: 4px; }
.bc-tabell summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--ink-2); border-radius: 6px;
}
.bc-tabell summary:hover { color: var(--ink); }
.bc-tabell .table { margin-top: 4px; }
.bc-tabell .table th[scope="row"] { font-weight: 600; text-align: left; }
.bc-tom { margin-top: 10px; }
/* Två diagram sida vid sida under samma rubrik, och under varandra när de inte får plats. Raden börjar
   uppifrån, så att ett kort diagram inte sträcks ut till det längres höjd. */
.bc-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 40px; align-items: start; }
.bc-par .bc { margin-top: 10px; }
/* En ensam stapel (BarTrack) i samma form som en rad i diagrammet: kommande år, journalens år och
   tidslinjen. Fyllningen är samma klasser som ovan, så det här är bara storleken. */
.btr { display: block; overflow: visible; }
.btr--staende { width: 100%; height: 100%; }
@media (forced-colors: active) {
  .bc-key--lagt, .bc-key--plan, .bc-key--utfall { background: CanvasText; }
  .bc-key--rand { background: repeating-linear-gradient(135deg, CanvasText 0 3px, Canvas 3px 7px); }
  .bc-key--linje { border-top-color: CanvasText; }
  .bc-lagt, .bc-plan, .bc-rand-a { fill: CanvasText; }
  .bc-rand-c { fill: CanvasText; }
  .bc-rand-b, .bc-rand-d, .bc-spar { fill: Canvas; }
  .bc-key--rand-lagt { background: repeating-linear-gradient(135deg, CanvasText 0 3px, Canvas 3px 7px); }
  .bc-etikett, .bc-belopp, .bc-axel, .bc-linjetext { fill: CanvasText; stroke: Canvas; }
  .bc-linje, .bc-utfall, .bc-grid { stroke: CanvasText; }
  .bc-spar { stroke: CanvasText; stroke-width: 1; }
}
@media print {
  .bc { --bc-bg: #fff; break-inside: avoid; }
  .bc-tabell { display: none; }
}

/* 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; }