/* ══ Äldre byggstenar ═════════════════════════════════════════════════════
   Reglerna som sidorna fortfarande lutar sig mot, ur de gamla lagren (classical, app,
   oversikt, skrivbord, onboarding, mobil, tema) som nu är borta. De ligger FÖRST med
   flit: allt nedanför hade redan sista ordet över dem, så kaskaden är oförändrad.
   Skriv om en regel mot de nya komponenterna när du ändå rör sidan, och ta bort den här. */

/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* Typsnitten ligger i wwwroot/fonts och laddas härifrån — aldrig från
   fonts.googleapis.com. En @import mot Google gör den här filen ofärdig
   tills Google svarat, och ett parser-blockerande <script> i <head> väntar
   in alla pågående stylesheets. Nås inte Google (annonsblockerare, Pi-hole,
   brandvägg, DNS) körs blazor.web.js aldrig, ingen krets kopplas upp och
   varje knapp i appen är död trots att sidan ser hel ut. Dessutom slipper
   vi skicka besökarnas ip-adresser till Google, vilket GDPR har synpunkter
   på. Filerna är latin + latin-ext ur Googles egna variabla snitt. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }/* Husvo — appens egen layout. Allt visuellt kommer ur Classical: använd tokens,
   aldrig råa värden. Accent är kontur och markering, aldrig stor fylld yta. */

body { font-size: 15px; }

.kicker {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.prose { font-size: 15px; line-height: 1.7; text-align: justify; hyphens: auto; }
/* Ingressen avslutas med en hårfin linje i sin egen bredd, inte över hela sidan. */
.small { font-size: 13px; line-height: 1.6; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.unstyled {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

/* Knappvarianten av .seg-opt: nollställ utan att röra systemets padding. */
.seg-btn { background: none; border: 0; margin: 0; font-family: inherit; }

/* Rubriker får fokus vid navigering (FocusOnNavigate) men är inte interaktiva —
   fokusringen hör hemma på knappar och fält, inte här. */
h1:focus-visible, h2:focus-visible { outline: none; }

/* — meddelanderutor — */

.notice {
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  color: var(--color-accent-800); font-size: 14px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
}
.notice-line {
  font-size: 13px; color: var(--color-accent-800);
  border-left: 2px solid var(--color-accent-300); padding-left: var(--space-3);
}
.form-error {
  margin: 0 0 var(--space-2); font-size: 14px; color: var(--color-accent-800);
  border-left: 2px solid var(--color-accent); padding-left: var(--space-3);
}

/* — tomma tillstånd — */

.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 560px; }

/* ── Appskal ────────────────────────────────────────────────────────────── */

.app-header {
  position: sticky; top: 0; z-index: 25;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}

.brand {
  font-family: var(--font-heading); font-weight: 500; font-size: 26px;
  line-height: 1; letter-spacing: -0.01em;
}

.house-pick {
  display: flex; align-items: baseline; gap: var(--space-2);
  background: none; border: 0; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer; color: inherit;
}
.house-pick .name {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
}
.house-pick .meta { font-size: 13px; color: var(--color-neutral-600); }
.search-wrap { position: relative; flex: 1 1 150px; max-width: 260px; }

.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 14px;
  border: 1px solid var(--color-divider); color: var(--color-neutral-700);
}
.avatar-sm { width: 26px; height: 26px; font-size: 13px; }

.badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; font-size: 11px;
  background: var(--color-accent); color: var(--color-neutral-100);
  font-family: var(--font-body);
}

.app-nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.app-nav a {
  font-family: var(--font-heading); font-weight: 500; font-size: 18px;
  color: inherit; text-decoration: none; padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.app-nav a.active { border-bottom-color: var(--color-accent); }

.offline-bar {
  background: var(--color-accent-100); border-bottom: 1px solid var(--color-accent-300);
  color: var(--color-accent-800); font-size: 14px;
  text-align: center; padding: var(--space-2) var(--space-4);
}
body:not(.is-offline) .offline-bar { display: none; }

.app-main { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6) 80px; }

/* — flytande paneler — */
.popover {
  position: absolute; top: calc(100% + var(--space-2));
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pop-houses { width: 280px; left: 0; z-index: 30; }
.pop-search { width: 360px; max-height: 380px; overflow-y: auto; left: 0; right: auto; z-index: 20; }
.pop-activity { width: 380px; max-height: 420px; overflow-y: auto; right: 0; z-index: 30; }
.pop-pad { padding: var(--space-3); }

.pop-item {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  border: 0; border-left: 2px solid transparent;
  padding: var(--space-2) var(--space-3); color: inherit; font: inherit;
}
a.pop-item { text-decoration: none; }

.activity-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; }
.activity-row .what { font-size: 14px; line-height: 1.5; }
.activity-row .what strong { font-weight: 600; }
.activity-row .where { font-size: 12px; color: var(--color-neutral-600); }
.dot-unread {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--color-accent); margin-top: 7px;
}

/* — ångra-raden — */
.undo-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--space-6);
  z-index: 40; display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 14px;
}

/* ── Översikt ───────────────────────────────────────────────────────────── */

.hero h1 { font-size: 46px; font-weight: 400; line-height: 1.08; margin: 0 0 var(--space-3); }

.band { display: flex; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-6) 0; }
.dotted-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--color-divider);
}

/* ── Rum ────────────────────────────────────────────────────────────────── */

.rooms-layout { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.rooms-body { flex: 999 1 560px; min-width: 0; }

.floor-head {
  font-family: var(--font-heading); font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.08em; padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-divider); margin-top: var(--space-4);
}
.room-link {
  display: flex; justify-content: space-between; gap: var(--space-2); width: 100%;
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer;
  padding: var(--space-2) var(--space-3); color: inherit; font: inherit; font-size: 14px;
}
.room-link.active .label { font-family: var(--font-heading); font-size: 17px; }
.room-link .count { color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }

.photo-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.photo-figure { flex: none; width: 200px; }
.photo-slot {
  width: 100%; height: 150px; background: var(--color-neutral-200);
  border: 1px dashed var(--color-accent-300); border-radius: var(--radius-sm);
  display: grid; place-items: center; text-align: center;
  font-size: 13px; color: var(--color-neutral-600); padding: var(--space-3);
}
.photo-figure figcaption { font-size: 12px; color: var(--color-neutral-600); margin-top: var(--space-2); }

.idea-card .title { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 1.2; }
.idea-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tag-btn { cursor: pointer; background: none; font: inherit; }
.pro-note {
  font-size: 13px; border-left: 2px solid var(--color-accent-300);
  padding-left: var(--space-3); color: var(--color-neutral-700);
}
.comments {
  background: var(--color-neutral-100); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.comment-row { display: flex; gap: var(--space-3); font-size: 14px; }
.comment-row .who {
  font-family: var(--font-heading); font-size: 14px;
  color: var(--color-accent-700); min-width: 62px; flex: none;
}

/* ── Tidslinje ──────────────────────────────────────────────────────────── */
.project-sum {
  font-family: var(--font-heading); font-size: 17px; font-variant-numeric: tabular-nums;
}

/* ── Tavla ──────────────────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.board-col-head { border-top: 2px solid var(--color-text); padding-top: var(--space-2); }
.board-col-head .name { font-family: var(--font-heading); font-size: 20px; font-weight: 500; }
.board-cards { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); min-height: 120px; }
.board-card { cursor: grab; }
.board-card:active { cursor: grabbing; }
.board-card .title { font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 1.2; }
.board-drop { outline: 2px dashed var(--color-accent); outline-offset: 4px; }
.step-btn {
  width: 28px; height: 28px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
  background: none; cursor: pointer; color: var(--color-accent-700);
}
.step-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Prioritera ─────────────────────────────────────────────────────────── */

.matrix-layout { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
.matrix-plot-wrap { flex: 1 1 420px; min-width: 0; }
.matrix-plot {
  position: relative; height: 460px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.matrix-plot .axis-h, .matrix-plot .axis-v { position: absolute; background: var(--color-divider); }
.matrix-plot .axis-h { left: 0; right: 0; top: 50%; height: 1px; }
.matrix-plot .axis-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.quadrant { position: absolute; padding: var(--space-3); max-width: 46%; }
.quadrant .q-name { font-family: var(--font-heading); font-size: 15px; color: var(--color-neutral-600); }
.q-tl { top: 0; left: 0; } .q-tr { top: 0; right: 0; text-align: right; }
.q-bl { bottom: 0; left: 0; } .q-br { bottom: 0; right: 0; text-align: right; }

.matrix-dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading); font-size: 14px; color: var(--color-accent-700);
  font-variant-numeric: tabular-nums;
}

.axis-y-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-600); align-self: center;
}
.axis-x-label {
  display: flex; justify-content: space-between; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600);
  margin-top: var(--space-2);
}
.matrix-list { flex: 1 1 240px; }
.matrix-list-row { display: flex; gap: var(--space-3); padding: var(--space-2) 0; align-items: baseline; }
.matrix-list-row .n { color: var(--color-accent-700); font-variant-numeric: tabular-nums; min-width: 20px; }
.matrix-list-row .title { font-family: var(--font-heading); font-size: 17px; font-weight: 500; }

.duel-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.duel-card { text-align: left; cursor: pointer; }
.duel-card .title { font-family: var(--font-heading); font-size: 22px; font-weight: 500; line-height: 1.2; }

/* ── Journal ────────────────────────────────────────────────────────────── */

.journal { max-width: 860px; margin: 0 auto; }
.warranty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }

/* ── Underhåll ──────────────────────────────────────────────────────────── */

.appliance-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.appliance-facts dt { color: var(--color-neutral-600); font-size: 14px; }
.appliance-facts dd { margin: 0; }
.manual-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.manual-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider);
}
.manual-upload { cursor: pointer; }
.manual-upload.is-busy { opacity: .6; cursor: progress; }
.manual-upload.is-disabled { opacity: .6; cursor: not-allowed; }
/* Anmärkningen har val under sig; rutan ska stå vid rubriken, inte mitt i blocket. */
.inspection-row {
  align-items: flex-start; cursor: default; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.inspection-row > input { margin-top: 4px; }
.manual-hits { margin: var(--space-3) 0 0; padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.manual-snippet { margin: var(--space-1) 0 0; max-width: 72ch; }
.manual-snippet mark { background: var(--color-accent-100); color: inherit; border-bottom: 1px solid var(--color-accent-300); }
.log-row { cursor: pointer; }

/* ── Husprofil ──────────────────────────────────────────────────────────── */

.setup { max-width: 820px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { cursor: pointer; background: none; }
.chip-on { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-2); }
.check-row {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; font-size: 14px; padding: var(--space-1) 0;
}
.box {
  width: 16px; height: 16px; flex: none; border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent); display: grid; place-items: center;
  font-size: 11px; color: var(--color-accent-700); line-height: 1;
}
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.field-row > .field { flex: 1 1 180px; }

/* ── Onboarding ─────────────────────────────────────────────────────────── */

.auth { display: flex; min-height: 100vh; flex-wrap: wrap; }
.auth-left {
  flex: 1 1 380px; padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--color-divider);
}
.auth-manifest { font-family: var(--font-heading); font-size: 34px; font-weight: 400; line-height: 1.15; }
.auth-right {
  flex: 1 1 420px; padding: var(--space-8) var(--space-6);
  display: flex; align-items: center; justify-content: center;
}
.auth-form { width: 100%; max-width: 420px; }
@media (max-width: 800px) { .auth-left { border-right: 0; border-bottom: 1px solid var(--color-divider); } }

/* ── Hantverkarens vy ───────────────────────────────────────────────────── */

.craftsman { max-width: 780px; margin: 0 auto; }

/* ── Mobil ──────────────────────────────────────────────────────────────── */

.tap-44 { min-height: 44px; }

/* ── Dialoger ───────────────────────────────────────────────────────────── */

