/* Brugsscenarier → Bureauer. Én scene: gade → indgang → kontor → skærm →
   dashboard → tre trin. Uden den fastlåste scene (mobil, reduceret bevægelse
   eller uden JavaScript) vises alt indhold som almindelige sektioner.

   Lagene:
   - Site-shell: Plus Jakarta Sans, varm #FAFAF8-flade, navy #1B2A4A.
   - Produkt-UI: Inter, kun under .bu-ui (dashboard og visninger).
   - [data-bu-mode="full"] på .bu-scene slår den fastlåste scene til. Alle
     løbende værdier (transform, opacity) sættes af bureauer.js; skærmlaget
     får sit perspektiv som matrix3d fra monitorens fire målte hjørner. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

body.bu-page {
  margin: 0;
  background: #FAFAF8;
  color: #0F172A;
  font-family: 'Plus Jakarta Sans', 'PJS Fallback', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
.bu-page *, .bu-page *::before, .bu-page *::after { box-sizing: border-box; }
.bu-page main :where(h1, h2, h3, p, ul, ol, figure, figcaption) { margin: 0; }
.bu-page main :where(ul, ol) { padding: 0; list-style: none; }
.bu-page main :where(a, button):focus-visible { outline: 3px solid #1B2A4A; outline-offset: 3px; }
.bu-page main { overflow: clip; }

.bu-shell { width: min(100% - 48px, 1200px); margin-inline: auto; }
@media (max-width: 640px) { .bu-shell { width: min(100% - 36px, 1200px); } }

/* Knapper og labels følger sitets mål: 52 px, radius 10, navy. */
.bu-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid #1B2A4A;
  border-radius: 10px;
  background: #1B2A4A;
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bu-btn:hover { border-color: #111C32; background: #111C32; }
.bu-btn-secondary { border-color: rgba(27, 42, 74, .32); background: rgba(255, 255, 255, .86); color: #1B2A4A; }
.bu-btn-secondary:hover { border-color: #1B2A4A; background: #FFFFFF; }
.bu-kicker {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(27, 42, 74, .08);
  color: #1B2A4A;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   1. Scene, statisk udgave (standard)
   ───────────────────────────────────────────────────────────── */
.bu-scene { position: relative; }
.bu-stage { display: flex; flex-direction: column; width: min(100% - 48px, 1200px); margin-inline: auto; padding: 48px 0 0; }
@media (max-width: 640px) { .bu-stage { width: min(100% - 36px, 1200px); padding-top: 32px; } }
.bu-hero { order: 1; }
.bu-film { order: 2; position: relative; margin-top: 40px; }
.bu-midline { order: 3; }
.bu-screen, .bu-aside { display: none; }
.bu-demo-tag { display: none; }

.bu-poster { display: block; width: 100%; height: auto; border: 1px solid #E8E8E4; border-radius: 16px; background: #F2F2EE; }
@media (max-width: 640px) { .bu-poster { aspect-ratio: 4 / 5; object-fit: cover; } }
.bu-canvas { display: none; }

.bu-hero-inner { max-width: 760px; }
.bu-hero h1 {
  color: #0F172A;
  font-size: clamp(2.35rem, 4.7vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.bu-hero-sub { max-width: 600px; margin-top: 20px; color: #475569; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.bu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bu-skip { display: inline-block; margin-top: 18px; color: #64748B; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.bu-skip:hover { color: #1B2A4A; }
@media (max-width: 640px) { .bu-hero-actions .bu-btn { width: 100%; } }

.bu-midline {
  max-width: 760px;
  margin: 48px auto 0;
  color: #1B2A4A;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────
   2. Arbejdsgangen i tre trin (statisk)
   ───────────────────────────────────────────────────────────── */
.bu-walk { padding: 56px 0 72px; }
.bu-bridge { margin: 0 0 40px; }
.bu-bridge img { display: block; width: 100%; height: auto; border: 1px solid #E8E8E4; border-radius: 16px; background: #F2F2EE; }
.bu-bridge figcaption { margin-top: 12px; color: #64748B; font-size: 14px; line-height: 1.5; }
.bu-step { display: grid; gap: 24px; padding: 40px 0; border-top: 1px solid #E8E8E4; }
.bu-step-copy h2 { margin-top: 14px; color: #0F172A; font-size: clamp(1.7rem, 2.8vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.bu-step-copy p { max-width: 560px; margin-top: 14px; color: #475569; font-size: 17px; line-height: 1.68; text-wrap: pretty; }
.bu-step > .bu-view { overflow: hidden; border: 1px solid #E8E8E4; border-radius: 16px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 8px 30px rgba(15, 23, 42, .05); }
.bu-walk-note { max-width: 760px; margin-top: 32px; color: #64748B; font-size: 14px; line-height: 1.6; }
@media (min-width: 900px) {
  .bu-step { grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: 40px; align-items: start; padding: 56px 0; }
  .bu-step-copy { position: sticky; top: 100px; }
}

/* ─────────────────────────────────────────────────────────────
   3. Afslutning
   ───────────────────────────────────────────────────────────── */
.bu-closing { padding: 88px 0 96px; border-top: 1px solid #E8E8E4; }
.bu-closing-inner { max-width: 720px; text-align: center; }
.bu-closing h2 { color: #0F172A; font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.bu-closing p { max-width: 560px; margin: 18px auto 0; color: #475569; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.bu-closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
@media (max-width: 640px) { .bu-closing { padding: 64px 0 72px; } .bu-closing-actions .bu-btn { width: 100%; } }

/* ─────────────────────────────────────────────────────────────
   4. Produkt-UI (Inter, kun under .bu-ui)
   Renset udsnit af dashboardet: samme struktur og tal som Helseværk-
   demoen, uden filtre, eksport og teknik. Farver har fast betydning:
   blå = jer, rød = konkurrent, grå = andre, grøn = status, amber = høj.
   ───────────────────────────────────────────────────────────── */
.bu-ui {
  --db-bg: #F8FAFC;
  --db-card: #FFFFFF;
  --db-border: #E2E8F0;
  --db-border-soft: #EEF2F6;
  --db-text: #0F172A;
  --db-text-2: #334155;
  --db-muted: #64748B;
  --db-faint: #94A3B8;
  --db-blue: #2563EB;
  --db-blue-strong: #1D4ED8;
  --db-blue-soft: #EEF3FF;
  --db-blue-track: #E6EDF8;
  --db-green: #16A34A;
  --db-green-soft: #ECFDF3;
  --db-green-border: #BBF7D0;
  --db-red: #DC2626;
  --db-amber: #D97706;
  --db-amber-soft: #FFF7E8;
  --db-radius: 12px;
  --db-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  color: var(--db-text);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: left;
}
.bu-ui .bu-ico { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bu-card { border: 1px solid var(--db-border); border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow); }
.bu-card-head { padding: 14px 16px 10px; }
.bu-card-title { display: block; font-size: 13px; font-weight: 600; }
.bu-card-sub { display: block; margin-top: 3px; color: var(--db-muted); font-size: 11px; }
.bu-chip { display: inline-flex; height: 30px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card); color: var(--db-muted); font-size: 11.5px; white-space: nowrap; }
.bu-chip b { color: var(--db-text); font-weight: 600; }
.bu-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--db-border); border-radius: 999px; background: var(--db-card); color: var(--db-text-2); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.bu-pill.is-green { border-color: var(--db-green-border); background: var(--db-green-soft); color: var(--db-green); }
.bu-pill.is-green::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--db-green); }
.bu-delta { color: var(--db-muted); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
.bu-delta.is-up { color: var(--db-green); }
.bu-delta.is-down { color: var(--db-red); }
.bu-delta.is-flat { color: var(--db-faint); }
.bu-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 999px; background: var(--db-faint); vertical-align: 1px; }
.bu-dot.is-pos { background: var(--db-green); }
.bu-dot.is-neg { background: var(--db-red); }
.bu-dot.is-blue { background: var(--db-blue); }
.bu-dot.is-grey { background: var(--db-faint); }
.bu-bar { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: var(--db-blue-track); }
.bu-bar > i { display: block; width: var(--fill, 50%); height: 100%; border-radius: inherit; background: var(--db-blue); }
.bu-avatar { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--db-border); border-radius: 999px; background: #F1F5F9; color: var(--db-text-2); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.bu-avatar.is-logo { background: #FFFFFF; }
.bu-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bu-avatar.is-sm { width: 18px; height: 18px; flex-basis: 18px; }
.bu-avatar.is-square { border-radius: 5px; }
.bu-platform { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; background-color: var(--db-text); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; vertical-align: middle; }
.bu-platform[data-platform='chatgpt'] { --mark: url('/logos/chatgpt-bw.png'); background-color: #0F172A; }
.bu-platform[data-platform='google'] { --mark: url('/logos/google.svg'); background-color: #4285F4; }
.bu-platform[data-platform='gemini'] { --mark: url('/logos/gemini.svg'); background-color: #3B82F6; }
.bu-platform[data-platform='copilot'] { --mark: url('/logos/copilot-mono.svg'); background-color: #0F6CBD; }
.bu-platforms { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.bu-platforms > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bu-num { text-align: right; }
.bu-sep { color: var(--db-faint); }
.bu-you { display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--db-blue-soft); color: var(--db-blue-strong); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }

/* Diskret browserramme øverst i dashboardet: fanebjælke og adresselinje. */
.bu-browser { flex: 0 0 auto; border-bottom: 1px solid var(--db-border); background: #ECEFF3; }
.bu-browser-tabs { display: flex; height: 34px; align-items: flex-end; gap: 8px; padding: 0 10px; }
.bu-browser-dots { display: inline-flex; align-self: center; gap: 6px; margin: 0 6px 0 2px; }
.bu-browser-dots i { width: 10px; height: 10px; border-radius: 999px; background: #D3D8DF; }
.bu-browser-tab { display: inline-flex; height: 27px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--db-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: #FFFFFF; color: var(--db-text); font-size: 11.5px; font-weight: 600; }
.bu-browser-tab img { display: block; width: 12px; height: 12px; }
.bu-browser-plus { align-self: center; color: var(--db-muted); font-size: 15px; line-height: 1; }
.bu-browser-bar { display: flex; height: 34px; align-items: center; gap: 10px; padding: 0 10px; background: #FFFFFF; }
.bu-browser-nav { display: inline-flex; gap: 6px; }
.bu-browser-nav i { width: 14px; height: 14px; border-radius: 4px; background: #E6EAEF; }
.bu-browser-url { display: inline-flex; height: 24px; flex: 1 1 auto; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; background: #F1F3F6; color: var(--db-text-2); font-size: 11.5px; }
.bu-browser-url .bu-ico { width: 12px; height: 12px; color: var(--db-muted); }

/* Dashboard-rammen (browser + sidebar + hovedområde). Kun i den fastlåste scene. */
.bu-dash { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--db-border); border-radius: 14px; background: var(--db-bg); box-shadow: 0 30px 80px rgba(15, 23, 42, .18), 0 6px 20px rgba(15, 23, 42, .08); }
.bu-dash-demo { display: block; padding: 8px 14px; border-bottom: 1px solid var(--db-border); border-left: 3px solid #E3A56F; background: #FBF3E9; color: var(--db-text-2); font-size: 11.5px; line-height: 1.45; }
.bu-dash-demo strong { color: var(--db-text); font-weight: 700; }
.bu-dash-app { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: 212px minmax(0, 1fr); }
.bu-dash-side { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-right: 1px solid var(--db-border); background: var(--db-card); }
.bu-dash-logo { display: flex; height: 40px; align-items: center; gap: 8px; padding: 0 6px; font-size: 14px; font-weight: 700; }
.bu-dash-switch { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border: 1px solid var(--db-border); border-radius: 10px; transition: box-shadow .2s ease, border-color .2s ease; }
.bu-dash-switch.is-open { border-color: var(--db-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.bu-dash-switch-id { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.bu-dash-switch-id b { font-size: 13px; font-weight: 700; }
.bu-dash-switch-id i { color: var(--db-muted); font-size: 11px; font-style: normal; }
.bu-dash-switch > .bu-ico { color: var(--db-muted); transition: transform .2s ease; }
.bu-dash-switch.is-open > .bu-ico { transform: rotate(180deg); }
.bu-dash-nav { display: flex; flex-direction: column; gap: 1px; }
.bu-dash-group { padding: 6px 9px 1px; color: var(--db-muted); font-size: 10px; font-weight: 600; }
.bu-dash-item { display: flex; height: 30px; align-items: center; gap: 9px; padding: 0 9px; border-radius: 8px; color: var(--db-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.bu-dash-item .bu-ico { width: 16px; height: 16px; color: var(--db-muted); }
.bu-dash-item.is-active { background: var(--db-blue-soft); color: var(--db-blue-strong); }
.bu-dash-item.is-active .bu-ico { color: var(--db-blue-strong); }
.bu-dash-ask { display: flex; height: 32px; align-items: center; justify-content: center; gap: 7px; margin-top: auto; border-radius: 8px; background: #F1F5F9; color: var(--db-text); font-size: 12.5px; font-weight: 600; }
.bu-dash-main { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 16px 20px 18px; }
.bu-dash-main > .bu-view { display: none; flex: 1 1 auto; min-height: 0; }
.bu-dash-main > .bu-view.is-active { display: flex; flex-direction: column; }
.bu-demo-tag { position: absolute; top: 88px; right: max(24px, 4.5vw); z-index: 3; min-height: 26px; align-items: center; padding: 5px 9px; border: 1px solid #E3A56F; border-radius: 6px; background: #FBF3E9; color: #8A4B12; font-family: 'Plus Jakarta Sans', 'PJS Fallback', Arial, sans-serif; font-size: 11px; font-weight: 650; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }

/* Visninger (bruges både i rammen og som kort i den statiske udgave) */
.bu-view { position: relative; padding: 16px 18px 18px; }
.bu-dash-main > .bu-view { padding: 0; }
.bu-view-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.bu-view-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.bu-view-caption { margin-top: 12px; color: var(--db-muted); font-size: 12px; line-height: 1.5; }
.bu-dash-main .bu-view-caption { display: none; }
.bu-cols { display: grid; align-items: start; gap: 12px; }
.bu-col { display: grid; gap: 12px; }
@media (min-width: 720px) { .bu-cols { grid-template-columns: 1.1fr 1fr; } }
.bu-dash-main .bu-cols { grid-template-columns: 1.1fr 1fr; }

/* Fremhævning styret af scroll: det fokuserede område får en blå ring, resten dæmpes. */
.bu-view [data-bu-focus] { transition: opacity .35s ease, box-shadow .35s ease; }
.bu-view.is-dimming [data-bu-focus]:not(.is-focus):not(.has-focus) { opacity: .48; }
.bu-view [data-bu-focus].is-focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35), 0 12px 32px rgba(37, 99, 235, .14); }
.bu-view .bu-tr[data-bu-focus].is-focus, .bu-view .bu-picker-row[data-bu-focus].is-focus { border-radius: 8px; }

/* Trin 1: kundevælger + overblik */
.bu-picker { overflow: hidden; border: 1px solid var(--db-border); border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow); }
.bu-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--db-border); }
.bu-picker-title { font-size: 13px; font-weight: 600; }
.bu-picker-count { color: var(--db-muted); font-size: 11px; }
.bu-picker-list { display: flex; flex-direction: column; padding: 6px; }
.bu-picker-row { display: grid; min-height: 52px; grid-template-columns: 32px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.bu-picker-row.is-selected { background: var(--db-blue-soft); }
.bu-picker-name { display: flex; min-width: 0; flex-direction: column; }
.bu-picker-name b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bu-picker-name i { color: var(--db-muted); font-size: 11px; font-style: normal; }
.bu-picker-meta { color: var(--db-muted); font-size: 11px; white-space: nowrap; }
.bu-picker-check { width: 16px; height: 16px; color: var(--db-blue-strong); stroke-width: 2.4; visibility: hidden; }
.bu-picker-row.is-selected .bu-picker-check { visibility: visible; }
.bu-overview { margin-top: 14px; }
.bu-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--db-muted); font-size: 11px; white-space: nowrap; }
.bu-status b { color: var(--db-text); font-weight: 600; }
.bu-kpi-note { margin: 10px 0 6px; color: var(--db-muted); font-size: 11px; }
.bu-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bu-kpi { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 14px; }
.bu-kpi + .bu-kpi { border-left: 1px solid var(--db-border-soft); }
.bu-kpi-label { color: var(--db-muted); font-size: 11.5px; white-space: nowrap; }
.bu-kpi-row { display: flex; align-items: baseline; gap: 7px; }
.bu-kpi-row b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.bu-kpi-row .bu-dot { width: 9px; height: 9px; margin-right: 6px; vertical-align: 2px; }
.bu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.bu-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 13px; }
.bu-tile-label { color: var(--db-faint); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bu-tile-row { display: flex; align-items: baseline; gap: 6px; }
.bu-tile-row b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.bu-tile-row span { color: var(--db-muted); font-size: 11px; }
@media (max-width: 720px) {
  .bu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bu-kpi + .bu-kpi { border-left: 0; }
  .bu-kpi:nth-child(odd) { border-right: 1px solid var(--db-border-soft); }
  .bu-kpi:nth-child(n + 3) { border-top: 1px solid var(--db-border-soft); }
  .bu-tiles { grid-template-columns: 1fr; }
  .bu-picker-row { grid-template-columns: 32px minmax(0, 1fr) 16px; }
  .bu-picker-meta { display: none; }
}
/* I den fastlåste scene ligger kundevælgeren oven på overblikket som en åben liste. */
.bu-dash-main .bu-view[data-bu-view="a"] { position: relative; }
.bu-dash-main .bu-view[data-bu-view="a"] .bu-picker { position: absolute; z-index: 2; top: 44px; left: 0; width: 360px; box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08); transition: opacity .3s ease, transform .3s ease; }
.bu-dash-main .bu-view[data-bu-view="a"][data-bu-state="overview"] .bu-picker { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.bu-dash-main .bu-view[data-bu-view="a"] .bu-overview { transition: opacity .3s ease; }
.bu-dash-main .bu-view[data-bu-view="a"][data-bu-state="picker"] .bu-overview { opacity: .35; }

/* Trin 2: top 6, kilder og et gemt svar */
.bu-tbl { display: flex; flex-direction: column; padding: 0 10px 8px; }
.bu-tr { display: grid; min-height: 42px; grid-template-columns: 14px minmax(0, 1fr) 76px 92px; align-items: center; gap: 10px; padding: 0 6px; border-bottom: 1px solid var(--db-border-soft); color: var(--db-text-2); font-size: 12px; }
.bu-tr:last-child { border-bottom: 0; }
.bu-tr.bu-th { min-height: 28px; border-bottom-color: var(--db-border); color: var(--db-muted); font-size: 10.5px; font-weight: 500; }
.bu-tr.bu-th > span { white-space: nowrap; }
.bu-rank { color: var(--db-muted); font-size: 11.5px; }
.bu-brand { display: flex; min-width: 0; align-items: center; gap: 7px; }
.bu-brand b { overflow: hidden; color: var(--db-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bu-td { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; white-space: nowrap; }
.bu-td b { color: var(--db-text); font-weight: 600; }
.bu-td .bu-delta { min-width: 22px; text-align: right; }
.bu-tr.is-own { margin: 0 -4px; padding: 0 10px; border-radius: 6px; background: var(--db-blue-soft); }
.bu-tr.is-own .bu-brand b { color: var(--db-blue-strong); }
.bu-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 16px 14px; border: 1px solid var(--db-border); border-radius: 8px; }
.bu-stat { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 11px; }
.bu-stat:nth-child(even) { border-left: 1px solid var(--db-border); }
.bu-stat:nth-child(n + 3) { border-top: 1px solid var(--db-border); }
.bu-stat-label { color: var(--db-muted); font-size: 10.5px; line-height: 1.2; }
.bu-stat b { font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.bu-stat-meta { color: var(--db-faint); font-size: 10px; }
.bu-answer { padding: 14px 16px 12px; }
.bu-answer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--db-muted); font-size: 11px; }
.bu-answer-src { font-weight: 600; color: var(--db-text-2); }
.bu-answer-date { margin-left: auto; white-space: nowrap; }
.bu-answer-q { margin-top: 10px; color: var(--db-text); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.bu-answer-text { margin-top: 8px; color: var(--db-text-2); font-size: 12.5px; line-height: 1.55; }
.bu-answer-text mark { padding: 0 3px; border-radius: 3px; background: #FDE7E7; color: #991B1B; font-weight: 600; }
.bu-answer-sources { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--db-border-soft); }
.bu-answer-sources li { display: flex; align-items: center; gap: 8px; }
.bu-answer-sources li > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.bu-answer-sources b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bu-answer-sources small { color: var(--db-muted); font-size: 10.5px; }
.bu-answer-foot { margin-top: 10px; color: var(--db-text-2); font-size: 11.5px; line-height: 1.45; }

/* Trin 3: en opgave fra To-do */
.bu-task { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--db-border); border-radius: var(--db-radius); background: var(--db-card); box-shadow: var(--db-shadow); }
.bu-task-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--db-border); }
.bu-crumb { display: block; margin-bottom: 8px; color: var(--db-muted); font-size: 11.5px; }
.bu-task-head h3 { color: var(--db-text); font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.bu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.bu-prio { display: inline-flex; align-items: center; gap: 6px; color: var(--db-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.bu-prio svg { width: 14px; height: 12px; fill: #D6D9DF; }
.bu-prio.is-high { color: #9A5B06; }
.bu-prio.is-high svg rect { fill: var(--db-amber); }
.bu-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: #EEEEEA; color: var(--db-text-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.bu-tag.is-new { background: var(--db-green-soft); color: var(--db-green); font-weight: 600; }
.bu-path { color: var(--db-muted); font-size: 12px; overflow-wrap: anywhere; }
.bu-task-body { display: grid; gap: 10px; padding: 14px 18px; }
.bu-block { padding: 12px 14px; border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-card); }
.bu-block p { margin-top: 6px; color: var(--db-text-2); font-size: 12.5px; line-height: 1.55; }
.bu-block-kicker { display: flex; align-items: center; gap: 8px; color: var(--db-text); font-size: 12.5px; font-weight: 650; }
.bu-num-badge { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; background: #1B2A4A; color: #FFFFFF; font-size: 11px; font-weight: 700; }
.bu-target { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--db-blue-soft); color: var(--db-text-2); font-size: 12.5px; }
.bu-target b { color: var(--db-blue-strong); font-weight: 600; overflow-wrap: anywhere; }
.bu-target .bu-ico { color: var(--db-blue-strong); }
.bu-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.bu-figure { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-bg); }
.bu-figure b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.bu-figure span { color: var(--db-muted); font-size: 10.5px; line-height: 1.25; }
.bu-basis-list { display: grid; gap: 6px; margin-top: 10px; color: var(--db-text-2); font-size: 12px; line-height: 1.5; }
.bu-basis-list b { color: var(--db-text); font-weight: 600; }
.bu-task-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px 14px; border-top: 1px solid var(--db-border); background: var(--db-bg); }
.bu-status-label { color: var(--db-muted); font-size: 12px; }
.bu-status-label b { color: var(--db-text); font-weight: 600; }
.bu-fake-btn { display: inline-flex; height: 30px; align-items: center; padding: 0 12px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-card); color: var(--db-text); font-size: 11.5px; font-weight: 600; }
.bu-fake-btn.is-dark { border-color: #0F172A; background: #0F172A; color: #FFFFFF; }
.bu-task-note { flex-basis: 100%; color: var(--db-muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 560px) { .bu-figures { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   5. Den fastlåste scene (kun med JavaScript, nok bredde og uden
      reduceret bevægelse). bureauer.js sætter alle løbende værdier.
   ───────────────────────────────────────────────────────────── */
[data-bu-mode="full"] .bu-track { height: 750vh; }
[data-bu-mode="full"] .bu-stage { position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin: 0; padding: 0; overflow: hidden; background: #FAFAF8; }
[data-bu-mode="full"] .bu-film { position: absolute; inset: 0; margin: 0; }
[data-bu-mode="full"] .bu-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
[data-bu-mode="full"] .bu-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
[data-bu-mode="full"] .bu-film::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 250, 248, .96) 0%, rgba(250, 250, 248, .82) 34%, rgba(250, 250, 248, .3) 58%, rgba(250, 250, 248, 0) 78%);
  opacity: var(--bu-veil, 1);
}
[data-bu-mode="full"] .bu-hero { position: absolute; inset: 0; display: flex; align-items: center; padding: 96px 5vw 56px; will-change: opacity, transform; }
[data-bu-mode="full"] .bu-hero-inner { max-width: 640px; }
[data-bu-mode="full"] .bu-midline {
  position: absolute;
  left: 50%;
  top: 66%;
  max-width: 820px;
  margin: 0;
  padding: 16px 28px;
  border-radius: 16px;
  background: rgba(250, 250, 248, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}
/* Skærm, midtertekst og trintekster er illustration og tekst uden kontroller. De må
   aldrig opfange klik, heller ikke mens de er usynlige oven på heroens knapper. */
[data-bu-mode="full"] .bu-screen { position: absolute; left: 0; top: 0; display: block; width: 1280px; height: 720px; opacity: 0; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; backface-visibility: hidden; }
[data-bu-mode="full"] .bu-aside { position: absolute; display: block; opacity: 0; pointer-events: none; }
[data-bu-mode="full"] .bu-midline { pointer-events: none; }
[data-bu-mode="full"] .bu-aside .bu-step-copy { position: absolute; left: 0; right: 0; top: 50%; padding: 22px 24px 24px; border: 1px solid #E8E8E4; border-radius: 16px; background: rgba(250, 250, 248, .92); box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 8px 30px rgba(15, 23, 42, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(calc(-50% + 14px)); transition: opacity .32s ease, transform .32s ease; }
[data-bu-mode="full"] .bu-aside .bu-step-copy.is-active { opacity: 1; transform: translateY(-50%); }
[data-bu-mode="full"] .bu-aside.is-stacked .bu-step-copy { top: 0; padding: 14px 18px 16px; transform: translateY(10px); }
[data-bu-mode="full"] .bu-aside.is-stacked .bu-step-copy h2 { margin-top: 8px; font-size: 1.2rem; }
[data-bu-mode="full"] .bu-aside.is-stacked .bu-step-copy p { margin-top: 8px; font-size: 14px; line-height: 1.5; }
[data-bu-mode="full"] .bu-aside.is-stacked .bu-step-copy.is-active { transform: translateY(0); }
[data-bu-mode="full"] .bu-aside .bu-step-copy h2 { margin-top: 12px; font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
[data-bu-mode="full"] .bu-aside .bu-step-copy p { font-size: 15.5px; line-height: 1.6; }
[data-bu-mode="full"] .bu-bridge { display: none; }
[data-bu-mode="full"] ~ .bu-walk .bu-bridge { display: none; }
.bu-walk.is-moved .bu-bridge { display: none; }
.bu-walk.is-moved .bu-step { display: none; }
.bu-walk.is-moved { padding: 0 0 40px; }
.bu-walk.is-moved .bu-walk-note { margin-top: 0; }

/* Trin 1, nederste række: kurve over tid + spørgsmål med flest omtaler */
.bu-ov-row { display: grid; gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .bu-ov-row { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.bu-dash-main .bu-ov-row { grid-template-columns: 1.15fr 1fr; }
.bu-chart { display: flex; flex-direction: column; }
/* Fast højde: en SVG med viewBox 0 0 100 100 bliver ellers kvadratisk. */
.bu-chart-body { position: relative; height: 220px; }
.bu-dash-main .bu-chart-body { flex: 1 1 auto; height: auto; min-height: 170px; }
.bu-plot { position: absolute; top: 8px; right: 12px; bottom: 20px; left: 40px; }
.bu-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bu-grid { fill: none; stroke: var(--db-border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bu-line { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bu-line.is-own { stroke-width: 2.4; }
.bu-hmark { position: absolute; top: 36.4%; left: 100%; width: 16px; height: 16px; flex-basis: 16px; border: 1px solid var(--db-border); background: #FFFFFF; box-shadow: var(--db-shadow); transform: translate(-50%, -50%); }
.bu-y { position: absolute; left: 0; width: 32px; color: var(--db-faint); font-size: 10px; text-align: right; transform: translateY(-50%); }
.bu-y.is-y75 { top: 8px; }
.bu-y.is-y60 { top: calc(8px + (100% - 28px) * .2); }
.bu-y.is-y40 { top: calc(8px + (100% - 28px) * .4667); }
.bu-y.is-y20 { top: calc(8px + (100% - 28px) * .7333); }
.bu-y.is-y0 { top: calc(100% - 20px); }
.bu-x { position: absolute; bottom: 4px; color: var(--db-faint); font-size: 10px; transform: translateX(-50%); white-space: nowrap; }
.bu-x.is-x1 { left: calc(40px + (100% - 52px) * .1429); }
.bu-x.is-x2 { left: calc(40px + (100% - 52px) * .4286); }
.bu-x.is-x3 { left: calc(40px + (100% - 52px) * .7143); }
.bu-x.is-x4 { left: calc(100% - 12px); transform: translateX(-100%); }
.bu-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px 12px; color: var(--db-text-2); font-size: 10.5px; }
.bu-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.bu-legend > span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--c); }
.bu-qs-list { display: flex; flex-direction: column; padding: 0 16px 8px; }
.bu-qs-list li { display: grid; min-height: 44px; grid-template-columns: 14px minmax(0, 1fr) 118px; align-items: center; gap: 10px; border-top: 1px solid var(--db-border-soft); font-size: 12px; }
.bu-qs-list li b { color: var(--db-text); font-weight: 600; line-height: 1.3; }
.bu-qs-n { display: flex; align-items: center; gap: 8px; color: var(--db-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.bu-qs-n .bu-bar { width: 52px; }
@media (max-width: 560px) { .bu-qs-list li { grid-template-columns: 14px minmax(0, 1fr); } .bu-qs-n { grid-column: 2; } }

/* Mobil: den femte KPI fylder hele rækken, så der ikke står et tomt felt */
@media (max-width: 720px) {
  .bu-kpi:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
}

/* Trin 2: højere rækker i Top 6 og lidt større tekst i det gemte svar */
.bu-top6 .bu-tr:not(.bu-th) { min-height: 46px; }
.bu-answer-text { font-size: 13px; line-height: 1.6; }
.bu-answer-q { font-size: 14px; }

/* Statisk udgave på brede skærme: billederne må ikke fylde en hel skærm */
@media (min-width: 900px) {
  .bu-poster, .bu-bridge img { max-height: 560px; object-fit: cover; }
}

/* Trin 2: samme spørgsmål på de andre platforme, under det gemte svar */
.bu-others { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--db-border-soft); }
.bu-others-title { display: block; margin-bottom: 6px; color: var(--db-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.bu-others li { display: grid; min-height: 34px; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-top: 1px solid var(--db-border-soft); font-size: 11.5px; color: var(--db-text-2); }
.bu-others li > span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--db-text); white-space: nowrap; }
.bu-others .bu-pill { font-size: 10px; padding: 2px 7px; }
.bu-others .bu-pill.is-red { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.bu-answer-foot { margin-top: 10px; }

@media (max-width: 600px) {
  .bu-others li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding-block: 10px; }
  .bu-others li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
  .bu-others li > .bu-pill { grid-column: 2; grid-row: 1; }
}

/* Dashboardet er skærmens eget billede: ingen kortskygge, ingen afrunding,
   ingen udvendig kant. Kun en meget svag refleksion øverst til venstre, som
   følger skærmens perspektiv, uden at dæmpe kontrast eller farver. */
[data-bu-mode="full"] .bu-screen .bu-dash { border: 0; border-radius: 1px; box-shadow: none; }
[data-bu-mode="full"] .bu-screen-glass {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 44%);
}
[data-bu-mode="full"] .bu-demo-tag { display: inline-flex; opacity: 0; pointer-events: none; will-change: opacity; }
.bu-screen-glass { display: none; }