/*
 * Ontwerpcheck. De kleuren, maten en beweging komen uit NEXUS (web/src/app/globals.css en context/product/DESIGN-SYSTEEM.md,
 * deel 3, 4 en 9): neutrale grijzen, het statuspalet (goed, aandacht, fout, info) als enige kleur, radius 0,625rem, de Shell-ease
 * van 300 ms als standaard, 150 ms voor een kleurwissel, 120 ms voor een rij onder de muis, de indicator-curve voor het bolletje
 * van een gesegmenteerde keuze. Letters in rem, zodat grotere tekst op het toestel alles netjes laat meegroeien.
 * "Minder beweging" op het apparaat gaat altijd voor (onderaan).
 */
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --boven: env(safe-area-inset-top, 0px);
  --onder: env(safe-area-inset-bottom, 0px);
  --links: env(safe-area-inset-left, 0px);
  --rechts: env(safe-area-inset-right, 0px);
  --rand: 16px;

  --background: oklch(0.985 0 0);
  --foreground: oklch(0.16 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.28 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.968 0 0);
  --muted: oklch(0.968 0 0);
  --muted-foreground: oklch(0.55 0 0);
  --accent: oklch(0.962 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0 0);
  --input: oklch(0.929 0 0);
  --ring: oklch(0.704 0 0);
  --s-goed: oklch(0.56 0.155 152);
  --s-aandacht: oklch(0.66 0.165 72);
  --s-fout: var(--destructive);
  --s-info: oklch(0.54 0.17 250);
  --overlay: oklch(0.155 0 0 / 60%);
  --schaduw: 0 1px 2px #0000000f;
  --schaduw-zweef: 0 20px 25px -5px #00000026, 0 8px 10px -6px #0000001a;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --indicator: cubic-bezier(0.34, 1.56, 0.64, 1);
  --puls: cubic-bezier(0.4, 0, 0.6, 1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zij: 380px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.155 0 0);
    --foreground: oklch(0.96 0 0);
    --card: oklch(0.205 0 0);
    --primary: oklch(0.87 0 0);
    --primary-foreground: oklch(0.17 0 0);
    --secondary: oklch(0.25 0 0);
    --muted: oklch(0.25 0 0);
    --muted-foreground: oklch(0.7 0 0);
    --accent: oklch(0.24 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.55 0 0);
    --s-goed: oklch(0.72 0.155 152);
    --s-aandacht: oklch(0.8 0.165 72);
    --s-info: oklch(0.7 0.17 250);
    --overlay: oklch(0 0 0 / 65%);
    --schaduw: 0 1px 2px #00000040;
    color-scheme: dark;
  }
}
@media (min-width: 1024px) { :root { --rand: 24px; } }
@media (min-width: 1800px) { :root { --zij: 420px; } }

/* ---------------------------------------------------------------- basis */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--background); color: var(--foreground);
  font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip;
  -webkit-tap-highlight-color: transparent; overflow-wrap: break-word;
}
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; }
.vul { flex: 1 1 0; min-width: 0; }
.leeg { color: var(--muted-foreground); padding: 24px var(--rand); }
.leeg.klein { padding: 4px 0 0; font-size: 0.9375rem; }