.dialog-backdrop {
  overflow-y: auto; align-items: flex-start; padding: var(--space-6); z-index: 50;
}
.dialog { margin: auto; }
.dlg-620 { width: min(620px, 100%); }
.dlg-640 { width: min(640px, 100%); }
.dlg-700 { width: min(700px, 100%); }
.dialog .dialog-title { font-size: 30px; font-weight: 500; }

/* ── Utskrift ───────────────────────────────────────────────────────────── */

@media print {
  .app-header, .app-nav, .no-print, .undo-bar, .offline-bar { display: none !important; }
  body { background: #fff; }
  .app-main { padding: 0; max-width: none; }
  .journal { max-width: none; }
}

/* ── Blazors felrad ─────────────────────────────────────────────────────── */

#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-100); border-top: 1px solid var(--color-accent-300);
  color: var(--color-accent-800); font-size: 14px;
  box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss {
  cursor: pointer; float: right; padding: 0 var(--space-2);
}
#blazor-error-ui .reload { color: var(--color-accent-700); }

/* ── Bilder ─────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.photo-drop:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.photo-drop.is-busy { cursor: progress; opacity: 0.6; }
/* Läsrätt: platsen syns, men ser inte ut att ta emot något. */
.photo-drop.is-disabled { cursor: not-allowed; opacity: 0.5; }
/* Ett fieldset som bara finns för att kunna stänga av allt i det på en gång (läsrätt). */
.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.plain-fieldset:disabled :is(button, input, select, textarea, label) { cursor: not-allowed; }
.plain-fieldset:disabled :is(.chip, .check-row, .input, .seg) { opacity: 0.55; }
.photo-drop.is-disabled:hover { border-color: inherit; background: inherit; }

/* Knappen är en label runt en dold filväljare, så den behöver knappens tillstånd själv. */
.ai-read { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-neutral-200); }
.ai-read label.btn { cursor: pointer; }
.ai-read label.btn:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ai-read label.btn.is-busy { cursor: progress; opacity: 0.6; }

.photo-frame { position: relative; height: 150px; overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.photo-remove {
  position: absolute; top: var(--space-1); right: var(--space-1);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
  background: var(--color-bg); border: 1px solid var(--color-divider);
  color: var(--color-neutral-800); font-size: 15px;
}
.photo-remove:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* Kvittot i journalen: liggande miniatyr som håller sig inom kortet. */

/* ── Laddningstillstånd ─────────────────────────────────────────────────── */

.skeleton {
  display: block; border-radius: var(--radius-sm);
  background: var(--color-neutral-200);
  animation: skeleton-fade 1.6s ease-in-out infinite;
}
.skeleton-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

@keyframes skeleton-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Respektera den som bett om mindre rörelse. */

/* Skalet medan huset hämtas — samma rytm som den riktiga headern. */
.shell-skeleton { border-bottom: 1px solid var(--color-divider); }


/* ── Mobilen ────────────────────────────────────────────────────────────────
   Inte designdäckets telefonramar utan appen som den används: stående, med en
   hand. Skalet fyller skärmen, listan rullar och navigeringen ligger kvar
   nederst inom tummens räckvidd. Alla tryckytor är minst 44 px. */

.m-app {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: var(--color-bg);
}
.m-main {
  flex: 1;
  padding: var(--space-4) var(--space-4) calc(72px + var(--space-6));
  max-width: 620px; width: 100%; margin: 0 auto;
}

.m-top { margin-bottom: var(--space-4); }
.m-top-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.m-top-text { flex: 1; min-width: 0; }
.m-title {
  font-size: 30px; line-height: 1.1; margin: 0;
  overflow-wrap: anywhere;
}
.m-lead {
  margin: var(--space-3) 0 0; font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.m-icon {
  flex: none; width: 44px; height: 44px; margin-top: -4px;
  display: grid; place-items: center;
  color: var(--color-text); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 50%;
}
.m-icon:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.m-section { margin: var(--space-4) 0; }

/* Rader och rutor är hela tryckytan, inte en länk inuti en rad. */
.m-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px; padding: var(--space-2) 0;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--color-divider);
}
.m-row:last-child { border-bottom: 0; }

.m-lift {
  display: block; color: inherit; text-decoration: none;
  min-height: 44px; padding: var(--space-1) 0;
}
.m-next-title { font-size: 26px; line-height: 1.15; margin: 0; }

.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.m-tile {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 72px; padding: var(--space-2);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
}

.m-card { margin-bottom: var(--space-3); }
.m-row-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
/* Bildremsan rullar i sidled inom sig själv; två rutor ska synas på en smal telefon. */
.m-photos .photo-figure { width: 150px; }
.m-half { flex: 1; font-size: 13px; white-space: nowrap; }
.m-comments {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

/* Bottennavigering — ligger kvar, även när tangentbordet är uppe. */
.m-nav {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: stretch;
  background: var(--color-neutral-100);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom);
}
.m-tab {
  flex: 1; min-height: 56px;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--color-neutral-700); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
}
.m-add {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--color-accent); color: var(--color-accent);
  font-size: 20px; line-height: 1;
}

/* Snabbläget: ett ark som täcker skärmen, med Spara där tummen redan är. */
.m-sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
  display: flex; align-items: flex-end;
}
.m-sheet {
  width: 100%; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.m-sheet-body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.m-sheet-nav {
  display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
.m-photo { height: 200px; cursor: pointer; }

/* En rad med understreck, som i specen — inte en ruta. */
.m-line {
  width: 100%; font: inherit; font-size: 17px;
  padding: var(--space-3) 0; margin-top: var(--space-4);
  color: var(--color-text); background: transparent;
  border: 0; border-bottom: 1px solid var(--color-text);
  border-radius: 0;
}
.m-line::placeholder { color: var(--color-neutral-600); }
.m-line:focus-visible { outline: none; border-bottom-color: var(--color-accent); }

@media (min-width: 700px) {
  /* Öppnad på en bred skärm ska mobilen inte spreta över hela bredden. */
  .m-app { max-width: 480px; margin: 0 auto; border-inline: 1px solid var(--color-divider); }
}

/* "Senast gjort" i efterhand på underhållskorten. */
.last-done-open { align-self: flex-start; font-size: 13px; }
.last-done-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

/* Fråga huset: frågan som citat, svaret som löptext med radbrytningarna kvar. */
.ask-exchange { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.ask-q { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 19px; }
.ask-a { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ask-sources { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.ask-panel { max-width: 720px; }

/* Prenumerationsadressen är lång och utan blanksteg; utan brytning spränger den kortet på telefonen. */
.calendar-feed { max-width: 64ch; margin-top: var(--space-4); }
.calendar-feed-url {
  display: block; padding: var(--space-2); border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm); font-size: 13px; overflow-wrap: anywhere; user-select: all;
}

/* Föreslagna underhållspunkter: streckad ram, så att förslaget inte läses som en punkt huset redan har. */
.suggested-maint { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }


/* ── Tillgänglighet och trygghet ────────────────────────────────────────────
   Skip-länken är dold tills tangentbordet når den. Huvudytan tar fokus utan att
   rita en ram runt hela sidan. */
.skip-link {
  position: absolute; left: var(--space-4); top: -48px; z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text); color: var(--color-bg);
  text-decoration: none; font-size: 14px;
}
.skip-link:focus { top: var(--space-2); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.app-main:focus { outline: none; }

/* Den som bett om mindre rörelse får ingen — varken animation, övergång eller
   mjuk scroll, i hela appen och inte bara där någon kom ihåg det. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Kontrast (mätt, se AccessibilityTests) ─────────────────────────────────
   classical.css rörs inte, så överstyrningarna bor här. Guldet och den dämpade
   grå var under 4,5:1 mot sidans bakgrund (3,0 respektive 3,9). Guldet behålls
   som ram och accent; bara när det är TEXT används den mörkare nyansen. */
:root {
  /* Neutral-600 är den dämpade textfärgen i hela appen. */
  --color-neutral-600: #646060;
}
.tag-outline { border-color: var(--color-accent); }
/* Frågan är avstängd men förklaringen ("AI är inte påslaget") är information som
   ska gå att läsa, så den dämpas inte med opacitet; fälten är avstängda ändå. */
.ask-off .ask-house.ask-house { opacity: 1; }
.ask-off label { color: var(--color-text); }

/* ── Mikrointeraktioner ─────────────────────────────────────────────────────
   Samma tempo överallt: knappar, kort och länkar mjuknar in i sitt hovrade läge
   i stället för att hoppa, och ett tryck syns som en hårsmån ned. Bara färg,
   ram och bakgrund rörs (aldrig mått), så ingenting flyttar på sig, och
   reduced-motion ovan nollar tiderna. Färgvärdena är oförändrade, så
   kontrasten mäts som förut. */
.nav a, a, .room-link, .pop-item, .house-pick, .photo-drop, .photo-remove, .m-icon {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.step-btn:active:not(:disabled) { transform: translateY(1px); }
.duel-card:active { background: var(--color-accent-100); }
/* Fokus ska synas lika tydligt på kort och rader som på knappar. */
.room-link:focus-visible, .duel-card:focus-visible, .pop-item:focus-visible, .house-pick:focus-visible, .m-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}/* Översikt och helhetskänsla. Egen fil så att classical.css och app.css slipper röras. */

/* ── Siffror ────────────────────────────────────────────────────────────────
   Cormorants oldstyle-siffror ritar 0 som ett litet "o" och 1 som ett "I":
   "o kr", "Sovrum I". Allt som är data — räknare, nyckeltal, markörer, datum i
   etiketter och rumsnamn — får därför lining. Löpande brödtext behåller oldstyle. */
.badge, .matrix-list-row .n, .kicker-sm, .room-name, .stat, .avatar, .dotted-row .tabular {
  font-variant-numeric: lining-nums tabular-nums;
}
.room-name, .card .serif { font-variant-numeric: lining-nums; }
.badge { font-variant-numeric: lining-nums tabular-nums; }

/* ── Brådskeetiketter ───────────────────────────────────────────────────────
   Samma mått för alla tre; bara tonen skiljer. */
.tag-due {
  box-sizing: border-box; min-width: 92px; justify-content: center; white-space: nowrap;
  padding: 3px 10px; border: 1px solid transparent; font-size: 11px; letter-spacing: 0.02em;
}
.tag-due-late { background: var(--color-accent-100); color: var(--color-accent-800); border-color: var(--color-accent-300, var(--color-accent)); font-weight: 600; }

/* ── Just nu ────────────────────────────────────────────────────────────── */

/* ── Tomma tillstånd ────────────────────────────────────────────────────── */

/* ── Fråga huset utan AI ────────────────────────────────────────────────── */
.ask-off #ask-title { color: var(--color-neutral-600); }
.ask-off .ask-house { opacity: 0.75; }

/* ── Header: tryckytor och rörelse ──────────────────────────────────────── */
.avatar { width: 36px; height: 36px; }
.badge { min-width: 20px; height: 20px; }
.dotted-row { transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease; }
.btn:focus-visible, .dotted-row:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dotted-row { transition: none; }
}

/* ── Rum ────────────────────────────────────────────────────────────────────
   Rumslistan hade samma tyngd på varje rad och en nolla på varje rum. Nu bär
   våningsrubrikerna rytmen, aktivt rum markeras med guldkant, och listan följer
   med när man scrollar långa rum. */
.rooms-side { position: sticky; top: var(--space-4); max-width: 260px; }
.rooms-side .floor-head:first-of-type { margin-top: var(--space-2); }
.room-link { padding-block: 7px; transition: background-color .15s ease; }
.room-link .count { font-size: 13px; color: var(--color-neutral-600); font-variant-numeric: lining-nums tabular-nums; }
.room-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.room-summary { margin: var(--space-1) 0 0; font-size: 15px; color: var(--color-neutral-600); }
.room-photo-hint { margin: var(--space-2) 0 0; max-width: 56ch; }
@media (max-width: 900px) {
  .rooms-side { position: static; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .room-link { transition: none; } }

/* Fråga huset var den enda sektionen utan skiljelinje och hängde löst under rumskorten. */
.ask-panel { margin-top: var(--space-8); padding-top: var(--space-2); border-top: 1px solid var(--color-divider); }
.ask-panel > h2 { margin-top: var(--space-6) !important; }

/* ── Tomma rum samlade på en rad ────────────────────────────────────────── */

/* ── Tomma rum som inbjudande kort ──────────────────────────────────────────
   Tolv streckade rutor, eller tolv chips, läste som ett fel. Ett kort per rum med
   en uppmaning säger vad man kan göra, och hela kortet är en länk in i rummet. *//* Skrivbordsvyerna: detaljer ovanpå app.css. Egen fil så att parallellt arbete inte krockar. */

/* Justerad text gav glesa rader i smala spalter. */
.prose { text-align: left; hyphens: manual; }

/* ── Underhåll: årshjulet ───────────────────────────────────────────────── */

/* ── Tidslinje ──────────────────────────────────────────────────────────── */

/* ── Ny idé: rumsväljaren i samma stil som övriga fält ──────────────────── */
select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-accent-700) 50%),
    linear-gradient(135deg, var(--color-accent-700) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ── Tavlan ─────────────────────────────────────────────────────────────── */
.board-card { padding: var(--space-3); gap: var(--space-1); }
.board-card .title { font-size: 18px; }
.board-cards { max-height: 70vh; overflow-y: auto; padding: 2px; }
.step-btn { width: 36px; height: 36px; font-size: 16px; }
.board-empty { padding: var(--space-6) var(--space-4); }

/* ── Prioritera ─────────────────────────────────────────────────────────── */
/* Kvadrantnamnen ligger under prickarna och får aldrig vara i vägen för dem. */
.quadrant { z-index: 0; pointer-events: none; }
.matrix-dot {
  z-index: 1; width: 32px; height: 32px; font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background 120ms, transform 120ms;
}
.matrix-list-row { transition: background 120ms; padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); }
.matrix-list-row .n { font-variant-numeric: lining-nums tabular-nums; min-width: 24px; }
.matrix-plot-wrap { position: sticky; top: var(--space-4); }

/* ── Journal och Prylar ─────────────────────────────────────────────────── */
/* Samma sidbredd som övriga vyer; den smala kolumnen fick sidan att hoppa vid flikbyte. */
.journal { max-width: none; margin: 0; }
.print-only { display: none; }
@media print { .print-only { display: inline; } }

/* ── Runda 3: detaljer som syntes först när vyerna var fyllda ───────────── */
/* Rummet på egen rad: en sentida rumsetikett som bröts mitt i raden såg ut som ett fel. */
/* Förklaringsraden under kvadrantnamnet skymdes av prickarna och blev till en avklippt mening.
   Den visas när man pekar på ytan; namnet räcker annars. */
.quadrant .q-note { opacity: 0; transition: opacity 160ms; }
.matrix-plot:hover .quadrant .q-note, .matrix-plot:focus-within .quadrant .q-note { opacity: 1; }
/* Små versalrubriker i prylpanelerna satt tätt mot sin text. */
h2.kicker + p, h2.kicker + .small { margin-top: var(--space-2); }

/* ── Svar som inte är besvarade ──────────────────────────────────────────────
   Förvalt "Vet ej" såg likadant ut som ett aktivt svar. Streckad kant utan fyllnad
   gör att bara de val man faktiskt gjort ser valda ut. */

/* ── Tavlan: spalten ska sluta på en kortgräns ───────────────────────────────
   70vh klippte mitt i ett kort. Snapp till kortens överkant, och rullskuggor
   (background-attachment: local) visar att det finns mer ovan eller under. */
.board-cards {
  scroll-snap-type: y proximity; scroll-padding: 2px;
  background:
    linear-gradient(var(--color-bg) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--color-bg) 70%) bottom / 100% 28px no-repeat local,
    linear-gradient(rgba(0, 0, 0, 0.14), transparent) top / 100% 10px no-repeat scroll,
    linear-gradient(transparent, rgba(0, 0, 0, 0.14)) bottom / 100% 10px no-repeat scroll;
}
.board-card { scroll-snap-align: start; }

/* ── Journal: värdehöjande poster ───────────────────────────────────────── */
.improvement-mark { margin-left: var(--space-2); white-space: nowrap; }

/* ── Husprofil: tydliga avdelningar ──────────────────────────────────────── */
.setup .hr { margin: var(--space-8) 0 var(--space-6); }
.setup h2.profile-h {
  font-family: var(--font-heading); font-size: 26px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--color-text); margin: 0 0 var(--space-4);
}
.setup .check-grid, .setup .chips { margin-top: var(--space-2); }

