/* Mia Taak — OS-laag. Ontwerpbasis "Helder" (Foundry-besluit businesses/mia-post, §taaklaag):
   één font (Switzer), één merkkleur (teal), maten 12/13/14/16/20, 8px-raster, status altijd met tekst.
   Alles onder .mt-* zodat de laag in beide shells (klassiek + Strak) niets anders raakt. */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap');
:root {
  --mt-vlak: #FFFFFF; --mt-vlak-2: #F4F6F8; --mt-lijn: #E3E6EB; --mt-lijn-sterk: #CDD2DA;
  --mt-tekst: #14181F; --mt-tekst-2: #4A5260; --mt-tekst-3: #6B7380;
  --mt-merk: #0E6E73; --mt-merk-hover: #0B5A5E; --mt-merk-zacht: #E3EFEF; --mt-merk-tekst: #0B5A5E; --mt-op-merk: #fff;
  --mt-goed: #1A7F4B; --mt-goed-zacht: #E7F5EC; --mt-let: #A15C00; --mt-let-zacht: #FDF1DE; --mt-fout: #C2271B; --mt-fout-zacht: #FCE9E7;
  --mt-schaduw: 0 24px 64px rgba(20,24,31,.18), 0 2px 8px rgba(20,24,31,.08);
  --mt-font: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-ease: cubic-bezier(.22, 1, .36, 1);
}
[data-thema="avond"], html.dark, html[data-theme="avond"] {
  --mt-vlak: #151B1E; --mt-vlak-2: #1B2326; --mt-lijn: #263034; --mt-lijn-sterk: #333F44;
  --mt-tekst: #E8ECED; --mt-tekst-2: #A5AFB2; --mt-tekst-3: #7F8A8E;
  --mt-merk: #2FA79F; --mt-merk-hover: #3BB9B0; --mt-merk-zacht: rgba(47,167,159,.16); --mt-merk-tekst: #5CC7BF; --mt-op-merk: #0E1315;
  --mt-goed: #5DBE8A; --mt-goed-zacht: rgba(93,190,138,.14); --mt-let: #D7A24A; --mt-let-zacht: rgba(215,162,74,.14); --mt-fout: #EF7B70; --mt-fout-zacht: rgba(239,123,112,.14);
  --mt-schaduw: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}

/* ── bovenbalk-icoon + teller ── */
.mt-top { position: relative; }
.mt-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mt-bd { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--mt-merk); color: var(--mt-op-merk);
  font: 600 11px/17px var(--mt-font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--mt-vlak); pointer-events: none; }
.mt-bd[hidden] { display: none; }
.mt-puls .mt-bd { animation: mt-puls .6s var(--mt-ease); }
@keyframes mt-puls { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── taakknop in de titelbalk van elk app-venster (zweeft nooit over de app) ── */
.window-btns .mt-win { position: relative; color: var(--mt-merk-tekst, currentColor); opacity: 0; transform: scale(.8);
  transition: opacity .22s var(--mt-ease), transform .3s var(--mt-ease), color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.window-btns .mt-win.in { opacity: 1; transform: none; }
.window-btns .mt-win:active { transform: scale(.9); }
.window-btns .mt-win svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.window-btns .mt-win .mt-win-plus { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mt-merk); color: var(--mt-op-merk);
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--mt-vlak); transition: transform .2s var(--mt-ease); }
.window-btns .mt-win .mt-win-plus svg { width: 8px; height: 8px; stroke-width: 3; }
.window-btns .mt-win:hover .mt-win-plus { transform: rotate(90deg) scale(1.1); }
.window-btns .mt-win .mt-bd { top: -6px; right: -7px; min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; }
.window-btns .mt-win .mt-bd:not([hidden]) ~ .mt-win-plus, .window-btns .mt-win .mt-bd:not([hidden]) + .mt-win-plus { display: none; }
.window-btns .mt-win:has(.mt-bd:not([hidden])) .mt-win-plus { display: none; }
.mia-launcher-item[data-act="taak"] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── kaart over het scherm ── */
.mt-scrim { position: fixed; inset: 0; z-index: 9500; background: rgba(14,19,21,.18); opacity: 0; transition: opacity .25s var(--mt-ease); }
.mt-scrim.in { opacity: 1; }
.mt-paneel { position: fixed; z-index: 9501; top: 64px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: var(--mt-vlak); color: var(--mt-tekst); border: 1px solid var(--mt-lijn); border-radius: 14px; box-shadow: var(--mt-schaduw);
  font: 14px/1.5 var(--mt-font); letter-spacing: normal; text-transform: none; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  transform: translateX(calc(100% + 24px)); transition: transform .32s var(--mt-ease); overflow: hidden; }