/* ---------------------------------------------------------------- knoppen */
.rond {
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; position: relative;
  border: 0; border-radius: 999px; background: transparent; color: var(--foreground);
  transition: background-color 150ms var(--ease), color 150ms var(--ease), opacity 150ms var(--ease);
}
.rond:active:not(:disabled) { background: var(--muted); }
.rond:disabled { opacity: 0.35; }
.rond.primair { background: var(--primary); color: var(--primary-foreground); }
.rond.primair:disabled { opacity: 0.3; }
.teller {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--s-aandacht); color: oklch(0.2 0 0); font-size: 0.6875rem; font-weight: 600; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--background);
}
.tekstknop {
  min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; color: var(--foreground); font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius-md); transition: background-color 150ms var(--ease), opacity 150ms var(--ease); flex: none;
}
.tekstknop:disabled { opacity: 0.4; }
.knop {
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  font-weight: 500; font-size: 0.9375rem; line-height: 1.3; transition: background-color 150ms var(--ease), opacity 150ms var(--ease);
}
.knop.primair { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.knop:disabled { opacity: 0.4; }

/* ---------------------------------------------------------------- de kop */
.kop {
  position: sticky; top: 0; z-index: 30; padding-top: var(--boven);
  background: color-mix(in oklab, var(--background) 96%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
/* De kop: een rond knopje van 44 heeft zijn icoon 12 van zijn rand, dus de kop springt 12 in; zo staat elk icoon en elke tekst op de lijn van de marge */
.kopbinnen { padding: 0 calc(var(--rand) - 12px + var(--rechts)) 0 calc(var(--rand) - 12px + var(--links)); max-width: 760px; margin: 0 auto; }
.kopbalk { min-height: 56px; display: flex; align-items: center; gap: 4px; }
.kopbalk.keuzes { min-height: 0; padding: 2px 0 10px 12px; gap: 8px; }
/* de wissels van het beeld in de kop: ze blijven staan als je scrolt */
.kop .beeldkeuzes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; margin: 0; }
.merk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; text-decoration: none; border-radius: var(--radius-md); min-width: 0; }
.kop .tekstknop { padding: 0 12px; }
.teken { width: 26px; height: 26px; flex: none; }
.merknaam { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.koptitel { flex: 1 1 0; min-width: 0; font-size: 1.0625rem; font-weight: 600; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telnr { font-size: 0.9375rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pijlen { display: flex; gap: 4px; flex: none; }
.verbinding { margin: 8px var(--rand) 0; padding: 10px 14px; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--s-fout) 12%, transparent); color: var(--foreground); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- gesegmenteerde keuze */
.seg {
  position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; padding: 3px; border-radius: 12px; background: var(--muted); isolation: isolate;
}
.seg-duim {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: var(--card);
  box-shadow: 0 1px 2px #0000001a, 0 1px 1px #0000000d;
  transition: transform 420ms var(--indicator), width 300ms var(--ease);
}
.seg-duim.stil { transition: none; }
@media (prefers-color-scheme: dark) { .seg-duim { background: oklch(0.36 0 0); } }
.seg-knop {
  min-height: 38px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted-foreground);
  font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: color 150ms var(--ease);
}
.seg-knop.aan { color: var(--foreground); }
.seg-knop .n { font-variant-numeric: tabular-nums; color: var(--muted-foreground); font-weight: 500; }
.seg-knop.aan .n { color: var(--muted-foreground); }
.seg-knop .ic { width: 18px; height: 18px; }
.seg-knop:has(> .ic:only-child), .seg-knop:has(> .ic + .vk-hoek:last-child) { padding: 0 13px; }
/* het vinkje in de hoek van een wissel: dit beeld (of dit apparaat) is Goed */
.vk-hoek {
  position: absolute; top: 2px; right: 3px; width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center;
  background: var(--s-goed); color: oklch(0.99 0 0); box-shadow: 0 0 0 2px var(--muted); pointer-events: none;
}
.seg-knop.aan .vk-hoek { box-shadow: 0 0 0 2px var(--card); }
@media (prefers-color-scheme: dark) { .vk-hoek { color: oklch(0.16 0 0); } .seg-knop.aan .vk-hoek { box-shadow: 0 0 0 2px oklch(0.36 0 0); } }
.vk-hoek .ic { width: 10px; height: 10px; stroke-width: 3.5; }
/* Het tikvlak is 44 hoog: de knop is 38 en het kussen van 3 eromheen hoort erbij */
.seg-knop { position: relative; }
.seg-knop::after { content: ""; position: absolute; inset: -3px 0; }
.filterknop { margin-left: auto; }

/* ---------------------------------------------------------------- de indeling */
.app { min-width: 0; flex: 1 0 auto; display: flex; flex-direction: column; }
.hoofd { min-width: 0; container-type: inline-size; container-name: hoofd; flex: 1 0 auto; display: flex; flex-direction: column; }
.scherm { max-width: 760px; margin: 0 auto; padding-bottom: 24px; min-width: 0; flex: 1 0 auto; }
.balk { margin-top: auto; }
body.met-balk .scherm { padding-bottom: 8px; }

@media (min-width: 1024px) {
  body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .kop { flex: none; position: relative; }
  .kopbinnen { max-width: none; }
  .verbinding { flex: none; }
  .app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; }
  .zij { flex: none; width: var(--zij); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); }
  .hoofd { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
  .scherm { width: 100%; max-width: 1240px; flex: 1 0 auto; }
  .app.is-raster .scherm { max-width: 1600px; }
}

/* een nieuw scherm komt rustig binnen */
.scherm.in { animation: scherm-in 300ms var(--ease) both; }
.scherm.in.van-rechts { animation-name: scherm-rechts; }
.scherm.in.van-links { animation-name: scherm-links; }
@keyframes scherm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scherm-rechts { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes scherm-links { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- de lijst */
.lijstkop {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px calc(var(--rand) - 12px) 10px var(--rand);
  background: color-mix(in oklab, var(--background) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); min-height: 64px;
}
.inbox .lijstkop { padding-left: calc(var(--rand) - 12px); }
.lijstkop .tekstknop { padding: 0 12px; }
.voortgang { display: flex; align-items: center; gap: 12px; padding: 14px var(--rand) 4px; font-size: 0.8125rem; color: var(--muted-foreground); }
.vg-tekst { flex: none; font-variant-numeric: tabular-nums; }
.vg-balk { flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.vg-vul { display: block; height: 100%; border-radius: inherit; background: var(--s-goed); transition: width 300ms var(--ease); }
.filterregel { display: flex; align-items: center; gap: 4px; padding: 0 calc(var(--rand) - 10px) 0 var(--rand); font-size: 0.8125rem; color: var(--muted-foreground); }
.fr-tekst { flex: 1 1 auto; min-width: 0; }
.filterregel .tekstknop { font-size: 0.875rem; }
.groep {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px var(--rand) 6px;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0.01em;
}
.groep .n { font-weight: 500; font-variant-numeric: tabular-nums; }
.rijen { list-style: none; margin: 0; padding: 0 calc(var(--rand) - 8px); }
.rij {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px; border-radius: var(--radius-xl);
  text-decoration: none; color: inherit; transition: background-color 120ms var(--ease);
}
.rij:active { background: var(--muted); }
.rij.actief { background: var(--muted); }
.duim {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--muted); position: relative;
}
.duim::after, .tduim::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
.duim img, .tduim img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.duim.desktop img, .tduim.desktop img { object-position: top left; }
.rtekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rtitel {
  font-weight: 500; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  overflow-wrap: break-word;
}
.rmeta { font-size: 0.8125rem; line-height: 1.35; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.rsam {
  font-size: 0.9375rem; line-height: 1.4; color: var(--muted-foreground); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* de stand: een vorm en een kleur, zodat het ook zonder kleur te lezen is */
.stip { flex: none; min-width: 10px; height: 24px; display: grid; place-items: center; position: relative; }
.stip::before { content: ""; width: 10px; height: 10px; border-radius: 999px; }
.stip.bij-jou::before { background: var(--s-aandacht); }
.stip.bij-claude::before { box-shadow: inset 0 0 0 2px var(--muted-foreground); }
.stip.bezig::before { background: var(--s-info); }
.stip.bezig::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--s-info); animation: puls 2s var(--puls) infinite; }
.stip.goed::before { display: none; }
.stip.goed { color: var(--s-goed); }
.stip.goed .ic { width: 18px; height: 18px; stroke-width: 2.5; }
@keyframes puls { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.4); } }

/* het raster op de pc */
.tegels { list-style: none; margin: 0; padding: 0 var(--rand); display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tegel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 10px 8px; padding: 8px 8px 12px; border-radius: var(--radius-xl);
  text-decoration: none; color: inherit; transition: background-color 120ms var(--ease); height: 100%;
}
.tduim { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--muted); position: relative; }
.tegel .rtekst { padding-left: 4px; }