/* ── Runda 4: statusfärg i underhållet och omsorgsfullare kort ───────────────
   Statusen bar förut bara information i en liten etikett. Kortets vänsterkant tar
   samma färg, så man ser på hela listan vad som brådskar utan att läsa. */
.maint-grid .card { border-left: 6px solid var(--tema-senare-kant); gap: var(--space-1); }
.maint-grid .card .serif { font-size: 21px !important; line-height: 1.25; }
.log-row:hover { background: var(--color-accent-100); cursor: pointer; }
.table th { background: var(--color-surface); }
.project-sum { font-size: 22px; font-weight: 700; color: var(--color-accent-800); }/* Onboarding: stegindikator, räknare i egenskapssteget och årshjulsförhandsvisningen. */

/* "Steg 1 av 4" i vänsterkolumnen försvinner på telefon; indikatorn måste synas där formuläret är. */
/* Tabellsiffror gav siffran sin egen bredd och såg ut som dubbelt mellanrum före "punkter". */

.onb-wheel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 392px;
    overflow-y: auto;
    /* En halv rad som kapas mitt i texten såg ut som ett fel; tonen visar att listan går att rulla. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    padding-bottom: 14px;
    font-size: 14px;
}

/* Stegtexten i formuläret syns bara när hero-raden är dold (telefon). Stapeln ensam räcker
   inte: utan text vet en seende användare inte hur många steg som återstår, och
   testhjälpen läser "Steg N av 4" ur den synliga sidtexten. */

/* Välkomstytan: manifestet får andas, och steget står som en stor siffra i stället för
   en liten versalrad som lätt missades. På telefon ligger indikatorn i formuläret, så
   ytan där krymper till brand + manifest i stället för en halv skärm tomrum. */
.auth-left { gap: var(--space-8); }
@media (max-width: 800px) {
    .auth-left { flex-basis: auto; gap: var(--space-5, 20px); padding: var(--space-6) var(--space-5, 20px); }
    .auth-left .auth-manifest { font-size: 26px; }
}

/* Formuläret hoppade upp och ner mellan stegen eftersom det centrerades i höjd: steg 1 låg
   mitt på skärmen, steg 3 vid kanten. Fast ankare uppifrån gör att stegindikatorn står still. */
.auth-right { align-items: flex-start; padding-top: clamp(var(--space-6), 12vh, 140px); }
.auth-left .auth-manifest { max-width: 20ch; line-height: 1.2; }
.auth-left .auth-manifest + p { max-width: 46ch; line-height: 1.7; }
@media (max-width: 800px) { .auth-right { padding-top: var(--space-6); } }

/* En kort guldlinje före manifestet: det enda som sticker ut på en annars stilla yta. */
.auth-left .auth-manifest::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-bottom: var(--space-4);
    background: var(--color-accent);
}

/* ── Varm välkomstyta ───────────────────────────────────────────────────────
   Vänsterkolumnen var en blek beige yta med tre små rader i ett hav av tomrum,
   och sa "dokument" snarare än "välkommen". Nu en djup grön yta med ljus text:
   första intrycket får färg, manifestet läses först, och steget syns som en stor
   siffra. .auth .auth-left har högre specificitet än tema.css, som laddas efter. */
.auth .auth-left {
    background: linear-gradient(165deg, var(--color-accent-700) 0%, var(--color-accent-800) 100%);
    border-right: 0;
    color: #f6efdf;
    justify-content: space-between;
}
.auth .auth-left .brand { color: #f6efdf; }
.auth .auth-left .auth-manifest { color: #fffaf0; font-size: 44px; font-weight: 600; max-width: 18ch; }
.auth .onb-when { color: var(--color-neutral-700); font-weight: 600; }
.auth .auth-left .auth-manifest::before { height: 3px; width: 56px; background: var(--tema-guld); }
/* !important: stycket bär sin färg och storlek som inline-stil i Welcome.razor. */
@media (max-width: 800px) {
    .auth .auth-left .auth-manifest { font-size: 32px; }
}
/* Formuläret: större rubrik, så att varje steg känns som en enda sak att göra. */
.auth-form h1 { font-size: 36px !important; font-weight: 600 !important; }/* Mobilens finish: bottenrad, bekräftelse, tryckytor. Ligger i egen fil så att
   app.css inte blir en tvist mellan flera som rör mobilen samtidigt. */

/* Hemmets bottenrad: fem lika breda flikar och plusknappen i samma raster. */
.m-nav { display: grid; grid-template-columns: repeat(6, 1fr); }
.m-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms ease, background-color 120ms ease;
}
.m-tab-icon { flex: none; }
/* Aktiv flik får en tunn streck-markering ovanför, i guldaccenten. */
.m-tab { position: relative; }
.m-tab.active::before {
  content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px;
  background: var(--color-accent);
}
.m-tab-add:disabled { opacity: 0.45; }
.m-tab-add .m-add { width: 26px; height: 26px; font-size: 17px; }
.m-tab-add .m-tab-label { font-size: 11px; }

/* Telefoner med hemindikator: sidorna får inte hamna under den. */
.m-sheet-nav { padding-left: max(var(--space-4), env(safe-area-inset-left)); }

/* Tryckfeedback på det som saknade ett :active. */
.btn:active, .m-tile:active { filter: brightness(0.94); }
.m-tile { -webkit-tap-highlight-color: transparent; }

/* Tumzon: allt man trycker på är minst 44 px högt. */
.m-chip, .m-sheet .chips .tag { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-4); }
.last-done-open { min-height: 44px; display: inline-flex; align-items: center; }

/* Bekräftelsen: ovanför bottenraden, där tummen redan är. */
.m-toast-region {
  position: fixed; left: 0; right: 0; z-index: 70; pointer-events: none;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; padding: 0 var(--space-4);
}
.m-toast {
  pointer-events: auto; max-width: 440px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 48px; padding: var(--space-2) var(--space-4);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 14px;
  animation: m-toast-in 180ms ease-out;
}
.m-toast-undo {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 var(--space-2);
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-accent-100); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
@keyframes m-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .m-tab { transition: none; }
}

/* Toppraden: fullversionen som ord, inte en gåtfull ikon. */
.m-full {
  flex: none; min-height: 44px; padding: 0 var(--space-2); margin-top: -4px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--color-neutral-700); font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Hemskärm: förfallande underhåll med Gjort direkt i raden. */
.m-row-split { padding: 0; }
.m-row-link {
  flex: 1; min-width: 0; min-height: 44px; padding: var(--space-2) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  color: inherit; text-decoration: none;
}
.m-done { flex: none; min-height: 44px; }

/* "Börja här" för ett hus utan innehåll. */
.m-start { margin: var(--space-4) 0; }
.m-start-title { font-size: 26px; line-height: 1.15; margin: 0; font-weight: 400; }

/* Miniatyr av valt kort i snabbläget: man ska se att rätt bild följer med. */
.m-photo-thumb { max-height: 150px; max-width: 100%; object-fit: cover; display: block; margin: 0 auto var(--space-2); }
.m-photo:has(.m-photo-thumb) { height: auto; padding: var(--space-3); flex-direction: column; }

/* Kalenderprenumerationen på underhållssidan, i samma marginal som korten. */
.m-calendar { margin: var(--space-6) var(--space-4) var(--space-4); }
.m-calendar h2 { font-size: 22px; margin: 0 0 var(--space-3); }
.m-calendar .calendar-feed-url { word-break: break-all; }