.mt-paneel.in { transform: none; }
.mt-paneel *, .mt-paneel *::before, .mt-paneel *::after { box-sizing: border-box; }
.mt-paneel button, .mt-paneel input, .mt-paneel select, .mt-paneel textarea { font: inherit; color: inherit; }
.mt-paneel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mt-paneel :focus-visible { outline: 2px solid var(--mt-merk); outline-offset: 2px; border-radius: 6px; }
.mt-greep { display: none; }
@media (max-width: 720px) {
  .mt-paneel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 16px 16px 0 0; border-bottom: 0;
    transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
  .mt-paneel[data-view="lijst"], .mt-paneel[data-view="nieuw"] { height: 90vh; height: 90dvh; }
  .mt-greep { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--mt-lijn-sterk); margin: 8px auto 0; flex: none; touch-action: none; }
  .mt-scrim { background: rgba(14,19,21,.32); }
}
@media (prefers-reduced-motion: reduce) { .mt-paneel, .mt-scrim, .mt-win, .mt-toast { transition-duration: .01s !important; } .mt-puls .mt-bd { animation: none; } }

.mt-kop { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--mt-lijn); flex: none; touch-action: none; }
.mt-kop:has(> .mt-ik:first-child) { padding-left: 8px; }
.mt-kop-t { flex: 1; min-width: 0; }
.mt-kop h2 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.005em; }
.mt-boven { display: block; font-size: 12px; color: var(--mt-tekst-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-rol { color: var(--mt-tekst-3); }
.mt-ik { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--mt-tekst-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.mt-ik:hover { background: var(--mt-vlak-2); color: var(--mt-tekst); }

.mt-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--mt-lijn); flex: none; }
.mt-tabs button { border: 0; background: transparent; padding: 8px 10px 10px; font-weight: 500; color: var(--mt-tekst-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mt-tabs button[aria-selected="true"] { color: var(--mt-tekst); border-bottom-color: var(--mt-merk); }
.mt-tel { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mt-merk-zacht); color: var(--mt-merk-tekst); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

.mt-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
.mt-body.mt-lijst { padding: 4px 8px 16px; }
.mt-leeg { color: var(--mt-tekst-3); padding: 32px 12px; text-align: center; margin: 0; }
.mt-sec { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mt-tekst-3); margin: 0 0 6px; letter-spacing: .01em; }
.mt-sec svg { width: 14px; height: 14px; }
.mt-klein { font-size: 12px; color: var(--mt-tekst-3); }
.mt-hint { font-size: 13px; color: var(--mt-tekst-3); margin: 6px 0 12px; }

/* rijen (werklijst) */
.mt-rij { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px; border-radius: 10px; cursor: pointer; position: relative; }
.mt-rij + .mt-rij::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--mt-lijn); }
.mt-rij:hover { background: var(--mt-vlak-2); }
.mt-rij:hover::before, .mt-rij:hover + .mt-rij::before { opacity: 0; }
.mt-rij-stip { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.mt-rij.nieuw .mt-rij-stip { background: var(--mt-merk); }
.mt-rij-stip.spoed { background: var(--mt-fout) !important; }
.mt-rij-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-rij-boven { font-size: 12px; color: var(--mt-tekst-3); display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-rij-boven.mia { color: var(--mt-merk-tekst); }
.mt-rij-boven svg { width: 12px; height: 12px; }
.mt-proj { color: var(--mt-tekst-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mt-proj + span::before { content: '·'; margin-right: 6px; color: var(--mt-tekst-3); }
.mt-rij-vraag { font-weight: 500; color: var(--mt-tekst); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-rij.nieuw .mt-rij-vraag { font-weight: 600; }
.mt-rij-notitie { font-size: 13px; color: var(--mt-goed); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mt-rij-notitie.let { color: var(--mt-let); }
.mt-rij-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; color: var(--mt-tekst-3); }
.mt-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mt-tekst-3); white-space: nowrap; }
.mt-due svg { width: 13px; height: 13px; }
.mt-due.laat { color: var(--mt-fout); font-weight: 600; }
.mt-elders { margin: 12px 4px 0; }
.mt-elders summary { font-size: 12px; color: var(--mt-tekst-3); cursor: pointer; padding: 8px; list-style: none; }
.mt-elders summary::-webkit-details-marker { display: none; }

/* labels */
.mt-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--mt-vlak-2); color: var(--mt-tekst-2); }
.mt-label.goed { background: var(--mt-goed-zacht); color: var(--mt-goed); }
.mt-label.let { background: var(--mt-let-zacht); color: var(--mt-let); }
.mt-label.fout { background: var(--mt-fout-zacht); color: var(--mt-fout); }
.mt-label.neutraal { background: var(--mt-merk-zacht); color: var(--mt-merk-tekst); }
.mt-label.stil { background: transparent; color: var(--mt-tekst-3); border: 1px solid var(--mt-lijn); }

/* taakkaart */
.mt-proj-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; margin: 0 0 16px; border-radius: 10px; background: var(--mt-vlak-2); font-weight: 600; }
.mt-proj-kop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-vraag { font-size: 16px; line-height: 1.45; margin: 0 0 16px; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-feiten { margin: 0 0 12px; border-top: 1px solid var(--mt-lijn); }
.mt-feit { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mt-lijn); }
.mt-feit dt { font-size: 13px; color: var(--mt-tekst-3); margin: 0; }
.mt-feit dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mt-feit dd.laat { color: var(--mt-fout); font-weight: 600; }
.mt-leden { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.mt-andere { font-size: 13px; color: var(--mt-tekst-2); margin: 0 0 16px; }
.mt-antwoord { border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; border-left: 3px solid var(--mt-goed); background: var(--mt-goed-zacht); }
.mt-antwoord.let { border-left-color: var(--mt-let); background: var(--mt-let-zacht); }
.mt-antwoord .mt-sec { color: var(--mt-goed); }
.mt-antwoord.let .mt-sec { color: var(--mt-let); }
.mt-antwoord p, .mt-mia p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-mia { border: 1px solid var(--mt-merk-zacht); background: linear-gradient(var(--mt-merk-zacht), var(--mt-merk-zacht)) padding-box; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.mt-mia .mt-sec { color: var(--mt-merk-tekst); }
.mt-mia .mt-rijknoppen { margin-top: 10px; }
.mt-mia.bezig .mt-sec svg { animation: mt-draai 1.6s linear infinite; }
@keyframes mt-draai { to { transform: rotate(360deg); } }
.mt-spoor { margin-top: 8px; }
.mt-spoor summary { font-size: 12px; font-weight: 600; color: var(--mt-tekst-3); cursor: pointer; padding: 6px 0; list-style: none; }
.mt-spoor summary::-webkit-details-marker { display: none; }
.mt-spoor summary::after { content: ' ▾'; }
.mt-spoor[open] summary::after { content: ' ▴'; }
.mt-spoor ol { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--mt-lijn); }
.mt-spoor li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--mt-tekst-2); }
.mt-spoor time { color: var(--mt-tekst-3); font-size: 12px; }
.mt-spoor b { color: var(--mt-tekst); font-weight: 600; }
.mt-spoor q { display: block; quotes: none; color: var(--mt-tekst-3); margin-top: 2px; overflow-wrap: anywhere; }

