/* 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);
  --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);
  --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);
    --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); } }
.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: 9px; 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); }

.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: 0 10px 30px var(--shadow-c), var(--lift); }
.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; }

.app-header ~ .undo-bar, .undo-bar {
  background: var(--bar); color: var(--bar-text); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); padding: 8px 10px 8px 20px; font-weight: 600; box-shadow: 0 6px 0 var(--shadow-c);
}
.undo-bar .btn {
  background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  font-weight: 700; min-height: 40px;
}
.undo-bar .btn:hover { background: var(--sun); }
.undo-bar .unstyled { color: var(--bar-text); width: 36px; height: 36px; font-size: 20px; }

/* 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 ───────────────────────────────── */
.hk-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 8px 0 26px; }
.hk-pagehead .eyebrow { margin: 0 0 12px; }
.hk-pagehead h1 { font: 800 clamp(36px, 4.6vw, 56px)/1.02 var(--f-display); letter-spacing: -.02em; margin: 0; max-width: 18ch; color: var(--ink); }
.hk-lead { margin: 14px 0 0; font-size: 18px; color: var(--ink-2); max-width: 52ch; }
.hk-pagehead-actions { display: flex; gap: 12px; flex-wrap: wrap; }

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

.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: 0 4px 0 var(--shadow-c); 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;
}
.hk-toast {
  pointer-events: auto; width: 100%; max-width: 440px; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 8px 18px; background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-m); box-shadow: var(--lift); font-weight: 600;
  animation: hk-toast-in 180ms ease-out;
}
.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);
}
@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: 0 4px 0 var(--shadow-c);
  }
  .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; }

  /* Bekräftelser och ångra-raden ligger ovanför flikraden, där tummen redan är. */
  .hk-toast-region { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .app-header ~ .undo-bar, .undo-bar { bottom: calc(96px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }

  /* Dialogerna blir helskärm: en ruta med marginaler runt var för smal att skriva i. */
  .dialog-backdrop { padding: 0; align-items: stretch; }
  .dialog, .dialog[class*="dlg-"] {
    width: 100%; max-width: none; min-height: 100dvh; margin: 0; border-radius: 0; border-width: 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  }

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

/* ── 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 {
    animation: none !important; transition-duration: .01ms !important;
  }
  .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; }
}

/* 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: 16px; 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: 12px;
  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: 8px; 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: 999px; 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; }