/* Gilla och kommentera: 44 px i båda riktningarna, inte bara i höjd. */
.m-card .m-half { min-height: 44px; min-width: 44px; padding-inline: var(--space-3); }

/* Tomt tillstånd: en lugn, större rad i stället för en liten grå anmärkning. */
.m-empty { font-size: 18px; line-height: 1.5; color: var(--color-neutral-700); margin-top: var(--space-4); }
.m-empty + .btn, .m-empty ~ .btn { margin-top: var(--space-2); }

/* Rumsvalen i snabbläget ärvde webbläsarens systemtypsnitt och föll ur den
   serifa tonen i resten av arket. */
.m-sheet .chips .tag, .m-chip { font-family: var(--font-body); font-size: 14px; }

/* Bekräftelsen får en guldkant så att den hör till huset och inte ser ut som en systemruta. */

/* Ledtråd under ett kort formulär: en lugn ruta med guldkant i stället för
   en grå rad som flyter i tomrummet under knapparna. */
.m-hint {
  margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-accent); background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

/* ── Varmt mobillager ────────────────────────────────────────────────────────
   Kritiken: grått på grått, status utan färg, "Just nu" lika lätt som resten.
   Selektorerna börjar med .m-app så att de vinner över tema.css utan !important. */

/* Rubrikerna ska läsas som rubriker, inte som en kursiv etikett. */
.m-app .m-title { font-size: 32px; font-weight: 700; color: var(--color-accent-800); }
.m-app .m-lead { font-size: 16px; line-height: 1.5; color: var(--color-neutral-700); }
.m-app .kicker { font-size: 13px; }

/* Den viktigaste ytan på hemskärmen: grön, tydlig, tryckbar. */
.m-app .m-hero {
  display: block; padding: var(--space-4); margin: 0;
  background: var(--tema-just-nu); border: 1px solid var(--tema-just-nu-kant);
  border-top: 4px solid var(--color-accent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.m-app .m-next-title { font-size: 26px; font-weight: 700; color: var(--color-accent-800); }
.m-app .m-start-title { font-weight: 700; color: var(--color-accent-800); }

/* Rader som kort med statuskant. */
.m-app .m-row-split {
  background: var(--tema-kort); border: 1px solid var(--tema-kant);
  border-left: 6px solid var(--tema-senare-kant); border-radius: var(--radius-md);
  padding: 4px var(--space-2) 4px var(--space-3); margin-bottom: var(--space-2);
  box-shadow: var(--shadow-sm); gap: var(--space-2);
}
.m-app .m-row-split:last-child { border-bottom: 1px solid var(--tema-kant); }
.m-app .m-row-link { flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--space-2) 0; }
.m-app .m-row-name { font-size: 18px; font-weight: 600; line-height: 1.25; }
.m-app .m-due-late { border-left-color: var(--tema-sen-kant); background: color-mix(in srgb, var(--tema-sen-bg) 35%, var(--tema-kort)); }
.m-app .m-due-soon { border-left-color: var(--tema-snart-kant); background: color-mix(in srgb, var(--tema-snart-bg) 35%, var(--tema-kort)); }
.m-app .m-due-ok { border-left-color: var(--tema-klar-kant); }
.m-app .m-row-split .btn { min-width: 76px; }

/* Listrader för rum och prylar blir kort med luft. */
.m-app a.m-row:not(.m-row-split) {
  background: var(--tema-kort); border: 1px solid var(--tema-kant); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-2); min-height: 56px; box-shadow: var(--shadow-sm);
}
.m-app a.m-row:not(.m-row-split):last-child { border-bottom: 1px solid var(--tema-kant); }
.m-app a.m-row:not(.m-row-split):active { background: var(--color-accent-100); }
.m-app .m-row .serif { font-size: 18px; font-weight: 600; }

/* Rumsrutor: namnet först, våningen som stödtext, antal som grön etikett. */
.m-app .m-tile { padding: var(--space-3); min-height: 88px; gap: 4px; justify-content: flex-start; }
.m-app .m-tile-name { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--color-accent-800); }
.m-app .m-tile-floor { font-size: 14px; color: var(--color-neutral-600); }
.m-app .m-tile-count { align-self: flex-start; margin-top: auto; min-width: 0; }

/* Idékort. */
.m-app .m-idea-title { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--color-accent-800); }
.m-app .m-card { display: flex; flex-direction: column; gap: var(--space-2); }
.m-app .m-card .btn-secondary { font-size: 15px; }

/* Bottenraden: aktiv flik tydlig med ljus grön yta och tjock markering ovanför. */
.m-app .m-tab { font-size: 13px; }
.m-app .m-tab.active::before { left: 18%; right: 18%; top: -2px; height: 4px; background: var(--color-accent); border-radius: 0 0 3px 3px; }
.m-app .m-tab-add .m-tab-label { font-weight: 700; color: var(--color-accent-800); }

/* Bekräftelsen: grön och tydlig, inte en mörk systemruta. */
.m-app .m-toast { background: var(--color-accent-800); color: #fff; font-size: 16px; font-weight: 600; border-left: 4px solid var(--tema-guld); }

/* Snabbläget. */
.m-app .m-sheet-body .serif { font-weight: 700; color: var(--color-accent-800); }
.m-app .m-sheet .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.m-app .m-hint { font-size: 15px; }/* Husvo — varmt, levande färg-, typografi- och komponentlager ovanpå Classical.

   VARFÖR det här lagret finns: appen sågades efter att ha setts i drift
   ("färger och design ser fortfarande skitdåligt ut"). Genomgången av
   skärmbilderna höll med:
     - bakgrunden var en kall grå och allt låg i samma tonläge, så ingenting stack ut;
     - guldet fanns bara som tunna konturer och små understrukna länkar och bar
       ingen information, så status (försenat/snart/senare) syntes inte i färg;
     - texten var 11-12 px versaler med luft mellan bokstäverna, grå på grå;
     - "Just nu" vägde lika lätt som resten, och tomma rum blev tolv streckade
       grå rutor som såg ut som ett fel.
   classical.css rörs inte. Allt här ligger ovanpå, och filen länkas sist i
   App.razor så att den vinner utan !important. Klassnamnen är de som redan finns.

   Tokens (ändra här, inte utspritt):
     --color-bg        #faf6ee  varm krämvit grund
     --color-surface   #f1e9d8  något mörkare varm yta (tomma tillstånd, paneler)
     --tema-kort       #fffdf8  ljusa kort som lyfter mot grunden
     --color-text      #231f1a  varm nästan svart
     --color-accent    #2f5d50  skogsgrön: EN huvudfärg för knappar, länkar, aktivt läge
     --tema-guld       #b68235  bara dekor (linjer, markeringar), aldrig textfärg
     status: försenat = terrakotta, snart = bärnsten, klart = grön, senare = dämpad;
     alla med fylld ton + mörk text, minst 4,5:1 (mäts av AccessibilityTests). */

/* ── Typografi ──────────────────────────────────────────────────────────────
   Hierarki: sidrubrik 46, sektionsrubrik 30, kort/rad 22, brödtext 17-18, hjälptext 15. */
body { font-size: 17px; line-height: 1.6; }
.hero h1 { font-size: 52px; font-weight: 700; }
.small { font-size: 15px; line-height: 1.55; }
figcaption { color: var(--color-neutral-600); font-size: 14px; }
.field > label { font-size: 14px; color: var(--color-neutral-700); font-weight: 500; }

/* Versaler: större, tätare och i huvudfärgen i stället för grå. */
.kicker {
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; font-weight: 700;
  color: var(--color-accent-700);
}
.axis-y-label, .axis-x-label { font-size: 12px; letter-spacing: 0.05em; }
.floor-head { font-size: 15px; letter-spacing: 0.04em; font-weight: 700; color: var(--color-accent-700); border-bottom-color: var(--tema-kant); }
.house-pick .name { font-size: 14px; letter-spacing: 0.06em; font-weight: 600; }
.house-pick .meta { font-size: 14px; }

.board-card .title, .idea-card .title { font-weight: 600; }

/* ── Rubrikraden ─────────────────────────────────────────────────────────── */
.brand { font-size: 32px; font-weight: 700; color: var(--color-accent-700); letter-spacing: -0.015em; }
.app-nav a {
  font-size: 20px; font-weight: 600; padding: 6px 2px 5px;
  border-bottom-width: 3px; color: var(--color-neutral-700);
}
.app-nav a:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent-300); }
.app-nav a.active { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }
.avatar { border-color: var(--tema-kant); background: var(--color-surface); font-weight: 600; }