.leegvak { padding: 48px var(--rand); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.leegvak .leeg { padding: 0 0 8px; }
.leeg-titel { font-weight: 600; font-size: 1.125rem; }

/* ---------------------------------------------------------------- het ticket */
.ticketnav {
  position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; min-height: 64px;
  padding: 10px calc(var(--rand) - 12px) 10px var(--rand); border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 97%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tn-rij { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ticketnav .beeldkeuzes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding-right: 12px; }
.nav-nx { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkop { padding: 18px var(--rand) 4px; touch-action: pan-y; }
.ttitel { font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: break-word; }
.tt-vink {
  display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 999px; margin-right: 0.35em; vertical-align: -0.16em;
  background: var(--s-goed); color: oklch(0.99 0 0);
}
.tt-vink .ic { width: 0.7em; height: 0.7em; stroke-width: 3; }
@media (prefers-color-scheme: dark) { .tt-vink { color: oklch(0.16 0 0); } }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lab {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; min-height: 26px; border-radius: 999px; background: var(--muted);
  color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; line-height: 1.35; max-width: 100%;
}
.lab.nx { font-variant-numeric: tabular-nums; }
.lstip { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.lab.stand { color: var(--foreground); }
.lab.stand .lstip { background: var(--muted-foreground); }
.lab.bij-jou { background: color-mix(in oklab, var(--s-aandacht) 16%, transparent); }
.lab.bij-jou .lstip { background: var(--s-aandacht); }
.lab.bezig { background: color-mix(in oklab, var(--s-info) 14%, transparent); }
.lab.bezig .lstip { background: var(--s-info); }
.lab.goed { background: color-mix(in oklab, var(--s-goed) 16%, transparent); }
.lab.goed .lstip { background: var(--s-goed); }
.lab.let-op { background: color-mix(in oklab, var(--s-aandacht) 16%, transparent); color: var(--foreground); }
.lab.zacht { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.lab.soort.vraag { background: color-mix(in oklab, var(--s-aandacht) 16%, transparent); color: var(--foreground); }
.lab.soort.vraag .lstip { background: var(--s-aandacht); }
.lab.soort.blokkade { background: color-mix(in oklab, var(--s-fout) 14%, transparent); color: var(--foreground); }
.lab.soort.blokkade .lstip { background: var(--s-fout); }
.lab.soort.live { background: color-mix(in oklab, var(--s-goed) 16%, transparent); color: var(--foreground); }
.lab.soort.live .lstip { background: var(--s-goed); }
.lab.soort.info .lstip { background: var(--s-info); }

.ontwerpregel, .goedregel {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 8px 10px 12px; border-radius: var(--radius-xl); min-height: 52px;
  text-decoration: none; color: inherit; font-size: 0.9375rem; line-height: 1.35;
}
.ontwerpregel { box-shadow: inset 0 0 0 1px var(--border); transition: background-color 120ms var(--ease); padding-right: 12px; }
.goedregel { background: color-mix(in oklab, var(--s-goed) 14%, transparent); }
.or-ic, .gr-ic { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--muted); }
.or-ic.goed, .gr-ic { background: var(--s-goed); color: oklch(0.99 0 0); }
.or-ic .ic, .gr-ic .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.or-tekst, .gr-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.or-sub, .gr-sub { font-size: 0.8125rem; font-weight: 400; color: var(--muted-foreground); }
.gr-kop { font-weight: 600; }
.terugdraai { font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.vk { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; }
.vk .ic { width: 12px; height: 12px; stroke-width: 3; }
.vk.goed { background: var(--s-goed); color: oklch(0.99 0 0); }
.vk.gezien { box-shadow: inset 0 0 0 1.5px currentColor; }
.tgrid { display: flex; flex-direction: column; min-width: 0; }
.tbeeld, .tzij { min-width: 0; }
.tinfo { padding: 12px var(--rand) 0; display: flex; flex-direction: column; gap: 12px; }
.samenvatting { font-size: 1rem; color: var(--foreground); }
.blok { padding: 14px 16px; border-radius: var(--radius-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.blok h2 { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.btijd { font-weight: 400; color: var(--muted-foreground); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.blok.veranderd { background: color-mix(in oklab, var(--s-info) 7%, var(--card)); }
/* op het grote scherm: het ticket in twee kolommen, beeld links en tekst en gesprek rechts */
@container hoofd (min-width: 900px) {
  .tgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 8px 24px; align-items: start; padding: 0 var(--rand); }
  .tgrid .tinfo, .tgrid .draad, .tgrid .beeldvak { padding-left: 0; padding-right: 0; }
  .tzij { position: sticky; top: 72px; }
}

.beeldvak { padding: 16px var(--rand) 0; }
.beeldregel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; margin: -6px 0 4px; font-size: 0.9375rem; }
.br-naam { font-weight: 600; white-space: nowrap; }
.br-stap { color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.beeldregel > .vul { flex: 1 0 0; }
.br-goed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; flex: none; min-height: 44px; }
.br-goed .vk { width: 20px; height: 20px; }
.br-goed .vk .ic { width: 13px; height: 13px; }
.beeldhouder { position: relative; margin: 0 auto; }
.beeldhouder.mobiel { max-width: 440px; }
@media (max-width: 520px) { .beeldhouder.mobiel { max-width: none; } }
.beeld {
  display: block; position: relative; width: 100%; padding: 0; border: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border); cursor: zoom-in; touch-action: pan-y pinch-zoom; margin: 0 auto;
}
.beeld img { display: block; width: 100%; height: auto; }
.beeld::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
/* Markeer: rechts in de regel boven het beeld, zodat hij niets van het beeld bedekt; de knop springt 12 in zodat zijn tekst op de marge staat */
.markeerknop {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; margin-right: -12px; flex: none;
  border: 0; border-radius: 999px; background: none; color: var(--foreground); font-size: 0.9375rem; font-weight: 600;
  transition: background-color 150ms var(--ease);
}
.markeerknop .ic { width: 18px; height: 18px; }
/* de rechthoeken van Juan op het beeld */
.mk-laag { position: absolute; inset: 0; pointer-events: none; }
.mk {
  position: absolute; border-radius: 4px; box-shadow: 0 0 0 2px var(--s-aandacht), 0 0 0 3.5px oklch(0.16 0 0 / 55%);
  background: color-mix(in oklab, var(--s-aandacht) 12%, transparent);
}
.mk.concept { box-shadow: 0 0 0 2px var(--s-info), 0 0 0 3.5px oklch(0.16 0 0 / 55%); background: color-mix(in oklab, var(--s-info) 14%, transparent); }
.mk.licht { animation: mk-licht 1.4s var(--ease) 2; }
@keyframes mk-licht { 0%, 100% { background: color-mix(in oklab, var(--s-aandacht) 12%, transparent); } 40% { background: color-mix(in oklab, var(--s-aandacht) 45%, transparent); } }
.beeldlabel {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500;
  background: oklch(0.16 0 0 / 78%); color: oklch(0.98 0 0); max-width: calc(100% - 20px);
}
.beeldbijschrift { font-size: 0.875rem; color: var(--muted-foreground); margin: -2px 0 10px; }
.vergroot {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: oklch(0.16 0 0 / 62%); color: oklch(0.98 0 0); pointer-events: none;
}
.vergroot .ic { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- het gesprek */
.draad { padding: 24px var(--rand) 8px; }
.kopje { font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 10px; }
.berichten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bericht { display: flex; flex-direction: column; max-width: min(88%, 560px); }
.bel-tekst { padding: 10px 14px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.45; }
.van-claude { align-self: flex-start; }
.van-claude .bel-tekst { background: var(--muted); border-bottom-left-radius: 6px; }
.van-juan { align-self: flex-end; align-items: flex-end; }
.van-juan .bel-tekst { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 6px; }
.van-juan .md a { color: inherit; }
.bmeta { font-size: 0.75rem; color: var(--muted-foreground); padding: 4px 6px 0; font-variant-numeric: tabular-nums; }
.bericht.is-vraag { max-width: 100%; align-self: stretch; }
.bericht.licht .bel-tekst { box-shadow: 0 0 0 2px var(--s-aandacht); }
/* een reactie met een markering: het stukje beeld staat in de ballon; een tik laat het oplichten op het beeld */
.mk-knop { display: block; width: 100%; min-height: 44px; padding: 0; margin: 2px 0 8px; border: 0; background: none; color: inherit; text-align: left; border-radius: 10px; }
.mk-uit { display: block; position: relative; overflow: hidden; border-radius: 10px; max-width: 100%; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.mk-uit img { position: absolute; max-width: none; height: auto; display: block; }
.mk-uit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--s-aandacht); }
.mk-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; opacity: 0.85; }
.mk-label .ic { width: 15px; height: 15px; }
.bericht.is-vraag .antwoorden { margin-top: 8px; }
.verwijzingen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.verwijzing {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border); text-decoration: none; font-size: 0.9375rem; transition: background-color 120ms var(--ease);
}
.vw-soort { flex: none; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.vw-titel { min-width: 0; }

/* opgemaakte tekst */
.md { overflow-wrap: break-word; }
.md > * + * { margin-top: 0.6em; }
.md ul, .md ol { padding-left: 1.3em; margin-bottom: 0; }
.md li + li { margin-top: 0.25em; }
.md h3, .md h4, .md h5 { font-size: 1em; font-weight: 600; }
.md code { font-family: var(--mono); font-size: 0.875em; padding: 1px 5px; border-radius: 5px; background: color-mix(in oklab, currentColor 10%, transparent); }
.md pre { overflow-x: auto; padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in oklab, currentColor 8%, transparent); }
.md pre code { padding: 0; background: none; }
.md blockquote { margin-left: 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted-foreground); }
.md a { text-underline-offset: 2px; }

/* ---------------------------------------------------------------- antwoorden op een vraag */
.antwoorden { display: flex; flex-direction: column; gap: 8px; }
.antwoord {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 14px; text-align: left;
  border: 0; border-radius: var(--radius-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 1rem; line-height: 1.35; transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms var(--ease);
}
.antwoord.gekozen { box-shadow: inset 0 0 0 2px var(--s-goed); background: color-mix(in oklab, var(--s-goed) 8%, var(--card)); cursor: default; }
.antwoord.niet { opacity: 0.6; }
.a-vink {
  width: 22px; height: 22px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--border); display: grid; place-items: center; color: var(--card);
}
.antwoord.gekozen .a-vink { background: var(--s-goed); box-shadow: none; }
.a-vink .ic { width: 14px; height: 14px; stroke-width: 3; }
.a-tekst { flex: 1 1 auto; min-width: 0; }
.advies {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: color-mix(in oklab, var(--s-info) 16%, transparent); color: var(--foreground);
}
.anders-vak { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 2px var(--ring); background: var(--card); }
.anders-knoppen { display: flex; justify-content: flex-end; gap: 8px; }
.eigen-antwoord { padding: 12px 14px; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 2px var(--s-goed); }
.ea-kop { display: block; font-size: 0.8125rem; color: var(--muted-foreground); margin-bottom: 4px; }

/* ---------------------------------------------------------------- de inbox en een melding */
.schrijf {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--rand)); margin: 14px var(--rand) 0; min-height: 48px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 0.9375rem; text-align: left;
  transition: background-color 150ms var(--ease);
}
.mrij { align-items: flex-start; padding: 12px 8px; }
.mrij .rtitel { font-weight: 500; }
.mrij.ongelezen .rtitel { font-weight: 650; }
.mrij.wacht { box-shadow: inset 0 0 0 1px var(--border); background: var(--card); margin: 0 8px 8px; padding: 12px; }   /* de kaart zelf op de marge */
.mmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.mtijd { font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.lab.nieuw { background: color-mix(in oklab, var(--s-info) 18%, transparent); color: var(--foreground); font-weight: 600; }
.actiepil {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 600; line-height: 1.2;
}
.actiepil .ic { width: 16px; height: 16px; }
.mgroep { padding: 22px var(--rand) 8px; }
.mg-kop { display: flex; align-items: baseline; gap: 8px; font-size: 1rem; font-weight: 600; }
.mg-n { font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.mg-uitleg { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 2px; }
.doeregel {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-xl); font-size: 0.9375rem; line-height: 1.45; font-weight: 500;
  background: var(--muted);
}
.doeregel .dr-ic { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; margin-top: 0; }
.doeregel .dr-ic .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.doeregel.vraag { background: color-mix(in oklab, var(--s-aandacht) 16%, transparent); }
.doeregel.vraag .dr-ic { background: var(--s-aandacht); color: oklch(0.2 0 0); }
.doeregel.blokkade { background: color-mix(in oklab, var(--s-fout) 14%, transparent); }
.doeregel.blokkade .dr-ic { background: var(--s-fout); color: oklch(0.99 0 0); }
.doeregel.klaar .dr-ic { background: var(--s-goed); color: oklch(0.99 0 0); }
.doeregel.info .dr-ic { color: var(--s-info); }
.doeregel.info .dr-ic .ic { width: 20px; height: 20px; stroke-width: 2; }
/* pushmeldingen onder de inbox: schakelaars die schuiven (minder beweging: meteen) */
.pushvak { padding: 26px var(--rand) 24px; margin-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.pushvak .mg-uitleg { margin-bottom: 8px; }
.push-uitleg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-xl); background: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.push-uitleg .dr-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--s-info); }
.push-uitleg .dr-ic .ic { width: 20px; height: 20px; }
.schakels { display: flex; flex-direction: column; border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--border); background: var(--card); overflow: hidden; }
.pushvak > .knop { align-self: flex-start; margin-top: 12px; }
.pushvak > .knop + .knop { margin-top: 8px; }
/* een losse pagina (inloggen, uitgelogd): rustig, op de marge */
.losse-pagina { max-width: 560px; margin: 0 auto; padding: 48px var(--rand); display: flex; flex-direction: column; gap: 12px; }
.losse-pagina h1 { font-size: 1.375rem; font-weight: 600; }
.losse-pagina a { font-weight: 600; text-underline-offset: 3px; }
.schakel {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px 10px 16px; border: 0; background: none; text-align: left;
  font-size: 1rem; line-height: 1.35; transition: background-color 150ms var(--ease), opacity 150ms var(--ease);
}
.schakel + .schakel { box-shadow: inset 0 1px 0 var(--border); }
.schakel:disabled { opacity: 0.55; }
.sch-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sch-label { font-weight: 500; }
.sch-uitleg { font-size: 0.8125rem; color: var(--muted-foreground); }
.sch-baan { flex: none; width: 46px; height: 28px; border-radius: 999px; background: oklch(0.78 0 0); position: relative; transition: background-color 200ms var(--ease); box-shadow: inset 0 0 0 1px var(--border); }
.sch-knop { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: oklch(1 0 0); box-shadow: 0 1px 2px #00000040; transition: transform 300ms var(--indicator); }
.schakel[aria-checked="true"] .sch-baan { background: var(--s-goed); box-shadow: none; }
.schakel[aria-checked="true"] .sch-knop { transform: translateX(18px); }
@media (prefers-color-scheme: dark) { .sch-baan { background: oklch(0.32 0 0); } }
.melding { padding: 18px var(--rand) 8px; display: flex; flex-direction: column; gap: 14px; }
.melding .labels { margin-top: 0; }
.uitleg { font-size: 1rem; line-height: 1.55; }
.melding .samenvatting { color: var(--muted-foreground); }
.melding .draad { padding: 8px 0 0; }
.ticketlink {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--radius-xl); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border); transition: background-color 120ms var(--ease); min-height: 72px;
}
.ticketlink .rtitel { font-weight: 500; }
.vraagvak .kopje { margin-bottom: 10px; }
.invoer {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 40dvh; resize: none; padding: 10px 14px; border: 0; border-radius: 22px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--input); font-size: 1rem; line-height: 1.45; outline: none;
  transition: box-shadow 150ms var(--ease);
}
.invoer:focus { box-shadow: inset 0 0 0 2px var(--ring); }
.groot-invoer { border-radius: var(--radius-lg); min-height: 96px; }

