/* Styles that lived in each widget's own <style> block in the design artifact. */

hd-consult-prep, hd-speech-to-report, hd-recommended-actions, hd-improve-text,
hd-contact-form, hd-honeygrid, hd-journey, hd-dashboard-preview, hd-voice-template, hd-voice-flow, hd-voice-usage, hd-voice-connect, hd-voice-gallery, hd-voice-devices, hd-voice-versions, hd-voice-tour, hd-dashboard-devices { display: block; }

/* Opname */
.stt-tr { scroll-behavior: auto; }
/* Autoplay: the simulated click (tap() in hd-element.js), after the click in the "uitgebreid FTU"
   design (screen recording, 22 Oct 2026): one soft white circle that appears small over the target
   and grows to about 100px while it fades, in about half a second; the target itself does not move.
   Drawn on the widget element, which is the positioning box. */
hd-speech-to-report, hd-journey, hd-voice-flow, hd-voice-usage, hd-voice-connect, hd-voice-gallery, hd-voice-devices, hd-voice-versions, hd-voice-tour, hd-honeygrid, hd-recommended-actions,
hd-start-minute, hd-start-check, hd-start-roles { position: relative; }
.hd-tap { position: absolute; z-index: 1000; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; background: rgba(255,255,255,.5); pointer-events: none; animation: hd-tap 560ms cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes hd-tap { 0% { transform: scale(.28); opacity: .9; } 25% { opacity: .75; } 100% { transform: scale(1); opacity: 0; } }

.stt-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; border-radius: 1px; background: var(--icon-accent); animation: hd-dot-pulse 1s infinite; }

/* Journey */