/* ── Knappar ─────────────────────────────────────────────────────────────── */
.btn { font-size: 16px; font-weight: 700; min-height: 40px; padding: 8px 18px; border-radius: var(--radius-md); }
.btn-primary {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary {
  background: var(--tema-kort); color: var(--color-accent-700);
  border: 1.5px solid var(--color-accent-500);
}
.btn-secondary:active { background: var(--color-accent-200); }
.step-btn { width: 40px; height: 40px; border-color: var(--color-accent-400); color: var(--color-accent-700); background: var(--tema-kort); }

/* ── Fält och val ────────────────────────────────────────────────────────── */
.input {
  min-height: 44px; font-size: 16px; padding: 8px 12px;
  background: var(--tema-kort); border: 1.5px solid var(--color-neutral-500);
}
:focus-visible { outline-color: var(--color-accent); }
.seg-opt { font-size: 15px; padding: 9px 16px; min-height: 40px; color: var(--color-accent-700); font-weight: 600; }
.seg-opt + .seg-opt { border-left-color: var(--color-accent-300); }
.box { border-color: var(--color-accent-500); width: 20px; height: 20px; background: var(--tema-kort); }

.chip, .tag.chip { font-size: 15px; min-height: 40px; padding: 6px 14px; display: inline-flex; align-items: center; border-radius: 999px; }

/* ── Kort och ytor ───────────────────────────────────────────────────────── */
.comments { background: var(--color-surface); border-color: var(--tema-kant); }
.notice { background: var(--tema-snart-bg); border-color: var(--tema-snart-kant); color: var(--tema-snart-text); font-size: 16px; }
.notice-line { font-size: 16px; }
.offline-bar { background: var(--tema-snart-bg); border-bottom-color: var(--tema-snart-kant); color: var(--tema-snart-text); }
.pro-note { border-left: 3px solid var(--tema-guld); font-size: 15px; }
.popover { background: var(--tema-kort); border-color: var(--tema-kant); border-radius: var(--radius-lg); }
.pop-item.current, .room-link.active { background: var(--color-accent-100); border-left-width: 4px; border-left-color: var(--color-accent); }
.room-link { font-size: 16px; padding-block: 9px; }
.room-link.active .label { font-weight: 700; color: var(--color-accent-800); font-size: 18px; }
.room-link .count { font-size: 15px; }
.dotted-row { border-bottom-color: var(--tema-kant); }
.band + .band { border-top-color: var(--tema-kant); }
.board-col-head .name { font-size: 24px; font-weight: 700; }
.board-drop { outline-color: var(--color-accent); }

/* ── Tomma tillstånd: mjuk fylld yta, inte streckad ruta ─────────────────── */
.photo-slot { background: var(--color-surface); border: 0; color: var(--color-neutral-700); font-size: 15px; }
.suggestion-card { border-style: solid; background: var(--color-accent-100); border-color: var(--color-accent-300); }
.matrix-plot { background: var(--tema-kort); border-color: var(--tema-kant); }
.quadrant .q-name { font-size: 17px; font-weight: 600; color: var(--color-neutral-700); }
.matrix-dot { background: var(--color-accent); border-color: var(--color-accent-700); color: #fff; }

/* ── Status: bär betydelse i färg ────────────────────────────────────────── */
.tag { font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.tag-due { font-size: 14px; letter-spacing: 0; font-variant-numeric: lining-nums; min-width: 104px; padding: 4px 12px; }
.tag-due-late  { background: var(--tema-sen-bg);    color: var(--tema-sen-text);    border-color: var(--tema-sen-kant); font-weight: 700; }
.tag-due-soon  { background: var(--tema-snart-bg);  color: var(--tema-snart-text);  border-color: var(--tema-snart-kant); font-weight: 700; }

/* Årshjulet: träffarna i huvudfärgen, nuvarande månad tydlig. */

/* ── Just nu: sidans tydligaste yta ──────────────────────────────────────── */

/* ── Dialoger ────────────────────────────────────────────────────────────── */
.dialog, .m-sheet { background: var(--tema-kort); border-color: var(--tema-kant); }
.dialog-title { font-size: 26px; font-weight: 700; }

/* ── Tabeller ────────────────────────────────────────────────────────────── */
.table th { font-size: 13px; letter-spacing: 0.05em; color: var(--color-neutral-700); border-bottom-color: var(--tema-kant); }
.table td { border-bottom-color: var(--tema-kant); }

/* ── Mobil ───────────────────────────────────────────────────────────────── */
.m-title { font-weight: 700; }
.m-tab { min-height: 60px; font-size: 13px; letter-spacing: 0.02em; color: var(--color-neutral-700); font-weight: 600; }
.m-tab.active::before { background: var(--tema-guld); height: 3px; left: 0; right: 0; top: -2px; }
.m-tab-add .m-add, .m-add { background: var(--color-accent); border-color: var(--color-accent); color: #fff; width: 36px; height: 36px; }
.m-tile { border-color: var(--tema-kant); box-shadow: var(--shadow-sm); }
.m-hint { background: var(--color-surface); border-left-color: var(--tema-guld); font-size: 16px; }
.m-empty { font-size: 18px; color: var(--color-neutral-700); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); }
.m-toast { background: var(--color-accent-800); border-left-color: var(--tema-guld); color: #fff; font-size: 16px; }
.m-full { color: var(--color-accent-700); font-size: 15px; }
.m-line:focus-visible { border-bottom-color: var(--color-accent); border-bottom-width: 2px; }
.m-half { font-size: 15px; }

/* ── Inloggning och onboarding ───────────────────────────────────────────── */
.auth-left { background: var(--color-surface); border-right-color: var(--tema-kant); }
.auth-manifest { font-weight: 700; color: var(--color-accent-800); }
.onb-step.now .onb-name { color: var(--color-accent-800); font-weight: 700; }

/* Etiketten "Inte loggat än" bröts i två rader och fick hemraden att se trasig ut:
   etiketten behåller sin bredd, namnet får bryta i stället. */
.m-row .tag, .m-card .tag { white-space: nowrap; flex: none; }
.m-title, .m-start-title, .room-name, .hero h1 { font-variant-numeric: lining-nums; }

/* Husse — designsystemet för Husvo. Länkas SIST i App.razor och vinner över
   classical/app/oversikt/skrivbord/onboarding/mobil/tema utan !important.

   VARFÖR ett lager ovanpå i stället för en omskrivning: sidorna är byggda mot
   Classicals variabler (--color-*, --tema-*, --radius-*). Byter vi värdena på dem
   här får varje befintlig sida den nya looken utan att markup rörs, och nästa
   våg kan bygga om sidorna mot de nya byggstenarna (.h-hero, .stat, .row-task ...)
   i takt med att de hinner. Dokumentation: docs/design.md. Tokens: docs/tokens.json.

   Tre regler som bär allt:
   1. Färg betyder något: tomat = försenat, sol = snart, mint = klart, himmel = idéer,
      syren/rosa = rum och människor. Aldrig färg ensam; alltid ikon eller ord med.
   2. Ytor med få saker på (hjälte, siffror, idélappar, rumsblock) får kraftig kontur
      och hård skugga. Täta ytor (tabeller, journal, prylar, rader) får tunn kontur
      utan skugga — annars skriker allt lika högt och inget syns.
   3. Text på ett färgblock är alltid --on-color (mörkt bläck, även i mörkt läge). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  /* Taket 650 är med flit. Rubrikerna begär 800 på ett trettiotal ställen, och vikten
     800 var det tyngsta i det barnsliga uttrycket. Ett variabelt typsnitt klämmer en
     begärd vikt till intervallet som står här, så taket gäller överallt på en gång. */
  font-weight: 200 650; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

/* ══ Tokens: ljust ═══════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --line-soft: color-mix(in srgb, #1E1933 28%, transparent);
  --on-sky: #FFFFFF; --bw-thin: 1.5px;
  --lift-s: 0 3px 0 var(--line);
  --dur-press: 180ms; --dur-check: 350ms; --dur-pop: 500ms;

  --fs-stat: clamp(48px, 7vw, 68px);
  --fs-h1: clamp(34px, 4.6vw, 54px);
  --fs-h2: 30px; --fs-h3: 21px; --fs-body: 16.5px; --fs-small: 14.5px; --fs-eyebrow: 12px;

  /* Classicals namn pekar på de nya värdena. */
  --color-bg: var(--paper);
  --color-surface: var(--paper-2);
  --color-text: var(--ink);
  --color-accent: var(--sky);
  --color-accent-2: var(--sun);
  --color-divider: var(--line-soft);

  --color-neutral-100: #FBF3E4; --color-neutral-200: #F3E7D0; --color-neutral-300: #E6D7BC;
  --color-neutral-400: #BDB4CC; --color-neutral-500: #8E86A3; --color-neutral-600: #625B77;
  --color-neutral-700: #575068; --color-neutral-800: #3A3350; --color-neutral-900: #1E1933;

  --color-accent-100: #E7EBFF; --color-accent-200: #DAE0FF; --color-accent-300: #B4C0FF;
  --color-accent-400: #7F92FA; --color-accent-500: #4560F5; --color-accent-600: #4560F5;
  --color-accent-700: #2A3FD0; --color-accent-800: #1F2FA8; --color-accent-900: #151F70;

  --tema-kort: var(--card);
  --tema-kant: #E4D6BC;
  --tema-guld: var(--sun);
  --tema-just-nu: var(--sun-soft);
  --tema-just-nu-kant: var(--line);

  --tema-sen-bg: var(--tomato-soft);   --tema-sen-text: var(--tomato-ink);   --tema-sen-kant: var(--tomato);
  --tema-snart-bg: var(--sun-soft);    --tema-snart-text: #5A3A00;           --tema-snart-kant: var(--sun);
  --tema-klar-bg: var(--mint-soft);    --tema-klar-text: var(--mint-ink);    --tema-klar-kant: var(--mint);
  --tema-senare-bg: var(--paper-2);    --tema-senare-text: var(--ink-2);     --tema-senare-kant: #D6C7AA;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --shadow-sm: 0 2px 0 color-mix(in srgb, var(--line) 18%, transparent);
  --shadow-md: 0 4px 0 color-mix(in srgb, var(--line) 30%, transparent);
  --shadow-lg: 0 8px 0 color-mix(in srgb, var(--line) 40%, transparent);
  --font-heading: var(--f-display);
  --font-body: var(--f-body);
  --font-heading-weight: 800;

  --dot: var(--paper-2);
}

/* ══ Tokens: mörkt ═══════════════════════════════════════════════════════
   Samma värden två gånger (data-theme och systeminställning) eftersom CSS inte kan
   dela ett block mellan två väljare. Ändra båda. Färgblocken är oförändrade och
   bär mörk text; det som byter är papper, kort, bläck och de "-ink"-färgerna för text. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --line-soft: color-mix(in srgb, #F5EFFF 24%, transparent);
  --dot: #1D1730;
  --color-accent: #8FA0FF;
  --shadow-sm: 0 2px 0 #0A0712; --shadow-md: 0 4px 0 #0A0712; --shadow-lg: 0 8px 0 #0A0712;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --line-soft: color-mix(in srgb, #F5EFFF 24%, transparent);
    --dot: #1D1730;
    --color-accent: #8FA0FF;
    --shadow-sm: 0 2px 0 #0A0712; --shadow-md: 0 4px 0 #0A0712; --shadow-lg: 0 8px 0 #0A0712;
  }
}

/* ══ Bas ═════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
}
h1, h2, h3, h4, .display {
  font-family: var(--f-display); font-optical-sizing: auto; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.04; color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
h6 { font-family: var(--f-body); }
p { max-width: 64ch; }
.serif, .card-title, .dialog-title, .room-name, .brand, .m-title, .m-start-title {
  font-family: var(--f-display); letter-spacing: -0.015em;
}
.serif { font-weight: 700; }
a { color: var(--sky-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--sky-ink); text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
:root[data-theme="dark"] :focus-visible { outline-color: #A9B8FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: #A9B8FF; } }
::selection { background: var(--sun); color: var(--on-color); }
.muted, .text-muted, figcaption, .card-meta { color: var(--ink-2); }
.kicker, .card-kicker, .eyebrow {
  font: 700 var(--fs-eyebrow)/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
}
.kicker-sm { font-size: 11.5px; letter-spacing: .07em; }
.hr, .rule-strong { height: 2px; background: var(--line-soft); border: 0; }
.tabular, .count, .counter .value { font-variant-numeric: lining-nums tabular-nums; }

html { scrollbar-color: var(--ink-3) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ══ Skal: sidhuvud, navigering ══════════════════════════════════════════ */
.app-header {
  background: var(--paper); border-bottom: var(--bw) solid var(--line); box-shadow: none;
}
.brand {
  font: 800 28px/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink);
  text-decoration: none;
}
.brand-rule { background: var(--line-soft); }
.app-nav { gap: 6px 8px; }
.app-nav a {
  font: 700 15.5px/1 var(--f-body); color: var(--ink); text-decoration: none;
  padding: 10px 14px; border: var(--bw) solid transparent; border-radius: var(--r-pill);
  transition: transform .2s var(--spring), background-color .15s;
}
.app-nav a:hover { background: var(--card); color: var(--ink); transform: translateY(-2px); border-color: transparent; }
.app-nav a.active {
  background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line);
  box-shadow: 0 3px 0 var(--line);
}
.house-pick { border-radius: var(--r-pill); }
.house-pick:hover, .pop-item:hover, .room-link:hover { background: var(--card); }
.avatar, .avatar-sm {
  background: var(--pink); color: var(--on-color); border: var(--bw) solid var(--line);
  font: 800 14px var(--f-display);
}
.avatar-owner { background: var(--lilac); color: var(--on-color); border-color: var(--line); }
.badge, .dot-unread { background: var(--tomato); color: var(--on-color); }
.badge { border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill); font-weight: 800; }
.dot-unread { border: 1.5px solid var(--line); }
.popover {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--lift);
}
.pop-item.current, .room-link.active { background: var(--sky-soft); border-left-color: var(--sky); }
.skip-link:focus { background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line); }
.offline-bar { background: var(--sun); color: var(--on-color); border-bottom: var(--bw) solid var(--line); }

/* ══ Knappar ═════════════════════════════════════════════════════════════ */
.btn {
  font: 700 15.5px/1.1 var(--f-body); min-height: 44px; padding: 10px 20px;
  border: var(--bw) solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); background: var(--card); box-shadow: var(--lift-s);
  transition: transform var(--dur-press) var(--spring), box-shadow var(--dur-press) var(--spring), background-color .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); background: var(--card); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.btn:disabled, .btn[disabled] { opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-primary { background: var(--sun); color: var(--on-color); border-color: var(--line); }
.btn-primary:hover { background: var(--sun); border-color: var(--line); }
.btn-primary:active:not(:disabled) { background: var(--sun); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--card); border-color: var(--line); }
.btn-ghost {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--sky-ink);
  padding-inline: 12px; min-height: 40px;
}
.btn-ghost:hover { background: var(--sky-soft); box-shadow: none; transform: none; }
.btn-ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-danger, .btn.tomato { background: var(--tomato); color: var(--on-color); }
.btn.mint { background: var(--mint); color: var(--on-color); }
.btn.sky { background: var(--sky); color: var(--on-sky); }
.btn-sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 17px; }
.btn-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.btn-block { width: 100%; }
.step-btn {
  width: 40px; height: 40px; border: var(--bw-thin) solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink); transition: transform .18s var(--spring);
}
.step-btn:hover:not(:disabled) { background: var(--sun); transform: scale(1.08); border-color: var(--line); }
.link-action, .unstyled[style*="accent"] { color: var(--sky-ink); font-weight: 700; font-size: 15.5px; }
.undo-bar {
  background: var(--ink); color: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--lift-s); padding: 8px 10px 8px 20px;
  font-weight: 600; animation: h-pop var(--dur-pop) var(--spring);
}
.undo-bar .btn { background: var(--sun); color: var(--on-color); border-color: var(--line); min-height: 38px; box-shadow: none; }
.undo-bar .btn:hover { background: var(--sun); }

