/* ============================================================
   BoligSignal Ny App — TOKENS + SHELL
   Bygget fra design/claude-app/BoligSignal Design System/
   (colors_and_type.css + phases/phases.css)

   Renset til mobil-app (ingen designer-preview-phone-frame).
   Targets: 100dvh viewport, mobile-first, max 480px content.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* BRAND — signal-green primary (matches Claude Design System prototype) */
  --brand:              #16A34A;
  --brand-2:            #15803D;
  --brand-dark:         #14532D;
  --brand-pale:         #F0FDF4;
  --brand-50:           #DCFCE7;
  --brand-gradient:     linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  --brand-glow:         0 6px 20px rgba(22,163,74,0.30);
  --brand-glow-strong:  0 10px 28px rgba(22,163,74,0.42);

  /* WARM ACCENT — orange reserved for Værktøjskasse-banner + signal-orange/matched */
  --warm:               #F97316;
  --warm-2:             #F59E0B;
  --warm-gradient:      linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
  --warm-glow:          0 6px 20px rgba(249,115,22,0.30);
  --warm-pale:          #FFF7ED;
  --warm-50:            #FFEDD5;

  /* SIGNAL (traffic-light) — 4 property-states */
  --sig-grey:     #9CA3AF;   /* anonym (DAR-baseline) */
  --sig-yellow:   #EAB308;   /* curious / nysgerrig (ejer default) */
  --sig-green:    #16A34A;   /* ready / klar (ejer aktiv) */
  --sig-orange:   #F97316;   /* matched (derived) */
  --sig-red:      #DC2626;   /* destructive */

  --sig-grey-bg:   #F3F4F6;
  --sig-yellow-bg: #FEFCE8;
  --sig-green-bg:  #F0FDF4;
  --sig-orange-bg: #FFF7ED;
  --sig-red-bg:    #FEF2F2;

  /* NEUTRALS */
  --ink:           #0C1425;   /* navy headline */
  --ink-2:         #111827;
  --ink-3:         #374151;
  --ink-4:         #6B7280;
  --ink-5:         #9CA3AF;
  --line:          #E5E7EB;
  --line-2:        #F3F4F6;

  --bg:            #FAF9FF;   /* app canvas */
  --bg-2:          #F5F6FB;
  --surface:       #FFFFFF;

  /* DARK SURFACES (map basemap + hero) */
  --navy:          #0C1425;
  --navy-2:        #111B2E;
  --navy-3:        #162036;
  --navy-4:        #1A2744;

  /* TYPE */
  --fd:            'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fb:            'Inter', system-ui, -apple-system, sans-serif;

  /* RADII */
  --r-sm:  8px;
  --r:     12px;
  --r-md:  14px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --pill:  999px;

  /* SHADOW */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh:    0 4px 14px rgba(0,0,0,.08);
  --sh-md: 0 10px 30px -8px rgba(0,0,0,.12);
  --sh-lg: 0 22px 48px -12px rgba(0,0,0,.16);

  /* MOTION */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* LAYOUT — faktiske topbar/tabbar-højder (inkl. safe-area) så kortet kan
     fylde præcis mellem dem uden at bund-kortet lapper ind over nav-menuen */
  --topbar-h: calc(48px + max(env(safe-area-inset-top), 8px));
  --tabbar-h: calc(64px + max(env(safe-area-inset-bottom), 8px));
}

/* ============================================================ BASE */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fb); color: var(--ink-2); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }  /* HTML5 hidden-attribut wins over descendant display: grid/flex */

/* ============================================================ APP SHELL */
.app {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  max-width: 480px; margin: 0 auto;
  background: var(--surface);
  position: relative;
  box-shadow: 0 0 0 1px rgba(12,20,37,.04);
}

/* Topbar (glass) */
.topbar {
  flex-shrink: 0;
  padding: max(env(safe-area-inset-top), 8px) 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(12,20,37,.06);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--fd); font-weight: 800; font-size: 16px; letter-spacing: -.015em;
}
.brand-mark {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border-radius: 7px; background: #fff; border: 1px solid var(--line);
}
.brand-mark span { width: 5px; height: 5px; border-radius: 50%; }
.brand-mark span:nth-child(1) { background: var(--sig-yellow); }
.brand-mark span:nth-child(2) { background: var(--sig-green); }
.brand-mark span:nth-child(3) { background: var(--sig-orange); }
.topbar .actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  position: relative;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .bdg {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: 8px;
  font-family: var(--fd); font-weight: 700; font-size: 9.5px;
  display: flex; align-items: center; justify-content: center;
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(12,20,37,.1);
  cursor: pointer;
}

/* Main content area.
   OBS: ALDRIG -webkit-overflow-scrolling: touch her — iOS-only egenskab der
   skaber stacking context + brækker position:fixed-børn (chat/boligvindue
   ligger som børn af .content): topbar/tabbar maltes OVER chatten og
   composeren røg under folden på iPhone. Momentum-scroll er default siden iOS 13. */
.content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding-bottom: 96px;  /* space for fixed tabbar */
}
.content::-webkit-scrollbar { width: 4px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: rgba(12,20,37,.1); border-radius: 2px; }

/* View toggling (5 hidden divs, JS swaps .active) */
.view { display: none; }
.view.active { display: block; }

/* Når et fullscreen-overlay (chat/boligvindue/sub-pages) er aktivt, skjules
   app-chromen helt — bæltet der garanterer at topbar/tabbar ALDRIG kan male
   sig over chatten, uanset browser-quirks med stacking contexts (iOS). */
body.overlay-open .topbar,
body.overlay-open .tabbar { visibility: hidden; }

/* Tab bar (fixed bottom, 5 tabs) */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  padding: 8px 8px max(env(safe-area-inset-bottom), 8px);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(12,20,37,.06);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  z-index: 60;
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 2px; border-radius: 10px;
  color: var(--ink-5);
  font-family: var(--fd); font-weight: 600; font-size: 10.5px;
  letter-spacing: -.005em; transition: color .15s ease;
}
.tab .ic { width: 24px; height: 24px; display: block; }
.tab.on { color: var(--brand); }
.tab.on .ic { stroke: var(--brand); }
.tab .badge {
  position: absolute; transform: translate(12px, -4px);
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: 8px;
  font-family: var(--fd); font-weight: 700; font-size: 9.5px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================ ATOMS */
.btn {
  height: 48px; padding: 0 20px; border-radius: var(--r);
  font-family: var(--fd); font-weight: 700; font-size: 15px; letter-spacing: -.005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.btn-primary:hover { box-shadow: var(--brand-glow-strong); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.btn-outline { background: #fff; color: var(--ink-2); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--ink-4); }
.btn-ghost { background: transparent; color: var(--ink-3); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { height: 38px; font-size: 13.5px; padding: 0 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 11px;
  background: var(--sig-grey-bg); color: var(--ink-3);
}
.pill .d { width: 7px; height: 7px; border-radius: 50%; }
.pill.grey   { background: var(--sig-grey-bg);   color: #4B5563; }
.pill.grey .d   { background: var(--sig-grey); }
.pill.yellow { background: var(--sig-yellow-bg); color: #854D0E; }
.pill.yellow .d { background: var(--sig-yellow); }
.pill.green  { background: var(--sig-green-bg);  color: #166534; }
.pill.green .d  { background: var(--sig-green); }
.pill.orange { background: var(--sig-orange-bg); color: #9A3412; }
.pill.orange .d { background: var(--sig-orange); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}

.section-h {
  padding: 18px 18px 8px;
  font-family: var(--fd); font-weight: 800; font-size: 18px; letter-spacing: -.015em;
  color: var(--ink-2);
}
.section-h.uc {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
  padding-top: 22px; padding-bottom: 6px;
}

/* ============================================================ MERE-view */
.more-head {
  padding: 14px 20px 4px;
}
.more-head h2 {
  font-family: var(--fd); font-weight: 900; font-size: 28px;
  letter-spacing: -.02em; color: var(--ink);
}
.more-head p {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-4);
  margin-top: 2px;
}
.more-list {
  margin: 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.more-row-v2 {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
  width: 100%;
  text-align: left;
  transition: border-color .15s;
}
.more-row-v2:hover { border-color: var(--ink-5); }
.more-row-v2 .mr-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-pale); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.more-row-v2 .mr-body {
  flex: 1; min-width: 0;
}
.more-row-v2 .mr-body b {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  display: block;
}
.more-row-v2 .mr-body span {
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4);
  display: block; margin-top: 1px;
}
.more-row-v2 .mr-chev {
  color: var(--ink-5); font-size: 18px; line-height: 1;
  flex-shrink: 0;
}

/* Empty state (used by tabs without content yet) */
.empty {
  padding: 60px 24px; text-align: center;
}
.empty .ic {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--brand-pale); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.empty .ic svg { width: 28px; height: 28px; }
.empty h3 {
  font-family: var(--fd); font-weight: 800; font-size: 17px;
  color: var(--ink-2); margin-bottom: 6px;
}
.empty p {
  font-family: var(--fb); font-size: 13.5px; line-height: 1.5;
  color: var(--ink-4); max-width: 280px; margin: 0 auto;
}

/* Toast container (top of screen) */
.toast-container {
  position: fixed; top: max(env(safe-area-inset-top), 12px); left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: var(--r);
  font-family: var(--fd); font-weight: 600; font-size: 13.5px;
  box-shadow: var(--sh-lg);
  pointer-events: auto;
  animation: toastIn .25s var(--ease) both;
}
.toast.error  { background: var(--sig-red); }
.toast.success{ background: var(--sig-green); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ ONBOARDING (logged-out, 4-trin) */
.onboarding-shell {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff;
}
.onb-step {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 60px 24px 28px;
}
.onb-step[hidden] { display: none; }
.onb-back {
  position: absolute; top: max(env(safe-area-inset-top), 18px); left: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-sm);
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.onb-back svg { width: 16px; height: 16px; }
.onb-skip {
  position: absolute; top: max(env(safe-area-inset-top), 24px); right: 18px; z-index: 5;
  font-family: var(--fd); font-weight: 700; font-size: 13px; color: var(--ink-4);
}
.onb-dots {
  display: flex; gap: 6px; justify-content: center;
  margin: 0 auto 14px;
}
.onb-dots .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line);
  transition: width .25s, background .25s;
}
.onb-dots .dot.on { width: 22px; border-radius: 3px; background: var(--brand); }

.onb-hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px 0 16px;
  position: relative;
}
.hero-glow {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,163,74,.30) 0%, rgba(22,163,74,0) 70%);
  z-index: 0;
}
.hero-mark {
  width: 96px; height: 96px; margin-bottom: 28px;
  border-radius: 28px; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--sh-md);
  position: relative; z-index: 1;
}
.hero-mark span { width: 16px; height: 16px; border-radius: 50%; }
.hero-mark span:nth-child(1) { background: var(--sig-yellow); }
.hero-mark span:nth-child(2) { background: var(--sig-green); }
.hero-mark span:nth-child(3) { background: var(--sig-orange); }

/* Standalone pulsing signal-prikker (welcome-screen — matches prototype) */
.signal-pulses {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.sig-pulse {
  border-radius: 50%;
  position: relative;
}
.sig-pulse.sp-yellow {
  width: 28px; height: 28px; background: var(--sig-yellow);
  animation: sigPulseY 1.8s ease-in-out infinite;
  animation-delay: 0s;
}
.sig-pulse.sp-green {
  width: 34px; height: 34px; background: var(--sig-green);
  animation: sigPulseG 1.8s ease-in-out infinite;
  animation-delay: .3s;
}
.sig-pulse.sp-orange {
  width: 28px; height: 28px; background: var(--sig-orange);
  animation: sigPulseO 1.8s ease-in-out infinite;
  animation-delay: .6s;
}
@keyframes sigPulseY {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(234,179,8,0); }
}
@keyframes sigPulseG {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.50); }
  50%      { box-shadow: 0 0 0 18px rgba(22,163,74,0); }
}
@keyframes sigPulseO {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(249,115,22,0); }
}

.onb-title {
  font-family: var(--fd); font-weight: 900; font-size: 30px;
  line-height: 1.1; letter-spacing: -.025em; color: var(--ink);
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.onb-title-display {
  font-size: 38px; letter-spacing: -.03em;
  margin-bottom: 6px;
}
.onb-title-sm { font-size: 24px; }
.onb-lead {
  font-family: var(--fb); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-4); margin-bottom: 8px;
  position: relative; z-index: 1;
}
.onb-lead-sm { font-size: 13px; margin-bottom: 18px; }

.onb-foot {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 12px;
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}
.btn-cta { height: 52px; font-size: 15px; }

/* Role-cards */
.role-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; margin-bottom: 8px;
  position: relative; z-index: 1;
}
.role-card {
  background: #fff;
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 18px;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.role-card.on {
  border-color: var(--brand); background: var(--brand-pale);
  box-shadow: var(--brand-glow);
}
.role-card .ic {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.role-card.on .ic { background: var(--brand-gradient); }
.role-card .t { flex: 1; }
.role-card .t b {
  font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink); display: block;
}
.role-card .t span {
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4);
  margin-top: 2px; display: block; line-height: 1.4;
}
.role-card .chk {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.role-card .chk svg { display: none; color: #fff; }
.role-card.on .chk { background: var(--brand); border-color: var(--brand); }
.role-card.on .chk svg { display: block; }

/* Signup-form (step 3) */
.onb-form-body {
  padding-top: 28px; flex: 1;
}
.onb-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
  position: relative;
}
.onb-label {
  font-family: var(--fd); font-weight: 700; font-size: 11.5px;
  color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase;
}
.onb-field input {
  width: 100%; height: 50px;
  background: #fff;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 0 14px;
  font-family: var(--fb); font-size: 14.5px; color: var(--ink-2);
  outline: none;
}
.onb-field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.onb-checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 0;
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
  cursor: pointer;
}
.onb-checkbox input {
  width: 18px; height: 18px;
  margin-top: 1px; flex-shrink: 0;
  accent-color: var(--brand);
}
.onb-checkbox a { color: var(--brand-dark); text-decoration: underline; }