/* knoppen & velden */
.mt-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.mt-knop:active:not(:disabled) { transform: scale(.98); }
.mt-knop.primair { background: var(--mt-merk); color: var(--mt-op-merk); }
.mt-knop.primair:hover:not(:disabled) { background: var(--mt-merk-hover); }
.mt-knop.tweede { background: var(--mt-vlak); border-color: var(--mt-lijn-sterk); }
.mt-knop.tweede:hover { background: var(--mt-vlak-2); }
.mt-knop.stil { background: transparent; color: var(--mt-merk-tekst); padding: 0 8px; }
.mt-knop.stil:hover { background: var(--mt-merk-zacht); }
.mt-knop.klein { height: 32px; padding: 0 12px; font-size: 13px; }
.mt-knop.stil.klein { padding: 0 8px; }
.mt-knop.breed { width: 100%; }
.mt-knop:disabled { opacity: .45; cursor: default; }
.mt-knop svg { width: 16px; height: 16px; }
.mt-rijknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-rijknoppen .mt-knop.tweede { flex: 1 1 0; min-width: 0; }
.mt-voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--mt-lijn); flex: none; background: var(--mt-vlak); }
.mt-voet.links { justify-content: flex-start; border-top: 0; padding: 12px 4px; }
.mt-voet.stapel { flex-direction: column; align-items: stretch; }
.mt-veld { display: block; margin: 0 0 16px; }
.mt-in { width: 100%; border: 1px solid var(--mt-lijn-sterk); background: var(--mt-vlak); border-radius: 8px; padding: 9px 12px; min-height: 40px; transition: border-color .15s, box-shadow .15s; }
.mt-in:focus { outline: none; border-color: var(--mt-merk); box-shadow: 0 0 0 3px var(--mt-merk-zacht); }
textarea.mt-in { resize: vertical; line-height: 1.5; }
input.mt-in, select.mt-in { height: 40px; }
.mt-in::placeholder { color: var(--mt-tekst-3); }
.mt-rij2 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.mt-rij2 .mt-veld { margin-bottom: 0; }
@media (max-width: 380px) { .mt-rij2 { grid-template-columns: 1fr 1fr; } .mt-spoed { grid-column: 1 / -1; } }
.mt-schakel { display: inline-flex; align-items: center; gap: 8px; height: 40px; cursor: pointer; font-weight: 500; user-select: none; }
.mt-schakel input { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--mt-lijn-sterk); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
.mt-schakel input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--mt-ease); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.mt-schakel input:checked { background: var(--mt-merk); }
.mt-spoed input:checked { background: var(--mt-fout); }
.mt-schakel input:checked::after { transform: translateX(14px); }