/* ══ Formulär ════════════════════════════════════════════════════════════ */
.field > label, label.field-label {
  font: 700 13.5px/1.3 var(--f-body); color: var(--ink); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  min-height: 46px; font: 500 16px/1.4 var(--f-body); color: var(--ink); caret-color: var(--sky);
  background: var(--card); border: var(--bw) solid var(--line); border-radius: 14px; padding: 9px 14px;
  transition: box-shadow .15s, transform .2s var(--spring);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: var(--line); }
.input:focus-visible {
  border-color: var(--line); outline: none; box-shadow: 0 0 0 3px var(--sky);
}
:root[data-theme="dark"] .input:focus-visible { box-shadow: 0 0 0 3px #A9B8FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .input:focus-visible { box-shadow: 0 0 0 3px #A9B8FF; } }
textarea.input { min-height: 104px; border-radius: 18px; }
select.input { padding-right: 36px; }
.search-wrap .input { background: var(--card); border-radius: var(--r-pill); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sky); width: 20px; height: 20px; }
.box {
  width: 24px; height: 24px; border: var(--bw) solid var(--line); border-radius: 8px; background: var(--card);
  transition: transform .3s var(--spring), background-color .2s;
}
.check-row { font-size: 16px; gap: 10px; }
.check-row:has(input:checked) .box, input:checked ~ .box { background: var(--mint); transform: rotate(-6deg) scale(1.08); }
.radio .dot { width: 22px; height: 22px; border: var(--bw) solid var(--line); background: var(--card); }
.radio input:checked + .dot { background: var(--sun); border-color: var(--line); box-shadow: inset 0 0 0 4px var(--card); }
.radio:hover .dot { border-color: var(--line); }

/* Segmenterad kontroll. Valt läge = bläck med papper som text: syns utan färg. */
.seg { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.seg-opt { color: var(--ink); font-weight: 700; padding: 8px 16px; min-height: 40px; transition: background-color .15s; }
.seg-opt + .seg-opt { border-left: var(--bw-thin) solid var(--line-soft); }
.seg-opt:has(input:checked) { background: var(--ink); color: var(--paper); box-shadow: none; }
.seg-opt:not(:has(input:checked)):hover { background: var(--sun-soft); }
/* Segmented.razor sätter färg och ring som inline-style på valt läge; bara !important slår det. */
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper) !important; box-shadow: none !important; }
.seg-btn[aria-pressed="false"] { color: var(--ink) !important; }
.seg-btn[aria-pressed="false"]:hover { background: var(--sun-soft); }

/* Chips */
.chip, .tag.chip, .tag-btn {
  font: 600 14.5px/1 var(--f-body); min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line);
  transition: transform .18s var(--spring), background-color .15s;
}
.chip:hover { transform: translateY(-2px) rotate(-1.5deg); }
.chip-on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--line); }
.chip-off { background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line); }
.chip.chip-unset { background: var(--paper-2); color: var(--ink-2); border: var(--bw-thin) dashed var(--line-soft); }
.room-empty-row a.chip:hover, .room-empty-row a.chip:focus-visible { background: var(--sun-soft); color: var(--ink); border-color: var(--line); }
.form-error { color: var(--tomato-ink); font-weight: 600; }
.drop-zone, .photo-drop { background: var(--paper-2); border: var(--bw) dashed var(--line-soft); border-radius: var(--r-l); color: var(--ink-2); }
.photo-drop:hover { background: var(--sun-soft); border-color: var(--line); }

/* ══ Kort, tomma tillstånd, anslag ═══════════════════════════════════════ */
.card {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l);
  padding: 22px; box-shadow: var(--lift); color: var(--ink);
}
.card-title { font: 700 20px/1.15 var(--f-display); }
.card-body { opacity: 1; color: var(--ink-2); font-size: 15.5px; }
.card-kicker { color: var(--ink-2); }
.elev-sm, .elev-md, .elev-lg { box-shadow: var(--lift-s); }
a.card, .room-card, .duel-card, .idea-card { transition: transform .22s var(--spring), box-shadow .22s var(--spring); }
a.card:hover, .room-card:hover, .duel-card:hover {
  transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 8px 0 var(--line); border-color: var(--line); background: var(--card);
}
.room-card:active, .duel-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.room-card .name { font: 800 22px/1.1 var(--f-display); }
.room-card .count { font: 800 30px/1 var(--f-display); color: var(--ink); }
.room-grid { gap: 18px; }

.notice, .suggestion-card {
  background: var(--sun-soft); color: var(--ink); border: var(--bw) solid var(--line);
  border-radius: var(--r-m); box-shadow: none;
}
.suggestion-card { background: var(--lilac-soft); border-style: solid; }
.notice { color: var(--ink); }
.pro-note { border-left: 5px solid var(--lilac); background: var(--lilac-soft); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 8px 12px; }

/* Tomt tillstånd = inbjudan, aldrig fel: streckad kontur, en mening, en knapp. */
.empty, .rooms-body .empty {
  background: var(--card); border: var(--bw) dashed var(--line-soft); border-radius: var(--r-l);
  padding: 32px 26px; text-align: center; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty h3, .rooms-body .empty h3 { font: 800 24px/1.1 var(--f-display); color: var(--ink); }
.empty p, .empty-note { color: var(--ink-2); font-size: 16.5px; margin-inline: auto; }
.room-card-empty { background: transparent; border: var(--bw) dashed var(--line-soft); box-shadow: none; }
.room-card-empty:hover, .room-card-empty:focus-visible { background: var(--sun-soft); border-style: solid; border-color: var(--line); }
.room-card-empty .name, .room-card-empty .kicker-sm { color: var(--ink); }
.room-card-empty .count { color: var(--ink-2); }
.room-invite {
  background: var(--card); border: var(--bw) dashed var(--line-soft); border-left: var(--bw) dashed var(--line-soft);
  border-radius: var(--r-m); transition: transform .2s var(--spring), background-color .15s;
}
.room-invite:hover, .room-invite:focus-visible { background: var(--sun-soft); border-style: solid; border-color: var(--line); box-shadow: none; transform: translateY(-2px) rotate(-.5deg); }
.room-invite-name { font: 800 20px/1.15 var(--f-display); }
.room-invite-cta { color: var(--sky-ink); }
.room-empty-row { border-top: var(--bw) dashed var(--line-soft); }
.comments { background: var(--paper-2); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); }

/* ══ Taggar och statuspiller ═════════════════════════════════════════════
   Dubbla klasser (.tag-due-late) så att de gamla namnen får ny look; .pill är det nya. */
.tag, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 12.5px/1 var(--f-body); letter-spacing: 0; padding: 6px 11px;
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.pill svg, .tag svg { width: 13px; height: 13px; flex: none; }
.tag-due { min-width: 96px; justify-content: center; padding: 6px 12px; font-size: 13px; }
.tag-due-late, .pill.late, .pill-late { background: var(--tomato); color: var(--on-color); border-color: var(--line); }
.tag-due-soon, .pill.soon, .pill-soon { background: var(--sun); color: var(--on-color); border-color: var(--line); }
.tag-ok, .tag-due-ok, .pill.ok, .pill-ok { background: var(--mint); color: var(--on-color); border-color: var(--line); }
.tag-due-later, .pill.later, .pill-later { background: var(--paper-2); color: var(--ink); border-color: var(--line-soft); }
.pill.idea, .pill-idea { background: var(--sky-soft); color: var(--ink); border-color: var(--line-soft); }
.pill.plain { background: var(--card); color: var(--ink); }
.tag-accent, .tag-accent-2, .tag-neutral { border-color: var(--line-soft); font-weight: 600; }
.tag-accent { background: var(--sky-soft); color: var(--ink); }
.tag-accent-2 { background: var(--sun-soft); color: var(--ink); }
.tag-neutral { background: var(--paper-2); color: var(--ink); }
.tag-outline { background: transparent; color: var(--ink); border: var(--bw-thin) solid var(--line); }
.lifespan-passed { color: var(--tomato-ink); font-weight: 700; }
/* Ikon före pillens ord via maskad bakgrund — ingen markup krävs. Ordet bär ändå betydelsen. */
.tag-due-late::before, .tag-due-soon::before, .tag-due-ok::before, .tag-ok::before {
  content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.tag-due-late { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22z'/%3E%3C/svg%3E"); }
.tag-due-soon { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5l4 2-1 2-5-3V7z'/%3E%3C/svg%3E"); }
.tag-due-ok, .tag-ok { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-2 2L9 20.2 21.2 8l-2-2z'/%3E%3C/svg%3E"); }

/* ══ Tabeller: lugn variant ══════════════════════════════════════════════ */
.table { font-size: 15.5px; border-collapse: separate; border-spacing: 0; }
.table th {
  font: 700 12px/1.2 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: var(--bw) solid var(--line); padding: 10px 12px;
}
.table td { border-bottom: var(--bw-thin) solid var(--tema-kant); padding: 12px; }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover, .log-row:hover { background: var(--sun-soft); }
.table-scroll { border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); background: var(--card); }

/* ══ Dialoger ════════════════════════════════════════════════════════════ */
.dialog-backdrop { background: color-mix(in srgb, #0A0712 62%, transparent); backdrop-filter: blur(2px); }
.dialog, .m-sheet {
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line);
  border-radius: var(--r-l); box-shadow: 0 8px 0 var(--line);
  animation: h-pop var(--dur-pop) var(--spring);
}
.dialog-title { font: 800 26px/1.1 var(--f-display); }
.dialog-body { color: var(--ink-2); opacity: 1; font-size: 16px; }
.dialog-actions { gap: 10px; }

/* ══ Skeleton ════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--card) 50%, var(--paper-2) 75%);
  background-size: 200% 100%; border-radius: var(--r-s); border: var(--bw-thin) solid var(--line-soft);
  animation: h-shimmer 1.4s linear infinite;
}
.shell-skeleton { background: var(--paper); }

/* ══ Översikt: Just nu, hjälte, spalter, räknare ═════════════════════════ */
.hero h1 { font: 800 var(--fs-h1)/1.0 var(--f-display); letter-spacing: -0.03em; }
.hero-line, .prose { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.now-panel {
  background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line);
  border-radius: var(--r-xl); box-shadow: 0 7px 0 var(--line); padding: 34px 38px;
}
.now-panel .kicker, .now-panel .muted, .now-panel .small.muted, .now-panel .sub { color: var(--on-color); }
.now-panel h1, .now-panel h2, .now-panel h3 { color: var(--on-color); }
.now-line { font: 800 clamp(28px, 4vw, 40px)/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--on-color); max-width: 22ch; }
.now-row {
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-m);
  box-shadow: none; padding: 12px 16px; transition: transform .2s var(--spring);
}
.now-row:hover { transform: translateY(-2px); }
.now-name .title { font: 700 19px/1.2 var(--f-display); }
.now-name .sub { color: var(--ink-2); }
.now-side { border-left: var(--bw) solid var(--line); }
.now-months dt { color: var(--on-color); font-weight: 800; }
.now-months dd { color: var(--on-color); }
.now-panel a { color: var(--on-color); font-weight: 700; }
.spread-cols { border-top: var(--bw) solid var(--line); }
.spread-col + .spread-col { border-left: var(--bw-thin) solid var(--line-soft); }
.spread-item .lead { color: var(--ink); font: 800 18px/1.2 var(--f-display); }
.spread-item .title { font: 700 20px/1.2 var(--f-display); }
.spread-item .sub { color: var(--ink-2); }
.counters { gap: 18px; }
.counters .counter {
  border: var(--bw) solid var(--line); border-radius: 28px 28px 28px 10px; background: var(--sky-soft);
  box-shadow: var(--lift-s); padding: 14px 20px; color: var(--ink);
}
.counters .counter:nth-child(4n+2) { background: var(--sun-soft); border-radius: 28px 28px 10px 28px; }
.counters .counter:nth-child(4n+3) { background: var(--mint-soft); border-radius: 10px 28px 28px 28px; }
.counters .counter:nth-child(4n+4) { background: var(--pink-soft); border-radius: 28px 10px 28px 28px; }
.counters .value, .counter .value { font: 800 clamp(34px, 4.5vw, 46px)/.95 var(--f-display); letter-spacing: -0.04em; color: var(--ink); }
.band-year { color: var(--sun-ink); font: 800 28px/1 var(--f-display); }
.band + .band, .project + .project { border-top: var(--bw-thin) dashed var(--line-soft); }
.project { background: var(--card); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-l); box-shadow: none; }
.project-when { color: var(--ink); font: 800 14px var(--f-body); letter-spacing: .08em; }
.project-sum { color: var(--ink); font: 800 24px/1.1 var(--f-display); }
.bullet { background: var(--tomato); border: 1.5px solid var(--line); }
.floor-head { color: var(--ink-2); border-bottom: var(--bw-thin) solid var(--line-soft); font: 800 13px var(--f-body); letter-spacing: .07em; text-transform: uppercase; }
.room-link { border-radius: var(--r-s); }
.room-link.active .label { color: var(--ink); font-weight: 800; }
.room-link .count { color: var(--ink-2); }
.dotted-row, .now-row.dotted { border-bottom: var(--bw-thin) dashed var(--line-soft); }
.lede-rule { border-bottom: var(--bw-thin) solid var(--line-soft); }

/* ══ Tavla (idéer): lappar i kolumner ════════════════════════════════════ */
.board-col-head { border-top: 0; border-bottom: var(--bw) solid var(--line); }
.board-col-head .name { font: 800 24px/1 var(--f-display); }
.board-cards { background: var(--paper-2); border: 0; border-radius: var(--r-l); padding: 12px; }
.board-card {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--lift-s); transition: transform .22s var(--spring), box-shadow .22s var(--spring);
}
.board-card:hover { transform: translateY(-2px) rotate(.6deg); box-shadow: 0 5px 0 var(--line); }
.board-card:nth-child(3n+2):hover { transform: translateY(-2px) rotate(-.8deg); }
.board-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.board-card .title, .idea-card .title { font: 700 17px/1.2 var(--f-display); }
.board-drop { outline: 3px dashed var(--sky); background: var(--sky-soft); }
.board-empty { color: var(--ink-2); }
.duel-card { border-radius: var(--r-l); }
.duel-card .title { font: 800 22px/1.1 var(--f-display); }