.onb-dawa-results {
  background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  margin-top: 4px;
  max-height: 200px; overflow-y: auto;
}
.onb-dawa-results .dawa-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--fb); font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.onb-dawa-results .dawa-row:last-child { border-bottom: 0; }
.onb-dawa-results .dawa-row:hover, .onb-dawa-results .dawa-row.active {
  background: var(--brand-pale);
}

.onb-form-foot {
  text-align: center;
  margin-top: 6px;
  font-family: var(--fb); font-size: 13px; color: var(--ink-4);
}
.onb-form-foot b {
  color: var(--brand-dark); font-family: var(--fd); font-weight: 700; cursor: pointer;
}

/* Success state (step 4) */
.onb-success {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 24px;
}
.success-ring {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--brand-glow-strong);
  margin-bottom: 28px;
  position: relative;
}
.success-ring::after {
  content: ''; position: absolute; inset: -10px;
  border: 2px dashed rgba(22,163,74,.35); border-radius: 50%;
  animation: spinRing 12s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.onb-success h2 {
  font-family: var(--fd); font-weight: 900; font-size: 28px;
  letter-spacing: -.025em; color: var(--ink); margin-bottom: 10px;
}
.onb-success p {
  font-family: var(--fb); font-size: 14.5px; color: var(--ink-3);
  max-width: 280px; line-height: 1.5;
}

/* ============================================================ MAP VIEW */
.map-wrap {
  position: relative;
  height: calc(100dvh - var(--topbar-h) - var(--tabbar-h));  /* fylder præcis mellem topbar og tabbar */
  margin-bottom: -96px;                 /* cancel out content-padding-bottom */
  background: var(--navy);
  overflow: hidden;
}
.map-canvas { position: absolute; inset: 0; }
/* Zoom +/- nederst til højre, løftet op over bund-kortet (Jacob 21/6) */
.maplibregl-ctrl-bottom-right {
  bottom: 84px !important;   /* over bund-summary-kortet */
  right: 12px !important;
  z-index: 24;               /* under bund-kort (25) så card vinder ved overlap */
}
.map-wrap.mk-selected .maplibregl-ctrl-bottom-right { bottom: 168px !important; }  /* løft over compact-card når markør valgt */
.maplibregl-ctrl-bottom-left { display: none !important; }  /* skjul evt. attribution/logo nede til venstre */

/* Top search + filter overlay */
.map-search {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 30;
  display: flex; gap: 8px;
}
.srch {
  flex: 1; height: 46px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  box-shadow: var(--sh-md);
}
.srch svg { width: 18px; height: 18px; color: var(--ink-4); flex-shrink: 0; }
.srch input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--fb); font-size: 14px; color: var(--ink-2);
  outline: none; min-width: 0;
}
.srch input::placeholder { color: var(--ink-5); }
.srch-badge {
  margin-left: auto;
  background: var(--brand); color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 11px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.flt-btn {
  width: 46px; height: 46px;
  background: #fff; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md); flex-shrink: 0;
  position: relative;
}
.flt-btn svg { width: 20px; height: 20px; color: var(--ink-2); }
.flt-btn .b {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); border: 1.5px solid #fff;
}

/* Legend chip (top-left below search) */
.legend-chip {
  position: absolute; top: 72px; left: 12px; z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  padding: 6px 10px; border-radius: var(--pill);
  display: flex; gap: 10px; align-items: center;
  box-shadow: var(--sh-sm);
  font-family: var(--fd); font-weight: 700; font-size: 10.5px; color: var(--ink-3);
}
.legend-chip .lc { display: inline-flex; align-items: center; gap: 4px; }
.legend-chip .d { width: 6px; height: 6px; border-radius: 50%; }

/* Signal markers (rendered as DOM children of MapLibre marker) */
.mk {
  width: 18px; height: 18px;
  cursor: pointer;
  /* SKAL være absolute: MapLibre positionerer markører med transform fra containerens origo.
     'relative' lader prikkerne stable i dokument-flow under canvassen (usynlige). */
  position: absolute;
}
.mk .dot {
  position: absolute; inset: 0;
  border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.2);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4) 0%, var(--mc) 60%);
}
.mk .ring {
  position: absolute; inset: -50%;
  border-radius: 50%; opacity: .35;
  animation: mkpulse 2.6s ease-out infinite;
  pointer-events: none;
  background: var(--mc);
}
.mk.grey   { --mc: #9CA3AF; width: 14px; height: 14px; }
.mk.grey .ring { display: none; }
.mk.yellow { --mc: #EAB308; }
.mk.green  { --mc: #16A34A; }
.mk.orange { --mc: #F97316; }
.mk.lg { width: 22px; height: 22px; }
.mk.sel { z-index: 10; }
.mk.sel .dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0,0,0,.5);
}
@keyframes mkpulse {
  0%   { transform: scale(1);   opacity: .4; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* Map bottom-card container: altid synlig (summary) eller udvidet (compact) */
.map-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 25;
  background: #fff;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -8px 24px -8px rgba(0,0,0,.18);
  padding-top: 8px;
}
.map-bottom-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line);
  margin: 4px auto 8px;
}
.map-bottom-summary {
  padding: 4px 18px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.map-bottom-summary .mbs-text {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-3);
}
.map-bottom-summary .mbs-text b {
  font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink);
}
.map-bottom-summary .mbs-list-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--pill);
  background: var(--brand-pale); color: var(--brand-dark);
  font-family: var(--fd); font-weight: 700; font-size: 12.5px;
}
.map-bottom-summary .mbs-list-btn:hover { background: var(--brand-50); }

/* Compact property card (when pin tapped — vises INDE I map-bottom) */
.compact {
  position: relative;
  z-index: 26;
  background: #fff;
  padding: 0 4px 4px;
  overflow: hidden;
  animation: compactIn .25s var(--ease) both;
}
@keyframes compactIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.compact-close {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink-3);
  font-size: 20px; line-height: 1;
}
.compact-row { display: flex; gap: 12px; padding: 12px; align-items: center; }
.compact .th {
  width: 64px; height: 64px;
  border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #1A2744, #0C1425);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.compact .body { flex: 1; min-width: 0; }
.compact .addr {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compact .price {
  font-family: var(--fd); font-weight: 800; font-size: 17px; color: var(--ink);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.compact .meta {
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-4); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compact .meta-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.compact-foot { display: flex; gap: 8px; padding: 0 12px 12px; }
.compact-foot .btn { height: 40px; font-size: 13px; flex: 1; }
.compact-foot .btn-secondary { flex: 0 0 44px; padding: 0; }
.compact-foot .btn-secondary.on { background: var(--brand-pale); border-color: var(--brand); color: var(--brand); }
.compact-foot .btn-secondary.on svg { fill: var(--brand); stroke: var(--brand); }
/* "Ingen billede"-placeholder: stock hus-ikon (ALDRIG ejerens avatar) — Jacob */
.img-placeholder {
  background-color: var(--bg-2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 46% !important;
}

/* Map loading overlay */
.map-loading {
  position: absolute; inset: 0; z-index: 35;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  background: rgba(12, 20, 37, .35);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, .9);
  font-family: var(--fd); font-weight: 600; font-size: 13px;
  pointer-events: none;
}
.map-loading-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand);
  animation: loadPulse 1.4s ease-in-out infinite;
}
@keyframes loadPulse {
  0%, 100% { transform: scale(.8); opacity: .55; }
  50%      { transform: scale(1.1); opacity: 1; }
}

/* ============================================================ BOLIGVINDUE (detail) */
.bolig-view {
  display: none;
  position: fixed; inset: 0;
  background: #fff;
  z-index: 70;  /* over tabbar (z=60) */
  flex-direction: column;
}
.bolig-view.active { display: flex; }

/* + menu floating button (bottom-right of carousel — ejer-only).
   Vises i carousel-området, ovenpå billeder. */
.bv-add-fab {
  position: absolute; bottom: 14px; right: 14px; z-index: 6;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(22, 163, 74, .55);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: transform .15s;
}
.bv-add-fab:active { transform: scale(.94); }
.bv-add-fab svg { width: 20px; height: 20px; }

/* POV-søger banner */
.bv-pov-banner {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  padding: 6px 12px; border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.3);
}
.bv-pov-banner button {
  margin-left: 4px;
  padding: 0;
  background: transparent; border: 0;
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  color: var(--brand-light); cursor: pointer;
  text-decoration: underline;
}

/* + menu sheet */
.bv-add-sheet { padding: 8px 0 max(env(safe-area-inset-bottom), 16px); }
.bv-add-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 12px; }
.bv-add-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px;
  background: #fff; border: 0; border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.bv-add-item:active { background: var(--bg-2); }
.bv-add-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-pale); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bv-add-body { flex: 1; min-width: 0; }
.bv-add-body b {
  display: block; font-family: var(--fd); font-weight: 800; font-size: 14.5px;
  color: var(--ink);
}
.bv-add-body span {
  display: block; font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  margin-top: 1px;
}
.bv-add-chev { color: var(--ink-5); flex-shrink: 0; }

/* Mini-sheet (status / blur / photos / share) */
.bv-mini-sheet { padding: 8px 0 max(env(safe-area-inset-bottom), 20px); }
/* Indholdet skal kunne scrolle når sheetet rammer max-height (88vh) —
   ellers klippes fx "Rediger ejendomsdata"-felterne på små skærme */
.bv-mini-body { padding: 4px 20px 20px; overflow-y: auto; min-height: 0; }
.bv-mini-body h3 {
  font-family: var(--fd); font-weight: 900; font-size: 20px;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px;
}
.bv-mini-body > p {
  font-family: var(--fb); font-size: 13px; color: var(--ink-4); line-height: 1.45;
  margin-bottom: 14px;
}

/* Status-radio i status-modal */
.bv-status-radio {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--line); background: #fff;
  border-radius: 12px; margin-bottom: 8px;
  cursor: pointer; text-align: left;
  transition: border .15s, background .15s;
}
.bv-status-radio .d { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.bv-status-radio .d.d-yellow { background: var(--sig-yellow); box-shadow: 0 0 0 4px rgba(234,179,8,.16); }
.bv-status-radio .d.d-green { background: var(--sig-green); box-shadow: 0 0 0 4px rgba(22,163,74,.16); }
.bv-status-radio .t { flex: 1; }
.bv-status-radio .t b {
  display: block; font-family: var(--fd); font-weight: 800; font-size: 14px; color: var(--ink);
}
.bv-status-radio .t em {
  display: block; font-family: var(--fb); font-style: normal; font-size: 12px;
  color: var(--ink-3); line-height: 1.4; margin-top: 2px;
}
.bv-status-radio .chk { color: var(--brand); flex-shrink: 0; opacity: 0; }
.bv-status-radio.sel { border-color: var(--brand); background: var(--brand-pale); }
.bv-status-radio.sel .chk { opacity: 1; }

/* Photo actions: 2 separate buttons (galleri + kamera) */
.bv-photo-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.bv-photo-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: var(--ink-2);
  cursor: pointer;
  transition: border .12s, background .12s;
  text-align: center;
}
.bv-photo-action:active { background: var(--brand-pale); border-color: var(--brand); }
.bv-photo-action svg { color: var(--brand-dark); margin-bottom: 4px; }
.bv-photo-action b { font-family: var(--fd); font-weight: 800; font-size: 13.5px; color: var(--ink); }
.bv-photo-action span { font-family: var(--fb); font-size: 11.5px; color: var(--ink-4); }
.bv-photo-status {
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4);
  margin-top: 10px; padding: 0 4px;
  min-height: 16px;
}
.bv-photo-status.error { color: #B91C1C; }
.bv-photo-status.success { color: var(--brand-dark); }
.bv-photo-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px;
}
.bv-photo-list .ph {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--bg-2);
  background-size: cover; background-position: center;
}
.bv-photo-list .ph .x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bv-photo-list .ph .ph-profil-tag {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  background: var(--brand); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.bv-photo-list .ph {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: element;
}
.bv-photo-list .ph:active { cursor: grabbing; }
.bv-photo-list .ph.dragging {
  opacity: .55;
  transform: scale(.96);
  outline: 2px dashed var(--brand);
}

/* Share */
.bv-share-link {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.bv-share-link input {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-3);
  background: var(--bg-2);
}
.bv-share-link .btn-sm { height: 40px; padding: 0 14px; flex-shrink: 0; }
.bv-share-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.bv-share-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px;
  background: var(--bg-2); border-radius: 12px;
  font-family: var(--fd); font-weight: 700; font-size: 11.5px;
  color: var(--ink-2); text-decoration: none;
}
.bv-share-btn .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff; color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-xs);
}