/* Dashboard: a still preview, soft-focused so the layout reads rather than the text */
.db-skeleton .db-card > :not(.db-ch),
.db-skeleton .db-qa > *,
.db-skeleton h1 + .hdw-row,
.db-skeleton .db-ch .meta { filter: blur(3.4px); opacity: .75; }
.db-skeleton { -webkit-user-select: none; user-select: none; }
.db-skeleton h1, .db-skeleton .db-ch h2 { -webkit-user-select: text; user-select: text; }
.db-static button, .db-static a, .db-static [role=button] { pointer-events: none; cursor: default; }
.db-static * { cursor: default; }
.db-scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--color-space-500) transparent; }
.db-scroll::-webkit-scrollbar { width: 9px; }
.db-scroll::-webkit-scrollbar-thumb { background: var(--color-space-500); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.db-rail { width: 64px; flex: none; box-sizing: border-box; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 16px; background-color: var(--surface-rail); background-image: linear-gradient(180deg, color-mix(in oklab, var(--color-sky-400) 22%, transparent) 0%, transparent 62%); box-shadow: 1px 0 0 var(--border-subtle), 8px 0 20px -10px var(--shadow-edge-color); }
.db-tile-r { position: relative; width: 42px; height: 42px; flex: none; border-radius: var(--radius-md); border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; background: transparent; color: var(--text-muted); }
.db-tile-r.is-on { background: var(--surface-active); color: var(--icon-accent); }
.db-glow { position: absolute; top: -280px; left: -35%; right: -35%; height: 1020px; pointer-events: none; z-index: 0; transform-origin: 45% 25%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, rgba(0,0,0,.45) 60%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, rgba(0,0,0,.45) 60%, transparent 100%); }
.db-glow.a { background: radial-gradient(58% 46% at 26% 30%, color-mix(in oklab, var(--color-sky-400) 46%, transparent) 0%, transparent 68%), radial-gradient(44% 40% at 62% 22%, color-mix(in oklab, var(--color-sky-300) 30%, transparent) 0%, transparent 66%); animation: db-band-a 15s ease-in-out infinite, db-pulse 7s ease-in-out infinite; }
.db-glow.b { background: radial-gradient(50% 44% at 74% 30%, color-mix(in oklab, var(--color-grass-400) 40%, transparent) 0%, transparent 66%); animation: db-band-b 19s ease-in-out infinite, db-pulse 9s ease-in-out infinite reverse; }
@keyframes db-band-a { 0%, 100% { transform: translate3d(-14%,0,0) rotate(-8deg) scaleY(1); } 50% { transform: translate3d(10%,5%,0) rotate(-3deg) scaleY(1.4); } }
@keyframes db-band-b { 0%, 100% { transform: translate3d(12%,4%,0) rotate(6deg) scaleY(1.2); } 50% { transform: translate3d(-10%,-4%,0) rotate(11deg) scaleY(.85); } }
@keyframes db-pulse { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .db-glow { animation: none; } }
.db-qa { display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; width: 100%; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--surface-active) 62%, transparent); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); border: 1px solid color-mix(in oklab, white 16%, transparent); color: var(--text-primary); font-family: var(--font-body); }
.db-qa .chip { flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-icon-chip); color: var(--icon-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.db-qa b { display: block; font: var(--fw-semibold) 13px var(--font-body); }
.db-qa small { display: block; font: 500 11.5px var(--font-body); color: var(--text-muted); }
.db-card { display: flex; flex-direction: column; background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.db-ch { flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); }
.db-ch .chip { flex: none; width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--surface-icon-chip); color: var(--icon-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.db-ch .chip.warn { background: var(--warning-soft); color: var(--warning-text); }
.db-ch h2 { margin: 0; white-space: nowrap; font: var(--fw-semibold) 14px var(--font-body); color: var(--text-primary); }
.db-ch .meta { white-space: nowrap; font: 500 12px var(--font-body); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.db-ch .sp { flex: 1; }
.db-sub { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); }
.db-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border-subtle); }
.db-row:first-child { border-top: none; }
.db-t { font: var(--fw-semibold) 13.5px var(--font-body); color: var(--text-primary); }
.db-s { font: 500 12px var(--font-body); color: var(--text-muted); }
.db-time { width: 38px; flex: none; display: flex; flex-direction: column; align-items: center; font: var(--fw-medium) 12px/1.15 var(--font-mono); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.db-time i { display: block; width: 1px; height: 5px; background: var(--text-muted); margin: 2px 0; }
.db-bar { width: 3px; align-self: stretch; min-height: 30px; border-radius: 2px; flex: none; }
.db-trow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 14px 14px 14px 10px; border-top: 1px solid var(--border-subtle); }
.db-trow:first-child { border-top: none; }
.db-chk { flex: none; width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1px solid var(--border-default); background: var(--surface-input); }
.db-task { flex: 1; min-width: 120px; font: 500 13px/1.4 var(--font-body); color: var(--text-secondary); }
.db-task b { font: var(--fw-semibold) 13px var(--font-body); color: var(--text-primary); border-bottom: 1px dotted var(--border-strong); }
.db-new { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--color-sky-300); }
.db-dotcol { flex: none; width: 5px; display: flex; justify-content: center; }
.db-urgent { border-color: var(--danger-border) !important; }
.db-hub { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 16px; background: color-mix(in oklab, var(--surface-raised) 70%, transparent); border: 1px solid color-mix(in oklab, white 16%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); z-index: 4; }
.db-hub button { position: relative; width: 38px; height: 38px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.db-hub em { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-tomato-500); color: #fff; font: 700 9px/16px var(--font-body); font-style: normal; border: 2px solid var(--surface-raised); box-sizing: content-box; }

/* Template aanpassen (Discovery Voice) */
.i-arrow-up { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5M6 11l6-6 6 6'/></svg>"); }
.i-trash { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/></svg>"); }
.i-building { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M9 7h2M13 7h2M9 11h2M13 11h2M10 21v-4h4v4'/></svg>"); }
.vt-field .hd-ta { padding: 8px 12px; }
.vt-name { display: flex; gap: 10px; align-items: flex-end; }
.vt-icon { display: inline-flex; align-items: center; gap: 8px; height: var(--control-height-md); padding: 0 10px 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-input); color: var(--text-secondary); cursor: pointer; }
.vt-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vt-icon .hd-chip { width: 28px; height: 28px; }
.vt-hint { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.vt-field { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-raised); }
.vt-field .hd-ibtn:disabled { opacity: .35; cursor: default; background: transparent; }
.vt-add { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); font: var(--fw-semibold) var(--text-sm) var(--font-body); cursor: pointer; }
.vt-add:hover { background: var(--surface-hover); }
.vt-add:disabled { opacity: .45; cursor: default; background: transparent; }
.vt-add:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Verbeteren met AI: the instructions float over the text box, above the button, instead of pushing the
   widget taller (hd-widgets.css puts .ve-pop in the flow, under the box). */
.ve-pop.ve-pop-up { position: absolute; right: 10px; bottom: 52px; margin: 0; }
.ve-pop.ve-pop-up::before { top: auto; bottom: -7px; transform: rotate(225deg); }


/* Van gesprek naar verslag (hd-voice-flow), after the Discovery Voice first-time-use tour. One card of
   fixed height, so the page does not move between steps; above it a bar with one part per step. */
.i-save { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h11l3 3v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/><path d='M8 3v5h7V3M8 21v-7h8v7'/></svg>"); }
.vf { max-width: 520px; margin: 0 auto; }
.vf-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.vf-bar > span { flex: 1; height: 3px; border-radius: 2px; background: var(--border-subtle); overflow: hidden; }
.vf-bar i { display: block; height: 100%; width: 0; background: var(--icon-accent); }
.vf-bar .is-done i { width: 100%; }
.vf-bar .is-now i { width: 45%; }
.vf-bar .is-now i[style*="animation-duration"] { width: 0; animation-name: vf-fill; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes vf-fill { to { width: 100%; } }
.vf-card { position: relative; height: 360px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); transition: border-color var(--dur-medium) var(--ease-out); overflow: hidden; }
.vf-card.is-live { border-color: var(--danger-border); }
/* The recording step is the <hd-speech-to-report> card: darker transcript area and the transport bar below,
   edge to edge. */
.vf-card.is-rec { padding: 0; gap: 0; }
.vf-card.is-rec .stt-tr { flex: 1; height: auto; min-height: 0; }
/* Tallest step (the finished report) needs 345px at 480px wide and 417px on a phone: one fixed height per width. */
@container hdw (max-width: 440px) { .vf-card { height: 430px; } }
.vf-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.vf-mic { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--color-tomato-400); background: var(--color-tomato-500); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vf-mic:hover { background: var(--color-tomato-400); }
.vf-mic:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vf-mic-label { font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vf-over { font: var(--fw-semibold) 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.vf-opt { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--surface-inset); color: var(--text-primary); font: var(--fw-semibold) var(--text-sm) var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.vf-opt > .i { color: var(--text-secondary); }
.vf-opt.is-on { border-color: var(--icon-accent); background: color-mix(in oklab, var(--control-selected) 18%, var(--surface-inset)); }
.vf-opt.is-on > .i { color: var(--icon-accent); }
.vf-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vf-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.vf-opt.is-on .vf-radio { border-color: var(--control-selected); background: var(--control-selected); }
.vf-foot { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.vf-status { display: flex; align-items: center; gap: 9px; font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vf-progress { display: block; height: 3px; border-radius: 2px; background: var(--border-subtle); overflow: hidden; }
.vf-progress i { display: block; height: 100%; width: 0; background: var(--icon-accent); }
.vf-progress i.is-analyse { animation: vf-p1 1600ms var(--ease-out) forwards; }
.vf-progress i.is-write { animation: vf-p2 1700ms var(--ease-out) forwards; }
@keyframes vf-p1 { to { width: 100%; } }
@keyframes vf-p2 { to { width: 100%; } }
.vf-field { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.vf-label { font: var(--fw-semibold) 11.5px var(--font-body); color: var(--text-secondary); }
.vf-field p { font: var(--fw-regular) 12.5px/1.45 var(--font-body); color: var(--text-primary); }
.vf-skel { display: flex; flex-direction: column; gap: 6px; padding: 3px 0; }

/* Gebruik (hd-voice-usage), after the usage overview in Discovery Voice's beheer. */
.vu .hd-card-head { gap: 10px; }
.vu-month { position: relative; display: inline-flex; align-items: center; }
.vu-month select { appearance: none; height: 32px; padding: 0 30px 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-input); color: var(--text-primary); font: var(--fw-semibold) var(--text-sm) var(--font-body); cursor: pointer; color-scheme: dark; }
.vu-month select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vu-month .i { position: absolute; right: 10px; font-size: 11px; color: var(--text-secondary); pointer-events: none; }
.vu-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vu-kpi, .vu-saved, .vu-chart { position: relative; padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.vu-kpi { display: flex; flex-direction: column; gap: 2px; }
.vu-kpi-label { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-secondary); }
.vu-kpi b, .vu-saved b { font: var(--fw-semibold) 22px/1.2 var(--font-body); color: var(--text-primary); letter-spacing: -0.01em; }
.vu-delta { display: inline-flex; align-items: center; gap: 4px; font: var(--fw-semibold) 11px var(--font-body); }
.vu-delta.is-up { color: var(--success-text); }
.vu-delta.is-down { color: var(--danger-text, var(--color-tomato-400)); }
.vu-delta.is-flat { color: var(--text-muted); }
.vu-saved { overflow: hidden; border-color: color-mix(in oklab, var(--color-grass-500) 35%, var(--border-subtle)); }
.vu-note { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
/* A slow green sheen over "Tijd bespaard". */
/* De glans over "Tijd bespaard": een smalle band die steeds van links naar rechts over de hele tegel loopt. */
.vu-glow { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; background: linear-gradient(110deg, transparent, color-mix(in oklab, var(--color-grass-400) 22%, transparent) 50%, transparent); animation: vu-sheen 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes vu-sheen { 0% { transform: translateX(-110%); } 75%, 100% { transform: translateX(330%); } }
.vu-chart-title { display: block; margin-bottom: 8px; font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vu-plot { position: relative; height: 96px; margin-left: 30px; border-bottom: 1px solid var(--border-default); }
.vu-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-subtle); }
.vu-grid em { position: absolute; right: calc(100% + 6px); top: -7px; font: var(--fw-medium) 10px var(--font-mono); font-style: normal; color: var(--text-muted); }
.vu-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.vu-bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--color-sky-300); transform-origin: bottom; }
.vu-bar.is-off { background: none; }
.vu-bar:hover { background: var(--color-sky-200, #bae6fd); }
.vu-axis { display: flex; justify-content: space-between; margin: 5px 0 0 30px; font: var(--fw-medium) 10px var(--font-mono); color: var(--text-muted); }
.vu-users { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); overflow: hidden; }
.vu-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 0.7fr 1.3fr; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border-subtle); font: var(--fw-medium) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vu-row-head { border-top: 0; background: var(--surface-inset); font: var(--fw-semibold) 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.vu-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vu-who b { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-who .hd-badge { align-self: flex-start; font-style: normal; }
.vu-min { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vu-track { flex: 1; min-width: 24px; max-width: 90px; height: 4px; border-radius: 2px; background: var(--border-subtle); overflow: hidden; }
.vu-min i { display: block; height: 100%; border-radius: 2px; background: var(--color-sky-300); transform-origin: left; }
.vu-min .tab { white-space: nowrap; }
.vu-more { padding: 9px 12px; border-top: 1px solid var(--border-subtle); font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
/* Indeling: onder elkaar; breed (zoals op de Voice-pagina over de volle breedte) kpi's en besparing in één
   rij, daaronder grafiek naast templates en gebruikers naast aanpassingen. */
.vu-layout { display: flex; flex-direction: column; gap: 12px; }
.vu-top { display: flex; flex-direction: column; gap: 8px; }
.vu-panel { padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-inset); display: flex; flex-direction: column; gap: 9px; }
.vu-panel .vu-chart-title { margin-bottom: 0; }
.vu-bar-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr auto; align-items: center; gap: 10px; font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-primary); }
.vu-bar-row .vu-track { max-width: none; }
.vu-bar-row .tab { min-width: 34px; text-align: right; color: var(--text-secondary); }
.vu-bar-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vu-bar-name b { font-weight: var(--fw-semibold); }
.vu-bar-name em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.vu-panel .vu-track i { display: block; height: 100%; border-radius: 2px; background: var(--color-sky-300); transform-origin: left; }
.vu-edits .vu-track i { background: var(--color-canary-400, #facc15); }
.vu-tpl.run-0 .vu-track i, .vu-edits.run-0 .vu-track i { animation: vu-grow-x0 700ms var(--ease-out) both; }
.vu-tpl.run-1 .vu-track i, .vu-edits.run-1 .vu-track i { animation: vu-grow-x1 700ms var(--ease-out) both; }
.vu-tip { display: flex; gap: 8px; margin-top: 2px; padding: 8px 10px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-canary-400, #facc15) 10%, transparent); font: var(--fw-regular) var(--text-xs)/1.5 var(--font-body); color: var(--text-secondary); }
.vu-tip .i { margin-top: 2px; color: var(--color-canary-400, #facc15); }
.vu-tip b { color: var(--text-primary); font-weight: var(--fw-semibold); }
@container hdw (min-width: 860px) {
  .vu-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
  .vu-top { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.15fr); gap: 8px; }
  .vu-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vu-saved { display: flex; align-items: center; }
  .vu-plot { height: 150px; }
  .vu-users { align-self: start; }
}
/* The animations, as two identical sets so a new run restarts them (see hd-voice-usage.js). */
.vu-bars.run-0 .vu-bar { animation: vu-grow-0 600ms cubic-bezier(.2,.8,.3,1.15) both; }
.vu-bars.run-1 .vu-bar { animation: vu-grow-1 600ms cubic-bezier(.2,.8,.3,1.15) both; }
@keyframes vu-grow-0 { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vu-grow-1 { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.vu-users.run-0 .vu-row:not(.vu-row-head) { animation: vu-in-0 450ms var(--ease-out) both; }
.vu-users.run-1 .vu-row:not(.vu-row-head) { animation: vu-in-1 450ms var(--ease-out) both; }
@keyframes vu-in-0 { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes vu-in-1 { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.vu-users.run-0 .vu-min i { animation: vu-grow-x0 700ms var(--ease-out) both; }
.vu-users.run-1 .vu-min i { animation: vu-grow-x1 700ms var(--ease-out) both; }
@keyframes vu-grow-x0 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vu-grow-x1 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@container hdw (max-width: 420px) { .vu-row { grid-template-columns: minmax(0, 1.4fr) 0.6fr 1.2fr; padding: 9px 10px; } .vu-track { display: none; } .vu-kpi b, .vu-saved b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .vu-glow { display: none; } .vu-bars .vu-bar, .vu-users .vu-row, .vu-min i { animation: none !important; } }

/* Het verslag direct in je ECD (hd-voice-connect). The ECD is someone else's software, so it deliberately
   does not use our design system: system font, square corners, a teal-and-grey palette, boxed tabs and
   dense form fields (--ecd-*). Discovery Voice opens on top as an embedded window in our own design
   (dark, Red Hat, rounded). Fixed height per width. */
.vc { --ecd-bg: #eef1f4; --ecd-paper: #ffffff; --ecd-line: #c5ced8; --ecd-ink: #1f2933; --ecd-muted: #66727f; --ecd-teal: #1d6f78; --ecd-teal-dark: #155961; --ecd-field: #f7f9fa;
  position: relative; height: 440px; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; border: 1px solid #9aa7b4; background: var(--ecd-bg); color: var(--ecd-ink); box-shadow: 0 10px 30px rgba(15, 24, 36, .18); font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.vc-top { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; background: var(--ecd-teal); color: #fff; font-size: 15px; }
.vc-top b { font-weight: 600; letter-spacing: .02em; }
.vc-logo { width: 16px; height: 16px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 3px var(--ecd-teal), inset 0 0 0 7px #fff; }
.vc-client { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--ecd-paper); border-bottom: 1px solid var(--ecd-line); }
.vc-client .hd-av { width: 28px; height: 28px; border-radius: 2px; font-size: 11px; background: #d7dee5; color: var(--ecd-ink); }
.vc-client b { font-size: 13px; font-weight: 600; }
.vc-client span { font-size: 11px; color: var(--ecd-muted); }
.vc-tabs { display: flex; gap: 2px; padding: 6px 10px 0; background: var(--ecd-bg); border-bottom: 1px solid var(--ecd-line); font-size: 12px; color: var(--ecd-muted); }
.vc-tabs span { padding: 5px 12px; border: 1px solid var(--ecd-line); border-bottom: 0; border-radius: 3px 3px 0 0; background: #e2e7ec; }
.vc-tabs .is-on { background: var(--ecd-paper); color: var(--ecd-ink); font-weight: 600; margin-bottom: -1px; padding-bottom: 6px; }
.vc-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px; background: var(--ecd-paper); }
.vc-formhead { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #e3e8ed; }
.vc-formhead b { font-size: 13px; font-weight: 600; }
.vc-type { font-size: 11px; padding: 2px 6px; border-radius: 2px; border: 1px solid var(--ecd-line); color: var(--ecd-muted); background: var(--ecd-field); }
/* The integration point: an ECD-style toolbar button with the Discovery Voice mark. */
.vc-open { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 3px; border: 1px solid var(--ecd-line); background: linear-gradient(#fff, #edf1f4); color: var(--ecd-ink); font: 600 12px "Segoe UI", Tahoma, Arial, sans-serif; cursor: pointer; }
.vc-open .vc-mark { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-tomato-500); color: #fff; font-size: 9px; }
.vc-open:disabled { opacity: .6; cursor: default; }
.vc-open:focus-visible, .vc-save:focus-visible { outline: 2px solid var(--ecd-teal); outline-offset: 1px; }
.vc-field { display: flex; flex-direction: column; gap: 3px; }
.vc-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--ecd-muted); }
.vc-box { min-height: 36px; padding: 6px 8px; border-radius: 2px; border: 1px solid var(--ecd-line); background: var(--ecd-field); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); font-size: 12px; line-height: 1.45; color: var(--ecd-ink); transition: border-color var(--dur-medium) var(--ease-out), background var(--dur-medium) var(--ease-out); }
.vc-box.is-filled { border-color: #8fb8bd; background: #f1f8f8; }
.vc-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 7px; border-top: 1px solid #e3e8ed; }
.vc-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #1e7a46; }
.vc-save { height: 26px; padding: 0 14px; border-radius: 2px; border: 1px solid var(--ecd-teal-dark); background: var(--ecd-teal); color: #fff; font: 600 12px "Segoe UI", Tahoma, Arial, sans-serif; cursor: pointer; }
.vc-save:disabled { opacity: .45; cursor: default; }
.vc-panel { position: absolute; top: 44px; right: 10px; bottom: 10px; width: min(320px, 64%); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-raised); color: var(--text-primary); font-family: var(--font-body); border: 1px solid var(--border-default); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04); animation: vc-in 420ms cubic-bezier(.2,.8,.3,1) both; z-index: 2; }
@keyframes vc-in { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.vc-phead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.vc-dv { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-tomato-500); color: #fff; font-size: 11px; }
.vc-panel .stt-tr { flex: 1; height: auto; min-height: 0; }
.vc-pbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.vc-pbar .stt-timer { font-size: var(--text-sm); }
.vc-check { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-input); }
.vc-sec { padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.vc-sec span { font: var(--fw-semibold) 11px var(--font-body); color: var(--text-secondary); }
.vc-sec p { margin-top: 3px; font: var(--fw-regular) 12px/1.45 var(--font-body); color: var(--text-primary); }
.vc-hint { font: var(--fw-medium) 11px var(--font-body); color: var(--text-muted); }
/* Animation. Before the click the Voice button pulses softly; with the panel open the ECD dims; the panel
   shows a live recording mark; writing the report shimmers (hd-ai-sheen); the ECD fields are typed in
   one by one with a sheen; on save the fields flash green and the message pops in. */
.vc-open.is-hint { animation: vc-ping 1.8s var(--ease-out) infinite; }
@keyframes vc-ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-tomato-500) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.vc-dim { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(10, 16, 26, .38); animation: hd-fade-in 300ms ease both; }
.vc-dv.is-rec { animation: hd-pulse-rec 1.6s infinite; }
.vc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 11px var(--font-body); color: var(--color-tomato-400); }
.vc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-tomato-500); animation: hd-dot-pulse 1s infinite; }
.vc-wave { height: 20px; }
.vc-busy { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; background: var(--surface-input); }
.vc-busy-head { display: flex; align-items: center; gap: 10px; font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vc-wand { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--color-sky-400), var(--color-orchid-500)); animation: vc-wand 1.4s ease-in-out infinite; }
@keyframes vc-wand { 0%, 100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-sky-400) 40%, transparent); } 50% { transform: scale(1.08) rotate(-8deg); box-shadow: 0 0 0 6px transparent; } }
.vc-ghost { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); animation: hd-fade-in 400ms ease both; }
.vc-ghost > span:first-child { font: var(--fw-semibold) 11px var(--font-body); color: var(--text-secondary); }
.vc-ghost .hd-skel { display: block; }
.vc-box { position: relative; overflow: hidden; }
.vc-box.is-typing { border-color: var(--color-sky-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-sky-500) 18%, transparent); }
.vc-box.is-typing::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-sky-400) 22%, transparent), transparent); animation: vc-sweep 900ms ease-in-out infinite; }
@keyframes vc-sweep { to { left: 110%; } }
.vc.is-saved .vc-box.is-filled { animation: vc-ok 1.2s ease both; }
@keyframes vc-ok { 0% { border-color: var(--color-grass-500); background: color-mix(in oklab, var(--color-grass-500) 14%, var(--surface-raised)); } 100% { border-color: color-mix(in oklab, var(--color-sky-500) 55%, var(--border-default)); } }
.vc-saved { animation: vc-up 380ms cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes vc-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vc-check-pop { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; background: var(--color-grass-600, #16a34a); animation: vc-pop 450ms cubic-bezier(.2,.8,.3,1.5) both; }
@keyframes vc-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vc-open.is-hint, .vc-dv.is-rec, .vc-wand, .vc-box.is-typing::after, .vc.is-saved .vc-box.is-filled, .vc-saved, .vc-check-pop { animation: none; } }
/* The filled form needs 424px at 512px wide and 470px on a phone. */
@container hdw (max-width: 440px) { .vc { height: 490px; } .vc-panel { left: 8px; right: 8px; width: auto; } .vc-hint, .vc-type { display: none; } .vc-formhead b { white-space: nowrap; } }
.vc-via { font: var(--fw-semibold) 10px var(--font-body); letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }

/* Icons for the gallery and devices widgets, in the set's line style. */
.i-layout { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 9h18M9 21V9'/></svg>"); }
.i-sign-in { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/></svg>"); }
.i-sync { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 0 1-15.5 6.2L3 16M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M3 21v-5h5'/></svg>"); }

/* Templates per sector (hd-voice-gallery). Fixed height so switching sectors and opening a template do not
   move the page. */
.vg .hd-card-body { height: 372px; }
.vg-sub { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.vg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vg-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 12px 13px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-inset); color: var(--text-primary); text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.vg-tile:hover { border-color: var(--icon-accent); transform: translateY(-1px); }
.vg-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vg-ico { grid-row: span 2; align-self: center; width: 30px; height: 30px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--color-sky-500) 16%, transparent); color: var(--color-sky-300); font-size: 13px; }
.vg-name { font: var(--fw-semibold) var(--text-sm) var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-meta { font: var(--fw-medium) 11px var(--font-body); color: var(--text-muted); }
.vg-prev { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); font: var(--fw-medium) 11px var(--font-body); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-grid.run-0 .vg-tile { animation: vg-in-0 380ms cubic-bezier(.2,.8,.3,1.1) both; }
.vg-grid.run-1 .vg-tile { animation: vg-in-1 380ms cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes vg-in-0 { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vg-in-1 { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.vg-detail { display: flex; flex-direction: column; gap: 10px; }
.vg-dhead { display: flex; align-items: center; gap: 10px; }
.vg-dhead b { font: var(--fw-semibold) var(--text-md) var(--font-body); }
.vg-dhead .vg-ico { grid-row: auto; }
.vg-badge { transition: background var(--dur-medium) var(--ease-out); }
.vg-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.vg-fields li { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); font: var(--fw-medium) var(--text-sm) var(--font-body); color: var(--text-primary); }
.vg-fields li.is-moved { border-color: var(--icon-accent); background: color-mix(in oklab, var(--control-selected) 16%, var(--surface-inset)); animation: vg-move 450ms cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes vg-move { from { transform: translateY(39px); } to { transform: none; } }
.vg-fields .hd-ibtn:disabled { opacity: .3; cursor: default; }
.vg-grip { color: var(--text-muted); font-size: 10px; letter-spacing: -2px; }
.vg-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); font: var(--fw-semibold) 10px var(--font-body); color: var(--text-secondary); }
.vg-note { display: flex; align-items: center; gap: 8px; font: var(--fw-semibold) var(--text-xs) var(--font-body); color: var(--success-text); }
@container hdw (max-width: 440px) { .vg .hd-card-body { height: 452px; } .vg-grid { grid-template-columns: 1fr; gap: 6px; } .vg-tile { padding: 8px 10px; } .vg-prev { display: none; } .vg .hd-seg-item { padding: 0 6px; font-size: 12px; } }

/* One session on three devices (hd-voice-devices). Drawn at 512x400 and scaled to the column. */
.vd-fit { position: relative; overflow: hidden; }
.vd { position: absolute; top: 0; left: 0; transform-origin: 0 0; font-family: var(--font-body); color: var(--text-primary); }
.vd-screen { position: absolute; inset: 0; overflow: hidden; background: var(--surface-page); border-radius: inherit; }
.vd-laptop { position: absolute; left: 48px; top: 10px; width: 352px; height: 226px; border: 8px solid #1b2431; border-radius: 14px 14px 4px 4px; box-shadow: 0 18px 40px rgba(15,24,36,.28); }
.vd-laptop .vd-screen { border-radius: 6px 6px 0 0; }
.vd-base { position: absolute; left: -32px; right: -32px; bottom: -22px; height: 14px; border-radius: 2px 2px 12px 12px; background: linear-gradient(#c3ccd6, #8e9aa8); box-shadow: 0 8px 18px rgba(15,24,36,.2); }
.vd-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 70px; height: 5px; margin-left: -35px; border-radius: 0 0 6px 6px; background: #7d8997; }
.vd-tablet { position: absolute; right: 0; top: 96px; width: 150px; height: 206px; border: 8px solid #1b2431; border-radius: 18px; box-shadow: 0 18px 40px rgba(15,24,36,.3); }
.vd-tablet .vd-screen { border-radius: 10px; }
.vd-phone { position: absolute; left: 0; top: 192px; width: 100px; height: 200px; border: 6px solid #111824; border-radius: 22px; box-shadow: 0 20px 40px rgba(15,24,36,.38); z-index: 2; }
.vd-phone .vd-screen { border-radius: 16px; }
.vd-phone::before { content: ""; position: absolute; top: 4px; left: 50%; width: 30px; height: 6px; margin-left: -15px; border-radius: 4px; background: #111824; z-index: 3; }
.vd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; }
.vd-logo { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-tomato-500); color: #fff; font-size: 15px; }
.vd-h { font: var(--fw-semibold) 15px var(--font-body); }
.vd-h2 { font: var(--fw-semibold) 13px var(--font-body); }
.vd-small { font: var(--fw-medium) 10.5px var(--font-body); color: var(--text-muted); }
.vd-sso { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--control-selected); color: #fff; font: var(--fw-semibold) 12px var(--font-body); cursor: pointer; }
.vd-sso:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vd-app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vd-bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); font-size: 11.5px; }
.vd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-tomato-500); }
.vd-tpl { margin-left: auto; padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-sky-500) 18%, transparent); color: var(--color-sky-300); font: var(--fw-semibold) 10px var(--font-body); }
.vd-tpl-c { margin: 0; }
.vd-wait { color: var(--text-secondary); font-size: 12px; }
.vd-wait .i { color: var(--success-text); font-size: 18px; }
.vd-tr { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 10px 52px 10px 64px; }
.vd-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); }
.vd-sp { flex: none; width: 22px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-inset); color: var(--color-sky-300); font: var(--fw-semibold) 9px var(--font-mono); }
.vd-sp.is-s2 { color: var(--cat-orchid-text, #c4b5fd); }
.vd-report { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 52px 10px 56px; }
.vd-rhead { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.vd-rhead .i { color: var(--icon-accent); }
.vd-rhead .hd-badge { margin-left: auto; }
.vd-rf { padding: 7px 9px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); }
.vd-rf span { font: var(--fw-semibold) 10px var(--font-body); color: var(--text-secondary); }
.vd-rf p { margin-top: 2px; font-size: 11px; line-height: 1.4; }
.vd-lock { color: var(--text-muted); font-size: 11px; }
.vd-lock .i { font-size: 18px; }
.vd-wave { height: 22px; }
.vd-time { font: var(--fw-semibold) 13px var(--font-body); color: var(--color-astronaut-200, #c7d4e6); }
.vd-mic { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-tomato-400); background: var(--color-tomato-500); color: #fff; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vd-mic.is-rec { animation: hd-pulse-rec 1.6s infinite; }
.vd-ok { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-grass-600, #16a34a); color: #fff; font-size: 13px; animation: vc-pop 450ms cubic-bezier(.2,.8,.3,1.5) both; }
.vd-sync { position: absolute; left: 150px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-default); font: var(--fw-semibold) 11.5px var(--font-body); color: var(--text-muted); }
.vd-sync.is-on { color: var(--text-primary); border-color: color-mix(in oklab, var(--color-grass-500) 45%, var(--border-default)); }
.vd-sync.is-on .i { color: var(--success-text); }
/* Elk apparaat zijn eigen werk: verslag op de laptop, template kiezen op de tablet, opnemen op de telefoon. */
.vd-bar-ico { color: var(--icon-accent); font-size: 12px; }
.vd-bar .vd-tpl { margin-left: 0; }
.vd-make, .vd-busy, .vd-badge { margin-left: auto; }
.vd-make { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--control-selected); color: #fff; font: var(--fw-semibold) 10.5px var(--font-body); cursor: pointer; }
.vd-busy { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 10.5px var(--font-body); color: var(--text-secondary); }
.vd-badge { font-size: 10px; }
.vd-fields { display: flex; flex-direction: column; gap: 5px; padding: 8px 50px 8px 12px; }
.vd-fields .vd-rf { position: relative; overflow: hidden; min-height: 40px; padding: 6px 9px; transition: border-color 300ms ease; }
.vd-fields .vd-rf.is-busy { border-color: color-mix(in oklab, var(--color-sky-500) 50%, var(--border-subtle)); }
.vd-fields .vd-rf.is-on { border-color: color-mix(in oklab, var(--color-grass-500) 35%, var(--border-subtle)); }
.vd-fields .vd-rf i.hd-skel { display: block; height: 7px; margin-top: 6px; }
.vd-fields .vd-rf p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-bar-sm { padding: 5px 9px; }
.vd-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; }
.vd-opt { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); color: var(--text-primary); font: var(--fw-semibold) 10.5px var(--font-body); text-align: left; cursor: pointer; transition: border-color 250ms ease, background 250ms ease; }
.vd-opt .i { font-size: 10px; color: var(--text-secondary); }
.vd-opt-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-opt.is-on { border-color: var(--icon-accent); background: color-mix(in oklab, var(--control-selected) 20%, var(--surface-inset)); }
.vd-opt.is-on .i { color: var(--icon-accent); }
.vd-tfoot { margin-top: auto; padding: 0 8px 7px; height: 31px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
/* Het vinkje heeft altijd zijn plek, zodat de regel niet verschuift als je kiest. */
.vd-opt .vd-opt-check { visibility: hidden; }
.vd-opt .vd-opt-check.is-on { visibility: visible; }
.vd-opt { height: 31px; }
.vd-opt-name em { display: block; font: var(--fw-medium) 8.5px var(--font-body); font-style: normal; color: var(--text-muted); }
.vd-go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 24px; border-radius: var(--radius-pill); background: var(--color-tomato-500); color: #fff; font: var(--fw-semibold) 10.5px var(--font-body); }
.vd-url { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; background: var(--surface-inset); border-bottom: 1px solid var(--border-subtle); }
.vd-url > i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-default); }
.vd-url > span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 12px; margin-left: 6px; border-radius: 6px; background: var(--surface-raised); font: var(--fw-medium) 7.5px var(--font-body); color: var(--text-muted); }
.vd-url .i { font-size: 7px; color: var(--success-text); }
.vd-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--icon-accent); animation: vd-blink 900ms steps(2) infinite; }
@keyframes vd-blink { 50% { opacity: 0; } }
.vd-heard { width: 76px; height: 34px; overflow: hidden; font: var(--fw-medium) 8.5px/1.35 var(--font-body); color: var(--text-secondary); }
.vd-rec { gap: 6px; }
.vd-wave.is-off { opacity: .25; }
.vd-wave.is-off span { animation: none !important; }
/* De balk op de laptop houdt één hoogte, met knop of zonder. */
.vd-laptop .vd-bar { height: 30px; padding: 0 10px; }
.vd-make { height: 20px; padding: 0 8px; }
/* Een beetje leven: de apparaten zweven heel licht, elk in een eigen tempo. */
.vd-laptop { animation: vd-float 7s ease-in-out infinite alternate; }
.vd-tablet { animation: vd-float 6s ease-in-out -2s infinite alternate; }
.vd-phone { animation: vd-float 5s ease-in-out -1s infinite alternate; }
@keyframes vd-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vd-laptop, .vd-tablet, .vd-phone, .vd-caret { animation: none; } }
@keyframes vd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vg-grid .vg-tile, .vg-fields li.is-moved, .vd-mic.is-rec, .vd-sync.is-on .i, .vd-ok { animation: none; } }

/* Eén gesprek, twee versies (hd-voice-versions). Fixed height so switching versions does not move the page. */
.vv .hd-card-body { height: 340px; }
.vv-sub { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.vv-doc { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-input); transition: border-color var(--dur-medium) var(--ease-out); }
.vv-doc.is-busy { border-color: var(--icon-accent); }
.vv-meta { display: flex; align-items: center; gap: 8px; }
.vv-label { font: var(--fw-semibold) 11.5px var(--font-body); color: var(--text-secondary); }
.vv-meta .hd-badge { margin-left: auto; }
.vv-text { font: var(--fw-regular) var(--text-sm)/1.6 var(--font-body); color: var(--text-primary); }
.vv-doc.is-busy .vv-text { opacity: .45; }
.vv-text.run-0 { animation: vv-in-0 520ms var(--ease-out) both; }
.vv-text.run-1 { animation: vv-in-1 520ms var(--ease-out) both; }
@keyframes vv-in-0 { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vv-in-1 { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.vv-busy { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-active); border: 1px solid var(--border-default); font: var(--fw-semibold) 11.5px var(--font-body); color: var(--text-secondary); }
.vv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; transition: opacity var(--dur-medium) var(--ease-out); }
.vv-tools.is-off { opacity: .4; }
.vv-act.is-on { border-color: var(--icon-accent); color: var(--text-primary); }
.vv-undo:disabled { opacity: .35; cursor: default; }
.vv-foot { display: flex; align-items: center; gap: 7px; font: var(--fw-medium) 11.5px var(--font-body); color: var(--text-muted); }
.vv-foot .i { color: var(--icon-accent); }
@container hdw (max-width: 440px) { .vv .hd-card-body { height: 420px; } .vv .hd-seg-item .i { display: none; } }

/* Alles voor een goed verslag (hd-voice-tour): five steps along the top, one panel each. Fixed height. */
.vt-steps { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); }
.vt-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); cursor: pointer; font: var(--fw-semibold) 11px var(--font-body); }
.vt-step:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.vt-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-inset); border: 1px solid var(--border-subtle); font-size: 12px; transition: background var(--dur-medium) var(--ease-out), color var(--dur-medium) var(--ease-out); }
.vt-step.is-done .vt-dot { color: var(--icon-accent); }
.vt-step.is-on { color: var(--text-primary); border-bottom-color: var(--icon-accent); }
.vt-step.is-on .vt-dot { background: var(--control-selected); border-color: var(--control-selected); color: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--control-selected) 22%, transparent); }
/* linked: een punt aan de rechterrand van de kaart, op de hoogte van het actieve onderdeel ernaast. */
.vt-pin { display: none; }
.is-beside .vt-pin { display: block; position: absolute; left: 100%; top: var(--pin-y, 50%); transition: top 450ms var(--ease-out); }
.vt-pin i { position: absolute; left: -7px; top: -6.5px; width: 13px; height: 13px; background: var(--surface-inset); border: 1px solid var(--border-subtle); border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.vt-count { font: var(--fw-semibold) 12px var(--font-body); color: var(--text-muted); }
.vt-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-body { height: 300px; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden; }
.vt-body.run-0 > * { animation: vg-in-0 380ms var(--ease-out) both; }
.vt-body.run-1 > * { animation: vg-in-1 380ms var(--ease-out) both; }
.vt-tr { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: hidden; }
.vt-transport { margin-top: auto; }
.vt-ta-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vt-ta { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vt-pop { width: 340px; }
.vt-ta-text { padding: 12px 14px 8px; font: var(--fw-regular) var(--text-sm)/1.55 var(--font-body); color: var(--text-primary); }
.vt-term { padding: 0 3px; border-radius: 4px; background: color-mix(in oklab, var(--color-sky-500) 16%, transparent); color: inherit; box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--color-sky-400) 60%, transparent); }
.vt-term em { margin-left: 5px; padding: 0 4px; border-radius: 3px; background: var(--color-sky-500); color: #fff; font: var(--fw-bold) 8.5px var(--font-body); font-style: normal; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.vt-note { display: flex; align-items: center; gap: 7px; margin-top: auto; font: var(--fw-medium) 11.5px var(--font-body); color: var(--text-muted); }
.vt-note .i { color: var(--success-text); }
.vt-row { display: flex; align-items: center; gap: 10px; }
.vt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-sky-500) 18%, transparent); color: var(--color-sky-300); font: var(--fw-semibold) 12px var(--font-body); }
.vt-small { font: var(--fw-medium) 11px var(--font-body); color: var(--text-muted); }
.vt-field { padding: 8px 11px; border-radius: var(--radius-md); border: 1px dashed var(--border-default); background: var(--surface-inset); min-height: 54px; transition: border-color var(--dur-medium) var(--ease-out), background var(--dur-medium) var(--ease-out); }
.vt-field.is-on { border-style: solid; border-color: color-mix(in oklab, var(--color-sky-500) 50%, var(--border-subtle)); }
.vt-field span { font: var(--fw-semibold) 11px var(--font-body); color: var(--text-secondary); }
.vt-field p { margin-top: 3px; font: var(--fw-regular) 12.5px var(--font-body); color: var(--text-primary); animation: hd-fade-in 400ms ease both; }
.vt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.vt-doc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-inset); opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.vt-doc.is-on { opacity: 1; transform: none; }
.vt-dh { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 12px var(--font-body); color: var(--color-sky-300); }
.vt-doc p { font: var(--fw-regular) 12.5px/1.5 var(--font-body); color: var(--text-primary); }
.vt-imp { display: flex; flex-direction: column; gap: 10px; }
.vt-before { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-inset); font: var(--fw-medium) 13px var(--font-mono); color: var(--text-secondary); transition: color var(--dur-medium) var(--ease-out); }
.vt-before.is-struck { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--color-tomato-400); }
.vt-arrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-sky-500), var(--color-orchid-500)); color: #fff; font: var(--fw-semibold) 11px var(--font-body); }
.vt-after { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--color-grass-500) 45%, var(--border-subtle)); background: color-mix(in oklab, var(--color-grass-500) 8%, var(--surface-inset)); font: var(--fw-regular) 13px/1.5 var(--font-body); color: var(--text-primary); }
.vt-list { display: flex; flex-direction: column; gap: 7px; }
.vt-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-inset); opacity: 0; transform: translateX(-8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), border-color 400ms var(--ease-out); }
.vt-item.is-on { opacity: 1; transform: none; }
.vt-item.is-done { border-color: color-mix(in oklab, var(--color-grass-500) 45%, var(--border-subtle)); }
.vt-item .i { color: var(--text-secondary); }
.vt-item.is-done .i { color: var(--success-text); }
.vt-item b { display: block; font: var(--fw-semibold) 12.5px var(--font-body); }
.vt-item div span { font: var(--fw-medium) 11px var(--font-body); color: var(--text-muted); }
@container hdw (max-width: 440px) { .vt-body { height: 380px; } .vt-two { grid-template-columns: 1fr; } .vt-lbl { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .vv-text, .vt-body > *, .vt-field p { animation: none !important; } .vt-doc, .vt-item { transition: none; } }

/* Aanbevolen acties: kaart met teller, een analyse die door het gesprek loopt, per taak de grondslag uit
   de eigen kaders, en een vinkje dat oppopt met een groene veeg als de taak is aangemaakt. */
.sa .hd-card-body { padding: 14px; }
.sa-body { position: relative; }
.sa-scan { position: absolute; inset: 14px 14px auto; z-index: 1; }
.sa-list.is-hidden { visibility: hidden; }
.sa-swap { display: grid; }
.sa-swap > * { grid-area: 1 / 1; transition: opacity 250ms ease; }
.sa-row:not(.is-done) .sa-confirm, .sa-row.is-done .sa-quote { opacity: 0; visibility: hidden; }
.sa-end { flex: none; align-self: center; display: grid; justify-items: end; }
.sa-end > * { grid-area: 1 / 1; }
.sa-row:not(.is-done) .sa-undo, .sa-row.is-done .sa-act { visibility: hidden; }
/* In een smalle kaart blijft de knop naast de taak, als icoon. */
@container hdw (max-width: 560px) { .sa .sa-row { flex-wrap: nowrap; } .sa .sa-row .sa-act { margin-left: 0; width: 34px; padding: 0; justify-content: center; } .sa-act-lbl { display: none; } }
.cp-sub, .sa-sub { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.sa-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); font: var(--fw-semibold) 12px var(--font-body); color: var(--text-secondary); transition: background 300ms ease, border-color 300ms ease, color 300ms ease; }
.sa-count .i { font-size: 12px; }
.sa-count.is-on { background: color-mix(in oklab, var(--color-grass-500) 14%, transparent); border-color: color-mix(in oklab, var(--color-grass-500) 40%, transparent); color: var(--success-text); }
.sa-count b { display: inline-block; color: var(--text-primary); }
.sa-count b.sa-n-0 { animation: sa-bump-0 420ms cubic-bezier(.3,1.6,.5,1); }
.sa-count b.sa-n-1 { animation: sa-bump-1 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes sa-bump-0 { from { transform: scale(1.6); } to { transform: none; } }
@keyframes sa-bump-1 { from { transform: scale(1.6); } to { transform: none; } }
.sa-scan { display: flex; flex-direction: column; gap: 10px; }
.sa-line { position: relative; overflow: hidden; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid color-mix(in oklab, var(--color-sky-500) 35%, var(--border-subtle)); font: var(--fw-medium) var(--text-sm) var(--font-body); color: var(--text-primary); }
.sa-line .i { font-size: 9px; margin-top: 5px; color: var(--color-sky-300); }
.sa-line em.run-0 { animation: sa-in-0 350ms var(--ease-out) both; }
.sa-line em.run-1 { animation: sa-in-1 350ms var(--ease-out) both; }
@keyframes sa-in-0 { from { opacity: 0; transform: translateY(6px); } }
@keyframes sa-in-1 { from { opacity: 0; transform: translateY(6px); } }
.sa-progress { height: 3px; border-radius: 2px; background: var(--border-subtle); overflow: hidden; }
.sa-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-sky-500), var(--color-orchid-500, #a855f7)); transform-origin: left; }
.sa-progress.run-0 i { animation: sa-fill-0 linear both; }
.sa-progress.run-1 i { animation: sa-fill-1 linear both; }
@keyframes sa-fill-0 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sa-fill-1 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sa .sa-row { position: relative; overflow: hidden; align-items: flex-start; transition: background 350ms ease, border-color 350ms ease; }
.sa .sa-row .sa-act, .sa .sa-row .hd-ibtn { align-self: center; }
.sa-basis { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-sky-500) 14%, transparent); color: var(--color-sky-300); font: var(--fw-semibold) 10.5px var(--font-body); }
.sa-basis .i { font-size: 9px; }
.sa-row.is-fresh .sa-ico { animation: sa-pop 520ms cubic-bezier(.3,1.7,.5,1); }
@keyframes sa-pop { 0% { transform: scale(.4); } 100% { transform: none; } }
.sa-row.is-fresh::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--color-grass-400) 22%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: sa-sweep 900ms ease-out both; }
@keyframes sa-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sa-row.is-fresh::after { display: none; } .sa-row.is-fresh .sa-ico, .sa-count b, .sa-line em, .sa-progress i { animation: none !important; } }