/* Matrisen */
.matrix-plot { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-l); }
.matrix-plot .axis-h, .matrix-plot .axis-v { background: var(--line-soft); }
.quadrant .q-name { font: 800 17px var(--f-display); color: var(--ink); }
.quadrant .q-note { color: var(--ink-2); }
.q-tl { background: color-mix(in srgb, var(--mint-soft) 55%, transparent); }
.q-bl { background: color-mix(in srgb, var(--sky-soft) 45%, transparent); }
.matrix-dot {
  background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line); font-weight: 800;
  transition: transform .2s var(--spring);
}
.matrix-dot:hover, .matrix-dot.is-hover { background: var(--tomato); transform: scale(1.2); }
.matrix-list-row { border-radius: var(--r-s); }
.matrix-list-row.is-hover { background: var(--sun-soft); }
.matrix-list-row .n { color: var(--ink); font-weight: 800; }
.axis-y-label, .axis-x-label { color: var(--ink-2); font-weight: 700; }

/* Årshjulet */
.wheel-scroll { border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); background: var(--card); }
.wheel-head { font: 800 12px var(--f-body); color: var(--ink-2); border-bottom: var(--bw) solid var(--line); }
.wheel-head.wheel-now { background: var(--sun); color: var(--on-color); border-bottom: var(--bw) solid var(--line); border-radius: 10px 10px 0 0; }
.wheel-name, .wheel-cell, .wheel-head { border-bottom-color: var(--tema-kant); }
.wheel-head.wheel-now { border-bottom-color: var(--line); }
.wheel-hit { width: 18px; height: 18px; background: var(--mint); border: var(--bw-thin) solid var(--line); }
.wheel-miss { background: var(--paper-2); }
.wheel-name { font-weight: 600; }

/* ══ Underhåll, prylar, journal: täta vyer, tunn kontur ══════════════════ */
.maint-grid .card, .warranty-grid .card {
  box-shadow: none; border: var(--bw-thin) solid var(--line-soft); border-left: 8px solid var(--tema-senare-kant);
  border-radius: var(--r-m); padding: 16px 18px;
}
.maint-grid .card:has(.tag-due-late)  { border-left-color: var(--tomato); background: color-mix(in srgb, var(--tomato-soft) 55%, var(--card)); }
.maint-grid .card:has(.tag-due-soon)  { border-left-color: var(--sun);    background: color-mix(in srgb, var(--sun-soft) 55%, var(--card)); }
.maint-grid .card:has(.tag-due-ok)    { border-left-color: var(--mint); }
.warranty-grid .card { border-top: var(--bw-thin) solid var(--line-soft); border-left: 8px solid var(--mint); }
.maint-grid .card .serif { font: 700 20px/1.2 var(--f-display) !important; }
.maint-grid .card:hover, .warranty-grid .card:hover { border-color: var(--line); }
.journal-note {
  background: var(--sun-soft); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); color: var(--ink);
}
.journal-note-fine { color: var(--ink-2); }
.improvement-mark { color: var(--mint-ink); font-weight: 700; }
.log-row { border-radius: var(--r-s); }
.appliance-facts dt { color: var(--ink-2); font-weight: 700; }
.manual-row, .inspection-row { border-bottom: var(--bw-thin) solid var(--tema-kant); }
.manual-snippet mark { background: var(--sun); color: var(--on-color); border-radius: 4px; padding: 0 2px; }
.photo-frame { border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); overflow: hidden; }
.photo-slot { background: var(--paper-2); color: var(--ink-2); border: var(--bw-thin) dashed var(--line-soft); border-radius: var(--r-m); }
.photo-remove { background: var(--card); border: var(--bw-thin) solid var(--line); color: var(--ink); }
.ai-read { background: var(--lilac-soft); border: var(--bw-thin) solid var(--line-soft); border-radius: var(--r-m); }
.ask-exchange { gap: 10px; }
.ask-q { background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line); border-radius: 22px 22px 6px 22px; padding: 10px 16px; align-self: flex-end; }
.ask-a { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 22px 22px 22px 6px; padding: 12px 18px; }
.ask-sources { color: var(--ink-2); }
.calendar-feed, .calendar-feed-url { background: var(--paper-2); border-radius: var(--r-s); }
.setup h2.profile-h { font: 800 22px var(--f-display); }
.onb-bar { height: 8px; border-radius: 99px; background: var(--paper-2); border: 1.5px solid var(--line-soft); }
.onb-step.done .onb-bar, .onb-step.now .onb-bar { background: var(--mint); border-color: var(--line); }
.onb-step.now .onb-bar { background: var(--sun); }
.onb-name { color: var(--ink-2); font-weight: 700; }
.onb-step.now .onb-name { color: var(--ink); }
.onb-count { background: var(--sky-soft); border: var(--bw-thin) solid var(--line-soft); border-left: 6px solid var(--sky); border-radius: var(--r-s); color: var(--ink); }
.auth-left { background: var(--lilac); color: var(--on-color); border-right: var(--bw) solid var(--line); }
.auth-left .brand, .auth-left .auth-manifest, .auth-left p, .auth-left .onb-hero-step, .auth-left .onb-hero-num, .auth-left .onb-hero-name, .auth-left .onb-when { color: var(--on-color); }
.auth-manifest { font: 800 clamp(28px, 3.4vw, 40px)/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--on-color); }
/* Panelen bär ljus text, så den ska vara mörk i båda lägena. Tokens --color-accent-700/800 byter till sand i
   mörkt läge (för text på mörkt papper), och då låg ljus text på sand: 1,3:1. Därför fasta färger, inte tokens.
   Små rader i panelen (steg, kicker) fick --on-color, mörkt bläck, som ovan: oläsligt på blått. */
