/* ==========================================================================
   Hawking website-widgets — gedeelde stijlen
   Bouwt op de tokens van het Hawking Discovery Design System
   (ds/…/tokens.css + components/bundle.css). Elke widget is één .hdw-root,
   vloeiend in breedte; compacte weergave hangt aan de breedte van de widget
   (container query), niet aan het scherm.
   ========================================================================== */

.hdw { font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; box-sizing: border-box; container-type: inline-size; container-name: hdw; }
.hdw *, .hdw *::before, .hdw *::after { box-sizing: border-box; }
.hdw button, .hdw input, .hdw textarea, .hdw select { font-family: inherit; }
.hdw p { margin: 0; }
.hdw-stage { background: var(--surface-page); padding: 28px; min-height: 100%; }
@container hdw (max-width: 520px) { .hdw-stage { padding: 16px; } }
.hdw-col { display: flex; flex-direction: column; }
.hdw-row { display: flex; align-items: center; }
.hdw-grow { flex: 1 1 auto; min-width: 0; }
.hdw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hdw .tab { font-variant-numeric: tabular-nums; }

/* ---------- Iconen (lijn-iconen als masker: volgen currentColor) ---------- */
.i { display: inline-block; flex: none; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.125em; }
.i-wand { --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.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z'/><path d='m14 7 3 3M5 6v4M19 14v4M10 2v2M7 8H3M21 16h-4M11 3H9'/></svg>"); }
.i-chev-down { --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='m6 9 6 6 6-6'/></svg>"); }
.i-chev-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='m18 15-6-6-6 6'/></svg>"); }
.i-chev-right { --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='m9 18 6-6-6-6'/></svg>"); }
.i-chev-left { --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='m15 18-6-6 6-6'/></svg>"); }
.i-check { --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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.i-check-circle { --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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m8.5 12 2.5 2.5 4.5-5'/></svg>"); }
.i-plus { --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='M5 12h14M12 5v14'/></svg>"); }
.i-mic { --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='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/></svg>"); }
.i-pause { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='6' y='4' width='4' height='16' rx='1'/><rect x='14' y='4' width='4' height='16' rx='1'/></svg>"); }
.i-user { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='7.5' r='4.5'/><path d='M3.5 21a8.5 7 0 0 1 17 0Z'/></svg>"); }
.i-list-check { --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='M11 18H3M15 18l2 2 4-4M16 12H3M16 6H3'/></svg>"); }
.i-calendar { --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='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.i-calendar-check { --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='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/></svg>"); }
.i-history { --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='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5M12 7v5l4 2'/></svg>"); }
.i-book { --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 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/><path d='M12 6.5v6M9 9.5h6'/></svg>"); }
.i-chart-line { --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='M3 3v18h18'/><path d='m7 15 4-4 4 3 5-6'/></svg>"); }
.i-chart-bar { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18M18 17V9M13 17V5M8 17v-3'/></svg>"); }
.i-trend-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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 7 13.5 15.5 8.5 10.5 2 17'/><path d='M16 7h6v6'/></svg>"); }
.i-trend-down { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 17 13.5 8.5 8.5 13.5 2 7'/><path d='M16 17h6v-6'/></svg>"); }
.i-target { --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'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }
.i-pill { --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='m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z'/><path d='m8.5 8.5 7 7'/></svg>"); }
.i-moon { --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='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>"); }
.i-alert { --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.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4M12 17h.01'/></svg>"); }
.i-users { --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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.i-file { --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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/></svg>"); }
.i-file-pen { --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='M12.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v9.5'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M13.4 15.6a1 1 0 1 0-3-3l-5 5a2 2 0 0 0-.5.85l-.84 2.87a.5.5 0 0 0 .62.62l2.87-.84a2 2 0 0 0 .85-.5z'/></svg>"); }
.i-quote { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 0-1 1v2c0 1 0 1 1 1z'/><path d='M15 21c3 0 7-1 7-8V5c0-1.25-.76-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'/></svg>"); }
.i-undo { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14 4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/></svg>"); }
.i-redo { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 14 5-5-5-5'/><path d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/></svg>"); }
.i-x { --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='M18 6 6 18M6 6l12 12'/></svg>"); }
.i-search { --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'><circle cx='11' cy='11' r='7.5'/><path d='m21 21-4.3-4.3'/></svg>"); }
.i-folder { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M2 6a2 2 0 0 1 2-2h5l2 2.5h9a2 2 0 0 1 2 2V9H2Z'/><path d='M2 11h20l-1.6 8.3A2 2 0 0 1 18.4 21H5.6a2 2 0 0 1-2-1.7Z'/></svg>"); }
.i-home { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 10.2a2 2 0 0 1 .7-1.5l7-6a2 2 0 0 1 2.6 0l7 6a2 2 0 0 1 .7 1.5V19a2 2 0 0 1-2 2h-4v-6.5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1V21H5a2 2 0 0 1-2-2Z'/></svg>"); }
.i-cal-solid { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v3H3V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1Z'/><path d='M3 11h18v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/></svg>"); }
.i-bars-solid { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><rect x='3' y='12' width='4.5' height='9' rx='1.5'/><rect x='9.75' y='4' width='4.5' height='17' rx='1.5'/><rect x='16.5' y='8' width='4.5' height='13' rx='1.5'/></svg>"); }
.i-chat-solid { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.5 3 2 6.8 2 11.5c0 2.3 1.1 4.4 2.9 5.9L4 21.5l4.6-2.2c1 .3 2.2.5 3.4.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3Z'/></svg>"); }
.i-chat { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/></svg>"); }
.i-gear { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M10.3 2h3.4l.5 2.6c.6.2 1.2.5 1.7.9l2.5-.9 1.7 2.9-2 1.7a7 7 0 0 1 0 1.9l2 1.7-1.7 2.9-2.5-.9c-.5.4-1.1.7-1.7.9l-.5 2.6h-3.4l-.5-2.6a7 7 0 0 1-1.7-.9l-2.5.9-1.7-2.9 2-1.7a7 7 0 0 1 0-1.9l-2-1.7 1.7-2.9 2.5.9c.5-.4 1.1-.7 1.7-.9ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z' transform='translate(0 1.5)'/></svg>"); }
.i-bell { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2a6 6 0 0 0-6 6c0 6-3 8-3 8.5V18h18v-1.5S18 14 18 8a6 6 0 0 0-6-6Z'/><path d='M9.5 20a2.6 2.6 0 0 0 5 0Z'/></svg>"); }
.i-copy { --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='8' y='8' width='14' height='14' rx='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>"); }
.i-lock { --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='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.i-info { --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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>"); }
.i-mars { --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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10' cy='14' r='6'/><path d='m20 4-5.6 5.6M15 4h5v5'/></svg>"); }
.i-venus { --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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='6'/><path d='M12 15v7M9 19h6'/></svg>"); }
.i-arrow-right { --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='M5 12h14M13 6l6 6-6 6'/></svg>"); }
.i-arrow-down { --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 5v14M6 13l6 6 6-6'/></svg>"); }
.i-sliders { --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 5h-7M10 5H3M21 12h-9M8 12H3M21 19h-5M12 19H3M14 3v4M8 10v4M16 17v4'/></svg>"); }
.i-user-cog { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='9' cy='7' r='4'/><path d='M2 20a7 6 0 0 1 11.3-4.7A5 5 0 0 0 13.5 21H3a1 1 0 0 1-1-1Z'/><circle cx='18.5' cy='17.5' r='3.2' fill='none' stroke='black' stroke-width='2'/><path d='M18.5 12.5v1.6M18.5 20.9v1.6M23.5 17.5h-1.6M15.1 17.5h-1.6' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.i-clipboard-check { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path fill-rule='evenodd' d='M9 2h6a1 1 0 0 1 1 1v1h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1Zm6.7 9.7-1.4-1.4-3.3 3.3-1.3-1.3-1.4 1.4 2.7 2.7Z'/></svg>"); }
.i-phone { --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='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/></svg>"); }
.i-video { --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='2' y='6' width='14' height='12' rx='2'/><path d='m16 13 5.2 3.5a.5.5 0 0 0 .8-.4V7.9a.5.5 0 0 0-.8-.4L16 11'/></svg>"); }
.i-handshake { --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'><circle cx='8' cy='7' r='3'/><circle cx='16' cy='7' r='3'/><path d='M2 20v-1.5A4.5 4.5 0 0 1 6.5 14h3A4.5 4.5 0 0 1 14 18.5V20M14.5 14h3a4.5 4.5 0 0 1 4.5 4.5V20'/></svg>"); }
.i-activity { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); }
.i-flag { --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 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/></svg>"); }
.i-clipboard-list { --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='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/></svg>"); }
.i-shield { --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='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>"); }
.i-pen { --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.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5zM15 5l4 4'/></svg>"); }
.i-link { --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.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>"); }
.i-hourglass { --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 22h14M5 2h14M17 22v-4.17a2 2 0 0 0-.59-1.42L12 12l-4.41 4.41A2 2 0 0 0 7 17.83V22M7 2v4.17a2 2 0 0 0 .59 1.42L12 12l4.41-4.41A2 2 0 0 0 17 6.17V2'/></svg>"); }
.i-route { --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.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='19' r='3'/><path d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/><circle cx='18' cy='5' r='3'/></svg>"); }
.i-id { --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='2' y='4' width='20' height='16' rx='2'/><circle cx='8.5' cy='11' r='2.2'/><path d='M5 16.5a3.8 3.8 0 0 1 7 0M15 9.5h4M15 13h3'/></svg>"); }
.i-send { --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='M14.5 21.7a.5.5 0 0 0 .94-.03L21.96 2.65a.5.5 0 0 0-.63-.63L2.35 8.53a.5.5 0 0 0-.03.94l7.93 3.18a2 2 0 0 1 1.11 1.11z'/><path d='m21.85 2.15-10.94 10.94'/></svg>"); }
.i-archive { --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='2' y='3' width='20' height='5' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/></svg>"); }
.i-hexes { --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-linejoin='round'><path d='M3 6.5 6 4.8l3 1.7v3.4l-3 1.7-3-1.7zM15 6.5l3-1.7 3 1.7v3.4l-3 1.7-3-1.7zM9 14.1l3-1.7 3 1.7v3.4l-3 1.7-3-1.7z'/></svg>"); }
.i-tap { --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='M18 11V9a2 2 0 0 0-4 0M14 10V8a2 2 0 0 0-4 0v2M10 9.5V4a2 2 0 0 0-4 0v10'/><path d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></svg>"); }

/* ---------- Kaart (Card) ---------- */
.hd-card { background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.hd-card-head { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); position: relative; }
.hd-card-title { margin: 0; font: var(--fw-semibold) var(--text-lg) var(--font-body); color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hd-card-body { padding: 16px; position: relative; }
.hd-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; }
.hd-chip-sm { width: 28px; height: 28px; font-size: 13px; }

/* AI-signatuur — uitsluitend voor gegenereerde inhoud */
.hd-ai { border-color: color-mix(in oklab, var(--color-orchid-400) 22%, var(--border-subtle)); }
.hd-ai .hd-card-head { background: linear-gradient(100deg, color-mix(in oklab, var(--color-sky-400) 13%, var(--surface-page)), color-mix(in oklab, var(--color-orchid-400) 13%, var(--surface-page))); border-bottom-color: color-mix(in oklab, var(--color-orchid-400) 26%, transparent); }
.hd-ai .hd-card-head .hd-chip { background: linear-gradient(135deg, var(--color-sky-400), var(--color-orchid-400)); color: #fff; box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-orchid-400) 14%, transparent); }
.hd-ai-wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--color-sky-400) 7%, transparent) 0%, transparent 58%), radial-gradient(110% 100% at 100% 0%, color-mix(in oklab, var(--color-orchid-400) 8%, transparent) 0%, transparent 55%); }
.hd-ai-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hd-ai-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -45%; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-sky-400) 14%, transparent), transparent); animation: hdw-sheen 1.5s var(--ease-out) infinite; }
@keyframes hdw-sheen { 0% { left: -45%; } 100% { left: 105%; } }

/* ---------- Badge ---------- */
/* Gelijk aan DS Badge: 20px hoog, 4px radius, zachte toon, rand alleen bij warning */
.hd-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font: var(--fw-semibold) var(--text-2xs) var(--font-body); white-space: nowrap; border: 1px solid transparent; }
.hd-badge .i { font-size: 10px; }
.hd-badge-info { background: var(--info-soft); color: var(--info-text); }
.hd-badge-success { background: var(--success-soft); color: var(--success-text); }
.hd-badge-danger { background: var(--danger-soft); color: var(--danger-text); }
.hd-badge-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-text); }
.hd-badge-neutral { background: var(--surface-active); color: var(--text-secondary); }
.hd-badge-outline-danger { background: transparent; border-color: var(--danger-border); color: var(--danger-text); border-radius: var(--radius-sm); height: 24px; padding: 0 8px; font-size: 12px; }

/* ---------- Knoppen ---------- */
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height-md); padding: 0 15px; font: var(--fw-semibold) 13px var(--font-body); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; color: #fff; background: var(--color-sky-700); border-color: var(--btn-primary-border); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.hd-btn:hover { background: var(--btn-primary-hover); }
.hd-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hd-btn:disabled { opacity: .55; cursor: not-allowed; }
.hd-btn .i { font-size: .95em; }
.hd-btn-sm { height: var(--control-height-sm); padding: 0 12px; font-size: 12px; }
.hd-btn-pill { border-radius: var(--radius-pill); }
.hd-btn-default { background: var(--color-space-700); border-color: var(--btn-default-border); color: var(--color-white); }
.hd-btn-default:hover { background: var(--color-space-600); }
.hd-btn-outline { background: var(--btn-outline-bg); border-color: var(--border-default); color: var(--text-secondary); box-shadow: var(--shadow-control); }
.hd-btn-outline:hover { background: var(--surface-hover); color: var(--text-primary); }
.hd-btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.hd-btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.hd-btn-subtle { background: var(--surface-subtle); border-color: transparent; color: var(--text-secondary); }
.hd-btn-subtle:hover { background: var(--surface-subtle-hover); color: var(--text-primary); }
.hd-btn-grass { background: var(--color-grass-700); border-color: var(--btn-grass-border); color: #fff; }
.hd-btn-grass:hover { background: var(--btn-grass-hover); }
.hd-btn-rec { background: var(--color-tomato-500); border-color: var(--color-tomato-400); color: #fff; }
.hd-btn-rec:hover { background: var(--color-tomato-400); }
.hd-btn-link { background: transparent; border: none; height: auto; padding: 0; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.hd-btn-link:hover { background: transparent; color: var(--text-primary); }
.hd-ibtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hd-ibtn:hover { background: var(--surface-hover); color: var(--text-primary); }
.hd-ibtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hd-ibtn-subtle { background: var(--surface-subtle); }
.hd-ibtn-subtle:hover { background: var(--surface-subtle-hover); }
.hd-ibtn.is-rec { background: var(--color-tomato-500); border-color: var(--color-tomato-400); color: #fff; }
.hd-ibtn.is-rec:hover { background: var(--color-tomato-400); }
.hd-pillbar .hd-ibtn-subtle { border-color: var(--border-default); }
.hd-ibtn-box { width: 26px; height: 26px; border-color: var(--border-default); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-primary); }

/* ---------- Segmented tabs ---------- */
.hd-seg { display: flex; gap: 2px; padding: 3px; background: var(--seg-track); border: 1px solid var(--seg-track-border); border-radius: var(--radius-lg); }
.hd-seg-item { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: calc(var(--seg-height) + 2px); padding: 0 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: var(--fw-semibold) var(--text-sm) var(--font-body); cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hd-seg-item:hover { color: var(--text-primary); background: var(--surface-hover); }
.hd-seg-item.is-on { background: var(--seg-active-bg); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--seg-active-ring); }
.hd-seg-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hd-seg-item .i { font-size: 12px; }
.hd-seg-item .lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Laden ---------- */
.hd-spin { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--border-default); border-top-color: var(--icon-accent); animation: hd-spin .7s linear infinite; }
.hd-spin-sm { width: 12px; height: 12px; border-width: 2px; }
.hd-skel { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-raised) 0%, var(--border-subtle) 45%, var(--surface-raised) 90%); background-size: 200px 100%; animation: hd-skeleton 1.4s linear infinite; }
.hd-fade { animation: hd-fade-in var(--dur-slow) var(--ease-out); }
.hd-rise { animation: hd-batch-in var(--dur-slow) var(--ease-out) both; }
.hd-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--icon-accent); animation: hd-dot-pulse 1.2s infinite; }
.hd-dot:nth-child(2) { animation-delay: .18s; } .hd-dot:nth-child(3) { animation-delay: .36s; }

/* ---------- Hint / divider / overline ---------- */
.hd-hint { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.hd-hint .i { color: var(--text-placeholder); font-size: 11px; }
.hd-hints { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 20px; row-gap: 6px; margin-top: 10px; }
.hd-divider { height: 1px; background: var(--border-subtle); border: none; margin: 0; }
.hd-over { font: var(--fw-bold) var(--text-2xs) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.hd-label { font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; }
.hd-req { color: var(--danger-text); }

/* ---------- PillBar + waveform ---------- */
.hd-pillbar { display: inline-flex; align-items: center; gap: 14px; padding: 6px; border-radius: var(--radius-pill); background: var(--surface-input); border: 1px solid var(--border-subtle); max-width: 100%; }
.hd-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
/* Gelijk aan DS Waveform: icon-accent (blauw), gevarieerde balkhoogtes, 0,12s versprongen */
.hd-wave span { display: inline-block; width: 3px; height: 8px; border-radius: 3px; background: var(--icon-accent); transform-origin: center; animation: hd-wave 1s ease-in-out infinite; }
.hd-wave span:nth-child(2) { height: 10px; animation-delay: .12s; } .hd-wave span:nth-child(3) { height: 7px; animation-delay: .24s; } .hd-wave span:nth-child(4) { height: 11px; animation-delay: .36s; } .hd-wave span:nth-child(5) { height: 8px; animation-delay: .48s; } .hd-wave span:nth-child(6) { height: 10px; animation-delay: .6s; }
.hd-wave.is-paused span { animation-play-state: paused; opacity: .45; }
.hd-pulse { animation: hd-pulse-rec 1.8s infinite; }

/* ---------- Tags ---------- */
.hd-tag { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: var(--radius-pill); font: var(--fw-semibold) var(--text-sm) var(--font-body); background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hd-tag:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-primary); }
.hd-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hd-tag .i { font-size: 11px; }
.hd-tag.is-on { background: var(--control-selected); border-color: var(--icon-accent); color: #fff; }
.hd-tag.is-on:hover { filter: brightness(1.1); }
.hd-tag-tomato.is-on { background: var(--color-tomato-700); border-color: var(--color-tomato-500); }

/* ---------- Velden ---------- */
.hd-input { height: var(--control-height-md); width: 100%; padding: 0 12px; background: var(--surface-input); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font: var(--fw-medium) var(--text-md) var(--font-body); color-scheme: dark; outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
[data-theme="light"] .hd-input { color-scheme: light; }
.hd-input:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring-subtle); }
.hd-ta-box { position: relative; width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hd-ta-box:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring-subtle); }
.hd-ta-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); }
.hd-ta { display: block; width: 100%; resize: none; border: none; outline: none; background: var(--surface-input); color: var(--text-primary); font: var(--fw-regular) var(--text-md) var(--font-body); line-height: var(--leading-normal); padding: 12px 14px; }

/* ---------- Avatar ---------- */
.hd-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: var(--fw-bold) 11px var(--font-body); letter-spacing: .02em; color: #fff; }
.hd-av-rose { background: var(--color-rose-500); } .hd-av-sky { background: var(--color-sky-500); } .hd-av-orchid { background: var(--color-orchid-500); } .hd-av-peach { background: var(--color-peach-500); } .hd-av-berry { background: var(--color-berry-500); } .hd-av-grass { background: var(--color-grass-500); } .hd-av-tomato { background: var(--color-tomato-500); }

/* ---------- Toast ---------- */
.hd-toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--radius-lg); background: var(--surface-overlay); border: 1px solid var(--success-border); box-shadow: 0 16px 44px rgba(15,24,36,.5); font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); white-space: nowrap; animation: hd-toast-in var(--dur-medium) var(--ease-out); z-index: 5; }
.hd-toast .i { color: var(--success-text); }

/* ==========================================================================
   Widget-specifiek
   ========================================================================== */

/* ConsultPrep */
.cp-points { display: flex; flex-direction: column; gap: 8px; }
.cp-point { display: flex; align-items: flex-start; gap: 10px; font: var(--fw-medium) var(--text-sm) var(--font-body); color: var(--text-secondary); line-height: var(--leading-normal); }
.cp-point .i { font-size: 13px; margin-top: 3px; color: var(--icon-accent); }
.cp-point .t-success { color: var(--success-text); } .cp-point .t-warning { color: var(--warning-text); } .cp-point .t-danger { color: var(--danger-text); }
.cp-sum { font: var(--fw-regular) var(--text-md) var(--font-body); color: var(--text-secondary); line-height: var(--leading-relaxed); text-wrap: pretty; }
.cp-meta { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
@container hdw (max-width: 520px) { .cp-tabs .hd-seg-item .lbl-long { display: none; } .cp-tabs .hd-seg-item .i { display: none; } }
@container hdw (min-width: 521px) { .cp-tabs .hd-seg-item .lbl-short { display: none; } }

/* SpeechToText */
.stt-card { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-medium) var(--ease-out); }
.stt-card.is-live { border-color: var(--danger-border); }
.stt-tr { height: 230px; overflow-y: auto; padding: 13px 15px; background: var(--surface-input); scroll-behavior: smooth; scrollbar-width: thin; }
.stt-line { display: flex; gap: 10px; margin-bottom: 11px; }
.stt-av { width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.stt-av-s1 { background: var(--color-sky-400); color: #06324a; } .stt-av-s2 { background: var(--color-orchid-500); color: #fff; }
.stt-name-s1 { color: var(--cat-sky-text); } .stt-name-s2 { color: var(--cat-orchid-text); }
.stt-name { font: var(--fw-bold) var(--text-xs) var(--font-body); }
.stt-time { font: var(--fw-medium) var(--text-2xs) var(--font-body); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stt-text { font: var(--fw-regular) var(--text-sm) var(--font-body); color: var(--text-secondary); line-height: 1.5; margin-top: 2px; }
.stt-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.stt-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); font-size: 18px; }
.stt-transport { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); min-height: 76px; }
.stt-timer { font: var(--fw-semibold) var(--text-lg) var(--font-body); color: var(--color-astronaut-200); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
[data-theme="light"] .stt-timer { color: var(--text-primary); }
.stt-fill { display: block; height: 2px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.stt-fill > span { display: block; height: 100%; border-radius: 999px; background: var(--icon-accent); animation: hd-batch-fill 4s linear infinite; }
@container hdw (max-width: 520px) { .stt-tr { height: 300px; } .stt-hide-narrow { display: none; } .hd-pillbar { gap: 10px; } }

/* SuggestedActions */
.sa-row { display: flex; align-items: center; gap: 13px; padding: 12px 13px 12px 15px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px dashed var(--border-default); box-shadow: var(--shadow-sm); transition: background var(--dur-medium) var(--ease-out), border-color var(--dur-medium) var(--ease-out); }
.sa-row.is-done { background: color-mix(in oklab, var(--color-grass-500) 8%, var(--surface-raised)); border-style: solid; border-color: color-mix(in oklab, var(--color-grass-500) 34%, var(--border-default)); }
.sa-ico { width: 32px; height: 32px; flex: none; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background: rgba(56,189,248,.14); color: var(--color-sky-300); font-size: 14px; }
[data-theme="light"] .sa-ico { color: var(--color-sky-800); }
.sa-row.is-done .sa-ico { background: rgba(16,185,118,.16); color: var(--success-text); }
.sa-title { font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-primary); }
.sa-quote { display: flex; align-items: flex-start; gap: 7px; font: var(--fw-medium) var(--text-xs) var(--font-body); line-height: 1.45; color: var(--text-secondary); }
.sa-quote .i { font-size: 9px; color: var(--color-sky-300); margin-top: 4px; }
.sa-quote em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sa-confirm { font: var(--fw-medium) var(--text-xs) var(--font-body); line-height: 1.45; color: var(--success-text); }
@container hdw (max-width: 520px) { .sa-row { flex-wrap: wrap; } .sa-row .sa-act { margin-left: 45px; } }

/* Verbeteren */
.ve-pop { position: relative; z-index: 6; margin: 14px 0 0 auto; width: 380px; max-width: 100%; padding: 14px; background: var(--surface-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: hd-dd-in 130ms var(--ease-out); }
.ve-pop::before { content: ""; position: absolute; top: -7px; right: 48px; width: 12px; height: 12px; background: var(--surface-overlay); border-left: 1px solid var(--border-default); border-top: 1px solid var(--border-default); transform: rotate(45deg); }
.ve-trigger { border-color: var(--border-focus); color: var(--text-primary); box-shadow: var(--focus-ring-subtle); cursor: default; }
.ve-trigger:hover { background: var(--btn-outline-bg); }
.ve-pop textarea { display: block; width: 100%; resize: none; background: var(--surface-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font: var(--fw-regular) var(--text-sm) var(--font-body); line-height: var(--leading-normal); padding: 9px 11px; outline: none; }
.ve-pop textarea:focus { border-color: var(--border-focus); }
.ve-preset { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font: var(--fw-semibold) var(--text-xs) var(--font-body); cursor: pointer; }
.ve-preset:hover { background: var(--surface-hover); color: var(--text-primary); }
.ve-busy { display: inline-flex; align-items: center; gap: 8px; height: var(--control-height-sm); padding: 0 12px; border-radius: var(--radius-md); background: var(--surface-active); border: 1px solid var(--border-default); font: var(--fw-semibold) 12px var(--font-body); color: var(--text-primary); }
.ve-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface-input) 55%, transparent); pointer-events: none; }
@container hdw (max-width: 520px) { .ve-pop { right: 8px; } .ve-btn-label { display: none; } }

/* Journey — marketingpaneel: pijlen (ArrowNav) + bento-kaarten per fase */
.jy-panel { position: relative; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 32px 30px 30px; }
.jy-head { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.jy-mark { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-icon-chip); color: var(--icon-accent); font-size: 20px; margin-bottom: 18px; }
.jy-title { margin: 0 0 10px; font: var(--fw-bold) 32px/1.15 var(--font-body); letter-spacing: -0.01em; color: var(--text-primary); }
.jy-lead { max-width: 640px; font: var(--fw-regular) 17px/1.6 var(--font-body); color: var(--text-secondary); text-wrap: pretty; }
.jy-tap { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) var(--text-sm) var(--font-body); color: var(--text-muted); }
.jy-tap .i { color: var(--icon-accent); }
.jy-well { padding: 10px; border-radius: var(--radius-xl); background: var(--surface-inset); border: 1px solid var(--border-subtle); }
/* ArrowNav — gelijk aan het DS: afgeronde chevrons, haarlijn, 10px overlap */
.jy-arrows { display: flex; flex-flow: row nowrap; overflow: hidden; padding: 1px 0; }
.jy-arrow { position: relative; flex: 1 1 0; min-width: 0; height: 54px; box-sizing: border-box; padding: 0 32px; display: flex; align-items: center; justify-content: center; text-align: center; border: none; background: transparent; cursor: pointer; font: var(--fw-semibold) var(--text-sm) var(--font-body); line-height: 1.16; color: var(--text-secondary); --arrow-fill: var(--surface-hover); --arrow-stroke: var(--border-default); }
.jy-arrow:first-child { padding-left: 18px; }
.jy-arrow:last-child { padding-right: 18px; }
.jy-arrow:not(:first-child) { margin-left: -10px; }
.jy-arrow:hover { color: var(--text-primary); --arrow-fill: var(--surface-active); }
.jy-arrow.is-on { z-index: 1; color: var(--text-on-accent); font-weight: var(--fw-bold); --arrow-fill: var(--control-selected); --arrow-stroke: var(--color-sky-300); }
.jy-arrow:focus-visible { outline: none; }
.jy-arrow:focus-visible .jy-shape path { stroke: var(--border-focus); stroke-width: 2; }
.jy-shape { position: absolute; left: 0; top: 0; z-index: 0; display: block; overflow: visible; pointer-events: none; }
.jy-shape path { fill: var(--arrow-fill); stroke: var(--arrow-stroke); stroke-width: 1; transition: fill var(--dur-fast) ease; }
.jy-label { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jy-select { display: none; width: 100%; height: var(--control-height-md); padding: 0 14px; border-radius: var(--radius-lg); background-color: var(--surface-input); border: 1px solid var(--border-default); color: var(--text-primary); font: var(--fw-semibold) var(--text-md) var(--font-body); color-scheme: dark; cursor: pointer; }
.jy-select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-focus); }
[data-theme="light"] .jy-select { color-scheme: light; }
/* Bento */
.jy-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.jy-c { grid-column: span 12; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: var(--radius-xl); background: var(--surface-page); border: 1px solid var(--border-subtle); animation: hd-batch-in var(--dur-slow) var(--ease-out) both; }
.jy-c.w8 { grid-column: span 8; } .jy-c.rows2 { grid-row: span 2; } .jy-c.w6 { grid-column: span 6; } .jy-c.w4 { grid-column: span 4; } .jy-c.w3 { grid-column: span 3; }
.jy-c:nth-child(2) { animation-delay: 60ms; } .jy-c:nth-child(3) { animation-delay: 120ms; } .jy-c:nth-child(4) { animation-delay: 180ms; }
.jy-ico { width: 40px; height: 40px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 8px; }
.jy-ico.t-sky { background: var(--cat-sky-soft); color: var(--cat-sky-text); }
.jy-ico.t-orchid { background: var(--cat-orchid-soft); color: var(--cat-orchid-text); }
.jy-ico.t-pink { background: var(--cat-pink-soft); color: var(--cat-pink-text); }
.jy-ico.t-canary { background: var(--cat-canary-soft); color: var(--cat-canary-text); }
.jy-ico.t-blue { background: var(--cat-blue-soft); color: var(--cat-blue-text); }
.jy-c h4 { margin: 0; font: var(--fw-bold) 19px/1.25 var(--font-body); color: var(--text-primary); letter-spacing: -0.005em; }
.jy-c p { font: var(--fw-regular) 15px/1.55 var(--font-body); color: var(--text-secondary); text-wrap: pretty; max-width: 520px; }
.jy-goal { display: flex; flex-direction: column; gap: 7px; }
.jy-goal > div { display: flex; justify-content: space-between; gap: 12px; font: var(--fw-medium) var(--text-md) var(--font-body); color: var(--text-primary); }
.jy-goal > div b { font-weight: var(--fw-medium); color: var(--cat-sky-text); font-variant-numeric: tabular-nums; }
.jy-track { height: 5px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; }
.jy-track span { display: block; height: 100%; border-radius: 999px; background: var(--color-sky-500); transform-origin: left; animation: jy-grow .9s var(--ease-out) both; }
@keyframes jy-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jy-hgbox { width: 100%; margin-top: 8px; }
.jy-hg { position: relative; }
.jy-sparks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.jy-spark { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.jy-spark figcaption { display: flex; justify-content: space-between; gap: 12px; font: var(--fw-medium) var(--text-md) var(--font-body); color: var(--text-primary); }
.jy-spark figcaption b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.jy-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
.jy-spark polyline { fill: none; stroke: var(--color-sky-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: jy-draw 1.1s var(--ease-out) .25s both; }
.jy-spark circle { fill: var(--color-sky-500); stroke: var(--surface-raised); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: jy-dot .35s var(--ease-out) 1.2s both; }
@keyframes jy-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jy-dot { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.jy-spark-norm { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.jy-spark-normlabel { fill: var(--text-muted); font: var(--fw-medium) 10px var(--font-body); }
.jy-spark-base { stroke: var(--border-subtle); stroke-width: 1; }
.jy-spark small { font: var(--fw-regular) var(--text-xs) var(--font-body); color: var(--text-muted); }
@container hdw (max-width: 980px) { .jy-c.w3 { grid-column: span 6; } }
@container hdw (max-width: 760px) { .jy-arrows { display: none; } .jy-select { display: block; } .jy-c.w8, .jy-c.w6, .jy-c.w4 { grid-column: span 12; } .jy-c.rows2 { grid-row: auto; } .jy-sparks { grid-template-columns: minmax(0, 1fr); } .jy-title { font-size: 26px; } .jy-lead { font-size: 15px; } }
@container hdw (max-width: 520px) { .jy-panel { padding: 22px 16px 16px; border-radius: 16px; } .jy-c.w3 { grid-column: span 12; } .jy-c { padding: 18px; } .jy-tap { display: none; } }

/* HoneyGrid */
.hg-tile { position: absolute; padding: 0; border: none; background: transparent; cursor: pointer; outline: none; pointer-events: none; }
/* Het optillen van een tegel: rustig en zacht uitlopend, alles in hetzelfde tempo (--hg-lift). */
.hg-box { --hg-lift: 520ms cubic-bezier(.22, 1, .36, 1); }
.hg-ready .hg-tile { transition: filter var(--hg-lift); }
.hg-side, .hg-face { position: absolute; left: 0; pointer-events: none; }
/* Pas na de eerste weergave, anders schuiven de tegels bij het laden van de beginmaat naar de gemeten maat. */
.hg-ready :is(.hg-side, .hg-face) { transition: top var(--hg-lift), height var(--hg-lift), clip-path var(--hg-lift), background var(--hg-lift), transform var(--hg-lift), color var(--hg-lift), font-weight var(--hg-lift); }
/* De zijkant hoort ook bij de tegel: zo blijft de muis boven de tegel als het vlak omhoog gaat, en flikkert
   de hover niet. */
.hg-side { pointer-events: auto; }
.hg-face { pointer-events: auto; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; text-align: center; text-wrap: balance; hyphens: manual; white-space: pre-line; line-height: 1.2; }
.hg-tile:hover .hg-face { filter: brightness(1.1); }
.hg-tile:focus-visible .hg-face { box-shadow: inset 0 0 0 3px var(--border-focus); }
.hg-lvl { width: 14px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in oklab, currentColor 55%, transparent); display: flex; align-items: center; justify-content: center; font: var(--fw-semibold) 9px/1 var(--font-mono); opacity: .9; }
.hg-legend { display: flex; gap: 4px; }
.hg-legend > div { display: flex; flex-direction: column; gap: 6px; width: 48px; }
.hg-legend b { font: var(--fw-semibold) var(--text-xs) var(--font-mono); color: var(--text-muted); }
.hg-legend i { display: block; height: 4px; border-radius: 999px; }
.hg-key { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-secondary); }
.hg-key i { width: 12px; height: 10.4px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); display: inline-block; }

/* Agenda */
.ag-days { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); }
.ag-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: none; background: transparent; cursor: pointer; color: var(--text-secondary); font: var(--fw-semibold) var(--text-2xs) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; border-left: 1px solid var(--border-subtle); position: relative; }
.ag-day b { font: var(--fw-bold) 18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-primary); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ag-day.is-today b { background: var(--control-selected); color: #fff; }
.ag-day.is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--rail-accent); }
.ag-day:hover { background: var(--surface-hover); }
.ag-day:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.ag-cnt { font: var(--fw-medium) 10px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.ag-grid { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); position: relative; }
.ag-hours { position: relative; }
.ag-hour { position: absolute; right: 8px; transform: translateY(-50%); font: var(--fw-medium) 11px var(--font-mono); color: var(--text-muted); }
.ag-col { position: relative; border-left: 1px solid var(--border-subtle); background-image: repeating-linear-gradient(to bottom, var(--border-subtle) 0 1px, transparent 1px 48px); }
.ag-ev { min-height: 20px; }
.ag-col.is-today { background-color: color-mix(in oklab, var(--color-sky-400) 4%, transparent); }
.ag-ev { position: absolute; left: 4px; right: 4px; padding: 5px 8px; border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; gap: 1px; border: 1px solid; cursor: default; animation: hd-fade-in var(--dur-slow) var(--ease-out); }
.ag-ev b { font: var(--fw-semibold) 12px/1.25 var(--font-body); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ev span { font: var(--fw-medium) 11px/1.3 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ev-sky { background: var(--cat-sky-soft); border-color: var(--cat-sky-border); } .ag-ev-sky span { color: var(--cat-sky-text); }
.ag-ev-rose { background: var(--cat-pink-soft); border-color: var(--cat-pink-border); } .ag-ev-rose span { color: var(--cat-pink-text); }
.ag-ev-orchid { background: var(--cat-orchid-soft); border-color: var(--cat-orchid-border); } .ag-ev-orchid span { color: var(--cat-orchid-text); }
.ag-ev-peach { background: var(--warning-soft); border-color: var(--warning-border); } .ag-ev-peach span { color: var(--warning-text); }
.ag-ev-blue { background: var(--cat-blue-soft); border-color: var(--cat-blue-border); } .ag-ev-blue span { color: var(--text-secondary); }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-tomato-500); z-index: 2; pointer-events: none; }
.ag-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-tomato-500); }
.ag-side { display: flex; flex-direction: column; gap: 12px; }
.ag-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border-subtle); }
.ag-stat strong { font: var(--fw-bold) 22px var(--font-body); letter-spacing: -0.01em; }
.ag-stat span { font: var(--fw-medium) var(--text-xs) var(--font-body); color: var(--text-muted); }
.ag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
@container hdw (max-width: 820px) { .ag-layout { grid-template-columns: minmax(0, 1fr); } .ag-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ag-side .ag-next { display: none; } }
@container hdw (max-width: 560px) {
  .ag-days, .ag-grid { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); }
  .ag-grid .ag-col { display: none; }
  .ag-grid .ag-col.is-on { display: block; grid-column: 2 / -1; }
  .ag-side { grid-template-columns: minmax(0, 1fr); }
  .ag-stat { padding: 10px 12px; }
  .ag-day b { width: 30px; height: 30px; font-size: 16px; }
}

/* Formulier */
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.fm-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fm-full { grid-column: 1 / -1; }
.fm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--surface-raised); }
@container hdw (max-width: 520px) { .fm-grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .hdw *, .hdw *::before, .hdw *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}