/* Journey: het icoon naast de titel in plaats van erboven, in de kop en in elke kaart. */
.jy-c-head { display: flex; align-items: center; gap: 12px; }
.jy-c-head .jy-ico { flex: none; margin: 0; }
.jy-name { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.jy-name .jy-mark { margin: 0; }
.jy-name .jy-title { margin: 0; }

/* Apparaten die op echte apparaten lijken (hd-voice-devices): smalle zwarte rand achter glas, een
   aluminium rand eromheen, camera, scharnier en voet bij de laptop, knoppen en statusbalk bij de telefoon,
   en een lichte glans over elk scherm. Geen merktekens. */
.vd-laptop, .vd-tablet, .vd-phone { background: #05070a; }
.vd-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 32%, transparent 33%); }
.vd-laptop { border: 7px solid #05070a; border-top-width: 9px; border-radius: 12px 12px 3px 3px; box-shadow: 0 0 0 1.5px #59636f, 0 0 0 2.5px #2a313b, 0 22px 44px rgba(15,24,36,.30); }
.vd-laptop::before { content: ""; position: absolute; top: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d2633; box-shadow: inset 0 0 0 1px #2f3b4b; z-index: 3; }
.vd-laptop .vd-screen { border-radius: 4px 4px 0 0; }
.vd-base { left: -38px; right: -38px; bottom: -21px; height: 12px; border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px; background: linear-gradient(180deg, #eef1f5 0%, #c9d0d8 35%, #a3adb9 80%, #7f8a97 100%); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 14px 22px -8px rgba(15,24,36,.45), 0 4px 6px rgba(15,24,36,.15); }
.vd-base::before { top: 0; width: 64px; height: 4px; margin-left: -32px; border-radius: 0 0 5px 5px; background: linear-gradient(#8d98a5, #a9b3be); }
.vd-base::after { content: ""; position: absolute; left: 36px; right: 36px; top: -3px; height: 3px; border-radius: 1px 1px 0 0; background: linear-gradient(#0b0e13, #3a434f); }
.vd-tablet { border: 9px solid #05070a; border-radius: 20px; box-shadow: 0 0 0 1.5px #5d6773, 0 0 0 3px #262d36, 0 22px 44px rgba(15,24,36,.32); }
.vd-tablet::before { content: ""; position: absolute; top: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d2633; box-shadow: inset 0 0 0 1px #2f3b4b; z-index: 3; }
.vd-tablet::after { content: ""; position: absolute; top: -12.5px; right: 22px; width: 22px; height: 2.5px; border-radius: 2px 2px 0 0; background: #4a535f; }
.vd-tablet .vd-screen { border-radius: 11px; }
.vd-phone { border: 4px solid #05070a; border-radius: 22px; box-shadow: 0 0 0 1.5px #6a7480, 0 0 0 3px #2b323c, 0 24px 44px rgba(15,24,36,.42); }
.vd-phone .vd-screen { border-radius: 18px; }
.vd-phone::before { top: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px #1d2633; z-index: 6; }
/* Eén aan/uit-knop rechts; bewust een generiek toestel, zonder details die eigen zijn aan een merk. */
.vd-phone::after { content: ""; position: absolute; top: 58px; right: -8px; width: 2.5px; height: 22px; border-radius: 0 2px 2px 0; background: #4c5662; }
.vd-status { position: absolute; top: 6px; left: 0; right: 0; height: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font: var(--fw-semibold) 7px var(--font-body); color: var(--text-primary); z-index: 4; }
.vd-sig { display: inline-flex; align-items: flex-end; gap: 1px; height: 6px; }
.vd-sig i { width: 1.5px; background: currentColor; border-radius: 1px; }
.vd-sig i:nth-child(1) { height: 2px; } .vd-sig i:nth-child(2) { height: 3.5px; } .vd-sig i:nth-child(3) { height: 5px; } .vd-sig i:nth-child(4) { height: 6px; }
.vd-batt { width: 11px; height: 6px; margin-left: 3px; border-radius: 1.5px; border: 1px solid currentColor; padding: 1px; box-sizing: border-box; position: relative; }
.vd-batt::before { content: ""; display: block; width: 70%; height: 100%; border-radius: .5px; background: currentColor; }
.vd-home { position: absolute; bottom: 5px; left: 50%; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: var(--text-primary); opacity: .55; z-index: 4; }
.vd-phone .vd-center { padding-top: 18px; }
.vd-tablet .vd-opt { gap: 5px; padding: 0 6px; font-size: 9.5px; }
.vd-tablet .vd-opt .i { font-size: 9px; }

/* Dashboard op een computerscherm en een telefoon (hd-dashboard-devices). Stilstaand beeld: niets reageert
   op de muis. Getekend op 1160x660 en geschaald naar de kolom. */
.dd-fit { position: relative; }
.dd { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.dd-monitor, .dd-phone { box-sizing: content-box; }
/* Eigen, generieke toestellen: een dun en overal even breed zwart kader achter glas met een smalle zilveren
   rand, een metalen voet; een telefoon met dunne randen, ronde hoeken en een ronde camera. Bewust geen
   details die eigen zijn aan één merk. */
.dd-monitor { position: absolute; left: 97px; top: 10px; width: 794px; height: 516px; border: 11px solid #05070a; border-radius: 13px; background: #05070a; box-shadow: 0 0 0 2px #d3d9df, 0 0 0 3.5px #a5afba, 0 0 0 4px #7f8994, 0 46px 60px -34px rgba(15,24,36,.45); }
.dd-monitor::before { content: ""; position: absolute; top: -7px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d2633; box-shadow: inset 0 0 0 1px #2f3b4b; }
.dd-screen, .dd-pscreen { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--surface-page); }
.dd-screen::after, .dd-pscreen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 34%, transparent 35%); }
.dd-neck { position: absolute; left: 50%; top: calc(100% + 4px); width: 150px; height: 92px; margin-left: -75px; z-index: -1; background: linear-gradient(180deg, #8f99a5 0%, #c7ced6 22%, #e3e8ed 60%, #bcc4cd 100%); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.dd-foot { position: absolute; left: 50%; top: calc(100% + 96px); width: 300px; height: 9px; margin-left: -150px; border-radius: 2px 2px 8px 8px; background: linear-gradient(#f1f4f7, #c2cad3 55%, #9ea8b4); box-shadow: 0 14px 22px -10px rgba(15,24,36,.45); }
.dd-phone { position: absolute; left: 843px; top: 168px; width: 210px; height: 455px; border: 5px solid #05070a; border-radius: 32px; background: #05070a; box-shadow: 0 0 0 2px #d3d9df, 0 0 0 3.5px #a5afba, 0 0 0 4px #7f8994, 0 40px 50px -26px rgba(15,24,36,.5); }
/* Camera in een pil bovenin het scherm, met een lens rechts erin. */
.dd-phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 9px; background: #000 radial-gradient(circle at 54px 9px, #1f2a3a 0 2.6px, #0c1118 2.8px 3.8px, transparent 4px); z-index: 3; }
.dd-phone::after { content: ""; position: absolute; top: 104px; right: -10px; width: 3px; height: 40px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #8f99a5, #c9d0d8); }
.dd-pscreen { border-radius: 27px; }
/* De telefoonversie van Mijn overzicht, op 375x812. */
.dm { position: relative; width: 375px; height: 812px; overflow: hidden; background: var(--surface-page); }
.dm .db-glow { top: -420px; }
.dm-status { position: relative; z-index: 2; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; font: var(--fw-semibold) 14px var(--font-body); color: var(--text-primary); }
.dm-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.dm-sig i { width: 3px; background: currentColor; border-radius: 1px; }
.dm-sig i:nth-child(1) { height: 4px; } .dm-sig i:nth-child(2) { height: 6px; } .dm-sig i:nth-child(3) { height: 8.5px; } .dm-sig i:nth-child(4) { height: 11px; }
.dm-batt { width: 22px; height: 11px; margin-left: 6px; border-radius: 3px; border: 1.5px solid currentColor; padding: 1.5px; box-sizing: border-box; }
.dm-batt::before { content: ""; display: block; width: 72%; height: 100%; border-radius: 1px; background: currentColor; }
.dm-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 32px; }
.dm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dm-top h1 { margin: 0 0 3px; font: 600 24px var(--font-body); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.dm-date { font: 500 12.5px var(--font-body); color: var(--text-muted); }
.dm-av { flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-peach-500); color: #3a1702; display: flex; align-items: center; justify-content: center; font: 800 10.5px var(--font-body); letter-spacing: .04em; }
.dm .db-row { padding: 7px 12px; gap: 10px; }
.dm .db-trow { padding: 8px 12px; min-height: 0; }
.dm .db-ch { height: 40px; }
.dm .hd-av { width: 28px; height: 28px; font-size: 10.5px; }
.dm .db-task { min-width: 0; font-size: 12.5px; }
.dm-home { position: absolute; bottom: 8px; left: 50%; z-index: 2; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: var(--text-primary); opacity: .5; }

/* Zonder tablet (hd-voice-devices): de laptop schuift naar rechts, de telefoon is groter (scale, zodat de
   zweefanimatie op transform blijft werken) en staat linksonder voor de laptop. */
.vd-laptop { left: 128px; top: 14px; }
.vd-phone { left: 6px; top: 176px; scale: 1.3; transform-origin: 0 100%; }
.vd-fields { padding: 8px 12px; }