.auth .auth-left { background: linear-gradient(165deg, #2A3FD0 0%, #1F2FA8 100%); }
.auth .auth-left p, .auth .auth-left .kicker { color: #f6efdf; }
.auth-form h1 { font-size: clamp(30px, 3.4vw, 40px); }
#blazor-error-ui { background: var(--tomato); color: var(--on-color); border-top: var(--bw) solid var(--line); }

/* ══ Mobil ═══════════════════════════════════════════════════════════════ */
.m-app { background-color: var(--paper); background-image: radial-gradient(var(--dot) 1.5px, transparent 1.6px); background-size: 26px 26px; color: var(--ink); }
.m-title, .m-app .m-title { font: 800 clamp(30px, 9vw, 40px)/1.02 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.m-lead, .m-app .m-lead { color: var(--ink-2); font-size: 16.5px; }
.m-app .kicker { color: var(--ink-2); }
.m-icon { background: var(--card); border: var(--bw) solid var(--line); border-radius: 50%; color: var(--ink); width: 44px; height: 44px; }
.m-row, .m-tile, .m-card, .m-app .m-card, .m-app .m-tile {
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-m); color: var(--ink);
  box-shadow: none;
}
.m-app a.m-row:not(.m-row-split), .m-app .m-row-split { border-bottom-color: var(--line-soft); }
.m-row { min-height: 56px; transition: transform .2s var(--spring), background-color .15s; }
.m-row:active, .m-tile:active, .m-app .m-tile:active { transform: translateY(2px) scale(.99); background: var(--sun-soft); }
.m-tile, .m-app .m-tile { box-shadow: var(--lift-s); border-radius: 24px 24px 24px 8px; }
.m-grid .m-tile:nth-child(6n+1), .m-grid .m-tile:nth-child(6n+1) { background: var(--sky-soft); }
.m-grid .m-tile:nth-child(6n+2) { background: var(--sun-soft); border-radius: 24px 24px 8px 24px; }
.m-grid .m-tile:nth-child(6n+3) { background: var(--mint-soft); border-radius: 8px 24px 24px 24px; }
.m-grid .m-tile:nth-child(6n+4) { background: var(--pink-soft); border-radius: 24px 8px 24px 24px; }
.m-grid .m-tile:nth-child(6n+5) { background: var(--lilac-soft); }
.m-grid .m-tile:nth-child(6n+6) { background: var(--tomato-soft); border-radius: 24px 24px 8px 24px; }
.m-tile-name, .m-app .m-tile-name { font: 800 19px/1.1 var(--f-display); color: var(--ink); }
.m-tile-floor, .m-app .m-tile-floor { color: var(--ink-2); }
.m-tile-count, .m-app .m-tile-count { font: 800 30px/1 var(--f-display); color: var(--ink); }
.m-next-title, .m-app .m-next-title, .m-start-title, .m-app .m-start-title { font: 800 clamp(26px, 7.5vw, 34px)/1.05 var(--f-display); letter-spacing: -0.03em; color: var(--ink); }
.m-start, .m-hero, .m-app .m-hero { background: var(--sun); color: var(--on-color); border: var(--bw) solid var(--line); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--line); padding: 22px; }
.m-start .muted, .m-start p, .m-hero .kicker, .m-app .m-hero .kicker, .m-app .m-start .muted, .m-hero p { color: var(--on-color); }
.m-start-title, .m-app .m-start-title, .m-hero .m-title { color: var(--on-color); }
.m-app .m-start .btn-secondary { background: var(--card); color: var(--ink); }
.m-app .m-due-late, .m-card.m-due-late, .m-app .m-card.m-due-late { border-left: 8px solid var(--tomato); }
.m-app .m-due-soon, .m-card.m-due-soon, .m-app .m-card.m-due-soon { border-left: 8px solid var(--sun); }
.m-app .m-due-ok, .m-card.m-due-ok, .m-app .m-card.m-due-ok { border-left: 8px solid var(--mint); }
.m-row-name, .m-app .m-row-name { font-weight: 700; color: var(--ink); }
.m-app .m-row .serif { font: 700 18px/1.2 var(--f-display); }
.m-row-link, .m-app .m-row-link, .m-full { color: var(--sky-ink); font-weight: 700; }
.m-hint, .m-app .m-hint { background: var(--lilac-soft); border: var(--bw-thin) solid var(--line-soft); border-left: 6px solid var(--lilac); border-radius: var(--r-s); color: var(--ink); }
.m-empty { background: var(--card); border: var(--bw) dashed var(--line-soft); border-radius: var(--r-l); color: var(--ink); text-align: center; }
.m-line, .m-app .m-line { background: var(--card); border: var(--bw) solid var(--line); border-radius: 14px; color: var(--ink); padding: 10px 14px; }
.m-line:focus-visible, .m-app .m-line:focus-visible { box-shadow: 0 0 0 3px var(--sky); outline: none; border-bottom-width: 2px; border-color: var(--line); }
.m-photo { background: var(--paper-2); border: var(--bw) dashed var(--line-soft); border-radius: var(--r-m); }
.m-sheet-backdrop { background: color-mix(in srgb, #0A0712 62%, transparent); }
.m-sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; box-shadow: none; }
.m-chip, .m-sheet .chips .tag { min-height: 44px; }

/* Flytande mörkt bottenfält med upphöjd tomat-plus. Safe-area ligger kvar från mobil.css. */
.m-nav, .m-app .m-nav {
  background: var(--ink); border: var(--bw) solid var(--line); border-top: var(--bw) solid var(--line);
  box-shadow: none; border-radius: 28px 28px 0 0;
}
.m-tab, .m-app .m-tab { color: var(--paper); font: 700 12px/1.1 var(--f-body); letter-spacing: 0; }
.m-tab span, .m-app .m-tab span { font-size: 12px; letter-spacing: 0; }
.m-tab.active, .m-app .m-tab.active { background: var(--sun); color: var(--on-color); border-radius: 18px; }
.m-tab.active::before, .m-app .m-tab.active::before { content: none; }
.m-tab:active, .m-app .m-tab:active { background: color-mix(in srgb, var(--paper) 18%, transparent); }
.m-tab.active:active, .m-app .m-tab.active:active { background: var(--sun); }
.m-tab-add, .m-tab-add .m-tab-label, .m-app .m-tab-add .m-tab-label { color: var(--paper); }
.m-tab-add .m-add, .m-add {
  background: var(--tomato); color: var(--on-color); border: var(--bw) solid var(--line); width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 3px 0 var(--line); transition: transform .2s var(--spring);
}
.m-tab-add:active .m-add { background: var(--tomato); transform: translateY(2px) scale(.94); }
.m-toast, .m-app .m-toast {
  background: var(--ink); color: var(--paper); border: var(--bw) solid var(--line); border-left: var(--bw) solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--lift-s); animation: h-pop var(--dur-pop) var(--spring);
}
.m-toast-undo, .m-app .m-toast-undo { color: var(--on-color); background: var(--sun); border-radius: var(--r-pill); font-weight: 800; }

@media (max-width: 700px) {
  .btn, .seg-opt, .chip, .input { min-height: 46px; }
  .btn-icon, .step-btn { width: 46px; height: 46px; }
  .now-panel { padding: 24px 22px; border-radius: 32px; }
  .now-side { border-left: 0; border-top: var(--bw) solid var(--line); }
  .app-nav a { padding: 9px 12px; }
}

/* ══ Nya byggstenar (dokumenterade i docs/design.md) ═════════════════════ */

/* Hjältekort: ett per vy, sol som standard. Färg via --hero. */
.h-hero {
  --hero: var(--sun); position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start;
  background: var(--hero); color: var(--on-color); border: var(--bw) solid var(--line);
  border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); box-shadow: 0 7px 0 var(--line);
}
.h-hero h1, .h-hero h2, .h-hero p, .h-hero .eyebrow { color: var(--on-color); }
.h-hero p { font-size: 18px; max-width: 46ch; }
.h-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.h-hero.sky { --hero: var(--sky); color: var(--on-sky); }
.h-hero.sky h1, .h-hero.sky h2, .h-hero.sky p, .h-hero.sky .eyebrow { color: var(--on-sky); }
.h-hero.lilac { --hero: var(--lilac); } .h-hero.mint { --hero: var(--mint); } .h-hero.pink { --hero: var(--pink); }
.h-hero .blob { position: absolute; border-radius: 50%; border: var(--bw) solid var(--line); pointer-events: none; }
.h-hero .blob.b1 { width: 150px; height: 150px; right: -40px; top: -56px; background: var(--pink); }
.h-hero .blob.b2 { width: 56px; height: 56px; right: 150px; top: 24px; background: var(--sky); }

/* Stora siffror, statusfärgade. Tre runda hörn och ett spetsigt, som en pratbubbla. */
.stat {
  --stat: var(--sky-soft); display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--stat); color: var(--on-color); border: var(--bw) solid var(--line);
  border-radius: 32px 32px 32px 10px; padding: 16px 20px 18px; box-shadow: 0 5px 0 var(--line);
  transition: transform .25s var(--spring);
}
a.stat:hover, button.stat:hover { transform: translateY(-4px) rotate(-1deg); }
.stat .num, .stat-num { font: 800 var(--fs-stat)/.9 var(--f-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.stat .lbl { font-weight: 700; }
.stat small { font-size: 13.5px; color: inherit; }
.stat.late { --stat: var(--tomato); } .stat.soon { --stat: var(--sun); } .stat.ok { --stat: var(--mint); }
.stat.idea { --stat: var(--sky-soft); } .stat.room { --stat: var(--lilac-soft); } .stat.people { --stat: var(--pink-soft); }
.stat.soon, .stat.ok { border-radius: 32px 32px 10px 32px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }

/* Uppgiftsrad: hela raden är träffytan. Bockrutan studsar och fylls mint. */
.row-task {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; cursor: pointer;
  background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-m);
  padding: 12px 16px 12px 12px; transition: transform .2s var(--spring), box-shadow .2s var(--spring);
}
.row-task:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--line); }
.row-task input { position: absolute; opacity: 0; width: 28px; height: 28px; }
.row-task .box {
  flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  border: var(--bw) solid var(--line); background: var(--paper);
}
.row-task .box svg { width: 20px; height: 20px; stroke: var(--on-color); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--dur-check) .08s var(--ease); }
.row-task input:focus-visible ~ .box { outline: 3px solid var(--sky); outline-offset: 3px; }
.row-task input:checked ~ .box { background: var(--mint); transform: rotate(-8deg) scale(1.1); }
.row-task input:checked ~ .box svg { stroke-dashoffset: 0; }
.row-task .what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-task .what b { font: 700 17px/1.2 var(--f-display); }
.row-task .what small { color: var(--ink-2); font-size: 14px; }
.row-task input:checked ~ .what b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }

/* Idélapp: lutar lite, med tejp. Färg via --note. */
.note-card {
  --note: var(--pink-soft); --tilt: -1.2deg; position: relative; background: var(--note); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r-m); padding: 22px 18px 16px;
  box-shadow: var(--lift-s); transform: rotate(var(--tilt)); transition: transform .3s var(--spring);
}
.note-card::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 64px; height: 20px; translate: -50% 0; rotate: -2deg;
  background: color-mix(in srgb, var(--sun) 80%, transparent); border: 1.5px solid var(--line-soft);
}
.note-card:nth-child(2n) { --tilt: 1.1deg; --note: var(--sky-soft); }
.note-card:nth-child(3n) { --tilt: -.6deg; --note: var(--sun-soft); }
.note-card:hover, .note-card:focus-within { transform: rotate(0) translateY(-3px); }

/* Rumsblock: stor yta, färg via --tile. */
.room-tile {
  --tile: var(--lilac-soft); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px;
  background: var(--tile); color: var(--on-color); border: var(--bw) solid var(--line); border-radius: 28px 28px 28px 10px;
  padding: 16px 18px; box-shadow: var(--lift-s); text-decoration: none; transition: transform .25s var(--spring);
}
.room-tile:hover { transform: translateY(-3px) rotate(-.8deg); }
.room-tile b { font: 800 20px/1.1 var(--f-display); }
.room-tile .n { font: 800 34px/1 var(--f-display); font-variant-numeric: lining-nums; }

.eyebrow-ink { color: var(--ink); }

/* Husse-pratbubbla */
.bubble {
  position: relative; max-width: 34ch; background: var(--card); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: 22px 22px 22px 6px; padding: 12px 18px; font-weight: 600;
  box-shadow: var(--lift-s); animation: h-pop var(--dur-pop) var(--spring);
}
.bubble.sun { background: var(--sun); color: var(--on-color); }
.bubble.lilac { background: var(--lilac); color: var(--on-color); }

/* Konfetti: lägg .confetti på ett positionerat element och sätt --c1..--c6 vid behov.
   Sex bitar flyger ut när klassen .go läggs på (görs i skriptet vid avbockning). */
.confetti { position: relative; }
.confetti > i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: var(--c, var(--sun)); border: 1px solid var(--line);
}
.confetti > i:nth-child(1) { --c: var(--tomato); --x: -38px; --y: -44px; --r: -50deg; }
.confetti > i:nth-child(2) { --c: var(--sun);    --x: 4px;   --y: -56px; --r: 30deg; }
.confetti > i:nth-child(3) { --c: var(--sky);    --x: 40px;  --y: -40px; --r: 80deg; }
.confetti > i:nth-child(4) { --c: var(--mint);   --x: -46px; --y: -6px;  --r: -90deg; }
.confetti > i:nth-child(5) { --c: var(--pink);   --x: 46px;  --y: -2px;  --r: 120deg; }
.confetti > i:nth-child(6) { --c: var(--lilac);  --x: 0;     --y: -26px; --r: 200deg; }
.confetti.go > i { animation: h-confetti .7s var(--ease) forwards; }

/* ══ Rörelse ═════════════════════════════════════════════════════════════ */
@keyframes h-pop { 0% { transform: scale(.88); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes h-shimmer { to { background-position: -200% 0; } }
@keyframes h-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
.undo-bar { transform: translateX(-50%); }
@keyframes h-pop-center { 0% { transform: translateX(-50%) scale(.88); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
.undo-bar { animation-name: h-pop-center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn:hover, .chip:hover, a.card:hover, .room-card:hover, .board-card:hover, .stat:hover, .room-tile:hover, .note-card:hover { transform: none; }
}
@media print {
  body { background: #fff; color: #000; }
  .card, .project, .now-panel { box-shadow: none; }
}

/* Bottenfältet fick sol-fliken kantlöst mot skärmkanten och "Ny idé" tryckt mot botten. */
.m-nav, .m-app .m-nav { padding-inline: 8px; padding-top: 6px; gap: 2px; }
.m-tab-add .m-tab-label, .m-app .m-tab-add .m-tab-label { margin-top: 2px; }