/* ---------------------------------------------------------------- de balk onderaan: hij schuift mee met de inhoud en bedekt niets */
.balk {
  position: sticky; bottom: 0; z-index: 20; display: flex; gap: 12px; align-items: stretch;
  padding: 12px calc(var(--rand) + var(--rechts)) calc(12px + var(--onder)) calc(var(--rand) + var(--links));
  background: color-mix(in oklab, var(--background) 97%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border); transition: transform 150ms var(--ease);
}
.scherm, .balk { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
@media (max-width: 791px) { .balk { max-width: none; } }
@media (min-width: 792px) and (max-width: 1023px) { .balk { border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 16px 16px 0 0; } }
@media (min-width: 1024px) {
  .balk { justify-content: flex-end; }
  .balk:not(.open) .groot { flex: 0 0 auto; min-width: 200px; padding: 8px 24px; }
  .balk.open { align-items: stretch; }
  .melding { max-width: 820px; margin: 0 auto; }
}
@media (min-width: 1024px) { .balk { max-width: none; margin-top: auto; } .scherm { max-width: 1240px; } .app.is-raster .scherm { max-width: 1600px; } }
.balk.open { flex-direction: column; gap: 6px; padding-top: 8px; }
.groot {
  flex: 1 1 0; min-width: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px;
  border: 0; border-radius: var(--radius-xl); background: var(--muted); color: var(--foreground); font-size: 1rem; font-weight: 600; line-height: 1.2;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
.groot:active { transform: scale(0.98); }
.groot:not(.goedknop) { box-shadow: inset 0 0 0 1px var(--border); }
.groot.goedknop { background: var(--primary); color: var(--primary-foreground); }
.groot.goedknop.is-goed { background: var(--s-goed); color: oklch(0.99 0 0); }
.groot.volgende .ic { stroke-width: 2.5; }
.groot .stap { font-weight: 500; opacity: 0.72; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .groot.goedknop.is-goed { color: oklch(0.16 0 0); } }
.groot .ic { width: 20px; height: 20px; }
.groot span { overflow-wrap: normal; }
/* een smal scherm met grote letters: dan alleen het woord, zodat het nooit midden in een woord afbreekt */
@media (max-width: calc(10em + 150px)) { .groot .ic { display: none; } }
.goedknop .ic { stroke-width: 2.5; }
.composer-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 0 0 0 4px; }
.composer-label { font-size: 0.8125rem; color: var(--muted-foreground); flex: 1 1 auto; min-width: 0; }
/* Voor wie de reactie is: het hele ticket (standaard) of alleen het beeld dat je ziet */
.scope {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; flex: none;
  background: var(--muted); color: var(--foreground); font-size: 0.875rem; font-weight: 500; transition: background-color 150ms var(--ease);
}
.scope.aan { background: color-mix(in oklab, var(--s-info) 16%, var(--card)); }
span.scope { padding-right: 0; }
.scope > .ic { width: 16px; height: 16px; }
.scope-vk { width: 18px; height: 18px; }
.vk.leeg { box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.6; }
.scope-weg { width: 44px; height: 44px; border: 0; background: none; color: inherit; display: grid; place-items: center; border-radius: 999px; }
.scope-weg .ic { width: 16px; height: 16px; }
.composer { display: flex; align-items: flex-end; gap: 6px; }

/* ---------------------------------------------------------------- het filterblad */
dialog { color: var(--foreground); }
dialog:focus { outline: none; }   /* het blad zelf krijgt de focus bij openen, zodat er geen ring om de sluitknop staat */
.blad {
  width: 100%; max-width: 100%; max-height: min(88dvh, 760px); margin: auto 0 0; padding: 0; border: 0; border-radius: 20px 20px 0 0;
  background: var(--card); box-shadow: var(--schaduw-zweef); overflow: hidden; flex-direction: column;
}
/* het in- en uitschuiven doet app.js met element.animate: Safari laat een CSS-animatie op een geopende dialog hangen */
.blad[open] { display: flex; }
.blad::backdrop { background: var(--overlay); }
@media (min-width: 640px) {
  .blad { width: 460px; margin: auto; border-radius: 20px; }
}
.bladkop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 4px 20px; flex: none; }
.bladkop h2 { font-size: 1.125rem; font-weight: 600; }
.bladinhoud { padding: 4px 20px 8px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.bladdeel + .bladdeel { margin-top: 18px; }
.bladdeel h3 { font-size: 0.8125rem; font-weight: 600; color: var(--muted-foreground); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: 0.9375rem; line-height: 1.25; text-align: left;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.chip .n { color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-size: 0.875rem; margin-left: 8px; }
.chip.aan { background: var(--primary); color: var(--primary-foreground); box-shadow: none; }
.chip.aan .n { color: inherit; opacity: 0.7; }
.bladvoet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; flex-wrap: wrap;
  padding: 12px 20px calc(12px + var(--onder)); border-top: 1px solid var(--border);
}
.bladvoet .tekstknop { margin-left: -12px; padding: 0 12px; }
.bladvoet .knop { flex: 1 1 auto; max-width: 260px; margin-left: auto; }

/* ---------------------------------------------------------------- het beeld groot */
.kijker {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden;
}
.kijker::backdrop { background: #000; }
.podium { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.laag { position: relative; line-height: 0; transform-origin: center center; will-change: transform; }
.podium img {
  display: block; max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto;
  -webkit-user-drag: none; pointer-events: none;
}
.kijker.markeert .podium { cursor: crosshair; }
/* de rand blijft even dik bij elke zoom: de laag geeft zijn schaal door als --z */
.kijker .mk.teken { border-radius: calc(4px / var(--z, 1)); box-shadow: 0 0 0 calc(2px / var(--z, 1)) var(--s-aandacht), 0 0 0 calc(4px / var(--z, 1)) oklch(0 0 0 / 55%); background: color-mix(in oklab, var(--s-aandacht) 18%, transparent); }
.kijkknop {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; border-radius: 999px; flex: none;
  background: #ffffff24; color: #fff; font-size: 0.9375rem; font-weight: 600; transition: background-color 150ms var(--ease), color 150ms var(--ease), opacity 150ms var(--ease);
}
.kijkknop .ic { width: 18px; height: 18px; }
.kijkknop[aria-pressed="true"], .kijkknop.primair { background: #fff; color: #111; }
.kijkknop:disabled { opacity: 0.4; }
.kijkvoet {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 24px calc(12px + var(--rechts)) calc(12px + var(--onder)) calc(16px + var(--links)); background: linear-gradient(#0000, #000000b0 40%);
}
.kijkhint { color: #fff; font-size: 0.9375rem; line-height: 1.35; flex: 1 1 12em; min-width: 0; }
.kijkkop {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + var(--boven)) calc(12px + var(--rechts)) 8px calc(12px + var(--links));
  background: linear-gradient(#000000a0, #0000); pointer-events: none;
}
.kijkkop > * { pointer-events: auto; }
.kijkkop .rond { color: #fff; background: #ffffff1f; }
.kijklabel { font-size: 0.9375rem; font-weight: 500; }

/* ---------------------------------------------------------------- de melding onderaan */
.toast {
  position: fixed; z-index: 60; left: calc(var(--rand) + var(--links)); right: calc(var(--rand) + var(--rechts)); bottom: calc(92px + var(--onder));
  max-width: 728px; margin: 0 auto; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 56px;
  padding: 12px 12px 12px 16px; border-radius: var(--radius-xl); background: var(--foreground); color: var(--background);
  box-shadow: var(--schaduw-zweef); font-size: 1rem; font-weight: 500; line-height: 1.4; opacity: 0;
}
.toast.zicht { animation: toast-in 300ms var(--ease) both; }
.toast.weg { animation: toast-uit 300ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-uit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
.toast-ic { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--s-goed); color: oklch(0.99 0 0); }
.toast-ic .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.toast-tekst { flex: 1 1 12em; min-width: 0; }
.toastknop { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); font-weight: 600; margin-left: auto; }
body:not(.met-balk) .toast { bottom: calc(20px + var(--onder)); }
@media (min-width: 1024px) { .toast { left: auto; right: 24px; width: 440px; } }

/* ---------------------------------------------------------------- met een muis: kleinere knoppen in de rustige delen */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .rij { min-height: 68px; }
}

/* ---------------------------------------------------------------- onder de muis: alleen met een echte muis, anders blijft het na een tik hangen */
@media (hover: hover) {
  .rond:hover:not(:disabled):not(.primair) { background: var(--accent); }
  .tekstknop:hover:not(:disabled) { background: var(--accent); }
  .knop:hover:not(:disabled):not(.primair) { background: var(--accent); }
  .rij:hover:not(.actief) { background: var(--accent); }
  .tegel:hover { background: var(--accent); }
  .verwijzing:hover { background: var(--accent); }
  .ontwerpregel:hover { background: var(--accent); }
  .antwoord:hover:not(.gekozen) { background: var(--accent); }
  .schrijf:hover { background: var(--accent); }
  .ticketlink:hover { background: var(--accent); }
  .groot:hover:not(.goedknop) { background: var(--accent); }
  .chip:hover:not(.aan) { background: var(--accent); }
  .kijkkop .rond:hover { background: #ffffff33; }
  .kijkknop:hover:not(:disabled):not([aria-pressed="true"]):not(.primair) { background: #ffffff3d; }
  .markeerknop:hover { background: var(--accent); }
  .scope:hover { background: var(--accent); }
  .schakel:hover:not(:disabled) { background: var(--accent); }
  .mk-knop:hover .mk-uit { box-shadow: inset 0 0 0 1px var(--ring); }
}

/* ---------------------------------------------------------------- minder beweging gaat altijd voor */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}