.mt-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--mt-vlak-2); gap: 2px; margin: 0 0 8px; }
.mt-seg button { border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 7px; font-weight: 500; color: var(--mt-tekst-2); cursor: pointer; }
.mt-seg button[aria-checked="true"] { background: var(--mt-vlak); color: var(--mt-tekst); box-shadow: 0 1px 2px rgba(20,24,31,.1); }
.mt-seg.klein { margin-top: 8px; }
.mt-seg.klein button { height: 28px; font-size: 13px; padding: 0 10px; }

.mt-hangt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--mt-vlak-2); }
.mt-hangt span { font-weight: 500; color: var(--mt-tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-hangt span.aan { color: var(--mt-tekst); font-weight: 600; }
.mt-hangt i { font-style: normal; color: var(--mt-goed); margin-left: 4px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mt-chip { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--mt-lijn-sterk); background: var(--mt-vlak); font-size: 13px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-chip:hover { border-color: var(--mt-merk); color: var(--mt-merk-tekst); }
.mt-chip.stil { border-style: dashed; color: var(--mt-tekst-3); }

.mt-keuzes { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.mt-keuzes.compact { max-height: 216px; overflow-y: auto; }
.mt-keuze { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mt-lijn); background: var(--mt-vlak); cursor: pointer; transition: border-color .15s, background .15s; }
.mt-keuze:hover { background: var(--mt-vlak-2); }
.mt-keuze[aria-checked="true"], .mt-keuze:has(input:checked) { border-color: var(--mt-merk); background: var(--mt-merk-zacht); }
.mt-keuze.afwezig .mt-rij-vraag { color: var(--mt-tekst-2); }
.mt-keuze input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mt-merk); }
.mt-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mt-merk-zacht); color: var(--mt-merk-tekst); font-weight: 600; font-size: 13px; flex: none; }
.mt-avatar svg { width: 17px; height: 17px; }
.mt-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--mt-lijn-sterk); flex: none; transition: border .15s; }
.mt-keuze[aria-checked="true"] .mt-radio { border: 5px solid var(--mt-merk); }

.mt-blok { padding: 8px 12px 4px; }
.mt-afw-rij { display: grid; grid-template-columns: 1fr auto 140px; gap: 8px; align-items: center; margin-top: 4px; }
.mt-afw-rij[hidden] { display: none; }
.mt-pal-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* toast */
.mt-toast { position: fixed; z-index: 9600; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 12px;
  max-width: min(440px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--mt-tekst); color: var(--mt-vlak);
  font: 14px/1.4 var(--mt-font); letter-spacing: normal; box-shadow: 0 12px 32px rgba(0,0,0,.24); transition: opacity .22s var(--mt-ease), transform .3s var(--mt-ease); }
.mt-toast.in { opacity: 1; transform: translate(-50%, 0); }
.mt-toast.spoed { box-shadow: 0 0 0 2px var(--mt-fout), 0 12px 32px rgba(0,0,0,.24); }
.mt-toast-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mt-toast-t { display: flex; flex-direction: column; min-width: 0; }
.mt-toast-t span { opacity: .75; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-toast .mt-knop { background: var(--mt-merk); color: #fff; border: 0; height: 32px; padding: 0 12px; border-radius: 8px; font: 600 13px var(--mt-font); flex: none; cursor: pointer; }
@media (max-width: 720px) { .mt-toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -16px); } }