/* Ejer-edit "Min bolig" sektion (kun ejer i ejer-syn) */
.bv-owner-edit { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.bv-owner-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.bv-owner-eyebrow {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.bv-owner-block { display: flex; flex-direction: column; gap: 6px; }
.bv-owner-label {
  font-family: var(--fd); font-weight: 700; font-size: 11.5px;
  color: var(--ink-3);
}
.bv-renov-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.bv-renov-row {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
}
.bv-renov-row span {
  font-family: var(--fd); font-weight: 700; font-size: 12px; color: var(--ink-2);
}
.bv-renov-row input {
  width: 56px;
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: 3px 6px;
  font-family: var(--fd); font-weight: 800; font-size: 12px; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
  outline: none;
}
.bv-renov-row input:focus { border-color: var(--brand); }
.bv-owner-ta {
  width: 100%; min-height: 64px; resize: vertical;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px;
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-2);
  line-height: 1.45; outline: none; box-sizing: border-box;
}
.bv-owner-ta:focus { border-color: var(--brand); background: #fff; }

/* Pris area-sub: vejledende m²-pris for området, vises når ingen owner-pris */
.bv-price-area-sub {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4);
}
.bv-price-area-sub .lbl {
  font-family: var(--fd); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.bv-price-area-sub .val {
  font-family: var(--fd); font-weight: 800; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bv-price-area-sub .sep { color: var(--ink-5); }

/* Pris-headline + blyant (kun ejer, ikke POV) */
.bv-price-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.bv-price-row .bv-price-headline { margin-top: 0; }
.bv-price-edit-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-pale); color: var(--brand-dark);
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.bv-price-edit-btn:active { background: var(--brand); color: #fff; }

/* "Rediger din pris" modal */
.bv-price-stats {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.bv-ps-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--fd); font-weight: 700; font-size: 12px; color: var(--ink-3);
}
.bv-ps-row span:last-child {
  font-weight: 800; font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bv-ps-row b { color: var(--ink-2); }

.bv-price-husk {
  background: #FEFCE8; border: 1px solid #FDE68A; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px;
}
.bv-price-husk b {
  font-family: var(--fd); font-weight: 900; font-size: 11px;
  letter-spacing: .08em; color: #713F12; display: block; margin-bottom: 4px;
}
.bv-price-husk span {
  font-family: var(--fb); font-size: 12px; color: var(--ink-3); line-height: 1.45;
}

.bv-rapport-cta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; border: 0; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  cursor: pointer; text-align: left;
  box-shadow: 0 6px 16px -4px rgba(22,163,74,.45);
}
.bv-rc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bv-rc-body { flex: 1; min-width: 0; }
.bv-rc-body b {
  display: block; font-family: var(--fd); font-weight: 900; font-size: 14px;
}
.bv-rc-body span {
  display: block; font-family: var(--fb); font-size: 11.5px; opacity: .92;
  margin-top: 1px;
}
.bv-rc-chev { opacity: .9; flex-shrink: 0; }

.bv-price-chips {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
  margin-top: 8px;
}
.bv-price-chip {
  height: 36px; padding: 0 6px;
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 12px; color: var(--ink-2);
  cursor: pointer;
}
.bv-price-chip:active { background: var(--brand-pale); border-color: var(--brand); color: var(--brand-dark); }

/* Boligrapport-modal */
.bv-rap-bullets {
  margin: 0 0 14px; padding-left: 18px;
  font-family: var(--fb); font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.bv-rap-bullets li { margin-bottom: 4px; }
.bv-rap-incl {
  background: var(--brand-pale); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px;
}
.bv-rap-incl b {
  font-family: var(--fd); font-weight: 800; font-size: 13px; color: var(--brand-dark);
  display: block; margin-bottom: 2px;
}
.bv-rap-incl span {
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
}
.bv-rap-pris {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.bv-rap-pris .lbl {
  font-family: var(--fd); font-weight: 700; font-size: 13px; color: var(--ink-3);
}
.bv-rap-pris .val {
  font-family: var(--fd); font-weight: 900; font-size: 24px; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* "Mere ejendomsdata" accordion-row med blyant-knap (ejer) */
.bv-accordion-row {
  margin: 12px 20px 0;
  display: flex; align-items: center; gap: 8px;
}
.bv-accordion-row .bv-accordion { flex: 1; }
.bv-bbr-edit-btn {
  width: 44px; height: 44px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.bv-bbr-edit-btn:active { background: var(--brand-pale); border-color: var(--brand); }

/* BBR-edit modal */
.bv-bbr-tip {
  background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 12px;
  padding: 12px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 14px;
}
.bv-bbr-tip-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.bv-bbr-tip-body { flex: 1; }
.bv-bbr-tip-body > b {
  font-family: var(--fd); font-weight: 800; font-size: 12.5px; color: var(--ink);
  display: block; margin-bottom: 4px;
}
.bv-bbr-tip-body > span {
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
  line-height: 1.45; display: block; margin-bottom: 8px;
}
.bv-bbr-links { display: flex; flex-direction: column; gap: 4px; }
.bv-bbr-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  color: var(--brand-dark); text-decoration: none;
}
.bv-bbr-links a .muted {
  font-family: var(--fb); font-weight: 500; color: var(--ink-4);
}

.bv-bbr-fields {
  display: flex; flex-direction: column; gap: 10px;
}
.bv-bbr-input {
  position: relative; display: flex; align-items: center;
}
.bv-bbr-input input {
  width: 100%; height: 42px;
  padding: 0 52px 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink);
  background: #fff; outline: none;
  box-sizing: border-box;
}
.bv-bbr-input input:focus { border-color: var(--brand); }
.bv-bbr-input .bv-bbr-unit {
  position: absolute; right: 12px;
  font-family: var(--fd); font-weight: 600; font-size: 12px; color: var(--ink-4);
  pointer-events: none;
}

/* Energimærke edit-pill (lille blyant ved label) */
.bv-fact-energi .l { display: inline-flex; align-items: center; gap: 6px; }
.bv-energi-edit-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-pale); color: var(--brand-dark);
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.bv-energi-edit-btn:active { background: var(--brand); color: #fff; }

/* Energimærke-modal grid */
.bv-energi-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.bv-energi-pill {
  height: 56px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff;
  font-family: var(--fd); font-weight: 900; font-size: 16px; color: var(--ink);
  cursor: pointer;
  transition: transform .12s;
}
.bv-energi-pill:active { transform: scale(.96); }
.bv-energi-pill.sel { box-shadow: 0 0 0 3px var(--brand) inset; }
.bv-energi-pill.ea { background: #16A34A; color: #fff; border-color: #14532D; }
.bv-energi-pill.eb { background: #65A30D; color: #fff; border-color: #365314; }
.bv-energi-pill.ec { background: #CA8A04; color: #fff; border-color: #713F12; }
.bv-energi-pill.ed { background: #EA580C; color: #fff; border-color: #7C2D12; }
.bv-energi-pill.ee { background: #DC2626; color: #fff; border-color: #7F1D1D; }
.bv-energi-pill.ef { background: #B91C1C; color: #fff; border-color: #7F1D1D; }
.bv-energi-pill.eg { background: #7F1D1D; color: #fff; border-color: #450A0A; }

/* POV-display "Min bolig" sektion (søger eller ejer i POV-mode) */
.bv-owner-view { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 10px; }
.bv-ov-renov-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.bv-ov-renov-grid .ov-cell {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fd); font-weight: 700; font-size: 12px; color: var(--ink-2);
}
.bv-ov-renov-grid .ov-cell .ov-y {
  font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 800;
}
.bv-ov-text {
  font-family: var(--fb); font-size: 13px; color: var(--ink-2);
  line-height: 1.5; margin: 0;
  white-space: pre-wrap;
}

/* Rediger profil — fuld modal */
.profile-edit-sheet {
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.profile-edit-body {
  overflow-y: auto;
  padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.pe-field {
  display: flex; flex-direction: column; gap: 5px;
}
.pe-label {
  font-family: var(--fd); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}
.pe-field input,
.pe-field select {
  height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--fd); font-weight: 600; font-size: 14px;
  color: var(--ink); background: #fff;
  outline: none;
}
.pe-field input:focus,
.pe-field select:focus { border-color: var(--brand); }
.pe-section-h {
  font-family: var(--fd); font-weight: 900; font-size: 14.5px;
  color: var(--ink-2); margin-top: 6px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.pe-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chip {
  padding: 8px 12px;
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .12s, border .12s, color .12s;
}
.pe-chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(22, 163, 74, .45);
}
.pe-hint {
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-4);
  margin-top: 2px;
}

/* Profil-avatar edit-badge clickable */
.p-avatar { cursor: pointer; }
.p-avatar.has-photo { background-size: cover; background-position: center; }
.p-avatar.has-photo #pAvatarInitials { display: none; }
.p-avatar-edit { cursor: pointer; }

/* Tema-vælger i Mere — row-pattern matching more-row-v2 (per Jacob session 109) */
.more-theme-row-v2 .mr-ic {
  background: var(--bg-2);
  padding: 0;
  overflow: hidden;
}
.mt-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
}
.mt-swatch-light { background: #fff; }
.mt-swatch-dark { background: #0F172A; border-color: #1E293B; }
.more-theme-row-v2 .mt-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: none;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.more-theme-row-v2.on {
  border-color: var(--brand);
  background: var(--brand-pale);
}
.more-theme-row-v2.on .mt-check { display: flex; }
.more-theme-row-v2.on .mr-body b { color: var(--brand-dark); }

/* Dark-mode token-overrides (kun når <html data-theme="dark">) */
html[data-theme="dark"] {
  --bg: #0B1220;
  --bg-2: #111827;
  --surface: #18223A;
  --ink: #F8FAFC;
  --ink-2: #E2E8F0;
  --ink-3: #94A3B8;
  --ink-4: #64748B;
  --ink-5: #475569;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.06);
  --brand-pale: rgba(22, 163, 74, .18);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .topbar { background: rgba(11, 18, 32, .85); border-color: var(--line); }
html[data-theme="dark"] .tabbar { background: rgba(11, 18, 32, .90); border-color: var(--line); }
html[data-theme="dark"] .modal-sheet,
html[data-theme="dark"] .mb-prop-card,
html[data-theme="dark"] .mb-row-card,
html[data-theme="dark"] .more-row-v2,
html[data-theme="dark"] .mb-kpi,
html[data-theme="dark"] .bv-owner-card,
html[data-theme="dark"] .bv-interest-card,
html[data-theme="dark"] .field-row,
html[data-theme="dark"] .more-theme-opt {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .onboarding-shell { background: var(--bg); }
html[data-theme="dark"] .bv-mini-body h3,
html[data-theme="dark"] .pe-label { color: var(--ink-2); }
html[data-theme="dark"] .pe-field input,
html[data-theme="dark"] .pe-field select,
html[data-theme="dark"] .bv-owner-ta,
html[data-theme="dark"] .bv-renov-row input {
  background: var(--bg-2); color: var(--ink); border-color: var(--line);
}

/* Dark-mode kontrast-sweep (session 111): hvert hvidt kort/element der ellers
   blev usynligt på mørk baggrund overrides til --surface. Tekst-farver der
   var hardcoded #fff på lyse buttons forbliver #fff (de er på grønt brand). */
html[data-theme="dark"] .ml-row.unread { background: rgba(22,163,74,.10); }
html[data-theme="dark"] .ml-row .av.av-sig-grey { background: var(--surface); color: var(--ink-3); }
html[data-theme="dark"] .av-wrap .sd { border-color: var(--bg); }

/* Chat bubbles + composer */
html[data-theme="dark"] .ch-composer { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .ch-composer textarea { background: var(--bg-2); color: var(--ink); }
html[data-theme="dark"] .ch-emoji-panel { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .ch-emoji-panel button:active { background: var(--bg-2); }
html[data-theme="dark"] .bubble.in { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .ch-head { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .ch-back { background: var(--bg-2); color: var(--ink-2); border-color: var(--line); }

/* Sub-pages (FAQ + Legal) */
html[data-theme="dark"] .sp-head { background: var(--bg); }
html[data-theme="dark"] .sp-back { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .sp-faq-item { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .sp-legal-tab.on { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
html[data-theme="dark"] .sp-legal-tab { color: var(--ink-3); }
html[data-theme="dark"] .sp-legal-table-wrap { border-color: var(--line); }
html[data-theme="dark"] .sp-legal-table-wrap th { background: var(--bg-2); color: var(--ink-3); border-color: var(--line); }
html[data-theme="dark"] .sp-legal-table-wrap td { border-color: var(--line-2); }

/* Boligvindue */
html[data-theme="dark"] .bv-status-pill { background: var(--surface); }
html[data-theme="dark"] .bv-prices-card,
html[data-theme="dark"] .bv-price-card,
html[data-theme="dark"] .bv-fact-cell,
html[data-theme="dark"] .bv-accordion,
html[data-theme="dark"] .bv-add-fab,
html[data-theme="dark"] .bv-bbr-row,
html[data-theme="dark"] .bv-renov-row,
html[data-theme="dark"] .bv-cta-bar {
  background: var(--surface); border-color: var(--line);
}
html[data-theme="dark"] .bv-bbr-row { background: var(--bg-2); }
html[data-theme="dark"] .bv-cta-bar { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .bv-energi-edit-btn,
html[data-theme="dark"] .bv-price-edit-btn,
html[data-theme="dark"] .bv-accordion-pencil {
  background: var(--bg-2); color: var(--ink-2); border-color: var(--line);
}
html[data-theme="dark"] .bv-add-item { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .bv-add-item:active { background: var(--bg-2); }
html[data-theme="dark"] .bv-add-menu { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .bv-mini-body { background: var(--surface); border-color: var(--line); }

/* Knock + andre modaler */
html[data-theme="dark"] .modal-scrim > .modal-sheet { background: var(--surface); }
html[data-theme="dark"] .modal-head { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .modal-body { background: var(--surface); color: var(--ink-2); }
html[data-theme="dark"] .modal-foot { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .knock-template,
html[data-theme="dark"] .knock-textarea,
html[data-theme="dark"] .help-input,
html[data-theme="dark"] .help-textarea,
html[data-theme="dark"] .help-select {
  background: var(--bg-2); color: var(--ink); border-color: var(--line);
}

/* Btn-secondary / btn-outline (hvide knapper) */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline {
  background: var(--surface); color: var(--ink-2); border-color: var(--line);
}
html[data-theme="dark"] .btn-dark { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* Generic nav-btn / icon-btn på hvid baggrund (back chevron mv) */
html[data-theme="dark"] .ch-icon-btn { color: var(--ink-3); }
html[data-theme="dark"] .ch-icon-btn:active { background: var(--bg-2); color: var(--brand); }

/* Min bolig / Mere kort */
html[data-theme="dark"] .mb-section-card,
html[data-theme="dark"] .mb-empty-state,
html[data-theme="dark"] .mb-knock-row,
html[data-theme="dark"] .mb-fav-card,
html[data-theme="dark"] .mb-search-row,
html[data-theme="dark"] .mb-prop-card-lg,
html[data-theme="dark"] .more-toolbox-banner,
html[data-theme="dark"] .mb-toolbox-banner {
  background: var(--surface); border-color: var(--line); color: var(--ink-2);
}
html[data-theme="dark"] .mb-toolbox-banner b,
html[data-theme="dark"] .mb-toolbox-banner span { color: var(--ink); }
html[data-theme="dark"] .seg-tab { background: var(--bg-2); color: var(--ink-3); }
html[data-theme="dark"] .seg-tab.on { background: var(--surface); color: var(--ink); }

/* Search input på kort + filter */
html[data-theme="dark"] .srch { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .srch input { color: var(--ink); }
html[data-theme="dark"] .flt-btn { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
html[data-theme="dark"] .legend-chip { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .map-bottom-card { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .compact-card { background: var(--surface); color: var(--ink-2); border-color: var(--line); }

/* Profil */
html[data-theme="dark"] .profile-hero,
html[data-theme="dark"] .profile-fields-card,
html[data-theme="dark"] .field-row,
html[data-theme="dark"] .pe-chip { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
html[data-theme="dark"] .pe-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Toast */
html[data-theme="dark"] .toast { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* Onboarding (hvid bg → dark surface, men retain hvid CTA) */
html[data-theme="dark"] .ob-card { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
html[data-theme="dark"] .ob-card.on { background: var(--brand-pale); border-color: var(--brand); }

.section-h-small {
  padding: 14px 20px 4px;
  font-family: var(--fd); font-weight: 800; font-size: 16px;
  letter-spacing: -.01em; color: var(--ink);
}

/* Carousel hero */
.bv-carousel {
  position: relative;
  height: 260px;
  background: linear-gradient(135deg, #1A2744, #0C1425);
  flex-shrink: 0;
  overflow: hidden;
}
.bv-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  cursor: zoom-in;
  transition: filter .2s ease;
}
.bv-img.is-blurred { filter: blur(28px); }
.bv-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35));
  pointer-events: none;
}
.bv-top {
  position: absolute; top: max(env(safe-area-inset-top), 12px); left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: center; z-index: 2;
}
.bv-back, .bv-ab {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.bv-back svg, .bv-ab svg { width: 18px; height: 18px; }
.bv-top-actions { display: flex; gap: 8px; }
.bv-ab.on svg { fill: var(--brand); stroke: var(--brand); }
.bv-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.bv-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45);
  transition: width .2s, background .2s;
}
.bv-dots span.on { background: #fff; width: 18px; border-radius: 3px; }
.bv-count {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(12,20,37,.6); color: #fff;
  padding: 4px 9px; border-radius: var(--pill);
  font-family: var(--fd); font-weight: 600; font-size: 11px; z-index: 2;
}

/* Fallback for properties uden billeder — dekorative SVG-shapes */
.bv-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bv-fallback-shapes {
  width: 100%; height: 100%;
}

/* Prev/next chevrons (kun synlige hvis billed-count > 1) */
.bv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  z-index: 2;
  transition: transform .15s var(--ease-out), background .15s;
}
.bv-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.bv-nav svg { width: 16px; height: 16px; }
.bv-prev { left: 12px; }
.bv-next { right: 12px; }

/* Body */
.bv-body { flex: 1; overflow-y: auto; overflow-x: hidden; }

.bv-head { padding: 18px 20px 10px; }
.bv-head .addr {
  font-family: var(--fd); font-weight: 800; font-size: 22px;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
}
.bv-head .city {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-4); margin-top: 2px;
}
.bv-status-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; flex-wrap: wrap;
}

/* Status-pill (over adresse, signal-color baggrund) */
.bv-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.bv-status-pill .d {
  width: 8px; height: 8px; border-radius: 50%;
}
.bv-status-pill.green { background: var(--sig-green-bg); color: #14532D; }
.bv-status-pill.green .d { background: var(--sig-green); }
.bv-status-pill.yellow { background: var(--sig-yellow-bg); color: #713F12; }
.bv-status-pill.yellow .d { background: var(--sig-yellow); }
.bv-status-pill.orange { background: var(--sig-orange-bg); color: #7C2D12; }
.bv-status-pill.orange .d { background: var(--sig-orange); }
.bv-status-pill.grey { background: var(--sig-grey-bg); color: var(--ink-3); }
.bv-status-pill.grey .d { background: var(--sig-grey); }

/* Pris-headline (display tabular nums) */
.bv-price-headline {
  font-family: var(--fd); font-weight: 900; font-size: 30px;
  letter-spacing: -.025em; color: var(--ink);
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* Pris-kort (redesign 22. juni 2026) — DIN PRIS/PRIS + Rediger-link + stor pris.
   Matcher INTERESSE-kortet visuelt. */
.bv-price-card {
  margin: 14px 20px 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.bv-price-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.bv-price-card-label {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.bv-price-card-edit {
  font-family: var(--fd); font-weight: 700; font-size: 14px;
  color: var(--brand-dark);
  background: none; border: none; padding: 4px 2px; cursor: pointer;
}
.bv-price-card-edit:active { opacity: .55; }
.bv-price-card .bv-price-headline { margin-top: 0; font-size: 32px; }

/* INTERESSE stats-row card (ejer-view) */
.bv-interest-card {
  margin: 14px 20px 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.bv-interest-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.bv-interest-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.bv-interest-label .d {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sig-green);
}
.bv-toggle {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
}
.bv-toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; }
.bv-toggle-slider {
  position: absolute; inset: 0;
  background: var(--sig-grey); border-radius: var(--pill);
  transition: background .2s;
}
.bv-toggle-slider::before {
  content: ''; position: absolute;
  left: 2px; top: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  transition: transform .2s;
}
.bv-toggle input:checked + .bv-toggle-slider { background: var(--brand); }
.bv-toggle input:checked + .bv-toggle-slider::before { transform: translateX(18px); }
.bv-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.bv-stat {
  text-align: center;
}
.bv-stat .v {
  font-family: var(--fd); font-weight: 900; font-size: 19px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bv-stat .l {
  font-family: var(--fd); font-weight: 600; font-size: 10px;
  color: var(--ink-4); letter-spacing: .04em;
  text-transform: uppercase; margin-top: 4px;
}

/* 2x2 fact-grid (Energimærke + Boligareal + Værelser + Grund) */
.bv-fact-grid {
  margin: 12px 20px 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.bv-fact {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.bv-fact .l {
  font-family: var(--fd); font-weight: 600; font-size: 10.5px;
  color: var(--ink-4); letter-spacing: .04em;
  text-transform: uppercase;
}
.bv-fact .v {
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
/* Energimærke badge — farve-koded efter klasse.
   Auto-bred så længere labels (A2020/A2015/A2010) passer i ét stykke. */
.energi-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  font-family: var(--fd); font-weight: 900; font-size: 13px;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.energi-badge.a { background: #00713F; }
.energi-badge.b { background: #39A537; }
.energi-badge.c { background: #6E901C; }
.energi-badge.d { background: #C9A800; }
.energi-badge.e { background: #F19320; }
.energi-badge.f { background: #E9621A; }
.energi-badge.g { background: #D8202F; }
.energi-badge.none { background: var(--bg-2); color: var(--ink-5); font-weight: 700; font-size: 13px; }

/* "Mere ejendomsdata" accordion */
.bv-accordion {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  text-align: left;
}
/* Når accordion står alene (uden tilstødende blyant) bevares legacy margin */
.bv-body > .bv-accordion { margin: 12px 20px 0; width: calc(100% - 40px); }
.bv-accordion[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bv-accordion .ic {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--brand-pale); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bv-accordion .t {
  flex: 1; font-family: var(--fd); font-weight: 700; font-size: 14px;
  color: var(--ink-2);
}
.bv-accordion .chev { color: var(--ink-4); transition: transform .2s; flex-shrink: 0; }
.verified {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: #EFF6FF; border-radius: var(--pill);
  font-family: var(--fd); font-weight: 600; font-size: 11px; color: #1D4ED8;
}
.verified svg { width: 12px; height: 12px; }

/* Prices grid */
.bv-prices {
  padding: 18px 20px 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.price-card {
  padding: 14px; border-radius: 14px;
  background: var(--brand-pale); border: 1px solid #86EFAC;
}
.price-card.neutral { background: var(--bg-2); border: 1px solid var(--line); }
.price-card .l {
  font-family: var(--fd); font-weight: 600; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
}
.price-card .v {
  font-family: var(--fd); font-weight: 900; font-size: 19px;
  letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.price-card .s {
  font-family: var(--fb); font-size: 11px; color: var(--ink-4); margin-top: 4px;
}

/* BBR list */
.bv-bbr {
  margin: 8px 20px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.bv-bbr .row {
  display: flex; padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
}
.bv-bbr .row:last-child { border-bottom: 0; }
.bv-bbr .k {
  flex: 1; font-family: var(--fb); font-size: 13px; color: var(--ink-4);
}
.bv-bbr .v {
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.bv-bbr .energi-a { color: #00713F; }
.bv-bbr .energi-b { color: #39A537; }
.bv-bbr .energi-c { color: #6E901C; }
.bv-bbr .energi-d { color: #C9A800; }
.bv-bbr .energi-e { color: #F19320; }
.bv-bbr .energi-f { color: #E9621A; }
.bv-bbr .energi-g { color: #D8202F; }

/* Owner description */
.bv-desc {
  margin: 0 20px;
  padding: 14px;
  background: var(--bg-2);
  border-radius: 14px;
  font-family: var(--fb); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-3);
}
.bv-desc::before {
  content: '"';
  font-family: var(--fd); font-weight: 900; font-size: 36px;
  color: var(--brand);
  line-height: 0; display: block; margin-bottom: 14px;
}

/* Signal explanation */
.bv-signal-expl {
  margin: 14px 20px 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
}
.bv-signal-expl.green {
  border: 1px solid var(--sig-green);
  background: var(--sig-green-bg);
}
.bv-signal-expl.green b, .bv-signal-expl.green span { color: #166534; }
.bv-signal-expl.yellow {
  border: 1px solid var(--sig-yellow);
  background: var(--sig-yellow-bg);
}
.bv-signal-expl.yellow b, .bv-signal-expl.yellow span { color: #854D0E; }
.bv-signal-expl.orange {
  border: 1px solid var(--sig-orange);
  background: var(--sig-orange-bg);
}
.bv-signal-expl.orange b, .bv-signal-expl.orange span { color: #9A3412; }
.bv-signal-expl.grey {
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.bv-signal-expl.grey b, .bv-signal-expl.grey span { color: var(--ink-4); }
.bv-signal-expl .d {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(0,0,0,.05);
}
.bv-signal-expl.green .d  { background: var(--sig-green);  box-shadow: 0 0 0 4px rgba(22,163,74,.2); }
.bv-signal-expl.yellow .d { background: var(--sig-yellow); box-shadow: 0 0 0 4px rgba(234,179,8,.2); }
.bv-signal-expl.orange .d { background: var(--sig-orange); box-shadow: 0 0 0 4px rgba(249,115,22,.2); }
.bv-signal-expl.grey .d   { background: var(--sig-grey);   box-shadow: 0 0 0 4px rgba(156,163,175,.2); }
.bv-signal-expl .t { flex: 1; }
.bv-signal-expl .t b {
  font-family: var(--fd); font-weight: 800; font-size: 13px; display: block;
}
.bv-signal-expl .t span {
  font-family: var(--fb); font-size: 12px; opacity: .85;
}

/* Sticky CTA bar (bottom) */
.bv-cta-bar {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 12px 16px max(env(safe-area-inset-bottom), 14px);
  display: flex; gap: 8px;
}
.bv-cta-bar .btn { flex: 1; height: 48px; font-size: 13.5px; padding: 0 12px; }
.bv-cta-knock {
  background: var(--sig-yellow-bg); color: #854D0E;
  border: 1.5px solid var(--sig-yellow);
}
.bv-cta-direct {
  background: var(--sig-green); color: #fff;
  box-shadow: 0 4px 14px rgba(22,163,74,.3);
}
.bv-cta-direct:active { transform: scale(.98); }

/* ============================================================ MIN BOLIG + PROFIL */

.eyebrow {
  font-family: var(--fd); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
.dash-head {
  padding: 14px 18px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-head h2 {
  font-family: var(--fd); font-weight: 900; font-size: 24px;
  letter-spacing: -.02em; color: var(--ink);
}

/* Signal-status card (ejer-only) */
.mb-signal-card {
  margin: 6px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 14px 12px;
}
.mb-signal-title {
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  color: var(--ink); letter-spacing: -.01em;
}
.mb-signal-sub {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  margin-top: 2px;
}
.mb-radio-row {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.mb-radio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: left;
  width: 100%;
  transition: background .12s, border-color .12s;
}
.mb-radio.on { border-color: var(--brand); background: var(--brand-pale); }
.mb-radio[data-value="curious"].on { border-color: var(--sig-yellow); background: var(--sig-yellow-bg); }
.mb-radio[data-value="ready"].on   { border-color: var(--sig-green);  background: var(--sig-green-bg); }
.mb-radio-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  margin-top: 3px; flex-shrink: 0;
}
.mb-radio-dot.d-yellow { background: var(--sig-yellow); }
.mb-radio-dot.d-green  { background: var(--sig-green); }
.mb-radio-body { flex: 1; min-width: 0; }
.mb-radio-body b {
  font-family: var(--fd); font-weight: 700; font-size: 14px;
  color: var(--ink-2); display: block;
}
.mb-radio-body em {
  font-family: var(--fb); font-style: normal; font-size: 12px;
  color: var(--ink-4); display: block; margin-top: 2px;
}
.mb-signal-save-row {
  display: flex; justify-content: flex-end; margin-top: 12px;
}
.mb-signal-save-row .btn:disabled {
  opacity: .4; cursor: not-allowed; box-shadow: none;
}

/* Property card */
.mb-prop-card {
  margin: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px;
  display: flex; gap: 12px; align-items: center;
}
.mb-prop-thumb {
  width: 56px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #1A2744, #0C1425);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.mb-prop-body { flex: 1; min-width: 0; }
.mb-prop-addr {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-prop-meta {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4); margin-top: 1px;
}
.mb-prop-pill-row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mb-prop-open {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-2); color: var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mb-prop-open svg { width: 16px; height: 16px; }

/* Større genvej til boligvinduet per Jacob session 108 (prototype-tro).
   Thumb og pris vokser; "Åbn"-pill bliver mere indbydende. */
.mb-prop-card-lg {
  padding: 16px;
  gap: 14px;
}
.mb-prop-card-lg .mb-prop-thumb {
  width: 96px; height: 84px; border-radius: 14px;
}
.mb-prop-card-lg .mb-prop-price {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  margin-bottom: 2px;
}
.mb-prop-card-lg .mb-prop-addr { font-size: 15px; }
.mb-prop-card-lg .mb-prop-meta { font-size: 12.5px; margin-top: 2px; }
.mb-prop-card-lg .mb-prop-stats {
  margin-top: 10px; gap: 16px;
}
.mb-prop-card-lg .mb-prop-stats .mp-stat { font-size: 12px; }
.mb-prop-card-lg .mb-prop-open {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-pale); color: var(--brand-dark);
}
.mb-prop-card-lg .mb-prop-open svg { width: 18px; height: 18px; }

/* KPI grid */
.mb-kpi-grid {
  margin: 0 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mb-kpi {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
}
.mb-kpi .l {
  font-family: var(--fd); font-weight: 600; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4);
}
.mb-kpi .v {
  font-family: var(--fd); font-weight: 900; font-size: 22px;
  letter-spacing: -.02em; color: var(--ink); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Property-card: pris-headline + stats-row (Min bolig ejer prototype-tro) */
.mb-prop-price {
  font-family: var(--fd); font-weight: 900; font-size: 17px;
  color: var(--ink); margin-bottom: 1px;
  font-variant-numeric: tabular-nums;
}
.mb-prop-stats {
  display: flex; gap: 14px; margin-top: 8px;
}
.mb-prop-stats .mp-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.mb-prop-stats .mp-stat svg { color: var(--ink-5); flex-shrink: 0; }

/* mb-row-card: køberkartotek / prissætning / vedligehold (Min bolig ejer) */
.mb-row-card {
  margin: 8px 14px 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
  width: calc(100% - 28px);
  text-align: left;
  transition: border-color .15s;
}
.mb-row-card:hover { border-color: var(--ink-5); }
.mb-row-card .mr-ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-pale); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mb-row-card .mr-ic.mr-ic-pale {
  background: var(--brand-pale); color: var(--brand-dark);
}
.mb-row-card .mr-ic.mr-ic-grey {
  background: var(--sig-grey-bg); color: var(--ink-4);
}
.mb-row-card .mr-body { flex: 1; min-width: 0; }
.mb-row-card .mr-body b {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2); display: block;
}
.mb-row-card .mr-body span {
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4); display: block;
  margin-top: 1px;
}
.mb-row-card .mr-chev { color: var(--ink-5); flex-shrink: 0; }

/* Værktøjskasse-banner — orange warm-accent CTA (BÅDE ejer + søger) */
.mb-toolbox-banner {
  margin: 12px 14px 0;
  background: var(--warm-gradient);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; gap: 14px; align-items: center;
  width: calc(100% - 28px);
  color: #fff;
  text-align: left;
  box-shadow: var(--warm-glow);
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.mb-toolbox-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(249,115,22,.36);
}
.mb-toolbox-banner .mt-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff;
}
.mb-toolbox-banner .mt-body { flex: 1; }
.mb-toolbox-banner .mt-body b {
  font-family: var(--fd); font-weight: 800; font-size: 15px; display: block;
}
.mb-toolbox-banner .mt-body span {
  font-family: var(--fb); font-size: 12.5px; color: rgba(255,255,255,.88);
  display: block; margin-top: 1px;
}
.mb-toolbox-banner .mt-chev { color: rgba(255,255,255,.85); flex-shrink: 0; }

/* Værktøjskasse-modal (3 kategorier: Kontakt / Skal du købe / Skal du sælge) */
.tb-sheet { padding-bottom: max(16px, env(safe-area-inset-bottom)); position: relative; }
.tb-sheet .modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 34px; height: 34px; font-size: 20px;
}
.tb-head { padding: 14px 22px 2px; }
/* Aktiv view scroller når indholdet overstiger sheet-højden (fx 5 kort i Skal du købe).
   close/back-knapperne er position:absolute på .tb-sheet, så de forbliver fastlåst. */
#tbMenuView, #tbKontaktView, #tbKoebView, #tbSaelgView {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.tb-eyebrow {
  font-family: var(--fd); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--warm); margin-bottom: 6px;
}
.tb-title {
  font-family: var(--fd); font-weight: 800; font-size: 23px;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.15;
}
.tb-sub {
  font-family: var(--fb); font-size: 14px; color: var(--ink-4);
  margin-top: 6px; line-height: 1.45;
}
.tb-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tb-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tb-item:hover { box-shadow: 0 4px 14px rgba(12,20,37,.08); }
.tb-item:active { transform: scale(.99); border-color: var(--warm); }
.tb-ic {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: var(--warm-pale); color: var(--warm);
  display: flex; align-items: center; justify-content: center;
}
.tb-body { flex: 1; min-width: 0; }
.tb-body b {
  font-family: var(--fd); font-weight: 800; font-size: 16px;
  color: var(--ink); display: block;
}
.tb-body span {
  font-family: var(--fb); font-size: 13px; color: var(--ink-4);
  display: block; margin-top: 2px; line-height: 1.35;
}
.tb-chev { color: var(--warm); flex-shrink: 0; }

/* Værktøjskasse-detalje (fx Kontakt): back-knap + produkt-kort + køb-knapper */
.tb-back {
  position: absolute; top: 14px; left: 16px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tb-back:active { background: var(--line); }
/* Detalje-head skubbes ned så eyebrow ikke ligger under back/luk-knapperne */
.tb-head-detail { padding-top: 52px; }
.tb-products { padding: 8px 16px 4px; display: flex; flex-direction: column; gap: 14px; }
.tb-product {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-xs); padding: 16px;
}
.tb-product-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.tb-product-info { flex: 1; min-width: 0; }
.tb-product-name {
  font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--ink);
}
.tb-product-desc {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-4);
  margin-top: 3px; line-height: 1.4;
}
.tb-product-meta {
  font-family: var(--fb); font-style: italic; font-size: 12.5px;
  color: var(--ink-5); margin-top: 6px;
}
.tb-product-save {
  font-family: var(--fb); font-weight: 600; font-size: 12.5px;
  color: var(--brand); margin-top: 8px; line-height: 1.45;
}
.tb-product-save b { font-weight: 800; }
/* Kontakt-kort med fuld tekst inline (ingen "Se mere") */
.tb-card-tagline {
  font-family: var(--fb); font-weight: 600; font-size: 13.5px;
  color: var(--ink-2); margin: 12px 0 10px; line-height: 1.45;
}
.tb-card-list { list-style: none; margin: 0 0 10px; padding: 0; }
.tb-card-list li {
  position: relative; padding-left: 20px; margin-bottom: 7px;
  font-family: var(--fb); font-size: 13px; color: var(--ink-3); line-height: 1.45;
}
.tb-card-list li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.tb-card-list li:last-child { margin-bottom: 0; }
.tb-card-summary {
  font-family: var(--fb); font-style: italic; font-size: 12.5px;
  color: var(--ink-4); margin: 0 0 12px; line-height: 1.4;
}
.tb-product-price {
  font-family: var(--fd); font-weight: 800; font-size: 19px; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
/* "inkl. moms" under kort-prisen (Kontakt har egen meta-linje, derfor kun købe/sælge) */
#tbKoebView .tb-product-price::after,
#tbSaelgView .tb-product-price::after {
  content: 'inkl. moms';
  display: block; text-align: right;
  font-family: var(--fb); font-weight: 500; font-size: 11px;
  color: var(--ink-5); margin-top: 2px;
}
.tb-buy-btn {
  width: 100%; padding: 14px; border: none; border-radius: var(--r-md);
  background: var(--warm-gradient); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  cursor: pointer; box-shadow: var(--warm-glow);
  transition: transform .12s var(--ease-out), box-shadow .15s;
}
.tb-buy-btn:active { transform: scale(.99); }
/* "Se mere"-knap på hvert kort — sekundær, over den primære Køb/Book-knap */
.tb-more-btn {
  width: 100%; padding: 11px; margin-bottom: 8px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--ink-2);
  font-family: var(--fd); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.tb-more-btn:active { background: var(--bg-2); border-color: var(--ink-5); }
/* "Se mere"-detaljeside (én genbrugelig view, fyldes dynamisk) */
.tb-detail-wrap { padding: 8px 16px 4px; }
.tb-detail-price {
  font-family: var(--fd); font-weight: 800; font-size: 24px;
  color: var(--ink); margin-bottom: 14px;
}
.tb-detail-price::after {
  content: ' inkl. moms';
  font-family: var(--fb); font-weight: 600; font-size: 13px; color: var(--ink-4);
}
.tb-detail-body {
  font-family: var(--fb); font-size: 14px; color: var(--ink-3);
  line-height: 1.6; margin-bottom: 18px; white-space: pre-line;
}
.tb-detail-placeholder {
  font-style: italic; color: var(--ink-5);
}
/* Fælles intro øverst på alle detalje-sider */
.tb-detail-intro {
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.tb-intro-lead {
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  color: var(--ink); line-height: 1.45; margin: 0;
}
.tb-intro-indep {
  font-family: var(--fb); font-weight: 600; font-size: 13px;
  color: var(--ink-2); margin: 10px 0 0;
}
.tb-intro-cred {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  line-height: 1.5; margin: 4px 0 0;
}
/* "Købt eller gratis."-badge */
.tb-detail-badge {
  display: inline-block; margin-bottom: 12px;
  background: var(--brand); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 12px;
  padding: 5px 12px; border-radius: var(--pill, 999px);
}
/* Punktliste i detalje-body */
.tb-detail-list { list-style: none; margin: 0 0 18px; padding: 0; }
.tb-detail-list li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
  font-family: var(--fb); font-size: 14px; color: var(--ink-3); line-height: 1.5;
}
.tb-detail-list li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.tb-detail-list li:last-child { margin-bottom: 0; }
/* Grøn value-tekst nederst (venstre brand-accent) */
.tb-detail-green {
  border-left: 3px solid var(--brand); padding: 2px 0 2px 12px;
  margin-bottom: 18px;
  font-family: var(--fb); font-weight: 600; font-size: 13.5px;
  color: var(--brand); line-height: 1.5;
}
/* Rig detalje-body: afsnit, overskrift, "Vidste du?"-callout */
.tb-detail-p {
  font-family: var(--fb); font-size: 14px; color: var(--ink-3);
  line-height: 1.6; margin: 0 0 12px;
}
.tb-detail-h {
  font-family: var(--fd); font-weight: 800; font-size: 14.5px;
  color: var(--ink); margin: 4px 0 10px;
}
.tb-detail-dyk {
  background: var(--bg-2); border-radius: var(--r-md);
  padding: 12px 14px; margin: 0 0 16px;
}
.tb-detail-dyk-h {
  font-family: var(--fd); font-weight: 800; font-size: 13px;
  color: var(--brand); margin-bottom: 4px;
}
.tb-detail-dyk-p {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-3);
  line-height: 1.5; margin: 0;
}

/* Segment-tabs (Mine anmodninger: Afventer / Accept / Afvist) */
.seg-tabs {
  margin: 8px 14px 0;
  display: flex; gap: 6px;
  background: var(--bg-2);
  padding: 4px; border-radius: var(--pill);
}
.seg-tab {
  flex: 1; height: 36px; padding: 0 12px;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, color .15s;
}
.seg-tab.on {
  background: var(--ink); color: #fff;
}
.seg-tab .seg-cnt {
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* Status-gradient på seg-tabs (Søger Min bolig: Afventer/Accept/Afvist).
   Når aktiv (.on) får tab en signal-farve gradient per Jacob session 108. */
.seg-tabs-status .seg-tab.on.st-pending {
  background: linear-gradient(135deg, #EAB308 0%, #FBBF24 100%);
  color: #422006;
  box-shadow: 0 2px 6px -2px rgba(234, 179, 8, .55);
}
.seg-tabs-status .seg-tab.on.st-accept {
  background: linear-gradient(135deg, #16A34A 0%, #22C55E 100%);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(22, 163, 74, .55);
}
.seg-tabs-status .seg-tab.on.st-decline {
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(220, 38, 38, .55);
}
.seg-hint {
  margin: 8px 18px 0;
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-4); line-height: 1.45;
}

/* Gemt-bolig card (søger Min bolig) */
.mb-fav-card {
  margin: 8px 14px 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; gap: 12px; align-items: center;
}
.mb-fav-card .ft {
  width: 48px; height: 48px; border-radius: 10px;
  background: linear-gradient(135deg, #1A2744, #0C1425);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.mb-fav-card .fb { flex: 1; min-width: 0; }
.mb-fav-card .fb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fd); font-weight: 700; font-size: 11px;
  color: var(--ink-3); margin-bottom: 2px;
}
.mb-fav-card .fb-pill .fd { width: 6px; height: 6px; border-radius: 50%; background: var(--sig-green); }
.mb-fav-card .fb-addr {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-fav-card .fb-meta {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4); margin-top: 1px;
}

/* "Boliger der matcher dig"-cards i samme kompakte banner-størrelse som Værktøjskassen */
.mb-match-card { padding: 14px 16px; gap: 14px; }
.mb-match-card .ft { width: 44px; height: 44px; border-radius: 12px; }
.mb-match-card .fb-addr { font-size: 15px; }
.mb-match-card .fb-meta {
  font-size: 12.5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Cards venstrestillet + fuld bredde via flex-stretch i listerne (matcher banner-bredde,
   respekterer 14px side-margin — modsat width:100% der ville overflowe) */
.mb-fav-card .fb { text-align: left; }
#mbMatchesList, #mbFavoritesList { display: flex; flex-direction: column; }

/* Søger Min bolig fylder højden, så Værktøjskassen pinnes til bunden (thumb-zone).
   .app bruger min-height (ikke height), så % løser ikke — brug samme calc som kort-viewet. */
.view[data-view="min-bolig"].active {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 56px - 82px);
}
#mbSeekerWrap:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; }
#mbSeekerWrap .mb-toolbox-banner { margin-top: auto; }

/* Knock-row (Mine anmodninger - status-rows) */
.mb-knock-row {
  margin: 8px 14px 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px;
  display: flex; gap: 12px; align-items: center;
  text-align: left;
  width: calc(100% - 28px);
}
.mb-knock-row .kt {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #1A2744, #0C1425);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.mb-knock-row .kb { flex: 1; min-width: 0; }
.mb-knock-row .kb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--fd); font-weight: 700; font-size: 11px;
  color: var(--ink-3); margin-bottom: 2px;
}
.mb-knock-row .kb-pill .kd { width: 6px; height: 6px; border-radius: 50%; }
.mb-knock-row .kb-pill.pending .kd { background: var(--sig-yellow); }
.mb-knock-row .kb-pill.accepted .kd { background: var(--sig-green); }
.mb-knock-row .kb-pill.declined .kd { background: var(--sig-red); }
.mb-knock-row .kb-addr {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-knock-row .kb-meta {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4); margin-top: 1px;
}

/* Empty-state (gemte boliger søger uden favoritter) */
.mb-empty-fav {
  margin: 8px 14px 0;
  padding: 28px 18px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  text-align: center;
}
.mb-empty-fav .ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-5);
  margin-bottom: 10px;
}
.mb-empty-fav b {
  display: block; font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink);
  margin-bottom: 4px;
}
.mb-empty-fav span {
  font-family: var(--fb); font-size: 12.5px; color: var(--ink-4); line-height: 1.5;
}

/* ============================================================ PROFIL */
.p-hero {
  background: linear-gradient(135deg, var(--brand-pale), var(--bg-surface));
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
}
.p-avatar {
  position: relative;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: var(--sh);
}
.p-avatar-edit {
  position: absolute; bottom: -2px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
}
.p-avatar-edit svg { width: 12px; height: 12px; }
.p-name {
  font-family: var(--fd); font-weight: 800; font-size: 20px;
  color: var(--ink); letter-spacing: -.01em;
}
.p-role {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 11px; color: var(--ink-2);
}
.p-role .d { width: 7px; height: 7px; border-radius: 50%; background: var(--sig-green); }
.p-role.is-seeker .d { background: var(--sig-orange); }
.p-edit-cta {
  margin-top: 6px;
  width: 100%; max-width: 320px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* Profil-færdiggørelse (item 5) */
.p-complete { margin: 4px 14px 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.p-complete-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.p-complete-top b { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink); }
.p-complete-top span { font-family: var(--fb); font-size: 12px; color: var(--ink-4); }
.p-complete-bar { margin-top: 8px; height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.p-complete-bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand-gradient, var(--brand)); transition: width .35s ease; }
.p-complete-missing { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.p-miss-chip { background: var(--brand-pale); color: var(--brand-dark); border: 1px solid var(--brand); border-radius: 99px; padding: 5px 11px; font-family: var(--fd); font-weight: 700; font-size: 12px; cursor: pointer; }
.rs-lead { font-family: var(--fb); font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; }

/* Inline-fields */
.p-fields { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.field-row {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  text-align: left; width: 100%;
}
.field-row .l {
  font-family: var(--fd); font-weight: 600; font-size: 11px; color: var(--ink-4);
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
}
.field-row .v {
  font-family: var(--fb); font-size: 14px; color: var(--ink-2);
  word-break: break-word;
}
.field-row .v.empty-val { color: var(--ink-5); }
.field-row svg { width: 16px; height: 16px; color: var(--ink-5); flex-shrink: 0; }
.verified-mini {
  font-family: var(--fd); font-weight: 700; font-size: 9.5px;
  color: var(--sig-green); text-transform: none; letter-spacing: 0;
}

/* Venteliste (søger): postnr-chips man vælger til/fra */
.wl-note {
  padding: 0 14px 4px; font-family: var(--fb); font-size: 13px;
  color: var(--ink-4); line-height: 1.45;
}
.wl-chips {
  padding: 4px 14px 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.wl-chips:empty { padding: 0; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 8px 7px 13px;
  font-family: var(--fb); font-size: 14px; color: var(--ink-2);
}
.wl-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-4);
  font-size: 15px; line-height: 1; cursor: pointer; border: none;
  flex-shrink: 0;
}
.wl-chip-x:active { background: var(--sig-orange); color: #fff; }
.wl-empty {
  padding: 2px 14px 0; font-family: var(--fb); font-size: 13px; color: var(--ink-5);
}
.wl-add { padding: 12px 14px 4px; display: flex; gap: 8px; }
.wl-input {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-family: var(--fb); font-size: 14px; color: var(--ink);
}
.wl-input:focus { outline: none; border-color: var(--brand); }
.wl-add-btn {
  flex-shrink: 0; background: var(--ink); color: var(--surface);
  border: none; border-radius: 12px; padding: 11px 18px;
  font-family: var(--fd); font-weight: 600; font-size: 14px; cursor: pointer;
}
.wl-add-btn:disabled { opacity: .5; }

/* "+"-knap i Min bolig-header (tilføj flere ejendomme) */
.mb-add-btn {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: var(--ink); color: var(--surface); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mb-add-btn svg { width: 20px; height: 20px; }
.mb-add-btn:active { opacity: .85; }

/* Besked-valg (ejer): åbn besked / se profil */
.mc-body { display: flex; flex-direction: column; gap: 10px; }
.mc-option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; text-align: left; cursor: pointer;
}
.mc-option:active { background: var(--bg-2); }
.mc-option svg { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; }
.mc-t { font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--ink); }
.mc-s { font-family: var(--fb); font-size: 13px; color: var(--ink-4); margin-top: 2px; }

/* Søger-profil-sheet (ejer ser Din søgning-felter) */
.spw-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.spw-av {
  width: 52px; height: 52px; border-radius: 999px; flex-shrink: 0;
  background: var(--bg-2) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--ink-3);
}
.spw-name { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--ink); }
.spw-sub { font-family: var(--fb); font-size: 13px; color: var(--ink-4); margin-top: 2px; }
.spw-bio {
  font-family: var(--fb); font-size: 14px; color: var(--ink-2); line-height: 1.5;
  background: var(--bg-2); border-radius: 12px; padding: 10px 13px; margin-bottom: 12px;
}
.spw-h {
  font-family: var(--fd); font-weight: 700; font-size: 11px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px;
}
.spw-rows { display: flex; flex-direction: column; gap: 6px; }
.spw-row {
  display: flex; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px;
}
.spw-row .l { font-family: var(--fb); font-size: 13px; color: var(--ink-4); flex-shrink: 0; }
.spw-row .v { font-family: var(--fb); font-size: 13px; color: var(--ink); text-align: right; }
.spw-empty { font-family: var(--fb); font-size: 13px; color: var(--ink-5); }

/* Gate 2: gratis-note i Værktøjskassens Kontakt-fane (billing slukket) */
.tb-free-note {
  margin: 4px 16px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-family: var(--fb); font-size: 14px;
  color: var(--ink-2); line-height: 1.5;
}

/* Kartotek kontakt-besked */
.ktc-textarea {
  width: 100%; resize: vertical; min-height: 110px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; font-family: var(--fb); font-size: 14px; color: var(--ink);
}
.ktc-textarea:focus { outline: none; border-color: var(--brand); }

/* Email soft-verify notice — amber-tint virker på både lys og mørk baggrund */
.email-verify-notice {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 10px 12px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 12px;
}
.email-verify-notice svg { width: 16px; height: 16px; color: var(--warm-2); flex-shrink: 0; }
.email-verify-notice .evn-txt {
  flex: 1; font-family: var(--fb); font-size: 12.5px; color: var(--ink-2); line-height: 1.3;
}
.email-verify-btn {
  flex-shrink: 0; font-family: var(--fd); font-weight: 700; font-size: 12px;
  color: #fff; background: var(--warm-2); border: none; border-radius: 9px;
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
  transition: filter .15s, opacity .15s;
}
.email-verify-btn:hover { filter: brightness(1.05); }
.email-verify-btn:disabled { opacity: .6; cursor: default; }

/* Toggle row */
.toggle-row {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.toggle-row .t { flex: 1; }
.toggle-row .t b { font-family: var(--fd); font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.toggle-row .t span { font-family: var(--fb); font-size: 12px; color: var(--ink-4); display: block; margin-top: 1px; }
.toggle {
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--line); position: relative; flex-shrink: 0;
  cursor: pointer;
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: all .2s;
}
.toggle.on { background: var(--brand); }
.toggle.on::after { left: 21px; }

/* Danger button */
.danger-btn {
  width: 100%; height: 46px;
  border: 1.5px solid var(--sig-red); border-radius: 12px;
  font-family: var(--fd); font-weight: 700; font-size: 14px;
  color: var(--sig-red); background: transparent;
}

/* Slet-konto modal (B2) */
.del-warn {
  font-family: var(--fb); font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.del-confirm-btn { background: var(--sig-red); color: #fff; }
.del-list { margin: 0 0 12px; padding-left: 18px; font-family: var(--fb); font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.del-soft { font-family: var(--fb); font-size: 12.5px; color: var(--ink-4); margin: 0; }
.del-thanks { font-family: var(--fb); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 14px; }
.del-reasons { display: flex; flex-direction: column; gap: 8px; }
.del-reason {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  font-family: var(--fd); font-weight: 600; font-size: 14px; color: var(--ink-2);
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.del-reason input[type="radio"] {
  flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; margin: 0;
  accent-color: var(--brand); cursor: pointer;
}
.del-reason span { flex: 1 1 auto; }
.del-reason:hover { border-color: var(--brand); }
.del-reason:has(input:checked) { border-color: var(--brand); background: var(--brand-pale); color: var(--brand-dark); }
.del-reason:has(input:checked) { border-color: var(--brand); background: var(--brand-pale); }
#deleteReason {
  width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: var(--fb); font-size: 14px; background: var(--surface); color: var(--ink-2);
}

/* Modal scrim + sheet (bottom sheet) */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12,20,37,.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-sheet {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  max-height: 88vh;
  animation: modalSlideUp .28s var(--ease) both;
}
@keyframes modalSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.modal-grab {
  width: 36px; height: 4px;
  background: var(--line); border-radius: 2px;
  margin: 10px auto 0; flex-shrink: 0;
}
.modal-head {
  padding: 12px 20px 8px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-head h3 {
  font-family: var(--fd); font-weight: 800; font-size: 18px;
  letter-spacing: -.01em; color: var(--ink);
}
.modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-3);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.modal-body {
  padding: 4px 20px 8px;
  overflow-y: auto; flex: 1;
}
.modal-body .field-label {
  font-family: var(--fd); font-weight: 600; font-size: 12px;
  color: var(--ink-4); letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 6px; margin-top: 12px;
}
.modal-body input, .modal-body textarea, .modal-body select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: var(--fb); font-size: 15px; color: var(--ink-2);
  outline: none;
}
.modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus {
  border-color: var(--brand);
  background: #fff;
}
.modal-body textarea { resize: vertical; min-height: 80px; font-family: var(--fb); }
.modal-body .field-helper {
  font-family: var(--fb); font-size: 11px; color: var(--ink-4); margin-top: 4px;
}
.modal-foot {
  padding: 12px 20px max(env(safe-area-inset-bottom), 16px);
  border-top: 1px solid var(--line);
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.modal-foot .btn { flex: 1; height: 44px; font-size: 14px; }

/* ============================================================ BESKEDER (thread-list) */
.ml-head {
  padding: 10px 18px 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.ml-head h2 {
  font-family: var(--fd); font-weight: 900; font-size: 26px;
  letter-spacing: -.02em; color: var(--ink); margin-top: 2px;
}
.ml-help-pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1.5px solid var(--brand);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--brand-dark);
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  margin-top: 6px;
}
.ml-help-pill:hover { background: var(--brand-pale); }
/* Svag puls hver 5. sekund — trækker øjet mod "Få hjælp" (Jacob) */
@keyframes mlHelpPulse {
  0%, 82%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  90%           { transform: scale(1.06); box-shadow: 0 0 0 5px rgba(22,163,74,.16); }
  97%           { transform: scale(1);    box-shadow: 0 0 0 9px rgba(22,163,74,0); }
}
.ml-help-pill { animation: mlHelpPulse 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ml-help-pill { animation: none; } }
.ml-segment {
  display: flex; gap: 4px;
  background: var(--bg-2);
  margin: 0 14px 8px;
  padding: 4px; border-radius: var(--pill);
}
.ml-tab {
  flex: 1; height: 36px; padding: 0 14px;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  color: var(--ink-4); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, color .15s;
}
.ml-tab.on { background: var(--ink); color: #fff; }
.ml-tab-cnt {
  font-variant-numeric: tabular-nums; opacity: .85;
}

.ml-row {
  display: flex; gap: 12px; padding: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line-2);
  text-align: left; width: 100%; background: transparent;
}
.ml-row.unread { background: rgba(240, 253, 244, .55); }
.ml-row .av-wrap { position: relative; flex-shrink: 0; }
.ml-row .av {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #2D3E66, #1A2744);
  color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.ml-row .av.av-sig-yellow { background: var(--sig-yellow); color: #fff; }
.ml-row .av.av-sig-green  { background: var(--sig-green);  color: #fff; }
.ml-row .av.av-sig-orange { background: var(--sig-orange); color: #fff; }
.ml-row .av.av-sig-grey   { background: linear-gradient(135deg, #2D3E66, #1A2744); color: #fff; }
/* Messenger-style: property-thumbnail som avatar — bevarer signal-farve som tynd ring */
.ml-row .av.has-img {
  background-size: cover; background-position: center;
  color: transparent; font-size: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}
.ml-row .av.has-img.av-sig-yellow { color: var(--sig-yellow); }
.ml-row .av.has-img.av-sig-green  { color: var(--sig-green); }
.ml-row .av.has-img.av-sig-orange { color: var(--sig-orange); }
.ml-row .av.has-img.av-sig-grey   { color: transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.ml-row .sd {
  position: absolute; bottom: -1px; right: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid var(--bg);
}
.ml-row .body { flex: 1; min-width: 0; }
.ml-row .line1 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.ml-row .name {
  font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-row .time {
  font-family: var(--fb); font-size: 11px; color: var(--ink-5); flex-shrink: 0;
}
.ml-row .prop {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  margin: 2px 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ml-row .prev {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ml-row .msg {
  font-family: var(--fb); font-size: 13px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.ml-row.unread .msg { color: var(--ink-2); font-weight: 600; }
.ml-row .un {
  flex-shrink: 0; background: var(--brand); color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 10px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ml-row .status-tag {
  flex-shrink: 0;
  font-family: var(--fd); font-weight: 700; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--pill);
  background: var(--bg-2); color: var(--ink-4);
}
.ml-row .status-tag.accepted { background: var(--sig-green-bg); color: #166534; }
.ml-row .status-tag.rejected { background: var(--sig-red-bg);   color: #991B1B; }
.ml-row .status-tag.pending  { background: var(--sig-yellow-bg); color: #854D0E; }
.ml-row .status-tag.unread   { background: var(--sig-yellow-bg); color: #854D0E; }
.ml-row .status-tag.new      { background: var(--brand); color: #fff; }
.ml-row .status-tag.sent     { background: var(--bg-2); color: var(--ink-4); }
.ml-row .status-tag.read     { background: var(--sig-green-bg); color: #166534; }

/* Swipe-to-skjul: træk en samtale til venstre → "Skjul"-knap dukker op bagved */
.ml-swipe { position: relative; overflow: hidden; background: var(--surface); }
.ml-swipe .ml-del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 92px; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: var(--sig-red); color: #fff; cursor: pointer;
  font-family: var(--fd); font-weight: 700; font-size: 12px;
}
.ml-swipe .ml-del svg { width: 18px; height: 18px; }
.ml-swipe .ml-row {
  position: relative; z-index: 1; background: var(--surface);
  will-change: transform; touch-action: pan-y;
}
.ml-swipe .ml-row.unread {
  background: linear-gradient(0deg, rgba(240,253,244,.55), rgba(240,253,244,.55)), var(--surface);
}
.ml-swipe.removing { transition: height .22s ease, opacity .22s ease; }

/* ============================================================ SUB-PAGE (FAQ + LEGAL) */
.sub-page {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 70;
  flex-direction: column;
  overflow-y: auto;
}
.sub-page.active { display: flex; }
.sp-head {
  position: sticky; top: 0;
  background: var(--bg);
  padding: 14px 18px 10px;
  z-index: 2;
}
.sp-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.sp-back svg { width: 14px; height: 14px; }
.sp-body { padding: 0 22px 32px; }
.sp-eyebrow {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.sp-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.sp-eyebrow .lbl {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark, var(--brand));
}
.sp-h1 {
  font-family: var(--fd); font-weight: 900; font-size: 26px;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.sp-sub {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-3);
  margin-top: 6px; line-height: 1.5;
}

/* Mine køb (#koeb) */
.koeb-status {
  margin-top: 18px; padding: 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.koeb-status .ks-badge {
  align-self: flex-start;
  font-family: var(--fd); font-weight: 800; font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 4px;
}
.koeb-status b { font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--ink); }
.koeb-status span { font-family: var(--fb); font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.koeb-status--on { border-color: var(--brand); background: var(--brand-pale); }
.koeb-status--on .ks-badge { background: var(--brand); color: #fff; }
.koeb-status--off .btn { align-self: flex-start; margin-top: 10px; }
.koeb-hist-h {
  font-family: var(--fd); font-weight: 800; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4);
  margin: 26px 0 10px;
}
.koeb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); margin-bottom: 8px;
}
.koeb-item .ki-main { flex: 1; min-width: 0; }
.koeb-item .ki-main b { font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2); display: block; }
.koeb-item .ki-main span { font-family: var(--fb); font-size: 12px; color: var(--ink-4); display: block; margin-top: 2px; }
.koeb-item .ki-amt { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink); flex-shrink: 0; }
.koeb-empty {
  padding: 18px 14px; border: 1px dashed var(--line); border-radius: 12px;
  font-family: var(--fb); font-size: 13px; color: var(--ink-4); text-align: center;
}
/* Statisk række (ingen klik/hover) — fx push-toggle-rækken */
.more-row-static { cursor: default; }
.more-row-static:hover { border-color: var(--line); }
.sp-section-head {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 8px;
}
.sp-section-head .ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--brand-pale); color: var(--brand-dark, var(--brand));
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-section-head .ic svg { width: 15px; height: 15px; }
.sp-section-head .ttl {
  font-family: var(--fd); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}

/* FAQ accordion */
.sp-faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 8px;
}
.sp-faq-item summary {
  list-style: none; padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-family: var(--fd); font-weight: 700; font-size: 13.5px;
  color: var(--ink); line-height: 1.45;
}
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary .q { flex: 1; }
.sp-faq-item .chev {
  width: 16px; height: 16px;
  color: var(--ink-4);
  transition: transform .25s ease;
  flex-shrink: 0; margin-top: 2px;
}
.sp-faq-item[open] .chev { transform: rotate(180deg); }
.sp-faq-item .ans {
  padding: 0 16px 16px;
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-3);
  line-height: 1.6; white-space: pre-line;
}

.sp-contact-cta {
  width: 100%; height: 48px; border-radius: 12px;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--brand-glow);
  border: 0;
  margin-top: 18px;
}

/* Legal tabs */
.sp-legal-tabs {
  display: flex; gap: 4px;
  padding: 4px 0 8px;
}
.sp-legal-tab {
  flex: 1; height: 36px;
  border-radius: var(--pill);
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  background: transparent; color: var(--ink-4);
  border: 0;
}
.sp-legal-tab.on { background: var(--ink); color: #fff; }
.sp-updated {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  margin-top: 6px;
}
.sp-legal-section { margin-bottom: 20px; }
.sp-legal-section h2,
.sp-legal-section h3,
.sp-legal-section h4 {
  font-family: var(--fd); font-weight: 900;
  letter-spacing: -.01em; color: var(--ink);
  margin: 0 0 8px;
}
.sp-legal-section h2 { font-size: 17px; }
.sp-legal-section h3 { font-size: 14.5px; font-weight: 800; }
.sp-legal-section h4 { font-size: 13.5px; font-weight: 800; }
.sp-legal-section p,
.sp-legal-section li {
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-2);
  line-height: 1.6;
}
.sp-legal-section p { margin: 0 0 10px; }
.sp-legal-section ul {
  margin: 0 0 10px;
  padding-left: 22px;
}
.sp-legal-section li { margin-bottom: 4px; }
.sp-legal-section .after {
  font-size: 13px; color: var(--ink-3); line-height: 1.55;
  margin: 0 0 10px;
}
.sp-legal-table-wrap {
  overflow: hidden; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 10px;
}
.sp-legal-table-wrap table {
  width: 100%; border-collapse: collapse;
  font-family: var(--fb); font-size: 12px; color: var(--ink-2);
}
.sp-legal-table-wrap th {
  text-align: left; padding: 10px 12px;
  background: var(--bg-2);
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.sp-legal-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  line-height: 1.45; vertical-align: top;
}

/* ============================================================ CHAT-TRÅD */
.chat-view {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 70;
  flex-direction: column;
}
.chat-view.active { display: flex; }

.ch-head {
  flex-shrink: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: max(env(safe-area-inset-top), 8px) 12px 10px;
  display: flex; align-items: center; gap: 10px;
}
.ch-back {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.ch-back svg { width: 18px; height: 18px; }
.ch-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #2D3E66, #1A2744);
  color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
}
.ch-av .sd {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sig-green); border: 2px solid #fff;
}
.ch-info { flex: 1; min-width: 0; }
.ch-info .n {
  font-family: var(--fd); font-weight: 700; font-size: 14px;
  color: var(--ink-2); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-info .s {
  font-family: var(--fb); font-size: 11px; color: var(--ink-4); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Chat-header actions: "Brug for hjælp" + gem-søger-hjerte (Jacob 21/6) */
.ch-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ch-help-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: var(--pill);
  background: var(--brand-pale); color: var(--brand);
  border: 1px solid var(--brand-50);
  font-family: var(--fd); font-weight: 700; font-size: 12px; white-space: nowrap;
}
.ch-help-btn:active { background: var(--brand-50); }
.ch-heart {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--ink-4); border: 1px solid var(--line);
}
.ch-heart svg { width: 20px; height: 20px; }
.ch-heart.on { background: var(--sig-red-bg); color: var(--sig-red); border-color: transparent; }
.ch-heart.on svg { fill: var(--sig-red); }

/* Sub-page titel/intro (køberkartotek m.fl.) */
.sp-title { font-family: var(--fd); font-weight: 900; font-size: 24px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 4px; }
.sp-intro { font-family: var(--fb); font-size: 13px; color: var(--ink-4); margin-bottom: 16px; }

/* Køberkartotek-side (gemte søgere) */
.kt-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 12px; box-shadow: var(--sh-xs);
}
.kt-top { display: flex; align-items: center; gap: 12px; }
.kt-av {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gradient); color: #fff; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 800; font-size: 16px;
}
.kt-name { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink); }
.kt-sub { font-family: var(--fb); font-size: 12.5px; color: var(--ink-4); margin-top: 2px; }
.kt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kt-chip { font-family: var(--fd); font-weight: 600; font-size: 11.5px; color: var(--ink-3); background: var(--bg-2); padding: 4px 9px; border-radius: var(--pill); }
.kt-actions { display: flex; gap: 8px; margin-top: 12px; }
.kt-actions .btn { flex: 1; height: 38px; font-size: 13px; }
.kt-notes { font-family: var(--fb); font-size: 12.5px; color: var(--ink-3); background: var(--bg-2); border-radius: var(--r); padding: 8px 10px; margin-top: 10px; }

.ch-body {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ch-loading {
  text-align: center; padding: 40px 0;
  font-family: var(--fb); color: var(--ink-4); font-size: 13.5px;
}
.day-sep {
  text-align: center;
  font-family: var(--fd); font-weight: 600; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-5);
  padding: 10px 0 6px;
}
.bubble {
  max-width: 78%;
  padding: 10px 14px; border-radius: 18px;
  font-family: var(--fb); font-size: 14px; line-height: 1.4;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.bubble.in {
  align-self: flex-start;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.bubble.out {
  align-self: flex-end;
  background: var(--brand-gradient); color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px rgba(22,163,74,.25);
}
.bubble-time {
  font-family: var(--fb); font-size: 10px; color: var(--ink-5);
  padding: 0 6px; margin-top: 1px;
}
.bubble-time.out { align-self: flex-end; }
.bubble-time.in  { align-self: flex-start; }

.ch-composer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 10px max(env(safe-area-inset-bottom), 14px);
  display: flex; gap: 4px; align-items: flex-end;
}
.ch-composer textarea {
  flex: 1; min-height: 38px; max-height: 120px;
  background: var(--bg-2);
  border-radius: 19px;
  padding: 9px 14px;
  border: 0;
  font-family: var(--fb); font-size: 14px; color: var(--ink-2);
  outline: none; resize: none;
  line-height: 1.4;
  margin: 0 4px;
}
.ch-composer textarea::placeholder { color: var(--ink-5); }
.ch-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--brand-glow);
  flex-shrink: 0;
}
.ch-send:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.ch-send svg { width: 16px; height: 16px; }
.ch-icon-btn {
  width: 36px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-4);
  flex-shrink: 0; padding: 0;
}
.ch-icon-btn:active { color: var(--brand); background: var(--brand-pale); }
.ch-icon-btn svg { width: 22px; height: 22px; }
.ch-emoji-panel {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.ch-emoji-panel button {
  font-size: 22px; line-height: 1;
  padding: 8px 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}
.ch-emoji-panel button:active { background: var(--bg-2); }

/* Billede-bubble */
.bubble.has-img {
  padding: 0; overflow: hidden;
  max-width: 70%;
}
.bubble.has-img img {
  display: block; width: 100%; height: auto;
  max-height: 320px; object-fit: cover;
  cursor: zoom-in;
}
.bubble.has-img video {
  display: block; width: 100%; height: auto;
  max-height: 320px; background: #000;
}
/* Klikbare links i beskeder — arv boble-farven (hvid i grønne, mørk i grå) */
.bubble .bubble-link {
  color: inherit; text-decoration: underline; word-break: break-all;
}
.bubble.has-img .bubble-caption {
  padding: 8px 14px 10px;
  font-family: var(--fb); font-size: 14px; line-height: 1.4;
}
.bubble.has-img.in  .bubble-caption { color: var(--ink-2); }
.bubble.has-img.out .bubble-caption { color: #fff; }

/* Lightbox (genbruges af chat-billeder + boligvindue-hero + photo-modal) */
.lightbox-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox-scrim img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close {
  position: absolute; top: max(16px, env(safe-area-inset-top));
  right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
}
.lightbox-close:active { background: rgba(0,0,0,.85); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 30px; line-height: 1; padding-bottom: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
}
.lightbox-nav.prev { left: max(10px, env(safe-area-inset-left)); }
.lightbox-nav.next { right: max(10px, env(safe-area-inset-right)); }
.lightbox-nav:active { background: rgba(0,0,0,.85); }
.lightbox-count {
  position: absolute; bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  font-family: var(--fd); font-weight: 700; font-size: 13px; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 999px; padding: 5px 12px;
}
.ch-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  text-align: center;
  font-family: var(--fb); color: var(--ink-4); font-size: 13.5px;
}

/* ============================================================ KNOCK MODAL */
.knock-sheet { padding-top: 0; }
.knock-head {
  padding: 12px 52px 4px 20px;
}
.knock-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.knock-eyebrow .d {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sig-yellow);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, .2);
}
.knock-eyebrow.is-ready .d {
  background: var(--sig-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .2);
}
.knock-eyebrow span:not(.d) {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #B45309;
}
.knock-eyebrow.is-ready span:not(.d) { color: #166534; }
.knock-title {
  font-family: var(--fd); font-weight: 900; font-size: 22px;
  letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 6px;
}
.knock-subtitle {
  font-family: var(--fb); font-size: 13px; line-height: 1.45;
  color: var(--ink-3); margin: 0 0 14px;
}

.knock-body { padding: 0 20px 8px; overflow-y: auto; flex: 1; }
.knock-label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--fd); font-weight: 600; font-size: 12px;
  color: var(--ink-3); margin-bottom: 12px;
}
.knock-label .req { color: var(--brand-dark); }
.knock-label select, .knock-label input, .knock-label textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: var(--fb); font-size: 14px; color: var(--ink-2);
  outline: none;
}
.knock-label select:focus, .knock-label input:focus, .knock-label textarea:focus {
  border-color: var(--brand); background: #fff;
}
.knock-label textarea {
  resize: vertical; min-height: 160px;
  font-family: var(--fb); line-height: 1.5;
}

.knock-counter-row {
  display: flex; justify-content: space-between;
  font-family: var(--fd); font-weight: 700; font-size: 10.5px;
  margin: -6px 0 14px;
}
.knock-counter-row .muted { color: var(--ink-4); }
#knockCount { color: var(--sig-red); transition: color .15s; }
#knockCount.ok { color: #166534; }

.knock-tips {
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.knock-tips-title {
  font-family: var(--fd); font-weight: 800; font-size: 11.5px;
  color: var(--ink-2); margin-bottom: 6px;
}
.knock-tips ul {
  font-family: var(--fb); font-size: 12px; color: var(--ink-3);
  line-height: 1.5; padding-left: 18px; margin: 0;
}

/* Success state */
.knock-success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sig-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 24px auto 14px;
}
.knock-success-title {
  font-family: var(--fd); font-weight: 900; font-size: 20px;
  letter-spacing: -.01em; color: var(--ink);
  text-align: center;
}
.knock-success-sub {
  font-family: var(--fb); font-size: 13px; line-height: 1.45;
  color: var(--ink-3);
  text-align: center;
  margin: 6px 0 22px;
}
#knockSuccessState {
  padding: 0 8px 16px;
  display: flex; flex-direction: column; align-items: center;
}
#knockSuccessCloseBtn {
  height: 42px; padding: 0 24px;
  border-radius: 10px;
}

/* ============================================================ PAYWALL MODAL */
.paywall-sheet { max-height: 90vh; }
.paywall-head { padding: 8px 52px 12px 20px; }
.paywall-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.paywall-eyebrow .d {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .2);
}
.paywall-eyebrow span:not(.d) {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark);
}
.paywall-title {
  font-family: var(--fd); font-weight: 900; font-size: 22px;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 6px;
}
.paywall-sub {
  font-family: var(--fb); font-size: 13px; line-height: 1.45;
  color: var(--ink-3); margin: 0;
}

.paywall-packages {
  padding: 4px 20px 12px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; flex: 1;
}
.pw-pkg {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
  position: relative;
  transition: border-color .15s, transform .15s var(--ease-out);
}
.pw-pkg:hover { border-color: var(--brand); }
.pw-pkg.on { border-color: var(--brand); background: var(--brand-pale); box-shadow: var(--brand-glow); }
.pw-pkg.recommended { border-color: var(--brand); }
.pw-pkg-recommended-tag {
  position: absolute; top: -10px; right: 14px;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--fd); font-weight: 800; font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--pill);
  box-shadow: var(--brand-glow);
}
.pw-pkg-head {
  display: flex; align-items: center; gap: 14px;
}
.pw-pkg-count {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 900; font-size: 20px;
  flex-shrink: 0;
}
.pw-pkg-meta { flex: 1; }
.pw-pkg-meta b {
  font-family: var(--fd); font-weight: 800; font-size: 15px;
  color: var(--ink); display: block;
}
.pw-pkg-meta span {
  font-family: var(--fb); font-size: 12px; color: var(--ink-4);
  display: block; margin-top: 2px;
}
.pw-pkg-price {
  font-family: var(--fd); font-weight: 900; font-size: 18px;
  color: var(--ink); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================ KORT 3.2b + NOTIF 3.4 */

/* Filter-count badge på filter-knappen (afløser srch-badge) */
.flt-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--brand); color: #fff;
  border: 2px solid var(--surface); border-radius: 9px;
  font-family: var(--fd); font-weight: 700; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.flt-btn.on { background: var(--brand); }
.flt-btn.on svg { color: #fff; }

/* Adresse-søgeforslag (autocomplete-dropdown under søgefeltet) */
.map-srch-results {
  position: absolute; top: 52px; left: 0; right: 0; z-index: 40;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--sh-md);
  overflow: hidden; max-height: 50vh; overflow-y: auto;
}
.map-srch-row {
  padding: 12px 14px; cursor: pointer;
  font-family: var(--fb); font-size: 13.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.map-srch-row:last-child { border-bottom: 0; }
.map-srch-row:active { background: var(--bg-2); }
.map-srch-area { font-family: var(--fd); font-weight: 700; color: var(--brand); }
.map-srch-empty { color: var(--ink-4); font-style: italic; cursor: default; }
.map-srch-empty:active { background: transparent; }

/* Liste-view (overlay over kortet) */
.map-list {
  position: absolute; inset: 0; z-index: 36;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.map-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 70px 16px 12px;   /* top-padding giver plads til søge-overlay */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.map-list-head b { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--ink); }
.map-list-close {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: var(--pill);
}
.map-list-close svg { width: 14px; height: 14px; }
.map-list-body { flex: 1; overflow-y: auto; padding: 12px 14px 120px; }
.mlst-row {
  display: flex; gap: 12px; padding: 12px; align-items: center;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); margin-bottom: 10px; cursor: pointer;
}
.mlst-row:active { transform: scale(.99); }
.mlst-th {
  width: 76px; height: 64px; border-radius: var(--r); flex-shrink: 0;
  background: var(--bg-2) center/cover no-repeat;
  position: relative; overflow: hidden;
}
.mlst-thimg {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
}
/* Slørede boliger (ejers valg) — scale skjuler blur-kanten inden for beskæringen */
.mlst-thimg.is-blurred { filter: blur(12px); transform: scale(1.2); }
.mlst-body { flex: 1; min-width: 0; }
.mlst-addr { font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlst-price { font-family: var(--fd); font-weight: 800; font-size: 14px; color: var(--brand-2); margin-top: 2px; }
.mlst-meta { font-family: var(--fb); font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.mlst-pillrow { margin-top: 6px; }

/* Filter-drawer chips */
.flt-group { margin-bottom: 18px; }
.flt-label {
  font-family: var(--fd); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4);
  margin-bottom: 10px;
}
.flt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--bg-2); border: 1.5px solid var(--line);
  font-family: var(--fd); font-weight: 600; font-size: 13px; color: var(--ink-3);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.flt-chip .d { width: 9px; height: 9px; border-radius: 50%; }
.flt-chip.on { background: var(--brand-pale); border-color: var(--brand); color: var(--brand); }

/* Filter-tal-felter (pris + størrelse) — taste-input med enheds-suffix */
.flt-num-wrap { position: relative; display: flex; align-items: center; }
.flt-num-wrap .flt-num { padding-right: 44px; }   /* plads til enhed */
.flt-num-unit {
  position: absolute; right: 14px;
  font-family: var(--fd); font-weight: 700; font-size: 13px; color: var(--ink-4);
  pointer-events: none;
}

/* Få-besked-knap ved postnr uden boliger */
.map-srch-notify {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 12px 14px; cursor: pointer;
  font-family: var(--fd); font-weight: 700; font-size: 13.5px;
  color: var(--brand); background: var(--brand-pale);
  border: 0; border-top: 1px solid var(--line-2);
}
.map-srch-notify:active { background: var(--brand-50); }

/* Notifikations-panel */
.notif-body { min-height: 140px; }
.notif-row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:active { background: var(--bg-2); }
.notif-ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; background: var(--bg-2);
}
.notif-ic.sig-yellow { background: var(--sig-yellow-bg); }
.notif-ic.sig-green  { background: var(--sig-green-bg); }
.notif-ic.sig-orange { background: var(--sig-orange-bg); }
.notif-ic.sig-grey   { background: var(--sig-grey-bg); }
.notif-txt { flex: 1; min-width: 0; }
.notif-title { font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.notif-sub { font-family: var(--fb); font-size: 12.5px; color: var(--ink-4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.paywall-footer-info {
  padding: 8px 20px 4px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--fb); font-size: 11px; color: var(--ink-4);
}
.paywall-footer-info svg { color: var(--ink-5); flex-shrink: 0; }

/* ============================================================ SUBSCRIPTION CARD (Min bolig) */
.mb-sub-card {
  margin: 0 14px 12px;
  background: linear-gradient(135deg, var(--ink), var(--navy-3));
  color: #fff;
  border-radius: var(--r-md);
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.mb-sub-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mb-sub-card.active .mb-sub-icon {
  background: var(--brand-gradient);
}
.mb-sub-body { flex: 1; min-width: 0; }
.mb-sub-status {
  font-family: var(--fd); font-weight: 800; font-size: 14px; color: #fff;
}
.mb-sub-perks {
  font-family: var(--fb); font-size: 12px; color: rgba(255, 255, 255, .65);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-sub-card .btn { flex-shrink: 0; }

/* ============================================================ BILLING (Mere-tab) */
.billing-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--fb); font-size: 13px; color: var(--ink-3);
}
.billing-row:last-child { border-bottom: 0; }
.billing-row .label { flex: 1; }
.billing-row .value {
  font-family: var(--fd); font-weight: 700; color: var(--ink-2);
}
.billing-row .value.muted { color: var(--ink-5); }
.billing-row .value .pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: var(--pill);
  font-size: 10px; font-weight: 700;
}

/* ============================================================ PROFILE GATE */
.gate-sheet {
  max-height: 70vh;
}
.gate-body { padding: 4px 24px 18px; }
.gate-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--sig-yellow-bg);
  color: #B45309;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.gate-title {
  font-family: var(--fd); font-weight: 900; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink);
  margin: 0 0 8px;
}
.gate-text {
  font-family: var(--fb); font-size: 13px; line-height: 1.45;
  color: var(--ink-3); margin: 0 0 16px;
}
.gate-text b { color: var(--ink); }
.gate-progress-box {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px;
}
.gate-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.gate-progress-head .lbl {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.gate-progress-head .val {
  font-family: var(--fd); font-weight: 900; font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #B45309;
}
.gate-progress-head .val.ok { color: var(--sig-green); }
.gate-progress-track {
  height: 8px; background: var(--line);
  border-radius: 999px; overflow: hidden;
}
.gate-progress-fill {
  height: 100%; width: 0;
  background: #B45309;
  border-radius: 999px;
  transition: width .3s var(--ease);
}
.gate-progress-fill.ok { background: var(--sig-green); }
.gate-progress-helper {
  font-family: var(--fb); font-size: 11.5px; color: var(--ink-4);
  margin-top: 8px;
}

/* ============================================================ HELP MODAL */
.help-sheet { padding-top: 0; }
.help-head { padding: 8px 52px 4px 20px; }
.help-eyebrow {
  font-family: var(--fd); font-weight: 800; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-dark);
}
.help-title {
  font-family: var(--fd); font-weight: 900; font-size: 22px;
  letter-spacing: -.02em; color: var(--ink);
  margin: 6px 0 4px;
}
.help-sub {
  font-family: var(--fb); font-size: 13px; line-height: 1.4;
  color: var(--ink-3); margin: 0 0 14px;
}
.help-form { padding: 0 20px 8px; flex: 1; overflow-y: auto; }
.help-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
/* Bekræftelse efter sendt book-formular */
.help-success { padding: 28px 24px 24px; text-align: center; }
.help-success-ic {
  width: 58px; height: 58px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800;
}
.help-success-title {
  font-family: var(--fd); font-weight: 800; font-size: 20px;
  color: var(--ink); margin: 0 0 6px;
}
.help-success-text {
  font-family: var(--fb); font-size: 14.5px; color: var(--ink-3);
  margin: 0 0 22px; line-height: 1.5;
}
.help-success .btn { width: 100%; }

/* ============================================================ TABLET + DESKTOP (≥768px)
   Appen er designet mobil-først som 480px-søjle. Fra 768px og op følger den
   automatisk skærmen (Jacob 8/7-2026):
   - kortet fylder hele vinduet; søgefelt + bund-kort ligger fast til venstre
   - tabbaren bliver en flydende dock nederst
   - bund-sheets bliver centrerede dialoger (grab-håndtaget skjules)
   - fullscreen-overlays (bolig/chat/undersider) bliver centrerede paneler
   - indholds-faner får en læsbar midterkolonne i stedet for fuld bredde */
@media (min-width: 768px) {
  .app { max-width: none; box-shadow: none; }

  /* Indholds-faner → midterkolonne */
  #view-messages, #view-min-bolig, #view-profil, #view-mere {
    max-width: 720px; margin: 0 auto; width: 100%;
  }

  /* Tabbar → flydende dock */
  .tabbar {
    max-width: 460px;
    bottom: 14px;
    border-radius: 22px;
    border: 1px solid rgba(12,20,37,.08);
    box-shadow: 0 14px 40px -10px rgba(12,20,37,.28);
    padding: 8px;
  }

  /* Kortet fylder ned til vinduets bund — docken flyder ovenpå */
  .map-wrap { height: calc(100dvh - var(--topbar-h)); }

  /* Søgefelt fast bredde til venstre (Google Maps-stil) */
  .map-search { right: auto; width: 440px; top: 16px; left: 16px; }
  .legend-chip { top: 76px; left: 16px; }

  /* Bund-/kompaktkort: venstrestillet kort, løftet over docken */
  .map-bottom {
    left: 16px; right: auto; bottom: 92px; width: 440px;
    border-radius: 22px;
  }
  .maplibregl-ctrl-bottom-right { bottom: 24px !important; right: 16px !important; }
  .map-wrap.mk-selected .maplibregl-ctrl-bottom-right { bottom: 24px !important; }

  /* Listevisning over kortet: læsbar midterkolonne, fri af docken */
  .map-list-head, .map-list-body { max-width: 720px; margin: 0 auto; width: 100%; }
  .map-list-body { padding-bottom: 110px; }

  /* Bund-sheets → centrerede dialoger */
  .modal-scrim { align-items: center; padding: 28px; }
  .modal-sheet {
    border-radius: 24px;
    max-height: 84vh;
    animation: modalPopIn .22s var(--ease) both;
  }
  .modal-grab { display: none; }

  /* Fullscreen-overlays → centrerede paneler over appen */
  .bolig-view { width: min(880px, 100%); left: 0; right: 0; margin: 0 auto; box-shadow: 0 0 80px rgba(12,20,37,.35); }
  .chat-view, .sub-page { width: min(720px, 100%); left: 0; right: 0; margin: 0 auto; box-shadow: 0 0 80px rgba(12,20,37,.35); }

  /* Onboarding/signup → centreret kort */
  .onboarding-shell {
    max-width: 560px; margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(12,20,37,.06), 0 24px 80px -24px rgba(12,20,37,.25);
  }
}
@keyframes modalPopIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}