/* =====================================================================================
   Scope Compass - de mobiele laag (sweep september 2026)

   Eén regel boven alles: ELKE regel in dit bestand staat binnen @media (max-width: 640px).
   Desktop kan hierdoor niet veranderen; test/suites/mobiel.mjs bewaakt dat per regel, en de
   1440-pixeldiff van test/mobile/shot.mjs bewijst het op het scherm.

   Dit bestand laadt als laatste stylesheet, na styles.css en de spoorbestanden, en wint dus op
   bronvolgorde van de bestaande mobiele regels. Het bouwt voort op de shell-sectie van
   styles.css (lade, onderbalk, 44px-tikdoelen, 16px-invoer, kaarttabellen); wat daar al goed
   staat wordt hier niet herhaald.

   Opbouw:
     1. Beweging: tokens, paginaovergangen, sheets, uitklappen, tikfeedback
     2. Shell: lade, topbalk, onderbalk
     3. Gedeelde patronen: tabrijen, panelen, KPI-stroken
     4. Per pagina (in de volgorde van de navigatie)
     5. Minder beweging (prefers-reduced-motion)
   ===================================================================================== */


/* ---------------------------------------------------------------- 1. beweging */
@media (max-width: 640px) {
  :root {
    /* Eén bewegingstaal voor de hele telefoonweergave. Snel erin, zacht uitlopen (de curve van
       iOS-sheets); niets duurt langer dan 320ms, de meeste overgangen 200ms. */
    --m-ease: cubic-bezier(.22, 1, .36, 1);
    --m-ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --m-t1: 120ms;
    --m-t2: 200ms;
    --m-t3: 320ms;
    /* Uitklappen naar height:auto mag animeren (Chrome 129+, Safari 26); elders klapt het
       gewoon zonder beweging, zoals nu. */
    interpolate-size: allow-keywords;
  }

  /* Paginaovergang. app.js start bij een routewissel een View Transition (alleen op een
     telefoon, alleen als de browser het kent) en zet op <html> welke soort het is:
       push  = dieper de app in (lijst -> detail): nieuw scherm schuift van rechts in
       pop   = terug omhoog: omgekeerd
       fade  = wisselen tussen hoofdtabs (onderbalk): rustig vervagen met een kleine rijs
     Alleen de inhoud beweegt; topbalk en onderbalk staan stil, zoals in een native app. */
  /* De naam staat er alleen TIJDENS een overgang: een view-transition-name maakt van #dz-content
     een eigen stapellaag, en dan zakte elk vast paneel in de inhoud (een sheet met z-index 62)
     permanent onder de onderbalk en de topbalk. */
  html[data-dz-overgang] #dz-content { view-transition-name: dz-inhoud; }
  ::view-transition-group(dz-inhoud) { animation-duration: var(--m-t3); animation-timing-function: var(--m-ease); }
  ::view-transition-old(dz-inhoud), ::view-transition-new(dz-inhoud) { animation-duration: var(--m-t3); height: auto; }
  /* De chrome (topbalk, onderbalk) wisselt direct: het oude beeld ervan verdwijnt meteen. */
  ::view-transition-old(root) { display: none; }
  ::view-transition-new(root) { animation: none; }
  /* Fade through (Material): het oude scherm is weg voordat het nieuwe opkomt, zodat twee
     pagina's nooit door elkaar heen te lezen zijn. */
  html[data-dz-overgang="fade"]::view-transition-old(dz-inhoud) { animation: mUit 90ms linear both; }
  html[data-dz-overgang="fade"]::view-transition-new(dz-inhoud) { animation: mRijs 260ms var(--m-ease) 70ms both; }
  html[data-dz-overgang="push"]::view-transition-old(dz-inhoud) { animation: mPushUit var(--m-t3) var(--m-ease) both; }
  html[data-dz-overgang="push"]::view-transition-new(dz-inhoud) { animation: mPushIn var(--m-t3) var(--m-ease) both; }
  html[data-dz-overgang="pop"]::view-transition-old(dz-inhoud) { animation: mPopUit var(--m-t3) var(--m-ease) both; }
  html[data-dz-overgang="pop"]::view-transition-new(dz-inhoud) { animation: mPopIn var(--m-t3) var(--m-ease) both; }

  /* Menu's zijn op de telefoon al bottom sheets (shell-sectie); nu komen ze ook van onderen. */
  .menu:not([hidden]), .dash-fasemenu:not([hidden]) {
    animation: mSheet var(--m-t3) var(--m-ease-sheet) both;
    box-shadow: 0 -8px 32px rgba(16, 24, 40, .16);
  }

  /* Uitklappen (details/summary) groeit open in plaats van te springen. */
  details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size var(--m-t2) var(--m-ease), content-visibility var(--m-t2) allow-discrete;
  }
  details[open]::details-content { block-size: auto; }

  /* Tikfeedback: elke tik krijgt binnen een frame antwoord. De shell geeft knoppen al een
     indruk (scale .96); hier de lijstrijen, kaarten, tabs en chips die tikbaar zijn. */
  .btn, .bn-item, .icontile, .seg-btn, .settings-tab, .proc-tab, .navtab, .menu-item {
    transition: transform var(--m-t1) var(--m-ease), background-color var(--m-t2) var(--m-ease), color var(--m-t2) var(--m-ease);
    touch-action: manipulation;
  }
  .settings-tab:active, .proc-tab:active, .navtab:active, .menu-item:active, .seg-btn:active { background: var(--sunken); }
  .toggle::after { transition: transform var(--m-t2) var(--m-ease); }

  /* Keyframes staan bewust binnen de query: buiten de telefoon bestaan ze niet eens. */
  @keyframes mRijs { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes mUit { from { opacity: 1; } to { opacity: 0; } }
  @keyframes mPushIn { from { opacity: 0; transform: translateX(28%); } 30% { opacity: 0; } to { opacity: 1; transform: none; } }
  @keyframes mPushUit { from { opacity: 1; transform: none; } 60% { opacity: 0; } to { opacity: 0; transform: translateX(-12%); } }
  @keyframes mPopIn { from { opacity: 0; transform: translateX(-12%); } 30% { opacity: 0; } to { opacity: 1; transform: none; } }
  @keyframes mPopUit { from { opacity: 1; transform: none; } 60% { opacity: 0; } to { opacity: 0; transform: translateX(28%); } }
  @keyframes mSheet { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes mPil { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes mHaarlijn { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--border-2); } }
}


/* ---------------------------------------------------------------- 2. shell */
@media (max-width: 640px) {
  /* ---- lade ----
     De dichte lade stond met zijn schaduw nog in beeld: op elke pagina een grijze waas langs de
     linkerrand. Dicht is nu ook echt weg (zonder schaduw en onzichtbaar, dus ook niet meer in de
     tabvolgorde); open schuift hij in met de sheet-curve. */
  .sidebar { box-shadow: none; visibility: hidden;
    transition: transform var(--m-t3) var(--m-ease-sheet), box-shadow var(--m-t3) var(--m-ease), visibility 0s linear var(--m-t3); }
  .app.nav-open .sidebar { visibility: visible; box-shadow: 0 16px 48px rgba(16, 24, 40, .24);
    transition: transform var(--m-t3) var(--m-ease-sheet), box-shadow var(--m-t3) var(--m-ease), visibility 0s; }
  .dz-scrim { transition: opacity var(--m-t3) var(--m-ease); }

  /* ---- topbalk ----
     Doorschijnend zoals een iOS-navigatiebalk: de inhoud schuift er vaag onderdoor, zodat je
     voelt dat de pagina doorloopt. De haarlijn verschijnt pas als je scrolt (waar de browser
     scroll-gestuurde animatie kent; elders staat hij er gewoon). */
  .topbar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.8) blur(16px);
    backdrop-filter: saturate(1.8) blur(16px); }
  @supports (animation-timeline: scroll()) {
    .topbar { border-bottom-color: transparent; animation: mHaarlijn linear both; animation-timeline: scroll(root);
      animation-range: 0 24px; }
  }
  /* Het kruimelpad (Processen / domein / proces) liep onder de meldingenbel door. Op de
     telefoon draagt het scherm zelf de titel met een terugpijl (procespagina, deliverable);
     de topbalk toont dan alleen waar je vandaan komt, als gewone paginatitel. */
  .tbcrumb { display: block; min-width: 0; }
  .tbcrumb > :not(:first-child) { display: none; }
  .tbcrumb > :first-child { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Vera blijft de merkknop, maar zonder gloed: op wit ging die als een vlek over de balk. */
  .topbar-r .vera-btn { box-shadow: none; border-radius: 12px; }
  .topbar-r .vera-btn:active { box-shadow: none; }

  /* ---- onderbalk ----
     Material 3-navigatie: het actieve item krijgt een pil achter het icoon, het label blijft
     op één regel. Labels waren afgekapt ("Dashbo...", "Beslissi..."); app.js levert nu korte
     labels, en hier krijgt elk item de volle breedte zonder zijmarge. */
  .bottom-nav { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.8) blur(16px);
    backdrop-filter: saturate(1.8) blur(16px); border-top-color: var(--border-2);
    padding: 6px max(0px, env(safe-area-inset-right)) calc(6px + var(--safe-b)) max(0px, env(safe-area-inset-left)); }
  .bottom-nav .bn-item { gap: 4px; padding: 0; min-height: 52px; font-weight: 500; letter-spacing: -.01em; color: var(--text-2); }
  .bottom-nav .bn-item.active { color: var(--pri-text); font-weight: 600; }
  .bottom-nav .bn-item .ic { position: relative; display: grid; place-items: center; width: 56px; height: 30px;
    font-size: 22px; border-radius: 15px; isolation: isolate; }
  .bottom-nav .bn-item .ic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background: var(--pri-soft); opacity: 0; transform: scaleX(.4); transition: opacity var(--m-t2) var(--m-ease), transform var(--m-t2) var(--m-ease); }
  .bottom-nav .bn-item.active .ic::before { opacity: 1; transform: none; }
  html[data-dz-overgang] .bottom-nav .bn-item.active .ic::before { animation: mPil var(--m-t3) var(--m-ease) both; }
  /* Indrukken: de pil licht grijs op, het item zelf deinst niet (dat voelt bij navigatie nerveus). */
  .bottom-nav .bn-item:active { transform: none; }
  .bottom-nav .bn-item:not(.active):active .ic::before { opacity: 1; transform: none; background: var(--sunken); }
}
@media (max-width: 400px) {
  /* Vijf items van 64px: het lange label wijkt voor het korte (app.js, data-kort) en het actieve
     item wordt niet vetter, want dat alleen al duwde "Processen" over de rand. */
  .bottom-nav .bn-item.active { font-weight: 500; }
  .bottom-nav .bn-item span[data-kort] { font-size: 0; }
  .bottom-nav .bn-item span[data-kort]::after { content: attr(data-kort); font-size: 12px; }
}


/* ---------------------------------------------------------------- 3. gedeelde patronen */
@media (max-width: 640px) {
  /* Tabs op de typeschaal (13.5 -> 14) en een rustige actieve toestand. */
  .settings-nav .settings-tab, .proc-tabs .proc-tab { font-size: 14px; }
  /* Een anker landt onder de plakkende topbalk in plaats van erachter. */
  [id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  /* ---- KPI-stroken (.dash-grid, ook .proc-stats) ----
     Twee eerdere pogingen botsten: een band van vijf vakken van 66px brak de labels midden in
     een woord af ("Process en", "Te verifiere n"), de scrollende strook kapte ze af met een
     ellips ("Unieke tabel..."). Nu één vorm voor elke strook in de app: tegels zo breed als hun
     label, op één regel, in een strook die horizontaal scrolt met snap en een zachte rand
     rechts als teken dat er meer is (rules.md 6). Getal eerst en groot, label eronder; het
     icoon per kengetal is op deze maat ruis en vervalt. */
  .dash-grid, .dash .dash-grid, .proc-stats.dash-grid {
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    margin-bottom: 16px; padding: 0 0 2px; background: none; border: 0; border-radius: 0;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
  .dash-grid > .stat-card, .proc-stats.dash-grid > .stat-card {
    flex: 0 0 auto; min-width: 96px; max-width: 78%; scroll-snap-align: start;
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px;
    padding: 12px 14px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: none; background: var(--surface); }
  .dash-grid > .stat-card:last-child { margin-right: 24px; }
  .dash-grid .stat-card .stat-ic { display: none; }
  .dash-grid .stat-card .stat-top { display: block; }
  .dash-grid .stat-card .stat-label, .proc-stats .stat-card .stat-label {
    font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--text-3);
    white-space: nowrap; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  .dash-grid .stat-card .stat-num, .proc-stats .stat-card .stat-num {
    font-size: 20px; line-height: 1.2; font-weight: 600; margin: 0; white-space: nowrap;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .dash-grid .stat-card.stat-lead > div { display: flex; flex-direction: column-reverse; gap: 2px; }

  /* Kaarttabellen (mobielTabel.js) lieten elke waarde overal afbreken (overflow-wrap:anywhere).
     Voor lange namen is dat goed, maar knoppen, tags en bedragen braken daardoor midden in een
     woord of na het euroteken ("Bestaan d", "+€ 3.600"). Die blijven heel en lopen als geheel door. */
  .dz-cards td .btn, .dz-cards td .tag, .dz-cards td .chip, .dz-cards td .num, .dz-cards td .money,
  .dz-cards td .btn *, .dz-cards td .tag * { overflow-wrap: normal; word-break: normal; }
  .dz-cards td .btn, .dz-cards td .tag { white-space: nowrap; }

  /* ---- toast als snackbar ----
     Hij stond gecentreerd op halve breedte (left:50% + translate) en liep bij een langere zin
     vier tot zeven regels hoog, dwars over de actiebalk van de procespagina. Nu de Material-
     snackbar: volle breedte binnen 16px marge, tekst links, en boven een actiebalk als die er is. */
  .toast-wrap { left: 16px; right: 16px; transform: none; align-items: stretch; }
  .toast { max-width: none; width: auto; padding: 12px 16px; font-size: 14px; line-height: 1.4; border-radius: var(--r-lg); }
  body:has(.pm-bar) .toast-wrap, body:has(.bsc-bar) .toast-wrap {
    bottom: calc(var(--bottomnav-h) + var(--safe-b) + 84px); }

  /* Dialogen en lades nemen de scroll niet over naar de pagina eronder. */
  .menu, .dash-fasemenu, .dz-confirm, .sidebar { overscroll-behavior: contain; }
}


/* ---------------------------------------------------------------- 4. per pagina */

/* ======== 4.1 Dashboard, signalen, activiteit, Vera ======== */
/* ---- Dashboard (#/dashboard) */
@media (max-width: 640px) {
  /* Kop: de begroeting is genoeg. De ondertitel is elke dag dezelfde zin; bij een filter toont
     de faseknop zelf de telling (D9). */
  .dash .dash-hello { font-size: 24px; line-height: 1.25; }
  .dash .dash-subtitle { display: none; }
  .dash .dash-header { margin-bottom: 16px; }

  /* ---- de keten als vier tegels, twee bij twee (D1) ----
     Vier kaarten onder elkaar vulden het hele eerste scherm met vier getallen. Nu één blik:
     label, getal, de balk. Icoon en samenvattingsregel vervallen; de balk draagt de verdeling. */
  .dsh-keten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .dsh-keten-kaart { display: flex; flex-direction: column; padding: 12px 12px 16px; box-shadow: none; }
  .dsh-keten-kop { display: block; margin-bottom: 8px; }
  .dsh-keten-kop .stat-ic, .dsh-keten-sum, .dsh-keten-rijen { display: none; }
  /* Getal eerst, label eronder (zoals de KPI-stroken elders): een label dat op 320px naar twee
     regels gaat ("Datamodel, tabellen") duwt zo het getal niet uit de lijn met zijn buurman. */
  .dsh-keten-kopt { display: flex; flex-direction: column-reverse; gap: 4px; }
  .dsh-keten-label { font-size: 12px; line-height: 1.35; color: var(--text-3); }
  .dsh-keten-kaart .dsh-bar { margin-top: auto; }
  .dsh-keten-num { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .dsh-keten-kaart .dsh-bar { height: 4px; }

  /* ---- volgorde: eerst wat je kunt doen (D2) ----
     Op het bureaublad staan duiding en werk naast elkaar; in één kolom kwam "Signalen", de enige
     lijst waar je iets mee doet, pas op scherm drie. Nu: signalen, gewijzigde processen,
     voortgang per domein, in controle. Een paneel met alleen een lege staat zakt naar onderen. */
  .dsh-split { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .dsh-split .panel { min-width: 0; }
  .dsh-col { display: contents; }
  .dsh-split .panel:has(.dsh-sig) { order: 1; }
  .dsh-split .panel:has(.dsh-wijz) { order: 2; }
  .dsh-split .panel:has(.dsh-dom) { order: 3; }
  .dsh-split .panel:has(.dsh-meters) { order: 4; }
  .dsh-split .panel:has(> .panel-pad > .dash-empty:only-child) { order: 5; }
  .dash .panel-head { min-height: 52px; flex-wrap: nowrap; }
  .dash .panel-head .panel-title { min-width: 0; }
  .dash .panel .panel-pad { padding: 8px 16px 16px; }

  /* Lege staten als één rustige regel in plaats van 180px met een groot icoon (D3, I1). */
  .dash .dash-empty { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 12px 0 4px;
    font-size: 14px; line-height: 1.45; }
  .dash .dash-empty .ic { font-size: 20px; flex: none; }
  /* De uitleg over een trendlijn die er nog niet is, is geen informatie (D4). Op het bureaublad en
     in Project Control blijft hij staan. */
  .dash .dsh-trend-leeg { display: none; }

  /* ---- signalen (D6, D7) ----
     Elke rij zei twee keer hetzelfde ("Uitwerken" + "Proces uitwerken"), en de regel is op bijna
     elke rij dezelfde. Wat de rijen onderscheidt is het proces: dat wordt de hoofdregel, de
     handeling de tweede. Chevron, en de hele rij van 56px is het tikdoel. */
  .dsh-sig { position: relative; min-height: 56px; padding: 8px 40px 8px 16px; margin: 0 -16px;
    border-radius: 0; display: flex; flex-direction: column-reverse; justify-content: center; gap: 4px; }
  .dsh-sig-kop .tag { display: none; }
  .dsh-sig-regel { font-size: 14px; line-height: 1.4; color: var(--text-3); }
  .dsh-sig-sub { font-size: 16px; font-weight: 500; line-height: 1.35; margin: 0; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dsh-sig.clickable::after, .dsh-dom.clickable::after, .dsh-budget.clickable::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-top: 2px solid var(--text-faint); border-right: 2px solid var(--text-faint); transform: rotate(45deg); }
  .dsh-panel-voet { padding-top: 12px; }
  .dsh-panel-voet .btn, .dsh-panel-voet--solo .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; font-size: 14px; }
  .dsh-panel-voet .muted { font-size: 12px; }

  /* ---- gewijzigde processen ---- */
  .dsh-wijz-naam { font-size: 16px; }
  .dsh-wijz-ts { font-size: 12px; }

  /* ---- voortgang per domein (D5, D8): naam 14px, percentage 12px, chevron want de rij opent het domein ---- */
  .dsh-dom { position: relative; min-height: 56px; padding: 8px 40px 12px 16px; margin: 0 -16px; border-radius: 0; gap: 8px 12px; }
  .dsh-dom-naam { flex: 1 1 0; min-width: 0; font-size: 14px; }
  .dsh-dom-pct { font-size: 12px; font-variant-numeric: tabular-nums; }
  .dsh-legend { padding-top: 12px; }
  .dsh-legend .chart-legend { font-size: 12px; }

  /* ---- in controle ---- */
  .dsh-meters { gap: 16px; }
  .dsh-meter-kop { font-size: 14px; }
  .dsh-meter-meta { font-size: 12px; }
  .dsh-meter-sub { font-size: 12px; }
  .dsh-cap { font-size: 12px; }

  /* ---- Implementatie ---- */
  /* De lege opleverlijn en de lege scopegrafiek: hun uitleg blijft, maar op twee regels (I1). */
  .dash .tf-scope-leeg { padding: 8px 0; gap: 12px; font-size: 14px; }
  .dash .tf-scope-leeg > div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* "Project Control" in de kop: als tekstknop wikkelde hij naar een eigen regel van 50px (I6).
     Nu een pijlknop van 44px naast de titel; de naam blijft de toegankelijke naam van de knop. */
  .dash .panel-head-right .btn[data-act="dash-naar-scope"] { width: 44px; height: 44px; min-height: 44px; padding: 0;
    justify-content: center; font-size: 0; gap: 0; }
  .dash .panel-head-right .btn[data-act="dash-naar-scope"] .ic { font-size: 20px; }
  .dash .panel-head:has(.btn[data-act="dash-naar-scope"]) { flex-wrap: nowrap; }
  /* Scopebewaking: label op regel één, bedrag met zijn label eronder, links uitgelijnd (I4). */
  .dsh-kvs { margin-top: 12px; }
  .dsh-kvs .dsh-kv { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 0; }
  .dsh-kvs .dsh-kv-k { font-size: 14px; }
  .dsh-kvs .dsh-kv-v { margin-left: 0; font-size: 16px; }
  /* Kwaliteit: drie percentages als rijen met de waarde rechts, niet als doorlopende zin (I5). */
  .dsh-cijfers { gap: 0; padding-top: 4px; }
  .dash .dsh-trend-leeg + .dsh-cijfers { margin-top: 0; border-top: 0; }
  .dsh-cijfers span { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 40px; font-size: 14px; border-bottom: 1px solid var(--sunken); }
  .dsh-cijfers span:last-child { border-bottom: 0; }
  .dsh-staaf-labels span { font-size: 12px; }
  /* Budget: het totaal staat bovenaan als samenvatting, daarna de domeinen (I2). */
  .panel-pad:has(> .dsh-budget) { display: flex; flex-direction: column; }
  .panel-pad > .dsh-kv--totaal { order: -1; margin: 0 0 4px; padding: 4px 0 12px; border-top: 0;
    border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 4px; font-size: 14px; }
  .panel-pad > .dsh-kv--totaal .dsh-kv-v { margin-left: 0; font-size: 16px; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
  .dsh-budget { position: relative; padding: 8px 40px 12px 16px; margin: 0 -16px; border-radius: 0; min-height: 56px; }
  .dsh-budget-naam { font-size: 14px; }
  .dsh-budget-meta { font-size: 12px; }
  .dsh-budget-meer { order: 1; margin-top: 8px; min-height: 44px; justify-content: center; font-size: 14px; }

  /* Beweging met betekenis: bij het binnenkomen van het dashboard groeien de balken vanaf nul
     (D10). Alleen tijdens de paginaovergang, dus niet bij elke hertekening. */
  html[data-dz-overgang] .dash .dsh-bar > span { transform-origin: left center;
    animation: mdGroei var(--m-t3) var(--m-ease) 80ms both; }
  @keyframes mdGroei { from { transform: scaleX(0); } to { transform: none; } }
}
@media (max-width: 400px) {
  .dsh-keten-num { font-size: 20px; }
  /* Smalle telefoon: de domeinnaam kreeg naast het bedrag nog tien tekens ("Verkoop en C..."). */
  .dsh-budget-kop { flex-wrap: wrap; row-gap: 0; }
  .dsh-budget-naam { flex: 1 1 100%; white-space: normal; }
}


/* ---- Activiteit (#/activiteit) */
@media (max-width: 640px) {
  /* Kop op één regel: titel met onderregel links, verversen en exporteren als twee pictogram-
     knoppen van 44px rechts (A2). "Nu verversen" was de enige primaire knop van de pagina, terwijl
     het geen hoofdtaak is; beide knoppen zijn nu gelijkwaardig en rustig. De tekst blijft de
     toegankelijke naam van de knop. */
  .act2 { gap: 12px; }
  .act2-head { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  .act2-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  .act2-title { font-size: 24px; line-height: 1.25; }
  .act2-sub { font-size: 14px; line-height: 1.45; margin-top: 4px; }
  .act2-head-actions { flex: none; gap: 8px; }
  .act2-head-actions .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center;
    font-size: 0; gap: 0; }
  .act2-head-actions .btn .ic { font-size: 20px; }
  .act2-head-actions .btn-primary { background: var(--surface); color: var(--text); border-color: var(--border-2); box-shadow: none; }
  .act2-head-actions .btn-primary .ic { color: inherit; }

  /* Vier tellers als lichte tegels: geen icoon, getal 20px (A7). Het blijven filterknoppen. */
  .act2-signals { gap: 8px; }
  .act2-sig { padding: 12px; min-height: 56px; }
  .act2-sig .stat-ic { display: none; }
  .act2-sig .stat-label { font-size: 12px; }
  .act2-sig-row { margin-top: 4px; }
  .act2-sig-num { font-size: 20px; font-variant-numeric: tabular-nums; }

  /* De periode als chiprij direct boven de feed (A4); in het filterpaneel staat hij dan niet nog
     een keer. */
  .act2-mperiode { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .act2-mperiode::after { content: ""; flex: 0 0 8px; }
  .act2-mperiode::-webkit-scrollbar { display: none; }
  .act2-mperiode .act2-pill { flex: none; padding: 0 16px; font-size: 14px; }
  .act2-filters .act2-panel-body > div:has(> .act2-pills) { display: none; }

  /* Het detail (A5): op het bureaublad een derde kolom, onder elkaar kwam het twee schermen onder
     de rij waarop je tikte, zodat een tik niets leek te doen. Nu opent het als sheet van onderen,
     over de feed heen, met een scrim en een sluitknop; zonder keuze staat het er niet. Een leeg
     paneel houdt ook geen minimale hoogte van 320px meer. */
  .act2-panel { min-height: 0; }
  .act2-feed { order: -2; }
  .act2-cols:not(.heeft-keuze) .act2-detail { display: none; }
  /* Zonder keuze markeert de feed geen rij als gekozen (het bureaublad toont dan de eerste). */
  .act2-cols:not(.heeft-keuze) .act2-erow.on { background: none; box-shadow: none; }
  .act2-cols.heeft-keuze .act2-detail {
    position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 45;
    max-height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h) - var(--safe-b) - 24px); overflow: auto;
    overscroll-behavior: contain; border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(16, 24, 40, .16); animation: mSheet var(--m-t3) var(--m-ease-sheet) both; }
  .act2-cols.heeft-keuze .act2-detail .act2-panel-body { overflow: visible; }
  /* Zelfde laag als de sheets van de procespagina (.pm-sheet, 45): boven de inhoud, onder de
     onderbalk, die dus gewoon bruikbaar blijft. */
  .act2-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(16, 24, 40, .32);
    animation: mdScrim var(--m-t3) var(--m-ease) both; }
  .act2-detail .act2-panel-head { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 4px 4px 4px 16px; min-height: 52px; }
  .act2-sluit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
    margin-left: 4px; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; font: inherit; }
  .act2-sluit .ic { font-size: 20px; }
  .act2-sluit:active { background: var(--sunken); }
  @keyframes mdScrim { from { opacity: 0; } to { opacity: 1; } }

  /* Zoeken over de volle breedte, sorteren eronder (A3): het zoekveld was 100px ("Zoek in act"). */
  .act2-feed .act2-panel-head { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .act2-feed .act2-search { flex: 1 1 100%; height: 44px; }
  .act2-feed .act2-panel-head .select { flex: 1 1 100%; max-width: none !important; }   /* inline max-width uit feedHtml() */
  .act2-dayhead .dh-t { font-size: 14px; }
  .act2-dayhead .dh-span { display: none; }   /* tijdspanne van de dag; de rijen dragen hun eigen tijd */
  .act2-erow { gap: 12px; padding: 8px 16px; }
  .act2-erow .proc-name { font-size: 16px !important; }   /* inline 13.5px uit feedHtml() */
  .act2-erow .proc-sub { font-size: 14px; }
  .act2-empty { padding: 32px 16px; }
  .act2-empty > div:first-of-type { font-size: 16px !important; }   /* inline 13.5px */

  /* Filters: dicht als kop "Filters" met een telling; open met alles erin (A4). */
  .act2-filters .act2-panel-head { padding: 0 8px 0 0; }
  .act2-ftoggle { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-height: 52px; padding: 0 12px;
    border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
  .act2-ftoggle .ic { font-size: 18px; color: var(--text-3); }
  .act2-ftoggle .ph-t { font-size: 16px; font-weight: 600; }
  .act2-ftoggle-pijl { margin-left: auto; transition: transform var(--m-t2) var(--m-ease); }
  .act2-ftoggle[aria-expanded="true"] .act2-ftoggle-pijl { transform: rotate(180deg); }
  .act2-filters .act2-panel-head [data-act="act-reset"] { margin-left: 0 !important; min-height: 44px; padding: 0 8px !important;
    font-size: 14px !important; }   /* inline 11.5px */
  .act2-filters.is-dicht .act2-panel-body { display: none; }
  .act2-filters.is-dicht .act2-panel-head { border-bottom: 0; }
  .act2-filters:not(.is-dicht) .act2-panel-body { animation: mdUitklap var(--m-t2) var(--m-ease) both; }
  .act2-filters .act2-panel-body { padding: 12px 16px 16px; }
  .act2-flabel { font-size: 12px; }
  .act2-check { font-size: 14px; padding: 0 8px; }
  .act2-check .cnt { font-size: 12px; }
  /* Initialen van 9px in de personenlijst (A1): de naam staat er al naast. */
  .act2-userlist .dz-avatar-sm, .act2-userlist .dz-avatar { display: none; }
  .act2-switch .lbl { font-size: 14px; }
  .act2-filters .act2-note { display: none; }   /* bewaarbeleid: uitleg, geen filter */

  /* Feedrij als lijstrij: pictogram, wat er gebeurde (hoogstens twee regels), wie en wanneer.
     De klokkolom en de categorietag persten de tekst in een kolom van 130px, vier regels per
     gebeurtenis; het tijdstip staat al relatief in de tweede regel, de categorie in het detail. */
  .act2-erow { grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
  .act2-erow .et, .act2-erow > .tag { display: none; }
  .act2-erow .stat-ic { width: 28px; height: 28px; }
  .act2-erow .proc-name { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }   /* .knip kapt op één regel af */

  /* "Per proces" (alleen platformbeheer): een tabel van vijf kolommen werd 446px breed. Op de
     telefoon een lijst: proces met aantal, wie, en waarop. */
  .act2 > .card { margin: 0 !important; }   /* inline marge uit perProcesHtml() */
  .act2 > .card p.muted { font-size: 14px; }
  .act2 > .card .tbl-wrap { overflow: visible; }
  .act2 > .card .tbl, .act2 > .card .tbl tbody, .act2 > .card .tbl tr, .act2 > .card .tbl td { display: block; width: auto; }
  .act2 > .card .tbl thead { display: none; }
  .act2 > .card .tbl tr { padding: 12px 16px; border-top: 1px solid var(--sunken); }
  .act2 > .card .tbl td { padding: 0; border: 0; text-align: left !important; font-size: 14px; }   /* inline text-align uit perProcesHtml() */
  .act2 > .card .tbl td:first-child { font-size: 16px; }
  .act2 > .card .tbl td:nth-child(2) { font-size: 12px; color: var(--text-3); }
  .act2 > .card .tbl td:nth-child(2)::after { content: " wijzigingen"; }
  .act2 > .card .tbl td:nth-child(5) { font-size: 12px; }

  /* Detail */
  .act2-panel-head .ph-t { font-size: 14px; }
  .act2-detail .act2-panel-body { padding: 12px 16px; }
  .act2-det-wat { font-size: 16px; }
  .act2-frow .fl, .act2-frow .fv { font-size: 14px; }
  .act2-det-foot .btn { min-height: 44px; }
}


/* ---- Signalen / Mijn acties (#/taken) */
@media (max-width: 640px) {
  /* De pagina was 491px breed (T1): de werkbank wisselt van grid naar flexkolom, maar de
     align-items:start van het grid bleef staan, dus de filterrail nam zijn eigen breedte (475px)
     in plaats van die van het scherm. Uitrekken, en geen kind mag breder dan de kolom. */
  .sig-werkbank, .sig-werkbank--2 { align-items: stretch; gap: 12px; }
  .sig-werkbank > * { min-width: 0; max-width: 100%; }

  /* Kop: één regel titel op de typeschaal, de onderregel op 14px (inline 12.5px uit signalen.js). */
  .sig-keyuser .page-head h1, .content:has(> .sg-balk) .page-head h1 {
    font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
  .sig-keyuser .page-head .muted, .content:has(> .sg-balk) .page-head .muted {
    font-size: 14px !important; line-height: 1.45; margin-top: 4px; }   /* inline style uit kop() */

  /* ---- de kopbalk van de consultant (T3) ----
     In een kolom werd de flex-basis de HOOGTE: 320 en 420px voor inhoud van 100 en 170px, een
     hele schermlengte wit voor de eerste taak. Nu drie compacte vakken: het percentage als één
     regel, Van jou als drie rijen, de vier afgeleiden twee bij twee. */
  .sg-balk { margin-bottom: 12px; }
  .sg-balk .sg-vak { flex: none; padding: 12px 16px; }
  .sg-vak--score { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: left; }
  .sg-pct { grid-row: 1 / span 2; font-size: 28px; font-variant-numeric: tabular-nums; }
  .sg-pct-l { margin: 0; font-size: 14px; color: var(--text); font-weight: 500; }
  .sg-pct-s { margin: 0; font-size: 12px; white-space: normal; }
  .sg-vak--jou { gap: 0; }
  .sg-vj-kop { margin-bottom: 4px; }
  .sg-avatar { display: none; }
  .sg-vj-t { font-size: 14px; }
  .sg-vj-rij { font-size: 14px; padding: 4px 0; }
  .sg-vj-l { font-size: 14px; }
  /* Per afgeleide: de naam op regel één, de balk met de telling ernaast op regel twee. Naam en
     telling naast elkaar pasten op 320px niet in een halve breedte ("Requirements" liep over
     de "0 / 94" heen). */
  .sg-vak--afg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .sg-afg-kol { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 4px; }
  .sg-afg-kop { display: contents; }
  .sg-afg-l { grid-column: 1 / -1; grid-row: 1; font-size: 14px; color: var(--text); }
  .sg-afg-n { grid-column: 2; grid-row: 2; font-size: 12px; }
  .sg-afg-n b { font-size: 12px; }
  .sg-afg-bar { grid-column: 1; grid-row: 2; margin: 0; height: 4px; }
  .sg-afg-s { grid-column: 1 / -1; margin: 0; }
  /* "nog zonder stempel" onder elke kolom zegt vier keer hetzelfde; alleen een wijziging telt. */
  .sg-afg-s:not(.is-amber) { display: none; }

  /* Werklijst / Matrix: één segment over de volle breedte; op 320px stak hij 12px uit (T2). */
  .sg-tabrij { margin-bottom: 12px; }
  .sg-tabgroep { width: 100%; }
  .sg-tab { flex: 1 1 auto; min-width: 0; padding: 0 8px; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; font-size: 14px; }

  /* ---- filters (T6) ----
     Bakken en subfilters liepen als één naamloze rij door elkaar. Nu twee rijen: de bakken als
     pillen (dezelfde vorm als de segmentschakelaar van de key user), daaronder de kleinere
     bron- en gevolgfilters met hun groepsnaam ervoor. Beide scrollen zijwaarts met een zachte
     rand als teken dat er meer is. */
  .sig-werkbank .sig-filters { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 8px;
    padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .sig-filters > .sig-fgroep, .sig-fsub {
    display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none;
    overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .sig-filters > .sig-fgroep::-webkit-scrollbar, .sig-fsub::-webkit-scrollbar { display: none; }
  .sig-filters > .sig-fgroep::after, .sig-fsub::after { content: ""; flex: 0 0 8px; }
  .sig-fsub .sig-fgroep { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; }
  .sig-fsub .sig-fgroep + .sig-fgroep { padding-left: 8px; border-left: 1px solid var(--border); }
  .sig-fsub .sig-fkop { display: block; margin: 0 4px 0 0; font-size: 12px; font-weight: 500;
    letter-spacing: 0; text-transform: lowercase; color: var(--text-3); }
  .sig-fsub .sig-fkop::first-letter { text-transform: uppercase; }
  .sig-filters .sig-fknop { width: auto; flex: none; white-space: nowrap; gap: 8px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--surface); }
  .sig-filters > .sig-fgroep .sig-fknop { min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; }
  .sig-fsub .sig-fknop { min-height: 36px; padding: 0 12px; font-size: 14px; position: relative; }
  .sig-fsub .sig-fknop::before { content: ""; position: absolute; inset: -4px 0; }   /* tikvlak 44px */
  .sig-filters .sig-fknop.is-on { border-color: var(--pri); background: var(--pri-soft); }
  .sig-fknop-l { flex: none; }
  .sig-fknop-n { font-size: 12px; }
  .sig-fwis { align-self: flex-start; min-height: 44px; }
  /* Vera als onderwerp (12 okt): haar rij pillen draagt de naam ervoor, net als de bron- en
     gevolgfilters; anders staat er een losse pil "Verzoeken" zonder te zeggen waarover. */
  .sig-filters > .sig-fgroep--vera > .sig-fkop { display: block; flex: none; margin: 0 4px 0 0; font-size: 12px; font-weight: 500;
    letter-spacing: 0; text-transform: lowercase; color: var(--text-3); }
  .sig-filters > .sig-fgroep--vera > .sig-fkop::first-letter { text-transform: uppercase; }
  /* Het paneel: de kop met de knop naar Wat Vera weet mag breken, en de knoppen onder een voorstel
     krijgen een tikvlak van 44px. */
  .sig-vera-kop { padding: 10px 12px; }
  .sig-vera-uitleg { font-size: 14px; padding: 12px 12px 0; }
  .sig-vera-body { padding: 12px; }
  .sig-vera .kv-kaart-knoppen .btn, .sig-vera .kv-form-knoppen .btn { min-height: 44px; font-size: 14px; }
  .sig-vera .kv-kaart-tekst { font-size: 14px; }
  .sig-vera .kv-form .textarea { font-size: 16px; }

  /* ---- de lijst ---- */
  /* De lijstkop herhaalde de gekozen bak met zijn telling, en die staat al in de pil erboven. */
  .sig-lijst-kop { display: none; }
  /* Groepskop (T5, KU8): tikdoel van 44px, naam op regel één, domein en "bij" op regel twee,
     de voortgang als dunne derde regel. Was vier regels en 36px hoog. */
  .sig-groepkop { padding: 8px 16px 12px 8px; gap: 4px 12px; }
  .sig-groep-open { min-height: 44px; padding: 4px 8px; row-gap: 4px; column-gap: 0; }
  .sig-groep-t { flex: 1 1 100%; font-size: 16px; line-height: 1.35; }
  .sig-groep-d, .sig-groep-bij { font-size: 14px; }
  .sig-groep-d + .sig-groep-bij::before, .sig-groep-d + .tag + .sig-groep-bij::before { content: "·"; margin: 0 4px; color: var(--text-faint); }
  .sig-groep-open .tag { margin-left: 8px; }
  .sig-groepkop .sig-voortgang { padding-left: 8px; }
  .sig-groepkop .sig-vbar { height: 4px; }
  /* In de bak "Bij een collega" draagt elke groep hetzelfde label; de bak zegt het al (KU2). */
  .sig-keyuser:has(.sig-segknop.is-on[data-k="collega"]) .sig-groep-open .tag { display: none; }

  /* Rijen (T4, KU1): één regel wat, één regel waarom. De waarom was op elke rij dezelfde zin van
     vijf regels; voluit staat hij in de uitgeklapte rij. */
  .sig-rij { gap: 12px; padding: 8px 16px; min-height: 64px; }
  .sig-rij-t { font-size: 16px; line-height: 1.35; }
  .sig-rij-r { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    white-space: normal; overflow: hidden; font-size: 14px; line-height: 1.4; }
  .sig-rij-d { font-size: 12px; }
  .sig-dringend { font-size: 12px; }
  /* De rij klapt uit: een chevron die meedraait zegt dat, in plaats van de pijl naar rechts
     (die beloofde een ander scherm). */
  .sig-rij-pijl { display: none; }
  .sig-rij::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 4px 4px 0;
    border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
    transform: rotate(45deg); transition: transform var(--m-t2) var(--m-ease); }
  .sig-rijwrap.is-op .sig-rij::after { transform: rotate(-135deg); margin: 4px 4px 0 0; border-color: var(--pri-text); }
  .sig-rijwrap.is-op .sig-inline { padding: 0 16px 16px; }
  /* Uitklappen landt zacht in plaats van te springen (T9). Het blok bestaat alleen na een tik. */
  .sig-rijwrap.is-op .sig-inline { animation: mdUitklap var(--m-t2) var(--m-ease) both; }
  .sig-inline-p .sig-punt-t { font-size: 14px; }
  .sig-meer { font-size: 14px; padding: 12px 16px; }
  .sig-lijst-voet { font-size: 12px; padding: 12px 16px; }
  /* Onder een lege lijst legt de voet iets uit wat er niet is (KU5). */
  .sig-lijst:has(.sig-leeg) .sig-lijst-voet { display: none; }
  .sig-leeg { padding: 32px 16px; }
  .sig-leeg-t { font-size: 14px; }

  /* ---- key user: strook en segment ---- */
  .sig-strook { padding: 12px 16px; gap: 8px; }
  .sig-strook.is-leeg .sig-strook-v { display: none; }   /* niets om te meten (KU6) */
  /* De pillen scrollen zijwaarts; een zachte rand en eindmarge maken dat zichtbaar (KU4). */
  .sig-seg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .sig-seg::after { content: ""; flex: 0 0 8px; }
  .sig-segknop { padding: 0 16px; }

  /* ---- matrix (M2-M5) ----
     Kaart = naam met domein eronder, de status rechtsboven, de vier afgeleiden twee bij twee.
     Lege velden ("—") vervallen; de hele kaart opent het proces. */
  .mx-paneel .panel-head { flex-wrap: wrap; row-gap: 4px; }
  .mx-groepkop { padding: 12px 16px 12px 12px; min-height: 56px; gap: 8px; }
  .mx-groep-t { flex: 0 1 auto; min-width: 0; font-size: 16px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx-groep .sticky-tbl { padding: 0; border-top: 1px solid var(--sunken); }
  /* Drie kolommen: links de stand van het proces (status, open punten), rechts de vier afgeleiden
     twee bij twee. Elk veld heeft een vaste plek, dus alle kaarten lezen op dezelfde manier. */
  /* Geen kaart in een kaart: binnen het matrixpaneel is elk proces een lijstrij met een lijn
     ertussen, zoals een gegroepeerde lijst op iOS. Dat geeft de drie kolommen hun breedte terug. */
  .mx-paneel .dz-cards.dz-cards-chips tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 1fr) minmax(81px, 1fr); gap: 8px; align-items: start;
    position: relative; padding: 12px 16px 16px; margin: 0; box-shadow: none; background: none;
    border: 0; border-bottom: 1px solid var(--sunken); border-radius: 0; }
  .mx-paneel .dz-cards.dz-cards-chips tr:last-child { border-bottom: 0; }
  .mx-paneel .dz-cards-chips td { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .mx-paneel .dz-cards-chips td::before { font-size: 12px; color: var(--text-3); font-weight: 500; white-space: nowrap; }
  /* Titel over de volle breedte en alleen afbreken tussen woorden (het kaartpatroon brak overal). */
  .mx-paneel .dz-cards-chips td.card-title { grid-column: 1 / -1; grid-row: 1; display: block; margin: 0; padding: 0 0 4px;
    border-bottom: 0; overflow-wrap: break-word; }
  .mx-paneel td.card-title > * { overflow-wrap: break-word; }
  .mx-paneel td.card-title > a { display: block !important; font-size: 16px; line-height: 1.35; color: var(--text);
    font-weight: 600 !important; }   /* inline font-weight uit mxRij() */
  .mx-paneel td.card-title > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mx-paneel td.card-title > div { display: block !important; margin-top: 4px;
    font-size: 14px !important; font-weight: 400; }   /* inline 11.5px (M3) */
  .mx-paneel .dz-cards-chips td[data-label="Status"] { grid-column: 1; grid-row: 2; }
  .mx-paneel .dz-cards-chips td[data-label="Open punten"]::before { white-space: normal; }
  .mx-paneel .dz-cards-chips td[data-label="Open punten"] { grid-column: 1; grid-row: 3; }
  .mx-paneel .dz-cards-chips td[data-label="Requirements"] { grid-column: 2; grid-row: 2; }
  .mx-paneel .dz-cards-chips td[data-label="User stories"] { grid-column: 3; grid-row: 2; }
  .mx-paneel .dz-cards-chips td[data-label="Tabellen"] { grid-column: 2; grid-row: 3; }
  .mx-paneel .dz-cards-chips td[data-label="Dev-vertaling"] { grid-column: 3; grid-row: 3; }
  .mx-paneel .dz-cards-chips td[data-label="Laatste wijziging"] { grid-column: 1 / -1; grid-row: 4; }
  .mx-paneel .dz-cards-chips td[data-label="Laatste wijziging"] .muted { font-size: 12px !important; }   /* inline 11.5px (M3) */
  .mx-paneel .dz-cards-chips td:has(> .muted:only-child) { display: none; }   /* "—" zegt niets (M5) */
  .mx-paneel .dz-cards-chips td .btn { position: relative; z-index: 1; min-height: 44px; }
  .mx-paneel .dz-cards tr:active { background: var(--sunken); }
  .mx-meer { font-size: 14px; padding: 12px 16px; }

  @keyframes mdUitklap { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}


/* ---- Vera-paneel (?vera=1)
   De opmaak van het paneel staat als tekst in veraPanel.js en wordt pas bij het openen in de
   <head> gezet, dus ná dit bestand. Elke regel hier begint daarom met :root, zodat hij op
   specificiteit wint zonder die tekst (en zijn iOS-zoomwacht in test/suites/mobiel.mjs) te raken. */
@media (max-width: 640px) {
  /* Volle breedte (V1): max-width:94vw liet links een reep dashboard met schaduw zien, als een
     half open lade. Op de telefoon is Vera een eigen scherm dat van onderen opkomt (V10), zoals
     de sheets elders in de app. */
  :root .vera-panel { width: 100%; max-width: none; border-left: 0; box-shadow: none; font-size: 16px;
    transition: transform var(--m-t3) var(--m-ease-sheet), opacity var(--m-t2) var(--m-ease); }
  :root .vera-panel.vera-dicht { transform: translateY(100%); }
  @starting-style { :root .vera-panel { transform: translateY(32px); opacity: 0; } }

  /* Kop: alle knoppen 44px (V2), onderregel op 12px. */
  :root .vera-head { padding: 8px 8px 8px 16px; gap: 12px; }
  :root .vera-headbtns { gap: 0; }
  :root .vera-headbtn { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  :root .vera-name { font-size: 16px; }
  :root .vera-sub, :root .vera-status { font-size: 12px; }

  /* Tabs 44px en 14px, de teller 12px (V3, V4). */
  :root .vera-tabs { padding: 0 8px; }
  :root .vera-tab { min-height: 44px; padding: 0 12px; font-size: 14px; }
  :root .vera-tab .tel { font-size: 12px; }

  /* "Ze volgt je scherm" zegt al wat Vera ziet; het contextblok eronder herhaalt dat (V5). Zonder
     die balk blijft het blok staan, want dan is het de enige plek die het zegt. */
  :root .vera-screenbar { font-size: 14px; padding: 0 8px 0 16px; min-height: 44px; }
  :root .vera-screenbar .lnk { font-size: 14px; min-height: 44px; padding: 0 8px; }
  :root .vera-panel:has(.vera-screenbar) .vera-ctx { display: none; }
  :root .vera-ctx { font-size: 14px; }
  :root .vera-ctx .ttl { font-size: 12px; }

  /* Gesprek op leesmaat. */
  :root .vera-msg .bubble { font-size: 16px; }
  :root .vera-leeg, :root .vera-naprop, :root .vera-wijst { font-size: 14px; }
  :root .vera-propwijzer { font-size: 14px; }
  :root .vera-propwijzer button { font-size: 14px; min-height: 36px; padding: 0 12px; }
  :root .vera-ans-head .lbl, :root .vera-ans-head .ver { font-size: 12px; }
  :root .vera-ans-body { font-size: 16px; }
  :root .vera-ans-depth button, :root .vera-ans-linkbtn { font-size: 14px; min-height: 36px; }
  :root .vera-ans-icobtn { width: 44px; height: 44px; }
  :root .vera-source { font-size: 14px; }
  :root .vera-source .n, :root .vera-source .meta { font-size: 12px; }
  :root .vera-notice .ttl { font-size: 14px; }
  :root .vera-notice .sub, :root .vera-mem-tag, :root .vera-memory > summary .cnt { font-size: 12px; }
  :root .vb-h { font-size: 16px; }
  :root .vb-kv-row, :root .vb-score-top { font-size: 14px; }
  :root .vera-mic-status { font-size: 14px; }

  /* Suggesties: één zijwaarts scrollende rij van 44px in plaats van drie regels boven het
     invoervak (V6). Visueel 36px hoog, het tikvlak 44px. */
  :root .vera-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none;
    padding: 4px 16px; gap: 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  :root .vera-chips::-webkit-scrollbar { display: none; }
  :root .vera-chips::after { content: ""; flex: 0 0 8px; }
  :root .vera-chip { flex: none; scroll-snap-align: start; position: relative; min-height: 36px; margin: 4px 0;
    padding: 0 16px; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
  :root .vera-chip::before { content: ""; position: absolute; inset: -4px 0; }

  /* Invoer: microfoon, bijlage en verzenden op 44px (V3). */
  :root .vera-attach, :root .vera-mic-btn { width: 44px; height: 44px; }
  :root .vera-send { height: 44px; min-width: 44px; font-size: 14px; }
  :root .vera-file { font-size: 12px; }
  /* De disclaimer op 12px, en weg zodra het gesprek loopt (V7): dan weet je het. */
  :root .vera-foot { font-size: 12px; padding: 0 16px 8px; }
  :root .vera-panel:has(.vera-msg.jij) .vera-foot { display: none; }
}


/* ---- minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  :root .vera-panel { transition-duration: .01ms; }
  .act2-cols.heeft-keuze .act2-detail, .act2-scrim, .act2-filters:not(.is-dicht) .act2-panel-body { animation: none; }
  .act2-ftoggle-pijl { transition: none; }
  html[data-dz-overgang] .dash .dsh-bar > span { animation: none; }
  .sig-rijwrap.is-op .sig-inline { animation: none; }
  .sig-rij::after { transition: none; }
}

/* ======== 4.2 Processen, proceskaart, intake ======== */
/* ================================================================ gedeelde kop
   Processen en de proceskaart delen een kop: KPI-strook, twee tabbladen, uitleg (overview.js
   statsStrip/procTabs). De pagina herkent zich aan de KPI-strook direct in .content. */
@media (max-width: 640px) {
  /* Twee tabbladen als twee gelijke helften. Ze plakten bovenaan, samen met de zoekbalk eronder:
     dat nam een derde van het scherm weg voor de lijst. Nu plakt alleen de zoekbalk. */
  .content.content-wide:has(> .proc-stats) > .settings-nav.hscroll-tabs {
    position: static; margin: 0 0 12px; padding: 0; box-shadow: none; gap: 0;
    -webkit-mask-image: none; mask-image: none; }
  .content.content-wide:has(> .proc-stats) > .settings-nav.hscroll-tabs > .settings-tab {
    flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 8px; font-size: 14px; }
  .content.content-wide:has(> .proc-stats) > .settings-nav.hscroll-tabs ~ .toolbar { top: calc(var(--topbar-h) - 1px); }
}

/* ================================================================ processen
   De lijst van 94 processen: groepen die dicht beginnen (overview.js, mobGroep), compacte
   rijen met één metaregel, de hoofdactie als zwevende knop rechtsonder. */
@media (max-width: 640px) {
  /* ---- zoekbalk: één regel, zonder knoppen erbij ----
     "Uit bibliotheek toevoegen" en "Nieuw proces" stonden op volle breedte onder het zoekveld,
     in de plakkende balk: 270px bovenin voor zoeken en knoppen. De hoofdactie wordt hieronder
     een zwevende knop, de bibliotheek schuift mee in het uitgeklapte filterpaneel. */
  .content.content-wide:has(> .proc-stats) > .toolbar .toolbar-r { display: contents; }
  .content.content-wide:has(> .proc-stats) > .toolbar [data-act="bl-open"] { display: none; }
  .content.content-wide:has(> .proc-stats) > .toolbar.filters-open [data-act="bl-open"] {
    display: inline-flex; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  /* Het infoknopje bij Type zweefde los naast Filters, en uitgeklapt belandde het naast een
     ander filter. De typen staan uitgelegd op de procespagina. */
  .content.content-wide:has(> .proc-stats) > .toolbar .toolbar-l .dz-tip { display: none; }

  /* ---- hoofdactie als uitgebreide zwevende knop (Material 3) ----
     Rechtsonder boven de onderbalk, in de duimzone, altijd bereikbaar tijdens het scrollen. De
     schaduw is hier geen versiering: hij laat zien dat de knop boven de lijst zweeft. */
  .content.content-wide:has(> .proc-stats) > .toolbar :is([data-act="new-proces"], [data-act="ov-intake"]) {
    position: fixed; right: 16px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 16px); z-index: 20;
    flex: none; min-height: 56px; padding: 0 20px 0 16px; gap: 8px; border-radius: 16px;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .18), 0 1px 3px rgba(16, 24, 40, .12); }
  .content.content-wide:has(> .proc-stats) > .toolbar :is([data-act="new-proces"], [data-act="ov-intake"]) .ic { font-size: 20px; }
  /* De laatste rij mag nooit onder die knop verdwijnen. */
  .content:has(> .toolbar :is([data-act="new-proces"], [data-act="ov-intake"])) {
    padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + 88px); }

  /* ---- kop boven de lijst: titel met telling, en de weergavewissel op tikmaat ---- */
  .content.content-wide:has(> .proc-stats) .cardpanel > .panel-head { flex-wrap: wrap; row-gap: 8px; padding: 4px 0 8px; }
  .content.content-wide:has(> .proc-stats) .cardpanel > .panel-head .panel-title { font-size: 18px; font-weight: 600; }
  .content.content-wide:has(> .proc-stats) .ov-groupseg { margin-left: auto; }
  .content.content-wide:has(> .proc-stats) .ov-groupseg-b { min-height: 44px; padding: 0 10px; font-size: 14px; }
  .content.content-wide:has(> .proc-stats) .ov-groupseg { padding: 2px; border-radius: 12px; }
  .content.content-wide:has(> .proc-stats) .ov-groupseg-b { border-radius: 10px; }

  /* ---- groepkop: een tikbare rij met telling en samenvatting ----
     Was een klein grijs bijschrift dat plakte en leek op elke andere regel. Nu een rij van 64px:
     naam, "9 processen · 7 in MVP", een meter met de scope van de hele groep en een chevron.
     Dicht is een losse kaart; open vormt hij met zijn processen één lijst. */
  .proc-table.dz-cards tr.ov-gkop { display: block; margin: 8px 0 0; padding: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; }
  .proc-table.dz-cards tr.ov-gkop:first-child { margin-top: 0; }
  .proc-table.dz-cards tr.ov-gkop.is-open { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .proc-table.dz-cards tr.ov-gkop.is-klapbaar { cursor: pointer; }
  .proc-table.dz-cards tr.ov-gkop td { position: static; display: flex; align-items: center; gap: 8px;
    min-height: 64px; padding: 10px 16px; background: none; border: 0; box-shadow: none; font-weight: 400; }
  .proc-table.dz-cards tr.ov-gkop.is-klapbaar:active { background: var(--sunken); }
  .ov-gkop-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
  .ov-gkop-naam { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); letter-spacing: -.01em; }
  .ov-gkop-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 14px; line-height: 1.35; color: var(--text-3); font-variant-numeric: tabular-nums; }
  /* Telling en MVP als twee woordgroepen: op 320 breekt de regel tussen de twee, niet erin (en
     zonder los "·" vooraan, zelfde clip als de metaregel van een rij). */
  .ov-gkop-tel { display: flex; flex-wrap: wrap; min-width: 0; margin-left: -16px; clip-path: inset(0 0 0 16px); }
  .ov-gkop-tel > span { position: relative; margin-left: 16px; white-space: nowrap; }
  .ov-gkop-tel > span::before { content: "·"; position: absolute; left: -10px; color: var(--text-faint); }
  .ov-gkop-meter.meter { flex: 0 0 40px; height: 4px; }
  .ov-gkop-chev { flex: 0 0 20px; font-size: 20px; color: var(--text-faint); transform: rotate(-90deg);
    transition: transform var(--m-t2) var(--m-ease); }
  .ov-gkop.is-open .ov-gkop-chev { transform: none; }
  .ov-net-open .ov-gkop-chev { animation: ovChevOpen var(--m-t2) var(--m-ease); }
  .ov-net-dicht .ov-gkop-chev { animation: ovChevDicht var(--m-t2) var(--m-ease); }

  /* ---- procesrij: naam en status, daaronder één metaregel ----
     Een kaart van 150px met de labels Type, MVP en Scope-dekking, 94 keer herhaald, werd een rij
     van ongeveer 68px. Scheidingslijnen springen 16px in, zoals een iOS-lijst. */
  .proc-table.dz-cards tr.ov-mrij { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 8px;
    align-items: center; margin: 0; padding: 12px 16px; min-height: 64px; border: 1px solid var(--border);
    border-width: 0 1px; border-radius: 0; box-shadow: none;
    background: linear-gradient(var(--border), var(--border)) 16px 0 / calc(100% - 16px) 1px no-repeat, var(--surface); }
  .proc-table.dz-cards tr.ov-mrij.ov-eerste { border-top-width: 1px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); }
  .proc-table.dz-cards tr.ov-mrij.ov-laatste { border-bottom-width: 1px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .proc-table.dz-cards tr.ov-mrij.ov-eerste.ov-laatste { border-radius: var(--r-lg); }
  .proc-table.dz-cards tr.ov-mrij:active { background-color: var(--sunken); }
  /* chevron: de hele rij opent het proces */
  .proc-table.dz-cards tr.ov-mrij::after { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 8px; height: 8px;
    border: solid var(--text-faint); border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); }
  .proc-table.dz-cards tr.ov-mrij td.card-title { grid-column: 1; grid-row: 1; display: block; margin: 0; padding: 0;
    border: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
  .proc-table.dz-cards tr.ov-mrij .proc-name { font-size: 16px; font-weight: 600; color: var(--text); }
  .proc-table.dz-cards tr.ov-mrij .proc-name .tag { font-size: 12px; padding: 2px 8px; margin-left: 4px; vertical-align: 1px; }
  /* "Open" is de gewone stand van bijna elk proces; 94 grijze chips maakten de echte standen
     (Gewijzigd, Ter beoordeling, Geaccepteerd) onzichtbaar. Een afgewezen Open houdt zijn icoon. */
  .proc-table.dz-cards tr.ov-mrij .proc-name > .tag-slate:not(:has(.ic)) { display: none; }
  /* Metaregel: type, MVP, realisatie, lopende fase. De scheidingspunt staat links buiten elk
     woord; wie een nieuwe regel begint, verliest zijn punt onder de clip in plaats van met een
     los "·" te openen. */
  .proc-table.dz-cards tr.ov-mrij td.card-title > .ov-mmeta { display: flex; flex-wrap: wrap; align-items: center;
    margin: 4px 0 0 -16px; clip-path: inset(0 0 0 16px); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-3); }
  .ov-mmeta > span { position: relative; margin-left: 16px; white-space: nowrap; }
  .ov-mmeta > span::before { content: "·"; position: absolute; left: -10px; color: var(--text-faint); }
  .ov-mmeta .ov-m-type.is-diff { color: var(--violet-text); }
  .ov-mmeta .ov-m-loopt { color: var(--green-strong); }
  /* scope rechts op de metaregel, in dezelfde kolom als de meter van de groepkop */
  .ov-mmeta > .ov-m-scope { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 16px;
    font-size: 12px; font-variant-numeric: tabular-nums; }
  .ov-mmeta > .ov-m-scope::before { display: none; }
  .ov-m-scope .meter { width: 40px; height: 4px; flex: none; }
  /* Net opengeklapt: de rijen vallen kort na elkaar in (alleen bij die ene tik, niet bij elke
     hertekening; overview.js zet ov-in maar één keer). */
  .proc-table.dz-cards tr.ov-in { animation: ovRijIn var(--m-t2) var(--m-ease) both; animation-delay: calc(var(--i, 0) * 16ms); }

  @keyframes ovChevOpen { from { transform: rotate(-90deg); } to { transform: none; } }
  @keyframes ovChevDicht { from { transform: none; } to { transform: rotate(-90deg); } }
  @keyframes ovRijIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 400px) {
  /* De sheettitel op één regel zonder afkappen ("Uit bibliotheek toe..." op 18px). */
  .bl-titel { font-size: 16px; }
  /* Naast de titel past de wissel op 320 niet meer: dan zijn eigen regel, in gelijke delen. */
  .content.content-wide:has(> .proc-stats) .ov-groupseg { flex: 1 1 100%; margin-left: 0; }
  .content.content-wide:has(> .proc-stats) .ov-groupseg-b { flex: 1 1 0; justify-content: center; }
}

/* ================================================================ bibliotheek-sheet
   "Uit bibliotheek toevoegen" (bibliotheekLaden.js, basisstijl in ip.css). */
@media (max-width: 640px) {
  .bl-paneel { max-height: 92svh; }
  .bl-voet { padding-bottom: calc(12px + var(--safe-b)); }
  .bl-titel { font-size: 18px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .bl-titel .ic { margin-right: 8px; vertical-align: -3px; }
  /* Uitleg op twee regels: op 320 duwde hij met de branchechips de lijst onder de vouw, en het
     scherm toonde een kop boven een lege vlakte. */
  .bl-uitleg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bl-branches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px -16px; padding: 2px 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .bl-branches::-webkit-scrollbar { display: none; }
  .bl-branches .phase-pill { flex: none; min-height: 44px; padding: 0 16px; font-size: 14px; }
  .bl-rij-groep .bl-rij-naam { font-size: 14px; }
  .bl-telling, .bl-klaar-lijst, .bl-klaar-s, .bl-empty { font-size: 14px; }
  .bl-bezig-s { font-size: 12px; }
  .bl-voet .btn, .bl-voet-acties .btn { min-height: 48px; }
  /* Klaar: de sheet sluit om zijn inhoud en het vinkje komt kort op. */
  .bl-paneel:has(.bl-klaar) .bl-body { flex: 0 1 auto; }
  .bl-klaar-ic .ic { display: inline-block; animation: blVink var(--m-t3) var(--m-ease) both; }
  @keyframes blVink { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
}

/* ================================================================ proceskaart
   Drie weergaves (proceskaart.js): de kaart met de ketens (L0), één keten opengeklapt (L1) en
   de boom. Op de telefoon worden alle drie een lijst; slepen en bewerken blijven desktopwerk. */
@media (max-width: 640px) {
  /* De KPI-strook staat al op het tabblad ernaast; de kaart heeft hier maar één taak. */
  .pk > .proc-stats { display: none; }
  /* De losse uitleg-i onder de weergavewissel stond alleen op een eigen regel. */
  .pk > .pk-modes + span { display: none; }
  .pk .pk-modes { margin-bottom: 12px; border-radius: 12px; }
  .pk .pk-mode-b { min-height: 44px; font-size: 14px; }

  /* ---- werkbalk: weergaveknoppen in één scrollende rij, telling eronder ---- */
  .pk .pk-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .pk .pk-wchips { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%); }
  .pk .pk-wchips::-webkit-scrollbar { display: none; }
  .pk .pk-wchips .pk-wchip { flex: none; min-height: 44px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .pk .pk-toolbar > .pk-aantal { font-size: 14px; }
  .pk .pk-toolbar [data-act="pk-edit-toggle"] { display: none; }
  /* Tekst onder de 12px-grens (K5/L6/T7). */
  .pk .pk-aantal, .pk .pk-vw-tag, .pk .pk6b-sub, .pk .pk-tier-hint, .pk .pk-tree-foot, .pk .pk-chip,
  .pk .pk-toonmeer, .pk .pk-vg-pct { font-size: 12px; }

  /* ---- kaart (L0): de primaire keten als lijst in plaats van een band van 720px ----
     De chevronband liep zijwaarts het scherm uit, met de tweede keten dwars door zijn tekst
     afgesneden. Onder elkaar lees je de keten van boven naar beneden, zoals de andere zones. */
  .pk .pk-band { overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .pk .pk-band-inner, .pk .pk-band-sm .pk-band-inner { min-width: 0; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
  .pk .pk-band-inner > .pk-wrap, .pk .pk-band-sm > .pk-band-inner > .pk-wrap { min-width: 0; margin-right: 0; filter: none; }
  .pk .pk-chev, .pk .pk-band-inner > .pk-wrap:first-of-type .pk-chev, .pk .pk-chev-g, .pk .pk-chev-z {
    clip-path: none; min-height: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); }
  .pk .pk-blok { min-height: 0; padding: 12px 16px; box-shadow: none; }
  .pk .pk-blok, .pk .pk-chev { gap: 8px; }
  .pk .pk-blok:active, .pk button.pk-chev:active { background: var(--sunken); }
  .pk .pk-bloktop b { font-size: 16px; }
  .pk .pk-row { gap: 8px; }
  .pk .pk-zone { margin-bottom: 20px; }
  .pk .pk-zone-title { font-size: 12px; }
  /* "Toon alles (4)" is een tikdoel, geen voetnoot. */
  .pk .pk-toonmeer { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px 0 -12px; }

  /* ---- keten (L1): groepen als uitklapbare secties, processen als lijst ----
     De pijlvormige groepkoppen, 4px gekleurde zijstrepen en losse kaarten met een eigen balk
     werden één rustige lijst per groep. De scope-pil draagt de betekenis; de streep herhaalde
     alleen wat de pil al zegt. */
  .pk .pk-l1kop { flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 16px; }
  .pk .pk-l1kop > [data-act="pk-terug"] { align-self: flex-start; min-height: 44px; padding: 0 8px 0 0; border: 0;
    background: none; box-shadow: none; color: var(--pri-text); font-size: 16px; font-weight: 500; }
  .pk .pk-l1titel h2 { font-size: 24px; line-height: 1.25; }
  .pk .pk-l1oms, .pk .pk-groep-oms { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .pk .pk-groepen { gap: 12px; }
  .pk .pk-groep { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .pk .pk-groepen + .pk-groep-los { margin-top: 12px; }
  .pk .pk-groepkop { filter: none; }
  .pk .pk-groepkop[data-act] { cursor: pointer; }
  .pk .pk-groepkop[data-act]:active { background: var(--sunken); }
  .pk .pk-groepkop-in, .pk .pk-groepkop-los { clip-path: none; background: none; color: var(--text);
    display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 8px; row-gap: 4px; align-items: center;
    min-height: 64px; padding: 12px 16px; }
  .pk .pk-groepkop-in > :not(.pk-klap-chev) { grid-column: 1; }
  .pk .pk-groepkop-in .pk-bloktop b { font-size: 16px; font-weight: 600; }
  .pk .pk-groepkop-in .pk-bottom { flex-direction: row; align-items: center; gap: 12px; margin: 0; }
  .pk .pk-groepkop-in .pk-bottom .pk-vg { width: auto; flex: 0 0 88px; order: 2; margin-left: auto; }
  .pk .pk-groepkop-in .pk-aantal { opacity: 1; color: var(--text-3); font-size: 14px; }
  .pk .pk-groepkop-los .pk-bloktop b { color: var(--text-2); }
  .pk-klap-chev { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--text-faint); transform: rotate(-90deg);
    transition: transform var(--m-t2) var(--m-ease); }
  .pk .pk-groep.is-open .pk-klap-chev { transform: none; }
  .pk .pk-groep-oms { padding: 0 16px; margin: -4px 0 12px; }   /* marge, geen padding: anders lekt regel 3 onder de clamp */
  .pk .pk-groep.is-dicht .pk-groep-body, .pk .pk-groep.is-dicht .pk-groep-oms { display: none; }
  .pk .pk-groep-body, .pk .pk-groep-los .pk-groep-body { gap: 0; min-height: 0; padding: 0; border-radius: 0;
    background: none; border-top: 1px solid var(--border); }
  .pk .pk-groep.pk-net-open .pk-groep-body { animation: pkIn var(--m-t2) var(--m-ease) both; }
  .pk .pk-groep.pk-net-open .pk-klap-chev { animation: ovChevOpen var(--m-t2) var(--m-ease); }
  /* procesrij: naam met scope-pil, daaronder de voortgang; scheidingslijnen 16px ingesprongen */
  .pk .pk-groep-body .pk-l2, .pk .pk-l2grid .pk-l2 { position: relative; gap: 4px; min-height: 64px; justify-content: center;
    padding: 12px 40px 12px 16px; border: 0; border-radius: 0; box-shadow: none; opacity: 1;
    background: linear-gradient(var(--border), var(--border)) 16px 0 / calc(100% - 16px) 1px no-repeat, var(--surface); }
  .pk .pk-groep-body .pk-l2:first-child, .pk .pk-l2grid .pk-l2:first-child { background: var(--surface); }
  .pk .pk-l2:active { background-color: var(--sunken); }
  .pk .pk-l2[data-act]::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
    border: solid var(--text-faint); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
  .pk .pk-l2-naam { font-size: 16px; font-weight: 600; gap: 4px 8px; line-height: 1.35; }
  .pk .pk-scopepill { font-size: 12px; font-weight: 600; padding: 2px 8px; }
  .pk .pk-l2 .pk-meta { gap: 12px; }
  .pk .pk-l2 .pk-vg { width: auto; flex: 0 0 88px; }
  .pk .pk-l2-wit { background: var(--surface); }
  .pk .pk-l2-wit .pk-vw-naam { font-weight: 500; color: var(--text-3); }
  .pk .pk-groep-leeg { margin: 12px 16px; font-size: 14px; }
  .pk .pk-l2grid { gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

  /* ---- boom: een ingeklapte boomlijst in plaats van 115 kaarten met zeven velden ----
     mobielTabel.js maakt van de boomtabel kaarten met "Niveau", "Standaardtype", "Stappen",
     "Apps" en lege Open-velden met een streepje; de inspringing (inline padding-left) duwde de titels 66px
     naar rechts. Nu: één regel per keten, groep of proces, ingesprongen per niveau, met alleen
     voortgang, scope en open vragen. Ketens beginnen dicht (proceskaart.js, openMob6c). */
  .pk .pk-tree-tools { gap: 8px; }
  .pk .pk-tree-tools .search { max-width: none !important; flex: 1 1 100%; }   /* wint van inline 280px */
  .pk .pk-tree-tools .filter-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* "Alles uitklappen" als tekstknop; de totaaltelling herhaalde de KPI's. */
  .pk .pk-tree-tools .pk-toolbar-spacer { display: none; }
  .pk .pk-tree-tools > .pk-aantal { display: none; }
  .pk .pk-tree-tools [data-act="pk6c-expandall"] { min-height: 44px; border: 0; background: none;
    box-shadow: none; color: var(--pri-text); padding: 0 4px; font-size: 14px; }
  .pk .pk-tree-tools [data-act="pk6c-expandall"]:disabled { display: none; }
  .pk .pk-tree-panel { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  /* De paneelkop herhaalde de paginatitel; alleen tijdens zoeken of filteren zegt zijn telling
     iets (de uitklapknop staat dan uit, zie proceskaart.js liveSearch). */
  .pk .pk-tree-panel > .panel-head { display: none; padding: 0 0 8px; border: 0; }
  .pk .pk-6c:has([data-act="pk6c-expandall"]:disabled) .pk-tree-panel > .panel-head { display: flex; }
  .pk .pk-tree-panel .panel-title { font-size: 0; }
  .pk .pk-tree-panel .panel-title .count-chip { font-size: 14px; background: none; padding: 0; color: var(--text-3); font-weight: 400; }
  .pk .pk-tree-panel .tbl-wrap { overflow: visible; }
  .pk .pk-tree.dz-cards tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    margin: 0; padding: 12px 40px 12px 16px; min-height: 56px; border: 1px solid var(--border); border-width: 0 1px;
    border-radius: 0; box-shadow: none;
    background: linear-gradient(var(--border), var(--border)) 16px 0 / calc(100% - 16px) 1px no-repeat, var(--surface); }
  .pk .pk-tree.dz-cards tr.pk-tr-l1 { padding-left: 32px;
    background: linear-gradient(var(--border), var(--border)) 32px 0 / calc(100% - 32px) 1px no-repeat, var(--surface); }
  .pk .pk-tree.dz-cards tr.pk-tr-l2 { padding-left: 56px; min-height: 64px;
    background: linear-gradient(var(--border), var(--border)) 56px 0 / calc(100% - 56px) 1px no-repeat, var(--surface); }
  /* Een keten opent een eigen kaart; dicht is hij één losse rij. */
  .pk .pk-tree.dz-cards tr.pk-tr-l0 { min-height: 64px; margin-top: 8px; border-top-width: 1px;
    border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); }
  .pk .pk-tree.dz-cards tbody > tr:first-child { margin-top: 0; }
  .pk .pk-tree.dz-cards tr:has(+ tr.pk-tr-l0), .pk .pk-tree.dz-cards tbody > tr:last-child {
    border-bottom-width: 1px; border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
  .pk .pk-tree.dz-cards tr.pk-tr-click:active { background-color: var(--sunken); }
  .pk .pk-tree.dz-cards tr.pk-tr-click:hover td { background: none; }
  .pk .pk-tree.dz-cards tr > td { display: inline-flex; width: auto; padding: 0 !important; margin: 0; border: 0;
    background: none !important; font-size: 12px; }
  .pk .pk-tree.dz-cards td::before { display: none; }
  /* Niveau, standaardtype, stappen en apps: detail van de procespagina, niet van deze lijst. */
  .pk .pk-tree.dz-cards td:nth-child(2), .pk .pk-tree.dz-cards td:nth-child(3),
  .pk .pk-tree.dz-cards td:nth-child(4), .pk .pk-tree.dz-cards td:nth-child(5) { display: none; }
  .pk .pk-tree.dz-cards td.pk-tree-name { flex: 1 1 100%; display: block; padding-left: 0 !important; /* wint van de inline inspringing */
    font-size: 16px; line-height: 1.35; }
  .pk .pk-tree.dz-cards td.pk-tree-name > * { display: flex; }
  .pk .pk-tree .pk-tn { gap: 8px; align-items: flex-start; }
  .pk .pk-tree .pk-tn > .ti:not(.pk-tw) { display: none; }   /* niveau-icoon: de inspringing zegt het al */
  .pk .pk-tree .pk-tw { font-size: 20px; width: 20px; margin-top: 1px; color: var(--text-3); }
  .pk .pk-tree .pk-tr-l2 .pk-tw-none { display: none; }
  .pk .pk-tree .pk-tn-oms { display: none; }
  .pk .pk-tree .pk-tr-l0 .pk-tn-lbl { font-size: 16px; font-weight: 600 !important; }   /* wint van het inline gewicht */
  .pk .pk-tree .pk-tr-l1 .pk-tn-lbl { font-size: 16px; font-weight: 500 !important; }
  .pk .pk-tree .pk-tr-l2 .pk-tn-lbl { font-size: 16px; font-weight: 400 !important; }
  /* metaregel onder de naam, uitgelijnd met de tekst (na de chevron) */
  .pk .pk-tree.dz-cards tr.pk-tr-l0 td:nth-child(6), .pk .pk-tree.dz-cards tr.pk-tr-l1 td:nth-child(6) { margin-left: 28px; }
  .pk .pk-tree .pk-vg-cell { min-width: 0; width: 96px; }
  .pk .pk-tree .pk-open-none, .pk .pk-tree td .pk-dash { display: none; }
  .pk .pk-tree.dz-cards td:has(> .pk-dash:only-child), .pk .pk-tree.dz-cards td:has(> .pk-open-none) { display: none; }
  .pk .pk-tree .pk-open-warn { font-size: 12px; }
  .pk .pk-tree.dz-cards tr.pk-tr-l2.pk-tr-click::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
    border: solid var(--text-faint); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
  .pk .pk-tree.dz-cards tr.pk-tr-in { animation: pkIn var(--m-t2) var(--m-ease) both; }
  .pk .pk-tree.dz-cards tr.pk-tree-leeg { display: block; padding: 0; border-width: 1px; border-radius: var(--r-lg); }
  .pk .pk-tree-foot { padding: 12px 0 0; border: 0; }

  @keyframes pkIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ================================================================ intake (start)
   Het startscherm van de begeleide intake (intakewizard.js). */
@media (max-width: 640px) {
  .iw-h { font-size: 24px; line-height: 1.25; }
  .iw-lead { font-size: 16px; }
  .iw-vera-naam { font-size: 14px; }
  .iw-vera-preview { font-size: 12px; }
  /* De onderwerpchips liepen hard tegen de kaartrand ("S..."); nu vervagen ze bij de rand zelf. */
  .iw-vera-preview .iw-chips { margin-right: -16px; padding-right: 16px; }
  /* Drie keuzes als compacte keuzerijen in plaats van kaarten van 220px: alle drie in beeld. */
  .iw-pads { gap: 8px; }
  .iw-pad { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start;
    min-height: 72px; padding: 14px 16px; border-width: 1px; }
  .iw-pad:active { background: var(--sunken); }
  .iw-pad-icoon { grid-row: 1 / span 3; width: 24px; height: 24px; margin: 0; background: none; }
  .iw-pad-icoon .ic { font-size: 22px; }
  .iw-pad-titel { font-size: 16px; line-height: 1.35; }
  .iw-pad-uitleg { font-size: 14px; }
  .iw-pad-voorbeeld { margin: 2px 0 0; padding: 0; border: 0; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iw-pads-kop { font-size: 16px; }
  .iw-startform { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .iw-startform [data-act="iw-start"] { width: 100%; min-height: 48px; justify-content: center; font-size: 16px; }
  .iw-startform p.muted { font-size: 14px !important; }   /* inline 12.5px */
  /* "Sla de intake over" was een tekstlink van 18px hoog: de enige weg om de intake over te slaan. */
  .iw-wrap [data-act="iw-blank"] { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .iw-resume-row { min-height: 48px; }
}

/* ================================================================ procesvoorstel
   De wizard met één veld en één vraag tegelijk (pvwizard.js, basisstijl in pv.css). */
@media (max-width: 640px) {
  /* Fasekruimel: alleen het nummer, het label alleen bij de actieve stap. Uitgeschreven was hij
     350px breed en schoof de hele pagina op 320 zijwaarts. */
  .pv-fasen { gap: 8px; font-size: 12px; margin-bottom: 16px; align-items: center; }
  .pv-fase:not(.on) { font-size: 0; gap: 0; }
  .pv-fase-nr { font-size: 12px; width: 24px; height: 24px; }
  .pv-fase.on { font-size: 14px; }
  .pv-fase + .pv-fase::before { content: ""; width: 12px; height: 1px; background: var(--border-3); margin-right: 8px; }
  .pv-h { font-size: 24px; }
  .pv-lead { font-size: 16px; }
  .pv-later { min-height: 44px; padding: 0 12px 0 0; align-self: flex-start; }
  .pv-veld-label, .pv-vraag-stap, .pv-vraag-waarom { font-size: 14px; }
  .pv-vraag-tel { font-size: 12px; }
  .pv-hulp .btn { min-height: 44px; font-size: 14px; }
  .pv-context { font-size: 12px; }
  .pv-voetnoot { font-size: 14px; }
  .pv-voetnoot a { display: inline-flex; align-items: center; min-height: 44px; }
  .pv-optie { font-size: 16px; min-height: 48px; padding: 12px 44px 12px 16px; position: relative; }
  /* Gekozen: ook een vinkje, niet alleen een andere kleur. */
  .pv-optie.gekozen::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 11px;
    border: solid var(--pri); border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); }
  .pv-afb-kop { font-size: 16px; min-height: 52px; }
  .pv-afb-veld { font-size: 16px; }
  .pv-afb-body .label { font-size: 12px; }
  .pv-afb-sm, .pv-vraag-eis { font-size: 12px; }

  /* Acties in een plakbalk boven de onderbalk. "Maak procesvoorstel" stond op het tweede scherm
     onder het veld en de hulpknoppen; "Antwoord bewaren" anderhalf scherm lager dan de vraag. */
  .pv .pv-acties { position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 5;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 16px -16px 0; padding: 12px 16px;
    background: var(--bg); box-shadow: 0 -1px 0 var(--border); }
  .pv .pv-acties .btn { min-height: 48px; font-size: 16px; }
  .pv .pv-acties .btn:only-child, .pv .pv-afronding .pv-acties .btn { grid-column: 1 / -1; }
  /* In de vraagkaart: de kaart laat de balk plakken (overflow zichtbaar) en de balk loopt tot de rand. */
  .pv .pv-paneel:has(> .pv-acties) { overflow: visible; }
  .pv .pv-paneel > .pv-acties { margin: 16px -20px -18px; padding: 12px 20px; background: var(--surface);
    border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .pv .pv-hulp { flex-direction: column; align-items: flex-start; }
  /* Na een antwoord schuift de volgende vraag kort in (pvwizard.js zet pv-in eenmalig). */
  .pv .pv-vraag.pv-in { animation: pvIn var(--m-t3) var(--m-ease) both; }
  @keyframes pvIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 400px) {
  /* "Antwoord bewaren" en "Weet ik niet" naast elkaar op 288px: zonder iconen, op 14px. */
  .pv .pv-acties .btn:not(:only-child) { font-size: 14px; padding: 0 12px; }
  .pv .pv-acties .btn:not(:only-child) .ic { display: none; }
}

/* ================================================================ minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .ov-gkop-chev, .pk-klap-chev { transition: none; }
  .ov-net-open .ov-gkop-chev, .ov-net-dicht .ov-gkop-chev, .proc-table.dz-cards tr.ov-in,
  .bl-klaar-ic .ic, .pk .pk-groep.pk-net-open .pk-groep-body, .pk .pk-groep.pk-net-open .pk-klap-chev,
  .pk .pk-tree.dz-cards tr.pk-tr-in, .pv .pv-vraag.pv-in { animation: none; }
}

/* ======== 4.3 Procespagina: hub, kop, stappen ======== */
@media (max-width: 640px) {

  /* ---- kop (alle schermen) */
  /* styles.css liet de koptitel wikkelen; twee regels in een kop van 54px liepen er boven en
     onder uit en over de inhoud heen (H1). De kop is weer één regel; de volle procesnaam staat
     op de hub als grote titel in de pagina zelf. */
  .pm-page .pm-kop-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; font-size: 16px; }
  .pm-kop-vera { height: 44px; padding: 0 12px; font-size: 14px; margin-right: 4px; }
  .pm-kop-ic:active { background: var(--sunken); }
  /* De kop en de actiebalk staan stil bij een schermwissel binnen de pagina (push/pop via
     DZ.app.overgang); alleen de inhoud schuift, zoals een navigatiebalk in een native stack. */
  .pm-page > .pm-kop { view-transition-name: pm-kop; }
  .pm-page > .pm-bar { view-transition-name: pm-balk; }

  /* ---- hub */
  .pm-v-hub .pm-body, .pm-v-stappen .pm-body, .pm-v-editor .pm-body { padding-left: 16px; padding-right: 16px; padding-top: 16px; }
  .pm-v-hub .pm-hub { gap: 12px; }
  /* Large title: de naam groot bovenaan, het domein eronder. Scrolt hij onder de kop weg, dan
     verschijnt de naam klein in de kop (scroll-gestuurd, zonder JS; elders staat hij er gewoon). */
  .pm-titel { padding: 0 4px 4px; }
  .pm-titel-h { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em;
    color: var(--text); overflow-wrap: anywhere; }
  .pm-titel-s { margin-top: 4px; font-size: 14px; color: var(--text-3); }
  @supports (animation-timeline: scroll()) {
    .pm-v-hub .pm-kop-t { animation: pmKopTitel linear both; animation-timeline: scroll(root); animation-range: 32px 72px; }
  }
  @keyframes pmKopTitel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* Volgorde: wat het is, hoe het ervoor staat en wat de volgende stap is, daarna de gates en de
     inhoud (H-10). Alleen de weergavevolgorde; de DOM en de tabvolgorde zijn gelijk gebleven. */
  .pm-hub > .pm-titel { order: 0; }
  .pm-hub > .pm-hubinfo { order: 1; }
  .pm-hub > .pm-wfl { order: 2; }
  .pm-hub > .pm-vg { order: 3; }
  .pm-hub > .pm-tegels { order: 4; margin-top: 12px; }

  /* Kenmerken als metaregel in plaats van een formulier van vijf HOOFDLETTER-labels (H3). */
  .pm-hub .pm-card { padding: 16px; gap: 12px; }
  .pm-hubinfo .pm-oms { font-size: 14px; line-height: 1.5; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-hubinfo .pm-metagrid { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .pm-hubinfo .pm-meta-cel { flex-direction: row; align-items: baseline; gap: 6px; }
  .pm-hubinfo .pm-meta-l { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
  .pm-hubinfo .pm-meta-v { font-size: 14px; font-weight: 500; }
  .pm-hubinfo .pm-scope { gap: 8px; padding-top: 12px; }
  .pm-hubinfo .pm-scope-t { font-size: 14px; }

  /* Workflow: één gevulde knop op het scherm, en dat is de actiebalk onderin. De knoppen in de
     kaart (Beoordeling starten, Accepteren namens ...) worden tonaal (H2/W1). */
  .pm-wfl { gap: 12px; }
  .pm-wfl-t { font-size: 16px; }
  .pm-wfl-s { font-size: 14px; }
  .pm-wfl .btn-primary { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; box-shadow: none; }
  .pm-wfl .btn-primary .ic, .tf-lock-mobiel .tf-lock-knop.btn-primary .ic, .pm-page.tf-concept .pm-bar .btn-primary .ic { color: inherit; }
  .pm-wfl .btn-primary:active { background: var(--pri-soft); filter: brightness(.96); }
  .pm-wfl .pm-btn { flex: none; font-size: 14px; }
  /* Beoordelaar: naam en rol links, stand rechts op dezelfde regel; stempel en knop eronder (H8). */
  .pm-wfl-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding-top: 12px; }
  /* "Opnieuw accepteren namens Harnas Tester" past op 320 niet op één regel: laten wikkelen. */
  .pm-wfl-rij > .btn { grid-column: 1 / -1; min-width: 0; height: auto; min-height: 44px; padding: 8px 12px;
    white-space: normal; text-align: center; line-height: 1.3; }
  .pm-wfl-wie { flex-direction: column; align-items: flex-start; gap: 0; }
  .pm-wfl-naam { font-size: 16px; max-width: 100%; }
  .pm-wfl-rol { font-size: 14px; }
  .pm-wfl-stand { display: contents; }
  .pm-wfl-stand > .tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .pm-wfl-noot { font-size: 14px; }

  /* Gatekaart: "Gate 2" als bovenregel, de titel op een eigen regel; de balk in het accent
     zolang de gate niet rond is (H7). */
  .pm-vg { padding: 0 16px; }
  .pm-vg-kop { min-height: 56px; padding: 8px 0; gap: 4px 12px; }
  .pm-vg-t { font-size: 12px; font-weight: 500; color: var(--text-3); }
  .pm-vg-t b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
  .pm-vg-kop .sig-vbar > span { background: var(--pri); }
  .pm-vg-kop .sig-vlabel { font-size: 14px; }
  /* Toekomstige gates waren met opacity .55 onleesbaar grijs (2,3:1); de chip "nog niet" draagt
     de stand al (G1). Een gate die rond is toont alleen zijn kop, geen muur van vinkjes (G2). */
  .pm-poort.is-wacht { opacity: 1; }
  .pm-poort.is-wacht .sig-vitem { color: var(--text-2); }
  .pm-poort.is-klaar .sig-vitem.is-klaar { display: none; }
  .pm-poort { padding: 8px 0 4px; }
  .pm-poort-kop { min-height: 32px; }
  .pm-poort-kop .tag { flex: none; white-space: nowrap; }
  .pm-poort-t { font-size: 14px; }
  .pm-poort.is-bezig .pm-poort-t { color: var(--pri-text); }
  .pm-poort-wie { font-size: 12px; }
  /* Tikbaar oogt anders dan afgevinkt (G6). */
  .pm-vg-item .sig-vitem-l { color: var(--text); font-weight: 500; }
  .pm-vg-pijl { color: var(--text-2); }
  .pm-vg-item:active { background: var(--sunken); }
  /* Status terugzetten onder de gates: niets onder de 12px (G4). */
  .pm-vg .pd-statusterug-sub, .pm-vg .pd-statusterug-spoor { font-size: 12px; }
  .pm-vg .pd-statusterug-uit { font-size: 14px; }

  /* Inhoud: een inset grouped list (iOS Instellingen, M3-lijst) in plaats van elf tegels van
     ongelijke hoogte zonder teken dat je erop kunt tikken (H4). Iconen neutraal: amber op
     "Nog niets" las als een waarschuwing (H5); alleen de AI-telling houdt zijn kleur. */
  .pm-tegels { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
  .pm-tegel { position: relative; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    min-height: 60px; padding: 8px 16px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    transition: background-color var(--m-t1) var(--m-ease); }
  .pm-tegel + .pm-tegel::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--border); }
  .pm-tegel.is-pri { border: 0; }
  .pm-tegel:active { background: var(--sunken); }
  .pm-tegel-top { display: contents; }
  .pm-tegel-ic { order: 0; width: 32px; height: 32px; }
  .pm-tegel-ic[class*="is-"] { background: var(--sunken); color: var(--text-2); }
  .pm-tegel-ic.is-pri { background: var(--pri-soft); color: var(--pri-text); }
  .pm-tegel-txt { order: 1; flex: 1; min-width: 0; }
  .pm-tegel .tag { order: 2; flex: none; }
  .pm-tegel::after { content: ""; order: 3; flex: none; width: 8px; height: 8px; margin: 0 4px 0 0;
    border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); transform: rotate(45deg); }
  .pm-tegel-l { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
  .pm-tegel-s { font-size: 14px; color: var(--text-3); line-height: 1.35; }

  /* ---- TF5: slot en concept */
  /* Slot: een rustige band over de volle breedte, Bewerken tonaal; de gevulde knop is die onderin (T4). */
  .pm-page .tf-lock-balk.tf-lock-mobiel { padding: 12px 16px; gap: 8px 12px; border-inline: 0; border-top: 0; font-size: 14px; line-height: 1.5; }
  .tf-lock-mobiel .tf-lock-knop.btn-primary { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; box-shadow: none; }
  /* Op slot is "Terug naar hub" de enige knop van de stappenbalk: dubbel met de terugpijl (T6). */
  .pm-page.tf-lock.pm-v-stappen .pm-bar:has(> [data-act="pm-hub"]:only-child) { display: none; }

  /* Concept (T1): de balk plakte onder de kop en werd met de waarschuwing erin 380px hoog; de
     knoppen vielen op 320 onder de actiebalk en scrollen bracht ze nooit terug. Nu scrolt de
     uitleg mee met de pagina en staan de knoppen vast in de duimzone, boven de actiebalk. Zo
     blijft "altijd kunnen opslaan of indienen" waar, op elk scherm. */
  .pm-page .tf-concept-balk.tf-concept-mobiel { position: static; padding: 12px 16px; gap: 8px; border-inline: 0; border-top: 0;
    font-size: 14px; }
  .tf-concept-mobiel .tf-concept-stand { font-size: 14px; }
  .tf-concept-mobiel .tf-concept-waarschuwing { padding: 8px 12px; font-size: 14px; line-height: 1.5; }
  .tf-concept-mobiel .tf-concept-knoppen { position: fixed; left: 0; right: 0; z-index: 44; margin: 0;
    bottom: calc(var(--bottomnav-h) + var(--safe-b)); padding: 8px 12px;
    background: var(--surface); border-top: 1px solid var(--border);
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  /* Met een actiebalk (hub, secties) komen de conceptknoppen erboven; de balk is 65px hoog. */
  .pm-page.tf-concept:has(> .pm-bar) .tf-concept-knoppen { bottom: calc(var(--bottomnav-h) + var(--safe-b) + 65px); }
  .pm-page.tf-concept:has(> .pm-bar) .pm-body { padding-bottom: calc(var(--bottomnav-h) + 74px + 60px + var(--safe-b)); }
  .pm-page.tf-concept:not(:has(> .pm-bar)) .pm-body { padding-bottom: calc(var(--bottomnav-h) + 74px + var(--safe-b)); }
  /* Weggooien staat niet naast Indienen (T2): alleen het prullenbakje, links, met afstand. De
     tekst blijft in de knop staan als naam voor een schermlezer. Er volgt nog een bevestiging. */
  .tf-concept-mobiel .tf-concept-knoppen .btn.tf-concept-weg { font-size: 0; padding: 0; gap: 0; margin-right: 4px; }
  .tf-concept-mobiel .tf-concept-knoppen .btn.tf-concept-weg .ic { font-size: 20px; }
  /* Eén gevulde knop: in een concept is dat Indienen, dus de actiebalk eronder wordt tonaal. */
  .pm-page.tf-concept .pm-bar .btn-primary { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; box-shadow: none; }
  /* Het blijvende conceptsignaal nu de balk niet meer plakt: een violette lijn onder de kop. */
  .pm-page.tf-concept .pm-kop { box-shadow: inset 0 -2px 0 var(--violet-text); }

  /* ---- sein en Vera op de procespagina */
  /* "Iemand anders heeft dit gewijzigd" (?sein=1): de knop was een tweede gevulde knop naast de
     actiebalk. Tonaal, en de balk op de 16px-gutter van de pagina (S1). */
  main:has(.pm-page) .dz-sein-balk { margin: 12px 16px 0; gap: 8px; font-size: 14px; line-height: 1.5; }
  main:has(.pm-page) .dz-sein-balk .btn-primary { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; box-shadow: none; }
  main:has(.pm-page) .dz-sein-balk .btn-primary .ic { color: inherit; }
  /* Vera's voorstel voor dit proces: vinkjes van 13px werden 22px met een regel van 44px (V5), en
     een verwijdering draagt zijn rode vlak en tag, zonder gekleurde zijstreep (V6). De paneelbasis
     is van de dashboardlaag; dit zijn alleen de voorstelregels. Extra .vera-panel omdat de
     paneelstijl als <style> na dit bestand in de pagina komt. */
  .vera-panel .vera-op .vera-op-cb { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--pri); }
  .vera-panel .vera-op .vera-op-l { min-height: 44px; align-items: flex-start; }
  .vera-panel .vera-op.is-del { border-left: 0; }

  /* ---- stappen: subbalk */
  .pm-v-stappen .pm-sub { padding: 8px 16px; }
  .pm-segwrap { padding: 2px; }
  .pm-seg { font-size: 14px; }
  .pm-seg .ic { font-size: 16px; }

  /* ---- stappen: kaart */
  .pm-node { padding: 12px; gap: 8px; min-height: 48px; transition: background-color var(--m-t2) var(--m-ease), border-color var(--m-t2) var(--m-ease); }
  .pm-node-t { font-size: 14px; }
  .pm-node:active { filter: brightness(.97); }
  .pm-term { font-size: 14px; }

  /* ---- sheets */
  /* Het stapsheet en de procesdetails: echte sheets. Ze komen van onderen met de sheet-curve,
     alleen bij het openen (is-in, eenmalig gezet in procesmobiel.js) en niet bij elke
     hertekening. Een lange omschrijving scrolt binnen het sheet in plaats van de kaart te bedekken. */
  .pm-stapsheet, .pm-detail { animation: none; border-radius: 16px 16px 0 0; padding: 4px 16px 16px; gap: 12px;
    box-shadow: 0 -8px 32px rgba(16, 24, 40, .16); overscroll-behavior: contain; }
  .pm-stapsheet.is-in, .pm-detail.is-in { animation: mSheet var(--m-t3) var(--m-ease-sheet) both; }
  .pm-stapsheet { max-height: 64svh; overflow-y: auto; }
  .pm-page .pm-greep { width: 100%; height: 24px; flex: none; }
  .pm-sheet-kop { gap: 8px; }
  .pm-sheet-teller { font-size: 14px; }
  /* De x staat los rechtsboven, zodat hij op 320 niet met de chips mee naar een eigen regel wikkelt. */
  .pm-stapsheet .pm-sheet-kop { padding-right: 40px; }
  .pm-sheet-x { position: absolute; top: 8px; right: 4px; width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
  .pm-sheet-x .ic { font-size: 20px; }
  .pm-sheet-x:active { background: var(--sunken); }
  .pm-stapsheet .pm-sheet-t { font-size: 18px; line-height: 1.3; }
  .pm-stapsheet .pm-sheet-o { font-size: 14px; line-height: 1.5; }
  .pm-stapsheet .pm-btn { font-size: 14px; }

  /* Procesdetails: tien velden, dus modaal met scrim (E6), een Klaar-knop in de kop (E4) en de
     velden scrollend binnen het sheet. */
  .pm-scrim { position: fixed; inset: 0; z-index: 44; border: 0; padding: 0; margin: 0; background: rgba(15, 23, 42, .32); cursor: default; }
  .pm-scrim:has(+ .pm-detail.is-in) { animation: mUit var(--m-t3) var(--m-ease) reverse both; }
  .pm-detail { display: flex; flex-direction: column; overflow: hidden;
    max-height: calc(100svh - var(--topbar-h) - var(--bottomnav-h) - var(--safe-b) - 24px); }
  .pm-detail-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
  .pm-detail .pm-sheet-t { font-size: 18px; }
  .pm-detail-klaar { flex: none; min-height: 44px; padding: 0 12px; margin-right: -12px; border: 0; background: transparent;
    box-shadow: none; color: var(--pri-text); font-size: 16px; font-weight: 600; }
  .pm-detail-body { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 16px; padding-bottom: 8px; }
  .pm-detail-body .label, .pm-v-editor .pm-veld .label, .pm-stap-body .pm-veld .label { font-size: 14px; }
  .pm-detail .pm-schakel-l { font-size: 16px; color: var(--text); }

  /* ---- stappen: lijst */
  .pm-lijst { gap: 8px; }
  .pm-lijst-kop { font-size: 14px; padding: 0 4px; }
  .pm-lijst-kop > span { flex: 1; min-width: 0; }
  .pm-link { white-space: nowrap; flex: none; }
  /* "Alles uitklappen" was een tekstlinkje van 18px hoog (E5). */
  .pm-link { min-height: 44px; padding: 0 8px; margin-right: -8px; font-size: 14px; }
  .pm-stap-kop { padding: 12px 16px 12px 12px; gap: 12px; min-height: 56px; }
  .pm-stap-kop:active { background: var(--sunken); }
  .pm-stap-t { font-size: 16px; line-height: 1.35; }
  .pm-stap-chev { color: var(--text-3); }
  .pm-stap-body { padding: 12px; gap: 16px; }
  .pm-vol { font-size: 14px; }
  .pm-dashed { height: 48px; font-size: 14px; margin-top: 4px; }
  /* In de stappenlijst zit de weg terug al in de kop (pijl): "Terug naar hub" in de balk was
     dubbel en duwde "Stap toevoegen" naar 60% breedte (E11). */
  .pm-v-stappen .pm-bar-tweede[data-act="pm-hub"] { display: none; }

  /* ---- velden en editor */
  /* Handeling / Beslissing / Eindstap: drie gelijke kolommen die krimpen. Als flexrij werden ze
     op 320 samen 340px en scrolde de hele pagina opzij (E1). */
  .pm-keuzerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pm-keuzegrid { gap: 8px; }
  .pm-choice { min-width: 0; padding: 0 8px; font-size: 14px; }
  .pm-choice:active { background: var(--sunken); }
  .pm-rel-l, .pm-takrij-l { font-size: 14px; }
  .pm-takrij { padding: 8px 12px; }
  .pm-v-editor .pm-editor { gap: 16px; }
  .pm-ed-kop { gap: 8px; }
  .pm-ed-wie { color: var(--text-3); }
  .pm-ed-titel { font-size: 18px; height: 48px; text-overflow: ellipsis; }
  /* Nummerrail: een zachte rand rechts als teken dat hij doorloopt (E10); de actieve stap wordt
     bij openen in het midden gezet (procesmobiel.js). */
  .pm-v-editor .pm-rail { padding: 8px 16px; gap: 8px; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .pm-railnr { font-size: 14px; scroll-snap-align: center; }
  .pm-railnr:last-child { margin-right: 24px; }
  .pm-notitie .pm-card-l { font-size: 12px; }
}

@media (max-width: 400px) {
  /* Op smalle telefoons past het label naast het icoon niet in een derde van de breedte. */
  .pm-choice .ic { display: none; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .pm-v-hub .pm-kop-t { animation: none; }
  .pm-stapsheet.is-in, .pm-detail.is-in, .pm-scrim:has(+ .pm-detail.is-in) { animation: none; }
  .pm-tegel, .pm-node { transition: none; }
}

/* ======== 4.4 Procespagina: sectieschermen ======== */
/* ---- gedeeld */
@media (max-width: 640px) {
  /* Zijmarge op het 4px-raster (was 14px); de hub, stappen en editor zetten dit zelf ook. */
  .pm-page > .pm-body { padding-left: 16px; padding-right: 16px; padding-top: 16px; }

  /* ---- actiebalk (X1) ----
     Twee knoppen zonder min-width:0 liepen samen breder dan het scherm ("Requirement toevoeg"
     viel op 320px buiten beeld). De tweede knop neemt wat hij nodig heeft, de primaire de rest. */
  .pm-bar > .btn { min-width: 0; }
  .pm-bar-tweede { flex: 0 1 auto; padding: 0 16px; font-size: 14px; white-space: nowrap; overflow: hidden; }
  .pm-bar-main { white-space: nowrap; overflow: hidden; }

  /* ---- filterbalk bovenaan (sticky) ---- */
  .pm-sticky { padding: 8px 0; gap: 8px; }
  /* Een lege voortgangsbalk van 6px las als een scheidingslijn, en dezelfde telling staat in de
     reviewbalk eronder (R6). */
  .pm-sticky .pm-voortgang { display: none; }

  /* ---- filterpillen (X2/X4/X5): één vorm op elk scherm ----
     Horizontaal scrollend met een zachte rand rechts als teken dat er meer is; de laatste pil
     kan er helemaal uit schuiven dankzij de afstandhouder. 36px zichtbaar, 44px tikvlak. */
  .pm-pills, .pm-punt-filters, .pm-beo .bo2-filterbalk {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding: 4px 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
  .pm-pills::-webkit-scrollbar, .pm-punt-filters::-webkit-scrollbar, .pm-beo .bo2-filterbalk::-webkit-scrollbar { display: none; }
  .pm-pills::after, .pm-punt-filters::after, .pm-beo .bo2-filterbalk::after { content: ""; flex: 0 0 8px; }
  .pm-pill, .pm-punt-filters .op2-chip, .pm-beo .bo2-filterbalk button {
    position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px; border-radius: var(--r-pill); white-space: nowrap;
    /* font:inherit gaf deze chips de 16px van de body; op de schaal is een chip 14px (X3). */
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--m-t2) var(--m-ease), border-color var(--m-t2) var(--m-ease), color var(--m-t2) var(--m-ease); }
  .pm-pill::before, .pm-punt-filters .op2-chip::before, .pm-beo .bo2-filterbalk button::before {
    content: ""; position: absolute; inset: -4px 0; }
  .pm-pill:active, .pm-punt-filters .op2-chip:active, .pm-beo .bo2-filterbalk button:active { background: var(--sunken); }
  .pm-pill.is-on, .pm-punt-filters .op2-chip.tag-violet, .pm-beo .bo2-filterbalk button.tag-violet {
    border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); }
  .pm-punt-filters .op2-chip-n { opacity: 1; font-size: 12px; font-weight: 600; color: inherit; }

  /* ---- weergavewissel: onderstreepte tabs (S1, E1) ----
     Gelijke breedtes (flex:1) gaven het lange label de minste ruimte en braken "Te beoordelen"
     over twee regels. Nu zo breed als het label, op één regel, en scrollend als het echt niet past. */
  .pm-kolommen { display: flex; flex-direction: row; gap: 0; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
  .pm-kolommen::-webkit-scrollbar { display: none; }
  .pm-kol, .pm-beo-schakel .pm-kol { flex: 1 0 auto; gap: 4px; height: 44px; padding: 0 6px; white-space: nowrap;
    font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.01em; border: 0; border-bottom: 2px solid transparent;
    min-height: 0; touch-action: manipulation;
    transition: color var(--m-t2) var(--m-ease), border-color var(--m-t2) var(--m-ease); }
  .pm-kol:active { background: var(--sunken); }
  /* De telling als kale grijze cijfers naast het label, geen pilletje: rustiger, en zo passen drie
     tabs op 375px naast elkaar. */
  .pm-kol-n, .pm-kol.is-on .pm-kol-n { min-width: 0; height: auto; padding: 0; background: none; font-size: 14px; font-weight: 500;
    color: var(--text-3); font-variant-numeric: tabular-nums; }
  .pm-kol.is-on .pm-kol-n { color: var(--pri-text); }

  /* ---- sectiekoppen (X7): één stijl op elk tabblad ---- */
  .pm-groep-kop, .pm-groep-kop2, .pm-sectiekop { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 4px; }
  .pm-groep-t, .pm-sectiekop > span:first-child { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text-2); line-height: 1.35; }
  .pm-groep-n, .pm-sectiekop-n { flex: none; font-size: 12px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .pm-groep-nr { width: 24px; height: 24px; font-size: 12px; }
  .pm-sectiekop { margin-top: 12px; }
  .pm-sectiekop:first-child { margin-top: 0; }

  /* ---- lege toestanden ---- */
  .pm-leeg, .pm-dashedleeg { font-size: 14px; line-height: 1.5; padding: 24px 16px; }
  .pm-leeg-inline { font-size: 14px; color: var(--text-3); }
  .pm-leeg-actie { display: flex; margin: 12px auto 0; height: 44px; padding: 0 16px; font-size: 14px; }
  /* Een leeg scherm als instructie (B1): icoon, titel, één regel uitleg, de knop die het vult. */
  .pm-leegstaat { min-height: 50svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 24px 16px; text-align: center; }
  .pm-leegstaat-ic { width: 48px; height: 48px; border-radius: var(--r-lg); display: grid; place-items: center;
    background: var(--blue-soft); color: var(--blue-text); margin-bottom: 8px; }
  .pm-leegstaat-ic .ic { font-size: 24px; }
  .pm-leegstaat-t { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
  .pm-leegstaat-s { max-width: 32ch; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
  .pm-leegstaat-btn { margin-top: 12px; height: 44px; padding: 0 16px; font-size: 14px; }
}


/* ---- requirements */
@media (max-width: 640px) {
  .pm-reqs { gap: 24px; }
  .pm-reqs .pm-groep { gap: 8px; }
  .pm-req { position: relative; gap: 8px; padding: 12px; }
  /* De kop op één regel waar het kan; de code schuift rechts en breekt pas af als er een extra
     chip bij staat (R5). Rechts blijft plaats voor de prullenbak. */
  .pm-req-kop { gap: 6px; row-gap: 6px; padding-right: 28px; min-height: 26px; }
  .pm-req-code { font-size: 12px; white-space: nowrap; }
  /* Verwijderen: stil icoon rechtsboven in de kaart, 44px tikvlak, ver van Goedkeuren (R4). */
  .pm-req-del { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; border-radius: var(--r); background: transparent; color: var(--text-3); cursor: pointer; touch-action: manipulation; }
  .pm-req-del .ic { font-size: 18px; }
  .pm-req-del:active { background: var(--red-soft); color: var(--red-strong); }
  .pm-req-t { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
  .pm-req-o { font-size: 14px; line-height: 1.5; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Goedkeuren vult, Opmerking op maat, Afwijzen als vierkant (R1). Past ook op 320px. */
  .pm-req-acties { display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; margin-top: 4px; }
  .pm-req-acties.is-klaar { grid-template-columns: auto; justify-content: start; }
  .pm-req-acties .pm-btn { height: 44px; font-size: 14px; min-width: 0; }
  .pm-req-acties .pm-btn-auto { padding: 0 16px; }
  .pm-req-acties .pm-icobtn { width: 44px; height: 44px; color: var(--text-2); }

  /* Genereren en de reviewbalk: samen één rustige strook in plaats van twee panelen (R7). */
  .pm-page .reqv2-bar { padding: 12px !important; gap: 8px !important; border-radius: var(--r-lg) !important;
    background: var(--surface) !important; }   /* !important: de maat staat inline in reqV2Bar */
  .pm-page .reqv2-bar > .btn { height: 44px; font-size: 14px; }
  /* De waarschuwingen stonden inline op 11.5px; de ondergrens op de telefoon is 12px (R3). */
  .pm-page .reqv2-bar > .muted { flex: 1 1 100%; font-size: 12px !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-page .reqv2-nazorg summary { font-size: 14px !important; min-height: 44px; }   /* inline 12.5px */
  /* Het aanwijzingsveld kreeg 150px naast de knop; nu de volle breedte, de knop eronder (R8). */
  .pm-page .reqv2-nazorg > div[style] { flex-wrap: wrap !important; gap: 8px !important; }
  .pm-page .reqv2-nazorg > div[style] > .input { flex: 1 1 100% !important; }
  .pm-page .reqv2-nazorg > div[style] > .btn { height: 44px; font-size: 14px; }

  .pm-page .req-review-balk { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px; margin-bottom: 0; border-radius: var(--r-lg); background: var(--surface); }
  .pm-page .req-review-balk > .tag { align-self: flex-start; font-size: 12px !important; }   /* inline 11.5px */
  .pm-page .req-review-balk > .muted { font-size: 12px !important; line-height: 1.45; color: var(--text-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Nu de enige "alles goedkeuren" op het scherm: volle breedte, tikbaar (R2). */
  .pm-page .req-review-balk > .btn { margin-left: 0 !important; height: 44px; justify-content: center; font-size: 14px; }
}
@media (max-width: 400px) {
  /* 320px: Goedkeuren houdt lucht naast Opmerking. */
  .pm-req-acties .pm-btn { padding: 0 8px; }
  .pm-req-acties .pm-btn-auto { padding: 0 12px; }
}


/* ---- user stories */
@media (max-width: 640px) {
  .pm-board { gap: 12px; }
  .pm-story { gap: 8px; padding: 12px; border-radius: var(--r-lg); }
  .pm-story-kop { gap: 6px; flex-wrap: wrap; }
  /* De code is een verwijzing, geen status: kleine grijze tekst in plaats van een chip (S9). */
  .pm-story-kop > .tag-slate:first-child { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600;
    color: var(--text-3); letter-spacing: .01em; }
  .pm-story-p { font-size: 12px; color: var(--text-3); white-space: nowrap; }
  .pm-story-t { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
  /* Meta op een eigen regel, de knoppen eronder op één rij; op 320px stond de meta
     platgedrukt tot "4 / crite / stap / 2" (S2). */
  .pm-story-foot { flex-wrap: wrap; gap: 8px; padding-top: 12px; }
  .pm-story-m { flex: 1 1 100%; font-size: 14px; color: var(--text-3); }
  .pm-story-foot > .pm-btn-sm { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 8px; font-size: 14px; justify-content: center; }
  .pm-story-foot > .pm-btn-sm.btn-primary { flex-grow: 1.4; }

  /* Uitgeklapt: de criteria (S4/S5). */
  .pm-story-uit { gap: 12px; }
  /* Geen kader in de kaart: de criteria krijgen de volle kaartbreedte (op 320px was dat het
     verschil tussen twee en vier woorden per regel). */
  .pm-story-uit .us2-gwt { padding: 0; border: 0; background: none; border-radius: 0; }
  .pm-story-uit .us-sub-head { font-size: 12px; margin-bottom: 4px; }
  .pm-story-uit .us-sub-head .muted { display: block; margin-top: 2px; font-size: 12px; }
  .pm-story-uit .acc-item { gap: 8px; padding: 8px 0; align-items: flex-start; }
  .pm-story-uit .acc-check { margin-top: 8px; }
  .pm-story-uit .gwt-box { gap: 8px; }
  .pm-story-uit .gwt-line { gap: 4px; }
  .pm-story-uit .gwt-tag { width: auto; padding: 2px 8px; font-size: 12px; }
  /* Het criterium als meegroeiend tekstvak (process.js, optie mobiel): de volle tekst leesbaar.
     field-sizing waar de browser het kent; anders de geschatte regels uit rows. */
  /* Geen grijze vlakken per regel: de tekst staat rustig op de kaart, zoals een notitie; pas bij
     het typen krijgt het vak een rand. */
  .pm-story-uit textarea.gwt-inp, .pm-story-uit textarea.acc-input {
    display: block; width: calc(100% + 16px); min-height: 44px; padding: 10px 8px; margin: 0 -8px;
    font-size: 16px; line-height: 1.4; color: var(--text); background: transparent; border: 1px solid transparent;
    border-radius: var(--r); resize: none; overflow: hidden; field-sizing: content; white-space: pre-wrap; overflow-wrap: break-word; }
  .pm-story-uit textarea.gwt-inp:focus, .pm-story-uit textarea.acc-input:focus {
    background: var(--surface); border-color: var(--pri); box-shadow: 0 0 0 3px var(--ring); outline: none; }
  /* Verwijderen van een criterium: stil kruisje, niet rood naast de tekst. */
  .pm-story-uit .acc-del { width: 44px; height: 44px; margin-right: -8px; background: transparent; border: 0; color: var(--text-3); }
  .pm-story-uit .acc-del:active { background: var(--red-soft); color: var(--red-strong); }
  .pm-story-uit .acc-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .pm-story-uit .add-row { margin-top: 0; padding: 0 12px; font-size: 14px; }
  /* Twee knoppen van gelijke breedte naast elkaar (S6). */
  .pm-story-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
  .pm-story-dev .pm-btn-auto { width: 100%; min-width: 0; padding: 0 8px; font-size: 14px; }
  .pm-story-dev > .tag { justify-self: start; }
  /* De melding "bron gewijzigd" in hoofdletters las als een alarm (S7). */
  .pm-story-uit .us2-impact { padding: 12px; gap: 8px; }
  .pm-story-uit .us2-impact > .us-sub-head { font-size: 14px; text-transform: none; letter-spacing: -.01em; margin: 0; }
  .pm-story-uit .us2-impact-kop { font-size: 14px; flex-wrap: wrap; }
  .pm-story-uit .us2-diff-l { font-size: 12px; }
  .pm-story-uit .us2-diff .us2-was { font-size: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-story-uit .us2-diff .us2-nu { font-size: 14px; }
  .pm-story-uit .us2-impact .req2-acties .btn { height: 44px; font-size: 14px; }
  .pm-story-uit .us2-impact .req2-acties .muted { font-size: 12px !important; }   /* inline 12px, voor de zekerheid vast */
}
@media (max-width: 400px) {
  .pm-story-dev { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Drie statustabs passen op 320px niet naast elkaar; dan scrolt de rij. De zachte rand rechts
     hangt aan een scroll-tijdlijn: die bestaat alleen als de rij echt scrolt, dus op 375px, waar
     alles past, vervaagt er niets. */
  @supports (animation-timeline: scroll()) {
    .pm-kolommen { animation: pmTabsRand linear both; animation-timeline: scroll(self inline); }
  }
  @keyframes pmTabsRand {
    from { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
    to { -webkit-mask-image: none; mask-image: none; }
  }
}


/* ---- datamodel */
@media (max-width: 640px) {
  .pm-datamodel { gap: 8px; }
  .pm-tabel-kop { min-height: 64px; padding: 12px; gap: 12px; }
  .pm-tabel-kop:active { background: var(--sunken); }
  .pm-tabel-ic { width: 32px; height: 32px; }
  .pm-tabel-n { font-size: 16px; }
  .pm-tabel-m { font-size: 14px; }
  .pm-tabel-chev { font-size: 20px; color: var(--text-3); }
  .pm-veldrij { gap: 8px; min-height: 48px; padding: 8px 12px; }
  .pm-veldrij-n { font-size: 14px; }
  .pm-tabel-acties { gap: 8px; padding: 12px; }
  .pm-tabel-acties .pm-btn { font-size: 14px; }
}


/* ---- integraties */
@media (max-width: 640px) {
  .pm-integr { gap: 24px; }
  .pm-integr .pm-groep { gap: 8px; }
  .pm-koppel { gap: 12px; padding: 12px; border-radius: var(--r-lg); }
  .pm-koppel-kop { gap: 12px; min-height: 32px; }
  .pm-koppel-ic { width: 32px; height: 32px; border-radius: var(--r); }
  /* Naam als kaarttitel (16/600, was ~20px vet) met een ellips als hij niet past (I2). */
  .pm-koppel-in { font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; min-height: 32px; }
  /* Verwijderen stil in de kop (I4); tikvlak 44px zonder de kop hoger te maken. */
  .pm-koppel-del { flex: none; width: 44px; height: 44px; margin: -6px -8px -6px 0; display: grid; place-items: center;
    border: 0; border-radius: var(--r); background: transparent; color: var(--text-3); cursor: pointer; touch-action: manipulation; }
  .pm-koppel-del .ic { font-size: 18px; }
  .pm-koppel-del:active { background: var(--red-soft); color: var(--red-strong); }
  /* Label boven de waarde, zoals elk formulierveld op de telefoon (I6). */
  .pm-koppel-f { flex-direction: column; align-items: stretch !important; gap: 4px !important; padding-top: 12px; }   /* inline flex-start */
  .pm-koppel-lbl { font-size: 12px; font-weight: 500; color: var(--text-3); }
  .pm-koppel-stap { font-size: 14px; line-height: 1.45; }
  /* De route (van -> naar) blijft een rij chips. */
  .pm-koppel-f:has(> .ti-arrow-right), .pm-koppel-f:has(> i.ic) { flex-direction: row; flex-wrap: wrap; align-items: center !important; }
  .pm-koppel-f:has(> i.ic) > .pm-koppel-lbl { flex: 1 1 100%; }
  /* Keuzevelden zonder vulkleur: kleur alleen waar de waarde iets betekent (I3, V4). Het veld
     past zich aan de kaart aan, zodat niets meer buiten de rand valt (I1). */
  .pm-page .pm-koppel .tag-select, .pm-page .pm-veld .tag-select {
    width: 100%; max-width: none; min-width: 0; height: 44px; background-color: var(--surface); color: var(--text);
    border: 1px solid var(--border-2); font-size: 16px; font-weight: 500; }
  /* Documenten: naam boven, het bouwbesluit eronder (I5). */
  .pm-doc .pm-koppel-kop { align-items: flex-start; }
  .pm-doc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pm-doc-n { font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
}


/* ---- best practices */
@media (max-width: 640px) {
  .pm-practices { gap: 12px; }
  .pm-bp { gap: 8px; padding: 12px; }
  .pm-bp-kop { gap: 12px; }
  .pm-bp-t { font-size: 16px; }
  .pm-bp-h { font-size: 12px; }
  .pm-bp-o, .pm-bp-let { font-size: 14px; line-height: 1.5; }
  .pm-bp-let { gap: 8px; }
  .pm-bp-bron { font-size: 14px; }
  .pm-bp-foot { gap: 8px; justify-content: flex-end; }
  /* Onder de kop "Verbeterkansen" zegt de chip op elke kaart hetzelfde nog eens. */
  .pm-practices .pm-sectiekop ~ .pm-bp .pm-bp-foot > .tag { display: none; }
  .pm-bp-btn { height: 40px; padding: 0 16px; font-size: 14px; position: relative; }
  .pm-bp-btn::before { content: ""; position: absolute; inset: -2px 0; }
  .pm-bp-al { font-size: 14px; }
}


/* ---- open punten */
@media (max-width: 640px) {
  .pm-punten { gap: 12px; }
  /* De stand op een eigen regel, de hulpknoppen als één scrollende rij eronder (O1/O2). */
  .pm-punt-scan { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 0; font-size: 14px; }
  .pm-punt-stand { color: var(--text-2); }
  .pm-punt-tools { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
  .pm-punt-tools::-webkit-scrollbar { display: none; }
  .pm-punt-tools::after { content: ""; flex: 0 0 8px; }
  .pm-punt-tools:empty { display: none; }
  .pm-punt-tools > .btn { flex: none; height: 40px; min-height: 40px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .pm-punt-tools .tag { white-space: nowrap; font-size: 12px !important; }   /* inline 10.5px */
  /* Wissen als laatste en als tekstknop: rood in de tekst, geen kader. */
  .pm-punt-tools > .btn-danger { order: 9; border-color: transparent; background: transparent; }
  /* De filterrij loopt tot de schermrand door (scroll). */
  .pm-punt-filters { margin: 0 -16px; }

  /* Geen gekleurde zijstreep: de chips zeggen het al (O4). */
  .pm-punt { border-left-width: 1px; gap: 8px; }
  .pm-punt-kop { padding: 12px; }
  .pm-punt-kop:active { background: var(--sunken); }
  .pm-punt-t { font-size: 16px; line-height: 1.45; margin-top: 8px; }
  .pm-punt-s { font-size: 14px; margin-top: 4px; }
  .pm-punt.is-open .pm-punt-kop { padding-bottom: 4px; }
  /* Bewerkbaar punt: de vraag staat al groot in het veld; in de kop was hij dubbel (O6). */
  .pm-punt.is-open:has(.op2-vraag-in) .pm-punt-t { display: none; }
  .pm-punt-moment { padding: 4px 12px 0; font-size: 12px; }
  .pm-punt-waarom { font-size: 14px; padding: 0 12px; }
  .pm-punt-refs { padding: 0 12px; }
  .pm-punt-labeluitleg { margin: 0 12px 8px; }
  .pm-punt-vraagblok { margin: 8px 12px 0; }
  /* Het vraagveld liep af midden in een regel en was zo zwaar als een paginatitel (O5). */
  .pm-punt-vraagblok .op2-vraag-in { min-height: 96px; font-size: 16px; font-weight: 500; line-height: 1.45; field-sizing: content; }
  .pm-punt-vraagblok .op2-waarom { font-size: 14px; }
  .pm-punt .op2-veld-lab, .pm-punt .op2-veld-noot { font-size: 12px; }
  .pm-punt .op2-feedback { margin: 16px 12px 0; }
  .pm-punt .op2-vera { padding: 12px; }
  .pm-punt .op2-vera-uit { font-size: 14px; }
  .pm-punt .op2-optie-tip, .pm-punt .op2-optie-sub { font-size: 12px; }
  /* Lange antwoordopties tot drie regels; de gekozen optie toont hij helemaal (O12). */
  .pm-punt .op2-optie:not(:has(input:checked)) .op2-optie-t { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  /* Label op één regel, de verplicht-pil eronder (O7/O8). */
  .pm-punt .op2-antwoord-lab { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: 12px; }
  .pm-punt .op2-antwoord-eis { white-space: nowrap; font-size: 12px; }
  .pm-punt .op2-feedback-hint { font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* Primair bovenaan, dan vastleggen, en afwijzen met afstand onderaan als tekstknop (O9). */
  .pm-punt .op2-feedback-knoppen { display: flex; flex-direction: column-reverse; gap: 8px; }
  .pm-punt .op2-feedback-uit { display: flex; flex-direction: column-reverse; gap: 8px; }
  .pm-punt .op2-feedback-knoppen .btn { min-height: 44px; font-size: 14px; }
  .pm-punt .op2-feedback-knoppen > .btn-danger { margin-top: 8px; border-color: transparent; background: transparent; }
  /* Bespreken en doorzetten op één rij onder een lijn (O10). */
  .pm-punt-uitgang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 12px 0; padding-top: 12px;
    border-top: 1px solid var(--border); }
  .pm-punt-uitgang .pm-punt-bespreek { width: auto; margin: 0; min-height: 44px; font-size: 14px; }
  /* De doorzetlijst: rijen met naam en rol, tikbaar groot (O13). */
  .pm-punt .op2-uitzet { margin: 12px 12px 0; }
  .pm-punt .op2-uitzet-uit { font-size: 14px !important; }   /* inline via .muted */
  .pm-punt .op2-uitzet-rij > .btn { min-height: 56px; font-size: 14px; }
  .pm-punt .op2-uitzet-naam { font-size: 12px; }
  .pm-punt-verwerk:not(:empty) { padding: 0 12px 12px; }
  /* Verwijderen helemaal onderaan (O11). */
  .pm-punt-weg { display: flex; justify-content: center; margin: 8px 12px 8px; }
  .pm-punt-weg .btn { min-height: 44px; font-size: 14px; color: var(--text-3); }
  .pm-punt-weg .btn:active { color: var(--red-strong); }
  .pm-punt .op2-bon { margin: 12px; }
  .pm-punt .op2-bon-wie { font-size: 12px; }
  .pm-punt .op2-bon-tekst, .pm-punt .op2-bon-diff { font-size: 14px; }
  .pm-punt-af-t { font-size: 14px; }
}

@media (max-width: 400px) {
  /* Op 320px past de verplicht-pil niet op één regel; dan mag hij breken in plaats van afkappen. */
  .pm-punt .op2-antwoord-eis { white-space: normal; }
}


/* ---- beoordeling */
@media (max-width: 640px) {
  /* De schakelaar is nu de tabrij bovenaan (pm-kolommen, E1); twee gelijke helften. */
  .pm-beo-schakel { margin: 0; }
  .pm-beo-schakel .pm-kol { flex: 1 1 0; }
  .pm-beo { gap: 12px; }
  .pm-beo .panel { border-radius: var(--r-lg); }
  .pm-beo .panel-head { padding: 12px; }
  .pm-beo .panel-title { font-size: 16px; }
  /* Berichten-van: label klein erboven, de filters als pillenrij (E2). */
  .pm-beo .bo2-filterbalk { flex-wrap: nowrap; padding: 12px; background: var(--surface); position: relative; }
  .pm-beo .bo2-filterbalk > :not(button) { flex: none; align-self: center; font-size: 12px; color: var(--text-3); }
  .pm-beo .bo2-stroom { padding: 16px 12px; }
  .pm-beo .bo2-tekst { font-size: 16px; line-height: 1.5; }
  /* Het schrijfvak blijft onderin staan terwijl de draad scrolt (E4). overflow:clip op het
     paneel, anders is dat de scrollcontainer en plakt er niets. */
  .pm-beo .bo2-gesprek { overflow: clip; }
  .pm-beo .bo2-composer { position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b)); z-index: 5;
    background: var(--surface); padding: 12px; border-top: 1px solid var(--border); }
  .pm-beo .bo2-composer-lab, .pm-beo .bo2-composer-wie { font-size: 12px; }
  /* Iemand noemen (@), twee keuzes en verzenden in een raster: niets wordt meer afgekapt zonder
     ellips (E3). De @-knop staat links, op dezelfde maat als verzenden (0270). */
  .pm-beo .bo2-composer-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; }
  .pm-beo .bo2-composer-rij .select { min-width: 0; max-width: none; width: 100%; text-overflow: ellipsis; }
  .pm-beo .bo2-verzend { margin-left: 0; }
  /* Eindoordeel. */
  .pm-beo .bo2-oordeelbody { padding: 12px; gap: 12px; }
  .pm-beo .bo2-start { padding: 12px; }
  .pm-beo .bo2-start-uitleg { font-size: 14px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-beo .bo2-start .btn { height: 44px; font-size: 14px; }
  .pm-beo .bo2-oordeel { padding: 12px; }
  /* Naam en rol mogen de breedte nemen; de stand zakt eronder als het niet past (E7). */
  .pm-beo .bo2-oordeel-kop { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: start; }
  .pm-beo .bo2-oordeel-kop > .tag { grid-column: 2; justify-self: start; }
  .pm-beo .bo2-oordeel-naam { font-size: 14px; }
  .pm-beo .bo2-oordeel-rol, .pm-beo .bo2-oordeel-stamp { font-size: 12px; }
  .pm-beo .bo2-oordeel-toel, .pm-beo .bo2-slot, .pm-beo .bo2-voetnoot { font-size: 14px; }
  .pm-beo .bo2-uitzondering-kop, .pm-beo .bo2-uitzondering-reden, .pm-beo .bo2-uitzondering-meta { font-size: 14px; }
  .pm-beo .bo2-oordeel .btn { min-height: 44px; font-size: 14px; }
  .pm-beo .pr-avatar { width: 24px; height: 24px; font-size: 12px; flex: none; }
  .pm-beo .gap-poort-kop { font-size: 14px; }
}


/* ---- wijzigingen */
@media (max-width: 640px) {
  /* Kaart in kaart in kaart: het buitenste paneel valt weg, de verzoeken zijn de kaarten (W2). */
  .pm-wijzigingen .tf-crtab-panel { background: none; border: 0; box-shadow: none; padding: 0; }
  .pm-wijzigingen .tf-crtab-panel > .panel-head { padding: 0 4px 12px; border: 0; background: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .pm-wijzigingen .tf-crtab-panel .panel-title { font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; }
  .pm-wijzigingen .tf-crtab-panel .panel-title .ic { display: none; }
  /* "Alleen lezen, beoordelen gebeurt op ..." staat inline op 12.5px (W5). */
  .pm-wijzigingen .tf-crtab-panel > .panel-head > .muted { flex: 1 1 100%; font-size: 12px !important; line-height: 1.45; }
  .pm-wijzigingen .tf-crtab-lijst { padding: 0; gap: 12px; }
  .pm-wijzigingen .tf-crtab-oms { font-size: 16px; line-height: 1.4; }
  .pm-wijzigingen .tf-crtab-bedrag { font-size: 14px; }
  .pm-wijzigingen .tf-crtab-tekst { font-size: 14px; }
  /* Geen gekleurde zijstrepen: het soort staat al in de kop (W3); titels lichter (W4). */
  .pm-wijzigingen .tf-wz-diff-stap { border-left-width: 1px; border-left-color: var(--border); }
  .pm-wijzigingen .tf-wz-diff-kop { font-size: 14px; font-weight: 600; line-height: 1.4; }
  .pm-wijzigingen .tf-wz-diff-veld, .pm-wijzigingen .tf-wz-diff-l { font-size: 14px; }
  .pm-wijzigingen .tf-wz-diff-l { font-size: 12px; font-weight: 600; color: var(--text-3); }
  /* Het oude staat doorgestreept; twee regels zijn genoeg om te zien wat er wijkt (W6). */
  .pm-wijzigingen .tf-wz-diff-van { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}


/* ---- verbeteringen */
@media (max-width: 640px) {
  .pm-verbs { gap: 8px; }
  /* Een chevron rechts: de hele kaart opent de lade (V7). */
  .pm-verb5 { position: relative; padding: 12px 40px 12px 12px; gap: 8px; min-height: 64px; }
  .pm-verb5:active { background: var(--sunken); }
  .pm-verb5-t { font-size: 16px; line-height: 1.4; }
  .pm-verb5-o { font-size: 14px; }
  .pm-verb5-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-3); }

  /* De lade: titel bovenaan, status eronder, dan het besluit (V5). */
  .pm-verbsheet { padding: 8px 16px 0; gap: 8px; }
  /* Dimmen wat eronder ligt: een lade die bijna alles bedekt hoort af te steken (V3). */
  .pm-verbsheet { box-shadow: 0 0 0 100vmax rgb(15 23 42 / .32), 0 -8px 32px rgba(16, 24, 40, .16); }
  .pm-verbsheet:not(.pm-net-open) { animation: none; }
  .pm-verbsheet.pm-net-open { animation: mSheet var(--m-t3) var(--m-ease-sheet) both, pmTabsScrim var(--m-t2) var(--m-ease) both; }
  .pm-verbsheet-titel { display: flex; align-items: flex-start; gap: 8px; }
  .pm-verbsheet-titel .pm-verb5-code { flex: none; padding-top: 4px; }
  .pm-verbsheet-t { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-verbsheet-x { flex: none; width: 44px; height: 44px; margin: -8px -12px 0 0; display: grid; place-items: center;
    border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); cursor: pointer; touch-action: manipulation; }
  .pm-verbsheet-x .ic { font-size: 20px; }
  .pm-verbsheet-x:active { background: var(--sunken); }
  .pm-verbsheet > .pm-sheet-kop { flex-wrap: nowrap; gap: 12px; }
  .pm-verbsheet > .pm-sheet-kop .tag-select { flex: 1; min-width: 0; max-width: none; height: 44px; }
  .pm-verbsheet-body { gap: 16px; padding-bottom: 16px; overscroll-behavior: contain; }   /* V9 */
  .pm-verbsheet-body .label { font-size: 12px; }
  .pm-verbsheet .pm-schakel { min-height: 48px; }
  .pm-verbsheet .pm-schakel-l { font-size: 16px; color: var(--text); }
  .pm-verbsheet .pm-verb-onder { font-size: 14px; }
  /* Accepteren over de volle breedte, Later en Afwijzen eronder; afwijzen rechts, nooit
     direct naast de primaire knop (V2). */
  .pm-verbsheet .imp5-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pm-verbsheet .imp5-acties > .btn { width: 100%; height: 44px; font-size: 14px; justify-content: center; }
  .pm-verbsheet .imp5-acties > .btn-primary { grid-column: 1 / -1; order: -2; }
  .pm-verbsheet .imp5-acties > .btn-ghost { order: -1; }
  /* Verwijderen onderaan de lade als stille tekstknop (V1). */
  .pm-sheet-weg { align-self: center; min-height: 44px; font-size: 14px; color: var(--red-strong); }
  .pm-verbsheet .pm-veldpaar { gap: 12px; }
}


/* ---- bijlagen */
@media (max-width: 640px) {
  .pm-galerij { gap: 12px; }
  .pm-bijl-txt { padding: 12px; gap: 4px; }
  .pm-bijl-n { font-size: 14px; }
  .pm-bijl-add { font-size: 14px; }
}


/* ---- beweging */
@media (max-width: 640px) {
  /* Wat door deze tik openging, komt zacht op (X8). Alleen onder pm-net-open, zodat een
     hertekening na een bewerking niets opnieuw laat bewegen. */
  .pm-story.pm-net-open .pm-story-uit,
  .pm-tabel.pm-net-open .pm-tabel-body,
  .pm-punt.pm-net-open > :not(.pm-punt-kop) { animation: pmTabsRijs var(--m-t2) var(--m-ease) both; }
  .pm-beo-paneel.pm-net-open { animation: pmTabsVaag 160ms var(--m-ease) both; }
  .pm-tabel-kop, .pm-punt-kop, .pm-verb5 { transition: background-color var(--m-t1) var(--m-ease); }
  @keyframes pmTabsRijs { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes pmTabsVaag { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pmTabsScrim { from { box-shadow: 0 0 0 100vmax rgb(15 23 42 / 0), 0 -8px 32px rgba(16, 24, 40, 0); } }
}


/* ---- minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .pm-story.pm-net-open .pm-story-uit, .pm-tabel.pm-net-open .pm-tabel-body,
  .pm-punt.pm-net-open > :not(.pm-punt-kop), .pm-beo-paneel.pm-net-open, .pm-verbsheet.pm-net-open { animation: none; }
  .pm-pill, .pm-punt-filters .op2-chip, .pm-beo .bo2-filterbalk button, .pm-kol,
  .pm-tabel-kop, .pm-punt-kop, .pm-verb5 { transition: none; }
}

/* ======== 4.5 Datamodel ======== */
/* ---- gedeeld */
@media (max-width: 640px) {
  /* ---- één segmentknop voor het hele cluster (lens, ERP-weergave, documentfilter, realisatie-
     status). Er stonden vier vormen naast elkaar: gevulde knop plus omlijnde, losse pillen en
     drie losse knoppen. Nu een verzonken spoor met gelijke vakken; het gekozen vak ligt er wit
     in. Het vak zelf is het tikdoel (44px); de ring van spoorkleur maakt het visueel ingelegd. */
  .toolbar-r > div:has(> [data-act="lens-proces"]), .erp-viewtoggle, .dm-seg, .tw-knoppen {
    display: flex !important; /* de lensgroep draagt display en gap inline (tables.js) */
    gap: 0 !important; width: 100%; padding: 0; background: var(--sunken); border-radius: var(--r-md); }
  .toolbar-r > div:has(> [data-act="lens-proces"]) > .btn, .erp-viewtoggle > .btn, .dm-seg > .phase-pill, .tw-knoppen > .tw-knop {
    flex: 1 1 0; min-width: 0; min-height: var(--touch); margin: 0; padding: 0 8px; justify-content: center; gap: 6px;
    border: 0; border-radius: var(--r-md); background: transparent; box-shadow: none; color: var(--text-2);
    font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; }
  .toolbar-r > div:has(> [data-act="lens-proces"]) > .btn .ic, .erp-viewtoggle > .btn .ic { display: none; }
  .toolbar-r > div:has(> [data-act="lens-proces"]) > .btn.btn-primary, .erp-viewtoggle > .btn.btn-primary,
  .dm-seg > .phase-pill.on, .tw-knoppen > .tw-knop.is-actief {
    background: var(--surface); color: var(--pri-text); font-weight: 600;
    box-shadow: inset 0 0 0 3px var(--sunken), inset 0 0 0 4px var(--border); }
  .dm-seg { margin: 0 0 16px; }
  .dm-seg > .phase-pill .count-chip { background: none; padding: 0; font-size: 14px; font-weight: 500; color: var(--text-3); }
  .dm-seg > .phase-pill.on .count-chip { color: var(--pri-text); }

  /* ---- uitleg in één zin, de rest achter "Meer uitleg" (datamodel.js mobUitleg) ---- */
  .settings-head .settings-h2 { font-size: 20px; }
  .settings-head .settings-lead { font-size: 14px; }
  .dm-uitleg { margin-top: 4px; }
  .dm-uitleg > summary { display: inline-flex; align-items: center; min-height: var(--touch); gap: 4px; list-style: none;
    font-size: 14px; font-weight: 500; color: var(--pri-text); cursor: pointer; }
  .dm-uitleg > summary::-webkit-details-marker { display: none; }
  .dm-uitleg > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border: solid currentColor;
    border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-t2) var(--m-ease); }
  .dm-uitleg[open] > summary::after { transform: translateY(1px) rotate(225deg); }
  .dm-uitleg > .settings-lead { margin: 0 0 4px; }

  /* ---- vaste actieknop onderaan (duimzone): staat als laatste in .content en plakt daardoor
     de hele pagina lang boven de onderbalk. Een zachte waas eronder houdt de lijst leesbaar. ---- */
  .dm-mob-actie { position: sticky; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 8px); z-index: 30;
    margin: 16px 0 0; padding: 8px 0 0; background: linear-gradient(to bottom, transparent, var(--bg) 16px); }
  .dm-mob-actie .btn { width: 100%; min-height: 48px; justify-content: center; font-size: 16px; font-weight: 600;
    white-space: nowrap; box-shadow: none; }
}


/* ---- Tabellen per proces */
@media (max-width: 640px) {
  /* De kop van de Tabellen-tab expliciet: tabrij plakt onder de topbalk met een zachte rand,
     de werkbalk plakt eronder. Deze tab deelt de KPI-strook (.proc-stats) met Processen, en de
     regels van Processen (m-processen.css, .content-wide) mogen hier nooit meer doorwerken. */
  .content:has(#dz-tbl-tbody) > .settings-nav.hscroll-tabs { position: sticky; margin: 0 -16px 20px; padding: 0 16px; gap: 4px;
    box-shadow: 0 1px 0 var(--border);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  .content:has(#dz-tbl-tbody) > .settings-nav.hscroll-tabs > .settings-tab { flex: none; min-width: auto; justify-content: flex-start; padding: 10px 14px; }
  .content:has(#dz-tbl-tbody) > .settings-nav.hscroll-tabs ~ .toolbar { top: calc(var(--topbar-h) + 44px); }
  .content:has(#dz-tbl-tbody) > .toolbar .toolbar-r { display: flex; }

  /* D5: de paneelkop herhaalde de pagina op twee regels, met een telling die zelf ook brak en een
     groepeerknop die op een telefoon niets toevoegt (gegroepeerd is de standaard). */
  .panel:has(#dz-tbl-tbody) > .panel-head { padding: 0 4px 8px; border: 0; }
  .panel:has(#dz-tbl-tbody) > .panel-head .panel-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  #dz-tbl-count { background: none; padding: 0; border: 0; font-size: 14px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
  .panel:has(#dz-tbl-tbody) > .panel-head .group-toggle { display: none; }
  .panel:has(#dz-tbl-tbody) { background: none; border: 0; box-shadow: none; }

  /* Tussenkop per domein: geen tikdoel, alleen oriëntatie. */
  #dz-tbl-tbody > tr.grp-domein { display: block; margin: 24px 0 8px; padding: 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  #dz-tbl-tbody > tr.grp-domein:first-child { margin-top: 4px; }
  #dz-tbl-tbody > tr.grp-domein > td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0;
    font-size: 14px; font-weight: 600; color: var(--text-2); }
  #dz-tbl-tbody > tr.grp-domein .grp-domein-n { flex: none; font-size: 12px; font-weight: 500; color: var(--text-3); }

  /* D1/D2: de groepskop is de ouder, dus nu ook de zwaarste: een kaart met naam, daaronder
     tabellen en MVP, en een chevron die meedraait. Dicht is het een losse kaart; open vormt hij
     met zijn rijen één kaart. */
  #dz-tbl-tbody > tr.grp-kop { display: block; margin: 8px 0 0; padding: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; cursor: pointer;
    transition: border-radius var(--m-t2) var(--m-ease); }
  #dz-tbl-tbody > tr.grp-kop[aria-expanded="true"] { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  #dz-tbl-tbody > tr.grp-kop:active { background: var(--sunken); }
  #dz-tbl-tbody > tr.grp-kop > td { display: block; padding: 12px 12px 12px 16px; background: none; }
  .grp-kop-in { display: flex; align-items: center; gap: 12px; min-height: 32px; overflow-wrap: normal; }
  .grp-kop-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .grp-kop-naam { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); overflow-wrap: break-word; }
  .grp-kop-meta { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-3); }
  .grp-kop-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--text-faint); }
  .grp-kop-meta .grp-kop-mvp { color: var(--green-strong); font-weight: 500; }
  .grp-kop-chev { flex: none; width: 24px; font-size: 20px; color: var(--text-3); text-align: center;
    transition: transform var(--m-t2) var(--m-ease); }
  #dz-tbl-tbody > tr.grp-kop[aria-expanded="true"] .grp-kop-chev { transform: rotate(180deg); }

  /* De rijen van een open groep: licht, binnen de kaart van de kop, met een ingesprongen
     haarlijn in plaats van een eigen rand en schaduw per tabel. */
  #dz-tbl-tbody > tr.grp-rij.is-dicht.is-dicht { display: none; } /* dubbele klasse: wint van de rij-opmaak hieronder */
  #dz-tbl-tbody > tr.grp-rij { margin: 0; border: 1px solid var(--border); border-top: 0; border-bottom: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(var(--sunken), var(--sunken)) 16px 0 / calc(100% - 16px) 1px no-repeat, var(--surface); }
  #dz-tbl-tbody > tr.grp-rij:active { background: var(--sunken); }
  /* D3: tabelnaam met aantal kolommen op de eerste regel, de status als klein label rechts, de
     opmerking (als die er is) als tweede regel. "Status" en "Opmerking -" waren ruis. */
  #dz-tbl-tbody > tr.proc-row.grp-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 8px; row-gap: 0; min-height: 56px; padding: 6px 16px 6px 4px; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td { padding: 0; margin: 0; border: 0; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td::before { display: none; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td.card-title { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 500; }
  /* De kaartregel ".dz-cards td.card-title > * { display:inline }" brak de naamcel open: de
     uitklapknop op de ene regel, de naam op de volgende. */
  #dz-tbl-tbody > tr.proc-row.grp-rij > td.card-title > .tbl-name-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
  #dz-tbl-tbody > tr.proc-row.grp-rij .proc-name { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; }
  #dz-tbl-tbody > tr.proc-row.grp-rij .kol-chip { flex: none; margin-left: 4px; background: none; padding: 0; font-size: 14px; font-weight: 400; color: var(--text-3); white-space: nowrap; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td[data-label="Status"] { grid-column: 2; grid-row: 1; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td[data-label="Status"] .tag { font-size: 12px; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td[data-label="Opmerking"] { grid-column: 1 / -1; grid-row: 2; display: block; margin: -6px 0 4px 48px;
    font-size: 14px; line-height: 1.4; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dz-tbl-tbody > tr.proc-row.grp-rij > td[data-label="Opmerking"]:has(> .muted:only-child) { display: none; }
  /* Uitgeklapte kolommen van een tabel: binnen dezelfde kaart, ingesprongen onder de naam. */
  #dz-tbl-tbody > tr.kol-detail.grp-rij { padding: 0 16px 12px 48px; background: var(--surface); }
  #dz-tbl-tbody > tr.kol-detail.grp-rij > td { padding: 0; }
  #dz-tbl-tbody > tr.kol-detail .kol-grid { animation: dmIn var(--m-t2) var(--m-ease) both; }
  /* "Open proces" sluit de kaart af; de rij zelf is het tikdoel. */
  #dz-tbl-tbody > tr.grp-open-proces { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 0; cursor: pointer; }
  #dz-tbl-tbody > tr.grp-open-proces > td { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 48px; padding: 0 12px 0 16px; font-size: 14px; font-weight: 600; color: var(--pri-text); }
  #dz-tbl-tbody > tr.grp-open-proces > td .ti { width: 24px; font-size: 18px; text-align: center; }
  /* Alleen de rijen die net openklappen bewegen (klasse eenmalig gezet door tables.js). */
  #dz-tbl-tbody > tr.grp-rij.grp-in { animation: dmIn var(--m-t2) var(--m-ease) both; }

  /* Zoekveld: de kortere placeholder past; het lenzen-segment krijgt de volle breedte. */
  .toolbar-r:has([data-act="lens-proces"]) { margin-top: 0; }

  @keyframes dmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}


/* ---- Documenten */
@media (max-width: 640px) {
  /* DO1: één rij per document. Dicht: naam, "DOC-7 · Fase 1 · 2 processen" en de
     bouwschakelaar. Open: de editors eronder, verwijderen apart rechtsonder (DO6). */
  .doc-mob-lijst { background: none; border: 0; box-shadow: none; }
  .doc-mob-lijst .dz-cards.dz-cards-chips tr.doc-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 8px; row-gap: 12px; margin: 0 0 8px; padding: 4px 12px 4px 0; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: none; background: var(--surface); }
  .doc-mob-lijst tr.doc-rij:active { background: var(--surface); }
  .doc-mob-lijst tr.doc-rij > td { padding: 0; margin: 0; border: 0; max-width: none; }
  .doc-mob-lijst tr.doc-rij > td::before { font-size: 12px; font-weight: 500; color: var(--text-3); }
  .doc-mob-lijst tr.doc-rij > td.doc-naam { grid-column: 1; grid-row: 1; display: block; padding: 0; margin: 0; border: 0; font-size: 16px; font-weight: 500; }
  .doc-mob-lijst tr.doc-rij > td.doc-bouw { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); }
  .doc-mob-lijst tr.doc-rij > td.doc-bouw::before { display: none; }
  .doc-mob-lijst tr.doc-rij > td.doc-code, .doc-mob-lijst tr.doc-rij > td.doc-n { display: none; }
  /* Dicht: alleen de samenvatting en de schakelaar. */
  .doc-mob-lijst tr.doc-dicht > td:not(.doc-naam):not(.doc-bouw), .doc-mob-lijst tr.doc-dicht > td.doc-naam > input,
  .doc-mob-lijst tr.doc-dicht + tr.doc-att-row { display: none; }

  .doc-mob-lijst td.doc-naam > .doc-samen { display: flex; } /* wint van .dz-cards td.card-title > * { display:inline } */
  .doc-samen { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0 8px 16px; border: 0;
    background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  .doc-samen-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .doc-samen-naam { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); overflow-wrap: break-word; }
  .doc-samen-naam.is-leeg { color: var(--text-3); font-weight: 500; }
  .doc-samen-meta { font-size: 14px; line-height: 1.4; color: var(--text-3); overflow-wrap: break-word; }
  .doc-samen-chev { flex: none; font-size: 20px; color: var(--text-3); transition: transform var(--m-t2) var(--m-ease); }
  .doc-samen[aria-expanded="true"] .doc-samen-chev { transform: rotate(180deg); }

  /* Open: naam wijzigen, dan bestandstype en kostentype naast elkaar, fase, waar het gebouwd
     wordt en de acties. Elk veld met zijn label erboven. */
  .doc-mob-lijst tr.doc-rij.is-open { padding-bottom: 16px; }
  .doc-mob-lijst tr.is-open > :is(td.doc-drager, td.doc-type, td.doc-fase, td[data-mob="doc-in"], td.doc-acties) { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 0 0 0 16px; }
  .doc-mob-lijst tr.is-open > td.doc-naam > input.inline { display: block; width: calc(100% - 16px); margin: 4px 0 0 16px; }
  /* DO2: de naam stond in een vak van vaste breedte en werd afgekapt; een leeg vak leek een
     laadbalk. Nu de volle breedte, en leeg duidelijk "vul mij in". */
  .doc-mob-lijst td.doc-naam > input.inline { min-width: 0 !important; /* inline min-width:150px (datamodel.js) */
    font-size: 16px; font-weight: 500; }
  .doc-mob-lijst td.doc-naam > input.inline:placeholder-shown { background: transparent; border: 1px dashed var(--border-2); }
  /* DO3: keuzelijsten droegen inline max-width:150px en kapten "Extended docume..." af. */
  .doc-mob-lijst tr.is-open td select.select, .doc-mob-lijst tr.is-open td .tag-select { max-width: none !important; width: 100%;
    min-height: var(--touch); font-size: 16px; padding: 8px 32px 8px 12px !important; }
  .doc-mob-lijst tr.is-open > td[data-mob="doc-in"] { font-size: 14px !important; }
  .doc-mob-lijst tr.is-open > td.doc-acties { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding-right: 4px; }
  .doc-mob-lijst tr.is-open > td.doc-acties::before { display: none; }
  .doc-mob-lijst tr.is-open > td.doc-acties .icontile.danger { margin-left: auto; width: var(--touch); height: var(--touch); }
  .doc-mob-lijst tr.is-open > td.doc-acties .btn { min-height: var(--touch); }
  .doc-mob-lijst tr.doc-rij.doc-in > td:not(.doc-naam):not(.doc-bouw), .doc-mob-lijst tr.doc-rij.doc-in > td.doc-naam > input { animation: dmIn var(--m-t2) var(--m-ease) both; }
  .doc-mob-lijst tr.doc-att-row { margin: -8px 0 8px; padding: 0 16px 16px; border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: none; }
}
@media (max-width: 400px) {
  .dm-seg > .phase-pill { padding: 0 4px; gap: 4px; }
  /* Twee halve knoppen op 320px: zonder icoon, en een lange tekst mag over twee regels. */
  .mv-band > div > .btn { white-space: normal; line-height: 1.2; }
  .mv-band > div > .btn .ic { display: none; }
}


/* ---- ERP-dekking */
@media (max-width: 640px) {
  /* V1: de uitlegzin stond in een kolom van 110px naast de keuzelijst (twaalf regels). */
  .erp-toolbar { gap: 8px; }
  .erp-toolbar > p { flex: 1 1 100% !important; /* inline flex:1 (datamodel.js) */ font-size: 14px !important; line-height: 1.5; }
  .erp-toolbar > select.select { flex: 1 1 100%; width: 100% !important; max-width: none !important; /* inline breedtes */
    min-height: var(--touch); font-size: 16px; }
  /* V2: Dekking/Checklist/Zij-aan-zij als segment over de volle breedte; "Alleen gaten" als
     filterchip eronder. Referentie bewerken en herstellen zijn een bureautaak (rules.md 9.4). */
  .erp-toolbar > .erp-viewtoggle { flex: 1 1 100%; }
  .erp-viewtoggle > .btn:first-child, .erp-viewtoggle > .btn:last-child { border-radius: var(--r-md); margin-left: 0; }
  .erp-toolbar > [data-act="erp-toggle-gaps"] { flex: 0 0 auto; min-height: var(--touch); border-radius: var(--r-pill); padding: 0 16px; font-size: 14px; }
  .erp-toolbar > [data-act="erp-toggle-gaps"].btn-primary { background: var(--pri-soft); border-color: transparent; color: var(--pri-text); }
  .erp-toolbar > [data-act="erp-toggle-edit"], .erp-toolbar > [data-act="erp-reset"] { display: none; }
  /* V3: drie volle statkaarten (210px) werden één band van drie vakken. */
  .erp-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 16px !important;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .erp-hero > .stat-card { display: block; min-width: 0; padding: 12px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .erp-hero > .stat-card + .stat-card { border-left: 1px solid var(--border); }
  .erp-hero .stat-ic, .erp-hero .stat-sub { display: none; }
  .erp-hero .stat-body { display: flex; flex-direction: column-reverse; gap: 2px; }
  .erp-hero .stat-num { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .erp-hero .stat-label { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--text-3);
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  /* V5: de betekenis blijft (rood = ontbreekt), de harde rand gaat eraf. */
  .erp-missdom { border: 0; font-size: 14px; }
  .erp-missdom-btn { min-height: var(--touch); padding: 0 12px; font-size: 14px; border-color: transparent; }
  /* V4: titel en telling op één regel, de balk als dunne lijn over de volle breedte eronder. */
  .erp-mod-head { min-height: 56px; padding: 12px 16px; row-gap: 6px; }
  .erp-mod-title { flex: 1 1 0; font-size: 16px; } /* basis 0: een lange titel breekt binnen zijn vak in plaats van de chevron alleen op een regel te laten staan */
  .erp-mod-title .muted { font-size: 14px; }
  .erp-mod-head > .erp-mod-count { margin-left: auto; font-size: 14px; }
  .erp-mod-head > .erp-bar { order: 3; flex: 0 0 calc(100% - 26px); width: auto; height: 4px; margin-left: 26px; }
  .erp-mod-head > .erp-mod-dom { order: 4; flex-basis: calc(100% - 26px); margin-left: 26px; font-size: 14px; }
}


/* ---- Autorisatiematrix */
@media (max-width: 640px) {
  /* A5: de kop herhaalde de tabnaam; de telling blijft. A4: exports als twee halve knoppen. */
  /* A3: legenda als uitklapper met één regel per recht (autorisatie.js). */
  .az-legenda-m { margin: 4px 0 12px; }
  .az-legenda-m > summary { display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch); list-style: none;
    font-size: 14px; font-weight: 500; color: var(--pri-text); cursor: pointer; }
  .az-legenda-m > summary::-webkit-details-marker { display: none; }
  .az-legenda-m > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border: solid currentColor;
    border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-t2) var(--m-ease); }
  .az-legenda-m[open] > summary::after { transform: translateY(1px) rotate(225deg); }
  .az-leg-lijst { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; padding: 8px 4px 4px;
    font-size: 14px; color: var(--text-2); }
  .az-leg-rij { display: contents; }
  /* A1/A2: de rechten zijn het antwoord op de vraag van deze pagina; 10,5px was te klein, en
     elke rij is een knop die het detail opent. */
  .az-chip { font-size: 12px; padding: 2px 8px; }
  .az-mrij { min-height: 48px; padding: 12px 16px; font-size: 16px; gap: 12px; }
  .az-mrij > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
  .az-mrij:active { background: var(--sunken); }
  .az-mrol .panel-head { padding: 12px 16px; }
  .az-uitz, .az-del { font-size: 14px; }
  /* A7: het tonen van de verborgen rollen was een randloze knop onder 44px. */
}


/* ---- Mapping bestaand (werkbank) */
@media (max-width: 640px) {
  /* W7: de tellingen als band van drie vakken, het aantal bestaande tabellen en de bron als
     onderschrift eronder. */
  .tw-balk { gap: 0; }
  .tw-stand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; font-size: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .tw-stand-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; font-weight: 500; color: var(--text-3); line-height: 1.35; }
  .tw-stand-item b { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .tw-stand-item + .tw-stand-item + .tw-stand-item { border-left: 1px solid var(--border); }
  .tw-stand-item:first-child { grid-column: 1 / -1; order: 2; flex-direction: row; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border);
    font-size: 14px; font-weight: 400; }
  .tw-stand-item:first-child b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
  .tw-stand-bron { order: 3; grid-column: 1 / -1; padding: 0 12px 8px; font-size: 12px; }

  /* W1: dichte kaart per proces (tw-samen), de rest pas na een tik. */
  .tw-tabel.dz-cards tr.tw-rij { margin: 0 0 8px; padding: 0; box-shadow: none; }
  .tw-tabel.dz-cards tr.tw-rij:active { background: var(--surface); }
  .tw-tabel.dz-cards tr.tw-rij > td.tw-proces { padding: 0; margin: 0; border: 0; }
  .tw-tabel.dz-cards tr.tw-dicht > td:not(.tw-proces) { display: none; }
  .tw-tabel.dz-cards tr.tw-open > td:not(.tw-proces) { padding: 0 16px 12px; }
  .tw-tabel.dz-cards tr.tw-open > td.tw-statuscel { padding-bottom: 16px; }
  .tw-tabel.dz-cards tr.tw-open > td:not(.tw-proces)::before { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
  .tw-tabel.dz-cards tr.tw-open > td.tw-tabellen { padding-top: 4px; border-top: 1px solid var(--sunken); margin: 0 16px; padding-left: 0; padding-right: 0; padding-top: 12px; }
  .tw-tabel.dz-cards tr.tw-in > td:not(.tw-proces) { animation: dmIn var(--m-t2) var(--m-ease) both; }
  .tw-tabel td.tw-proces > .tw-samen { display: flex; } /* wint van .dz-cards td.card-title > * { display:inline } */
  .tw-samen { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; border: 0;
    background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-lg); }
  .tw-samen:active { background: var(--sunken); }
  .tw-samen-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tw-samen-naam { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--text); overflow-wrap: break-word; }
  .tw-samen-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px;
    font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-3); }
  .tw-samen-dom { font-size: 14px; font-weight: 400; color: var(--text-3); }
  .tw-dicht .tw-samen-dom { display: none; }
  .tw-samen-status { flex: none; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--sunken); color: var(--text-2); }
  .tw-samen-status.is-bestaand { background: var(--green-soft); color: var(--green-strong); }
  .tw-samen-status.is-bestaand_gewijzigd { background: var(--amber-soft); color: var(--amber-strong); }
  .tw-samen-chev { flex: none; font-size: 20px; color: var(--text-3); transition: transform var(--m-t2) var(--m-ease); }
  .tw-samen[aria-expanded="true"] .tw-samen-chev { transform: rotate(180deg); }
  /* W4: de reden is uitleg bij een keuze, dus leesbare tekst. */
  .tw-reden, .tw-delta { font-size: 14px; line-height: 1.5; }
  .tw-reden { color: var(--text-2); margin-top: 8px; }
  .tw-sug { font-size: 12px; }
  /* W2/W3: de realisatiestatus is één keuze uit drie, dus een segment. "Bestaand, gewijzigd"
     mag over twee regels in plaats van midden in een woord te breken. */
  .tw-tabel td .tw-knoppen > .tw-knop { white-space: normal; overflow-wrap: normal; word-break: normal; padding: 4px 6px; } /* wint van .dz-cards td .btn { nowrap } */
  .tw-tabel td .tw-knoppen > .tw-knop:last-child { flex: 1.4 1 0; }
  /* W6: de bulkknop plakt onderaan (thinkwiseStartpunt.js zet hem daar op de telefoon). */
  .dm-mob-actie .tw-bulk { width: 100%; }
}


/* ---- Modelvergelijking */
@media (max-width: 640px) {
  /* M5: de titelkaart herhaalde de actieve tab; de ondertitel blijft als één regel. */
  .mv-overzicht > .sheet { margin: 0 0 8px !important; padding: 0 4px !important; background: none; border: 0; box-shadow: none; }
  .mv-overzicht > .sheet .stat-ic, .mv-overzicht > .sheet h2 { display: none; }
  .mv-overzicht > .sheet .muted { font-size: 14px !important; /* inline 12.5px */ line-height: 1.5; }
  /* M6: uitleg dicht, de kern zichtbaar (modelvergelijking.js previewBanner). */
  .mv-uitleg { display: block; margin: 0 0 12px; padding: 0; border-color: var(--border); background: var(--surface); border-radius: var(--r-lg); }
  .mv-uitleg.is-voorbeeld { background: var(--amber-soft); border-color: transparent; }
  .mv-uitleg > summary { display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 8px 12px 8px 16px; list-style: none;
    font-size: 14px; cursor: pointer; }
  .mv-uitleg > summary::-webkit-details-marker { display: none; }
  .mv-uitleg > summary > .ic { color: var(--pri-text); }
  .mv-uitleg.is-voorbeeld > summary > .ic { color: var(--amber-strong); }
  .mv-uitleg > summary > strong { flex: 1 1 auto; min-width: 0; font-weight: 600; }
  .mv-uitleg-chev { flex: none; font-size: 18px; color: var(--text-3); transition: transform var(--m-t2) var(--m-ease); }
  .mv-uitleg[open] .mv-uitleg-chev { transform: rotate(180deg); }
  .mv-uitleg > span { display: block; padding: 0 16px 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
  /* M4/M3: de bronregel in twee korte regels, knoppen zonder afkappen; de primaire bovenaan. */
  .mv-band > div { gap: 8px 12px !important; padding: 12px 16px !important; /* inline flex-opmaak (headerBand) */ }
  .mv-band > div > div { font-size: 14px; }
  .mv-band > div > div .muted { font-size: 14px !important; }
  .mv-band > div > div > span[style*="10.5px"] { font-size: 12px !important; /* BRON-pil, inline 10.5px */ }
  .mv-band > div > .ti-arrows-left-right { display: none; }
  .mv-band > div > div ~ div::before { content: "\21C4\00a0"; color: var(--pri-text); font-weight: 600; }
  .mv-band > div > span.muted { flex: 1 1 100%; margin-left: 0 !important; font-size: 12px !important; }
  .mv-band > div > .btn { flex: 1 1 calc(50% - 6px); min-width: 0; margin-left: 0 !important; justify-content: center; white-space: nowrap; }
  .mv-band > div > .btn-primary { order: 5; flex: 1 1 100%; white-space: normal; min-height: 48px; }
  /* M7: de kop van de strook is de netto scope-impact; die stond buiten beeld als vijfde. */
  .mv-overzicht .ais-stats > .stat-card:last-child { order: -1; margin-right: 0; }
  .mv-overzicht .ais-stats > .stat-card:nth-last-child(2) { margin-right: 24px; }
  /* M1/M2: een kaart per proces is naam plus één metaregel; de hele kaart is de knop. */
  .mv-tbl tr.mv-rij { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 64px;
    margin: 0 0 8px; padding: 12px 48px 12px 16px; box-shadow: none; }
  .mv-tbl tr.mv-rij.is-rustig .mv-naam b { color: var(--text-2); }
  .mv-tbl tr.mv-rij > td { padding: 0; margin: 0; border: 0; }
  .mv-tbl tr.mv-rij > td::before { display: none; }
  .mv-tbl tr.mv-rij > td.mv-naam { font-size: 16px; font-weight: 600; line-height: 1.3; }
  .mv-tbl tr.mv-rij > td.mv-naam b { font-weight: 600; }
  .mv-tbl tr.mv-rij > td.mv-meta { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 14px; }
  .mv-tbl tr.mv-rij > td.mv-meta > span:first-child { font-size: 12px !important; /* inline 11px (pill) */ }
  .mv-tbl .mv-impact { color: var(--text-2); font-variant-numeric: tabular-nums; }
  .mv-tbl .mv-impact.is-hoog { color: var(--red); font-weight: 600; }
  .mv-tbl tr.mv-rij > td.mv-open { position: static; }
  /* De knop ligt doorzichtig over de hele kaart; zijn chevron staat rechts. */
  .mv-tbl td.mv-open .btn { position: absolute; inset: 0; width: auto; min-height: 0; padding: 0 12px 0 0; margin: 0;
    border: 0; border-radius: inherit; background: none; color: var(--text-3); justify-content: flex-end; }
  .mv-tbl td.mv-open .btn:active { transform: none; background: rgba(16, 24, 40, .04); }
  .mv-tbl td.mv-open .btn .ic { font-size: 20px; }
  /* De rechterkolom (impact, acties) volgt onder de lijst. */
  .mv-overzicht .kosten-side .panel-head { padding: 12px 16px; }
}


/* ---- minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #dz-tbl-tbody > tr.grp-rij.grp-in, #dz-tbl-tbody > tr.kol-detail .kol-grid,
  .doc-mob-lijst tr.doc-rij.doc-in > td, .tw-tabel.dz-cards tr.tw-in > td { animation: none; }
  #dz-tbl-tbody > tr.grp-kop, .grp-kop-chev, .doc-samen-chev, .tw-samen-chev, .mv-uitleg-chev,
  .dm-uitleg > summary::after, .az-legenda-m > summary::after { transition: none; }
}

/* ======== 4.6 Beslissingen, projectplan, delivery, control, wijzigingen, roadmap ======== */
/* ---- deliverable (user story) */
@media (max-width: 640px) {
  /* Terug is navigatie, geen knop met een kader: een kale terugregel zoals in een iOS-navigatiebalk. */
  .content > div:has(> [data-act="dlv-back"]) { margin: -4px 0 8px !important; } /* inline marge uit backBar() */
  .content > div > [data-act="dlv-back"] { border: 0; background: none; box-shadow: none; padding: 0 8px 0 0;
    min-height: 44px; color: var(--pri-text); font-size: 16px; font-weight: 500; }

  .dlv-doc { padding: 16px; }
  /* U2: de beoordeling is de beslissing van dit scherm. De chip blijft bij de soort-tag staan,
     de vervolgstappen worden echte knoppen van 44px op een eigen regel in plaats van losse
     tekstlinks die over drie regels braken. */
  /* De kop wordt één stroom: soort- en statuschip, dan de titel, dan de knoppen, dan de meta. */
  .dlv-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dlv-doc > * { order: 3; flex: 1 0 100%; min-width: 0; }
  .dlv-doc > .dlv-doc-tags, .dlv-doc-tags .review-chip { display: contents; }
  .dlv-doc-tags > *, .dlv-doc-tags .review-chip > .tag { order: 0; flex: none; }
  .dlv-doc > .dlv-title-input { order: 1; }
  .dlv-doc-tags .review-chip .dlv-link { order: 2; flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); color: var(--text);
    font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
  .dlv-doc-tags .review-chip .dlv-link[data-status="Goedgekeurd"] { background: var(--pri); border-color: var(--pri); color: #fff; }
  .dlv-doc-tags .review-chip .dlv-link:active { transform: scale(.98); }
  /* Het trefvlak van 44px zit nu in de knop zelf; de transparante laag uit de shell is dubbel. */
  .dlv-doc-tags .review-chip .dlv-link::after { display: none; }

  /* U6: de titel leest als kop, niet als formulierveld. Pas bij focus wordt hij een invoervak. */
  .dlv-doc .dlv-title-input { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em;
    padding: 4px 0; margin: 4px 0; background: transparent; border-color: transparent; box-shadow: none; resize: none;
    field-sizing: content; min-height: 0; }
  .dlv-doc .dlv-title-input:focus { background: var(--surface-2); padding: 4px 8px; border-color: var(--border-2); }

  /* U1 (P0) en U3: de meta was een rij losse velden die willekeurig wikkelden, en de eigenaar-
     select duwde de hele pagina naar 512px. Nu een lijst zoals iOS-instellingen: label links,
     waarde rechts, rijen van 48px met een haarlijn. Elke flexlaag mag krimpen (min-width 0),
     de selects blijven binnen hun rij. */
  .dlv-doc .dlv-meta { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; margin-top: 8px; }
  .dlv-doc .dlv-meta-2 { margin-top: -8px; }
  .dlv-doc .dlv-meta .us-code { align-self: flex-start; margin: 0 0 4px; font-size: 12px; }
  .dlv-doc .dlv-mf { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0;
    min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--border); }
  .dlv-doc .dlv-meta-2 .dlv-mf:last-child { border-bottom: 0; }
  .dlv-doc .dlv-mf-l { flex: none; font-size: 14px; color: var(--text-2); }
  .dlv-doc .dlv-mf-v { flex: 1 1 auto; min-width: 0; justify-content: flex-end; font-size: 14px; text-align: right; }
  .dlv-doc .dlv-own { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .dlv-doc .dlv-mf-v select, .dlv-doc .dlv-mf-v .filter-select { min-width: 0; max-width: 100%; width: auto; }
  .dlv-doc .dlv-own select { flex: 0 1 auto; }
  .dlv-doc .dlv-mf-v .dlv-link { text-align: right; overflow-wrap: anywhere; }
  .dlv-doc .dlv-mf-v .req-chips { justify-content: flex-end; }

  /* U4: de voorcalculatie als 2x2-raster. De lege invoer toonde "– u u" (plaatshouder plus
     eenheid); de plaatshouder wordt een streep, de eenheid staat er al achter. */
  .dlv-doc .est-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 12px; padding: 12px; }
  .dlv-doc .est-cell { min-width: 0; }
  .dlv-doc .est-l { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
  .dlv-doc .est-sub { font-size: 12px; }
  .dlv-doc .est-inp { width: 72px; min-height: 44px; font-size: 16px; }
  .dlv-doc .est-inp::placeholder { color: transparent; }

  .dlv-cols { gap: 12px; margin-top: 12px; }
  .dlv-left { gap: 12px; }
  .dlv-card { padding: 16px; }

  /* U5: een criterium las je niet: een regel van 220px met een kruisje ernaast. Het label (GIVEN,
     WHEN, THEN) staat boven de tekst, de invoer krijgt de volle breedte. */
  .dlv-left .acc-item { gap: 12px; padding: 12px 0; }
  .dlv-left .gwt-box { gap: 8px; }
  .dlv-left .gwt-line { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .dlv-left .gwt-tag { width: auto; justify-self: start; padding: 2px 8px; font-size: 12px; }
  .dlv-left .gwt-inp, .dlv-left .acc-input { width: 100%; font-size: 16px; min-height: 44px; }
  .dlv-left .acc-check { width: 24px; height: 24px; margin-top: 10px; }
  .dlv-left .acc-add .add-row { min-height: 44px; font-size: 14px; flex: 1 1 auto; justify-content: center; }

  /* U7: slepen bestaat niet op een telefoon, en een leeg voorbeeldvak van 190px is ruis. Wat
     overblijft is één knop om een bestand te kiezen. */
  .dlv-left .att-dropzone { padding: 0; border: 0; background: none; align-items: stretch; }
  .dlv-left .att-dropzone > .ti, .dlv-left .att-dz-hint { display: none; }
  .dlv-left .att-dz-main { font-size: 0; }
  .dlv-left .att-dz-main .att-pick-link { font-size: 14px; font-weight: 600; text-decoration: none; width: 100%;
    line-height: 42px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface);
    color: var(--text); display: block; text-align: center; }
  .dlv-left .att-dz-main .att-pick-link::first-letter { text-transform: uppercase; }
  .dlv-left .att-dz-main .att-pick-link::after { display: none; }
  .dlv-left .att-split { grid-template-columns: minmax(0, 1fr); }
  .dlv-left .att-card:not(:has(.att-items)) .att-preview { display: none; }

  /* U8: de gidskop stapelt: titel over de volle breedte, de acties als volle knoppen eronder. */
  .dlv-right .tw-guide { padding: 16px; }
  .dlv-right .tw-guide-head { flex-direction: column; align-items: stretch; }
  .dlv-right .tw-guide-head > .btn { justify-content: center; min-height: 44px; }
  .dlv-right .tw-guide-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .dlv-right .tw-guide-sub { font-size: 14px; }
  .dlv-right .tw-guide > p.muted { font-size: 14px !important; } /* inline 12.5px uit thinkwiseGuide() */
}

/* ---- delivery: stories per sprint (Sprints-pagina). Het bord staat sinds DW3c in dw.css. */
@media (max-width: 640px) {
  /* D2: een werk-item was een kaart van ~330px met vier selects onder elkaar: elf schermen voor
     25 items. Eigenaar en punten zijn werk voor aan tafel (ze staan in het detail), het type
     zegt het icoon voor de titel al. Wat blijft: titel, proces in grijs, en status en sprint als
     twee even brede keuzes op één regel. De hele kaart opent het detail. */
  /* De kaarten staan direct op de pagina; het paneel eromheen was een tweede kader. */
  .del-table-panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .del-table-panel > .panel-head { padding: 8px 0; border: 0; }
  .del-table-panel .toolbar { padding: 0 0 12px; border: 0; background: transparent; }
  .del-table-panel .tbl-wrap { overflow: visible; }
  .del-table-panel .del-pager { padding: 8px 0; border: 0; background: transparent; }
  .del-table-panel .dz-cards tr { position: relative; gap: 8px; padding: 12px 16px; margin-bottom: 8px; box-shadow: none; }
  .del-table-panel .dz-cards td[data-label="Eigenaar"],
  .del-table-panel .dz-cards td[data-label="Punten"],
  .del-table-panel .dz-cards td[data-label="Type"] { display: none; }
  .del-table-panel .dz-cards td.card-title { border: 0; padding: 0; margin: 0; font-size: 16px; }
  .del-table-panel .dz-cards .del-titcell { display: flex; align-items: flex-start; }
  .del-table-panel .dz-cards .del-tit-ic { margin-top: 2px; }
  .del-table-panel .dz-cards .del-tit-l { font-weight: 600; line-height: 1.35; }
  .del-table-panel .dz-cards .del-tit-l::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .del-table-panel .dz-cards td[data-label="Proces"] { flex: 1 0 100%; padding: 0 0 4px 24px; margin-top: -4px;
    font-size: 14px; color: var(--text-3); }
  .del-table-panel .dz-cards td[data-label="Proces"]::before,
  .del-table-panel .dz-cards td[data-label="Status"]::before,
  .del-table-panel .dz-cards td[data-label="Sprint"]::before { display: none; }
  .del-table-panel .dz-cards td[data-label="Status"],
  .del-table-panel .dz-cards td[data-label="Sprint"] { flex: 1 1 calc(50% - 4px); min-width: 0; position: relative; z-index: 1; }
  .del-table-panel .dz-cards td[data-label="Status"] select,
  .del-table-panel .dz-cards td[data-label="Sprint"] select { width: 100%; min-width: 0; }
  .del-table-panel .dz-cards tr:active { background: var(--surface-2); }
  .del-table-panel .del-pager .btn { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* ---- deliverables (lijst) */
@media (max-width: 640px) {
  /* V3 + V4: twee knoppen die altijd uitgeschakeld zijn ("binnenkort") en het hernummeren van
     alle codes (zeldzaam beheerwerk) horen niet bovenaan een telefoonscherm. Op desktop blijven ze. */
  .content:has(.dlv-layout) .pa-head-actions .btn[disabled] { display: none; }
  .content:has(.dlv-layout) .pa-head-actions:not(:has(.btn:not([disabled]))) { display: none; }
  .dlv-layout [data-act="dlv-renumber"] { display: none; }

  /* Geen kaart-in-kaart: de lijst staat direct op de pagina. */
  .dlv-layout .proc-main > .panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .dlv-layout .proc-main > .panel > .panel-head { padding: 8px 0; border: 0; }
  .dlv-layout .dlv-toolbar { padding: 0 0 12px; border: 0; background: transparent; }
  .dlv-layout .tbl-wrap { overflow: visible; }
  .dlv-layout .del-pager { padding: 8px 0; border: 0; background: transparent; }
  .dlv-layout .del-pager .btn { min-width: 44px; min-height: 44px; justify-content: center; }

  /* V2: tien velden per kaart (de ID als titel, de echte titel als gelabeld veld) werd drie
     regels: de titel, daaronder ID en proces in grijs, dan status en prioriteit als chips. Type
     zegt de ID al (REQ/US); sprint, fase, eigenaar, koppeling en epic staan in het detail. */
  .dlv-table.dz-cards tr { position: relative; gap: 4px 8px; padding: 12px 40px 12px 16px; margin-bottom: 8px;
    box-shadow: none; min-height: 56px; }
  .dlv-table.dz-cards td[data-label="Type"], .dlv-table.dz-cards td[data-label="Gekoppeld"],
  .dlv-table.dz-cards td[data-label="Sprint"], .dlv-table.dz-cards td[data-label="Verantwoordelijke"],
  .dlv-table.dz-cards td[data-label="Fase"], .dlv-table.dz-cards td[data-label="Epic"] { display: none; }
  .dlv-table.dz-cards td[data-label="Titel"] { order: -3; flex: 1 0 100%; padding: 0; font-size: 16px; font-weight: 600;
    line-height: 1.35; letter-spacing: -.01em; }
  .dlv-table.dz-cards td[data-label="Titel"] .dlv-tit { max-width: none; display: inline; }
  .dlv-table.dz-cards td[data-label="Titel"]::before { display: none; }
  .dlv-table.dz-cards td.card-title { order: -2; flex: none; padding: 0; margin: 0; border: 0; font-size: 12px;
    font-weight: 500; font-family: var(--mono); color: var(--text-3); letter-spacing: 0; }
  .dlv-table.dz-cards td.card-title .dlv-id { font-weight: 500; }
  .dlv-table.dz-cards td[data-label="Proces"] { order: -1; flex: 1 1 calc(100% - 140px); min-width: 0; font-size: 14px; color: var(--text-3); }
  .dlv-table.dz-cards td[data-label="Proces"] .dlv-proc { max-width: none; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: block; min-width: 0; }
  .dlv-table.dz-cards td[data-label="Proces"]::before { content: "·"; font-size: 14px; font-weight: 400; color: var(--text-3); }
  .dlv-table.dz-cards td[data-label="Status"], .dlv-table.dz-cards td[data-label="Prioriteit"] { margin-top: 4px; flex: none; }
  .dlv-table.dz-cards td[data-label="Status"]::before, .dlv-table.dz-cards td[data-label="Prioriteit"]::before { display: none; }
  .dlv-table.dz-cards td[data-label="Status"]:has(> .muted), .dlv-table.dz-cards td[data-label="Prioriteit"]:has(> .muted) { display: none; }

  /* V1: een tik op de kaart selecteerde voor het voorbeeldpaneel, en dat paneel bestaat niet op
     een telefoon: er gebeurde niets. De titel (die het detail opent) strekt nu over de hele
     kaart, met een chevron als teken dat de rij verder gaat. */
  .dlv-table.dz-cards .dlv-tit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .dlv-table.dz-cards tr::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-top: 2px solid var(--text-faint); border-right: 2px solid var(--text-faint); transform: rotate(45deg); }
  .dlv-table.dz-cards tr:active { background: var(--surface-2); }
  /* Selectie hoort bij het voorbeeldpaneel; zonder paneel is een paarse streep alleen ruis. */
  .dlv-table.dz-cards tr.sel, .dlv-table.dz-cards tr.sel td { background: var(--surface); }
  .dlv-table.dz-cards tr.sel td:first-child { box-shadow: none; }
}

/* ---- beslissingen */
@media (max-width: 640px) {
  /* B2: zeven label/waarde-paren per kaart werd titel met het besluit rechts, en één regel met
     omvang en fase. Domein staat in het filter en in het detail, tabellen, vertrouwen en effort
     in het detail: tien kaarten passen nu op anderhalf scherm in plaats van drie. */
  .dec-page .dec-table2.dz-cards tr { gap: 4px 8px; padding: 12px 16px; margin-bottom: 8px; box-shadow: none; min-height: 56px; }
  .dec-page .dec-table2 td[data-label="Domein"], .dec-page .dec-table2 td[data-label="Tabellen"],
  .dec-page .dec-table2 td[data-label="Vertrouwen"], .dec-page .dec-table2 td[data-label="Effort"],
  .dec-page .dec-table2 td[data-label="Indic. effort"] { display: none; }
  .dec-page .dec-table2.dz-cards td.card-title { order: 0; flex: 1 1 calc(100% - 136px); min-width: 0; border: 0; padding: 0;
    margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
  .dec-page .dec-table2.dz-cards td[data-label="Besluit"] { order: 1; flex: none; margin-left: auto; align-self: flex-start; }
  .dec-page .dec-table2.dz-cards td[data-label="Besluit"]::before { display: none; }
  .dec-page .dec-table2.dz-cards td[data-label="Omvang"], .dec-page .dec-table2.dz-cards td[data-label="Fase"] { order: 2; }
  .dec-page .dec-table2.dz-cards td[data-label="Omvang"]::before, .dec-page .dec-table2.dz-cards td[data-label="Fase"]::before {
    color: var(--text-3); font-weight: 500; }
  .dec-page .dec-table2.dz-cards tr:active { background: var(--surface-2); }
  /* B8: de gekozen kaart krijgt alleen de zachte accentvulling, geen gekleurde zijstreep. */
  .dec-page .dec-row.selected { box-shadow: none; border-color: var(--pri-soft); }

  /* B3: de actieve paginaknop stond met de "1" linksboven in een paars vlak. */
  .dec-pager .dec-pagenum.active { align-items: center; justify-content: center; }
  .dec-pager { padding: 12px 0; border: 0; font-size: 14px; }

  /* B1: het detail landt onder de topbalk als de lijst er na een tik naartoe schuift. */
  .dec-page .dec-detail { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  /* B4: een beschrijving van vijf regels rechts uitgelijnd naast een grijs label las rafelig.
     Label boven de waarde, zoals op een iOS-detailscherm. */
  .dec-page .dec-sum-row { flex-direction: column; gap: 2px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
  .dec-page .dec-sum-row:last-child { border-bottom: 0; }
  .dec-page .dec-sum-k { font-size: 12px; }
  .dec-page .dec-sum-v { text-align: left; }
  /* B5: "NOTITIES AANWEZIG" in hoofdletters brak over twee regels in de kop van het blok. */
  .dec-page .dec-notitie-hint .tag { white-space: nowrap; text-transform: none; letter-spacing: 0; }
  .dec-page .dec-notitie { font-size: 14px; }
  .dec-page .dec-op-label { font-size: 12px; }
  .dec-page .dec-op { font-size: 16px; }
  /* B7: vijf punten vaste uitleg onder het werk. Staat op desktop; op de telefoon is het ruis. */
  .dec-page .dec-agenda { display: none; }
}

/* ---- projectplan */
@media (max-width: 640px) {
  /* P1: het fasefilter viel uit elkaar: een pilgroep waarin "In MVP", "Fase 1" en "Fase 2" over
     twee regels braken, en "Buiten MVP" en "Alles" los op een derde regel. Nu één chiprij van
     44px die horizontaal scrolt, met een zachte rand rechts als teken dat er meer is. */
  .report .phase-filter { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    scrollbar-width: none; gap: 8px; margin: 0 -16px 16px; padding: 2px 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .report .phase-filter::-webkit-scrollbar { display: none; }
  .report .phase-filter-label { display: none; }
  .report .phase-group { flex: none; display: contents; }
  .report .phase-group-pills { display: contents; }
  .report .phase-pill, .report .phase-group-head { flex: none; min-height: 44px; white-space: nowrap; font-size: 14px;
    padding: 0 16px; scroll-snap-align: start; }
  .report .phase-pill .phase-count { font-size: 12px; }
  .report .phase-pill:last-child { margin-right: 24px; }

  /* P5: de alinea onder de kengetallen herhaalt de getallen. Hij blijft (het is het voorstel in
     één zin), maar als secundaire tekst. */
  .report > .dash-grid ~ .report-narr { font-size: 14px; line-height: 1.55; color: var(--text-2); margin-bottom: 24px; }

  /* P2 + P3: de fasering. De uitleg liep zonder ruimte tegen de eerste kaart aan, en elke fase
     was een kaart in een kaart met drie gelabelde regels. Nu een lijst met haarlijnen: naam en
     status op één regel, daaronder de startdatum met de actie ernaast. */
  .report .panel:has(.tf-fasen) .tbl-wrap > .muted { font-size: 14px !important; padding: 12px 16px !important; } /* inline 12.5px */
  .report .tf-fasen.dz-cards tr { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    box-shadow: none; margin: 0; padding: 12px 16px; gap: 8px 12px; align-items: flex-end; }
  .report .tf-fasen.dz-cards td.card-title { flex: 1 1 calc(100% - 140px); border: 0; padding: 0; margin: 0; font-size: 16px; align-self: center; }
  .report .tf-fasen.dz-cards td[data-label="Status"] { flex: none; align-self: center; }
  .report .tf-fasen.dz-cards td[data-label="Status"]::before { display: none; }
  .report .tf-fasen.dz-cards td[data-label="Startdatum"] { flex: 1 1 150px; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .report .tf-fasen.dz-cards td[data-label="Startdatum"] .input { width: 100%; min-width: 0; }
  .report .tf-fasen.dz-cards td[data-label="Actie"] { flex: 1 1 auto; }
  .report .tf-fasen.dz-cards td[data-label="Actie"] .btn { width: 100%; justify-content: center; }
  .report .tf-fasen.dz-cards td[data-label="Actie"]::before { display: none; }
  .report .tf-fasen.dz-cards td[data-label="Actie"] .btn { min-height: 44px; }
  .report .tf-fasen.dz-cards td[data-label="Actie"]:empty { display: none; }

  /* P4: de tijdlijn onder de balk: per fase één regel met mensdagen en weken, en de periode. */
  .report .panel:has(.gantt) .dz-cards tr { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    box-shadow: none; margin: 0; padding: 12px 16px; gap: 2px 6px; }
  .report .panel:has(.gantt) .dz-cards td.card-title { flex: 1 0 100%; border: 0; padding: 0 0 2px; margin: 0; font-size: 16px; }
  .report .panel:has(.gantt) .dz-cards td:not(.card-title) { font-size: 14px; color: var(--text-2); }
  .report .panel:has(.gantt) .dz-cards td:not(.card-title)::before { display: none; }
  .report .panel:has(.gantt) .dz-cards td[data-label="Mensdagen"]::after { content: "mensdagen ·"; margin-left: -1px; }
  .report .panel:has(.gantt) .dz-cards td[data-label="Duur (wk)"]::after { content: "weken"; }
  .report .panel:has(.gantt) .dz-cards td[data-label="Duur (wk)"] { flex: 1 0 50%; }
  .report .panel:has(.gantt) .dz-cards td[data-label="Eind"]::before { display: inline; content: "–"; font-size: 14px;
    font-weight: 400; color: var(--text-3); }
  .report .gantt-seg-l { font-size: 12px; }
  .report .gantt-axis { font-size: 12px; }
}

/* ---- scope & budget */
@media (max-width: 640px) {
  /* L4: de kopregel noemt de actieve baseline al ("... goedgekeurd op 22 sep"); de paarse chip
     met dezelfde zin eronder was een herhaling. */
  .content:has([data-act="ctrl-sub"]) > .pa-head .pa-head-actions .tag-violet { display: none; }
  /* C4: de oproep zonder baseline houdt zijn zachte amberkleur, zonder extra rand. */
  .content:has([data-act="ctrl-sub"]) .ctrl-cta { border-color: transparent; font-size: 14px; }
  .content:has([data-act="ctrl-sub"]) .ctrl-cta .btn { min-height: 44px; }
  /* C2 + C3: een paneel met één vervolgactie. Die zat los onder de kop of rechts onderin; nu een
     volle knop onderaan het paneel, en de kopknop van het eventlog blijft naast de titel staan. */
  .content:has([data-act="ctrl-sub"]) [data-act="ctrl-budget"],
  .content:has([data-act="ctrl-sub"]) [data-act="ctrl-changes"] { width: 100%; justify-content: center; min-height: 44px; font-size: 14px; }
  .content:has([data-act="ctrl-sub"]) .panel-head:has(> [data-act="ctrl-sub"]) { flex-wrap: nowrap; }
  .content:has([data-act="ctrl-sub"]) .panel-head > [data-act="ctrl-sub"] { flex: none; min-height: 44px; border-color: transparent;
    background: none; color: var(--pri-text); padding: 0 4px; }
  .content:has([data-act="ctrl-sub"]) .ctrl-note { font-size: 14px; }
  .content:has([data-act="ctrl-sub"]) .ctrl-leg-s { font-size: 12px; }

  /* C1: negen domeinkaarten van vijf gelabelde bedragen plus een losse stip op een eigen regel.
     Nu een lijst: de statusstip voor de naam, budget en forecast als één regel (uitgevoerd staat
     in het detail), en de voortgang als volle balk eronder. De hele rij opent het domein. */
  tr[data-act="ctrl-open-domein"] { position: relative; gap: 4px 12px; padding: 12px 40px 12px 16px; margin-bottom: 8px;
    box-shadow: none; min-height: 56px; }
  tr[data-act="ctrl-open-domein"] > td.card-title { order: 0; flex: 1 1 calc(100% - 24px); border: 0; padding: 0; margin: 0; font-size: 16px; }
  tr[data-act="ctrl-open-domein"] > td:last-child { order: -1; flex: none; padding: 0; }
  tr[data-act="ctrl-open-domein"] > td:last-child::before { display: none; }
  tr[data-act="ctrl-open-domein"] > td[data-label="Uitgevoerd"] { display: none; }
  tr[data-act="ctrl-open-domein"] > td[data-label="Budget"],
  tr[data-act="ctrl-open-domein"] > td[data-label="Forecast"],
  tr[data-act="ctrl-open-domein"] > td[data-label="Open"] { order: 1; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  tr[data-act="ctrl-open-domein"] > td:has(.bar) { order: 2; flex: 1 0 100%; flex-direction: row-reverse; align-items: center; gap: 8px; min-width: 0 !important; } /* inline min-width 110px */
  tr[data-act="ctrl-open-domein"] > td:has(.bar)::before { display: none; }
  tr[data-act="ctrl-open-domein"] > td:has(.bar) .bar { flex: 1; min-width: 0; }
  tr[data-act="ctrl-open-domein"] > td:has(.bar) .bar-meta { margin: 0 !important; flex: none; font-size: 12px; } /* inline marge */
  tr[data-act="ctrl-open-domein"]::after { content: ""; position: absolute; right: 18px; top: 20px; width: 8px; height: 8px;
    border-top: 2px solid var(--text-faint); border-right: 2px solid var(--text-faint); transform: rotate(45deg); }
  tr[data-act="ctrl-open-domein"]:active { background: var(--surface-2); }
  .content:has([data-act="ctrl-sub"]) .panel:has(tr[data-act="ctrl-open-domein"]) { background: transparent; border: 0; box-shadow: none; }
  .content:has([data-act="ctrl-sub"]) .panel:has(tr[data-act="ctrl-open-domein"]) > .panel-head { padding: 8px 0; border: 0; }
  .content:has([data-act="ctrl-sub"]) .panel:has(tr[data-act="ctrl-open-domein"]) .tbl-wrap { overflow: visible; }

  /* L1: zes kaarten met elk "Baseline 83 Nu 95 Verschil +12" worden rijen van 56px: de maat links
     met de baseline eronder, rechts het getal van nu groot en het verschil als chip. */
  .tf-bl-vergelijk .dz-cards tr, .tf-scope-tabel.dz-cards tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "naam nu delta" "basis nu delta";
    align-items: center; gap: 0 12px; min-height: 56px; margin: 0; padding: 8px 16px; background: transparent;
    border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .tf-bl-vergelijk .dz-cards td, .tf-scope-tabel.dz-cards td { padding: 0; }
  .tf-bl-vergelijk .dz-cards td.card-title, .tf-scope-tabel.dz-cards td.card-title { grid-area: naam; border: 0; margin: 0; padding: 0; font-size: 16px; font-weight: 500; }
  .tf-bl-vergelijk .dz-cards td:nth-child(2), .tf-scope-tabel.dz-cards td:nth-child(2) { grid-area: basis; font-size: 12px; color: var(--text-3); justify-content: flex-start; gap: 4px; }
  .tf-bl-vergelijk .dz-cards td:nth-child(3), .tf-scope-tabel.dz-cards td:nth-child(4) { grid-area: nu; font-size: 18px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tf-bl-vergelijk .dz-cards td:nth-child(3)::before, .tf-scope-tabel.dz-cards td:nth-child(4)::before,
  .tf-bl-vergelijk .dz-cards td:nth-child(4)::before, .tf-scope-tabel.dz-cards td:nth-child(5)::before { display: none; }
  .tf-bl-vergelijk .dz-cards td:nth-child(4), .tf-scope-tabel.dz-cards td:nth-child(5) { grid-area: delta; justify-self: end; min-width: 40px;
    justify-content: center; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
  .tf-bl-vergelijk .dz-cards td.tf-bl-delta-plus { background: var(--amber-soft); }
  .tf-bl-vergelijk .dz-cards td.tf-bl-delta-min { background: var(--green-soft); }
  /* O1: "Actieve baseline (= 1.0.0) idem" en "t.o.v. 1.0.0" herhaalden de kop. Staat de actieve
     baseline gelijk aan 1.0.0, dan vervalt die kolom; het verschil toont alleen het getal. */
  .tf-scope-tabel.dz-cards td:nth-child(3):has(> .muted) { display: none; }
  .tf-scope-tabel.dz-cards td:nth-child(3):not(:has(> .muted)) { grid-column: 1; font-size: 12px; color: var(--text-3); }
  .tf-scope-tabel.dz-cards td.tf-scope-deltas:not(:has(br)) > .muted:not(:first-child) { display: none; }
  .tf-scope-tabel.dz-cards td:nth-child(5):has(.tf-scope-delta-plus) { background: var(--amber-soft); }
  .tf-scope-tabel.dz-cards td:nth-child(5):has(.tf-scope-delta-min) { background: var(--green-soft); }
  .content:has([data-act="ctrl-sub"]) .tf-scope-sub { font-size: 14px; padding: 12px 16px; }
  .content:has([data-act="ctrl-sub"]) .tf-scope-kop .muted, .content:has([data-act="ctrl-sub"]) .tf-bl-kop .muted { font-size: 14px; }

  /* De baselinetabellen (huidige baseline, historie) als lijst in het paneel in plaats van
     kaarten in een kaart; de versie die je vergelijkt krijgt de zachte accentvulling in plaats
     van een gekleurde zijstreep. */
  .tf-bl-tabel.dz-cards tr { margin: 0; padding: 12px 16px; background: transparent; border: 0; border-top: 1px solid var(--border);
    border-radius: 0; box-shadow: none; }
  .tf-bl-tabel.dz-cards td.card-title { border: 0; padding: 0; margin: 0; font-size: 16px; }
  .tf-bl-tabel.dz-cards tr.tf-bl-rij-nu { background: var(--pri-soft); }
  .tf-bl-tabel.dz-cards tr.tf-bl-rij-nu td:first-child { box-shadow: none; }
  .tf-bl-tabel.dz-cards td { font-size: 14px; }

  /* L2: de vergelijkingskop was drie regels van 18px met "Sluiten" als losse knop eronder. */
  .tf-bl-vergelijk > .panel-head { flex-wrap: nowrap; align-items: flex-start; }
  .tf-bl-vergelijk > .panel-head .panel-title { font-size: 16px; line-height: 1.35; min-width: 0; }
  .tf-bl-vergelijk > .panel-head [data-act="ctrl-bl-vergelijk-sluit"] { flex: none; width: 44px; min-width: 44px; height: 44px;
    padding: 0; margin: -8px -8px 0 0; font-size: 0; border-color: transparent; background: none; justify-content: center; }
  .tf-bl-vergelijk > .panel-head [data-act="ctrl-bl-vergelijk-sluit"]::before { content: "\00d7"; font-size: 24px; line-height: 1;
    font-weight: 400; color: var(--text-2); }
  .tf-bl-vergelijk .tf-bl-kolommen h4 { font-size: 14px; }
  .tf-bl-vergelijk .tf-bl-leeg, .tf-bl-vergelijk .tf-bl-lijst { font-size: 14px; }

  /* O2: de legenda van de grafiek als één scrollende chiprij in plaats van twee regels pillen. */
  .content:has([data-act="ctrl-sub"]) .tf-scope-grafiek .tf-scope-pillen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 12px; padding: 0 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .content:has([data-act="ctrl-sub"]) .tf-scope-grafiek .tf-scope-pillen::-webkit-scrollbar { display: none; }
  .content:has([data-act="ctrl-sub"]) .tf-scope-grafiek .tf-scope-pil { flex: none; white-space: nowrap; }
  .content:has([data-act="ctrl-sub"]) .tf-scope-grafiek .tf-scope-pil:last-child { margin-right: 24px; }
}

/* ---- wijzigingen (lijst) */
@media (max-width: 640px) {
  /* W1: de statustabs werden afgesneden ("Wa") zonder teken dat er meer was. Nu een scrollende
     tabrij van 44px met een zachte rand, zoals de andere tabrijen in de app. */
  .wz-overview .wz-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; padding-bottom: 0;
    margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .wz-overview .wz-tabs::-webkit-scrollbar { display: none; }
  .wz-overview .wz-tab { flex: none; min-height: 44px; white-space: nowrap; font-size: 14px; padding: 0 12px; }
  .wz-overview .wz-tab:last-child { margin-right: 24px; }

  /* W2: het filterblok nam 230px in, met een volle knop "Filters wissen" die er ook zonder filter
     stond. Zoeken en domein over de volle breedte, "alleen mijn" met rechts ernaast een tekstlink
     om te wissen. */
  .wz-overview .wz-filters { gap: 8px 12px; margin-bottom: 16px; }
  .wz-overview .wz-filters .wz-search { flex: 1 0 100%; }
  .wz-overview .wz-filters .filter-select { flex: 1 0 100%; width: auto; min-width: 0; }
  .wz-overview .wz-filters .wz-check { flex: none; font-size: 14px; }
  .wz-overview .wz-filters [data-act="wz-clearfilters"] { flex: 0 0 auto; width: auto; margin-left: auto !important;
    border: 0; background: none; box-shadow: none; color: var(--pri-text); padding: 0 4px; font-size: 14px; }

  /* Geen kaart-in-kaart: de verzoeken staan direct op de pagina. */
  .wz-overview > .panel { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .wz-overview > .panel > .panel-head { padding: 8px 0 12px; border: 0; gap: 8px; }
  .wz-overview > .panel .tbl-wrap { overflow: visible; }

  /* W3-W5: de kaart. De rij was al tikbaar, maar er stond ook nog een losse "Bekijk"-link van 20px
     onderaan: die vervalt voor een chevron. De omschrijving (de belangrijkste zin) was grijs en
     vet, nu gewone tekst. Status en impact als chips, "wacht op" en de datum als één grijze regel.
     Het domein staat in het detail. */
  .wz-overview .dz-cards tr.proc-row { position: relative; gap: 4px 8px; padding: 12px 40px 12px 16px; margin-bottom: 8px;
    box-shadow: none; min-height: 56px; }
  .wz-overview .dz-cards tr.proc-row::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-top: 2px solid var(--text-faint); border-right: 2px solid var(--text-faint); transform: rotate(45deg); }
  .wz-overview .dz-cards tr.proc-row:active { background: var(--surface-2); }
  .wz-overview .dz-cards tr.proc-row > td:last-child:has(.link-btn) { display: none; }
  .wz-overview .dz-cards td.card-title { border: 0; padding: 0; margin: 0 0 4px; font-size: 16px; }
  .wz-overview .wz-cell-titel { font-size: 16px; }
  .wz-overview .wz-cell-titel > b { font-weight: 600; }
  .wz-overview .wz-cell-titel > .tag { white-space: nowrap; margin-left: 6px; vertical-align: 1px; }
  .wz-overview .dz-cards td.card-title .tf-wz-oms { display: block; margin-top: 4px; font-size: 14px; font-weight: 400;
    color: var(--text-2); line-height: 1.45; }
  .wz-overview .dz-cards td[data-label="Domein"] { display: none; }
  .wz-overview .dz-cards td[data-label="Status"] { order: 1; }
  .wz-overview .dz-cards td[data-label="Impact"] { order: 2; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .wz-overview .dz-cards td[data-label="Status"]::before, .wz-overview .dz-cards td[data-label="Impact"]::before { display: none; }
  .wz-overview .dz-cards td[data-label="Wacht op"] { order: 3; flex: 1 0 100%; font-size: 14px; color: var(--text-3); gap: 4px; }
  .wz-overview .dz-cards td[data-label="Wacht op"]::before { content: "Wacht op"; font-size: 14px; font-weight: 400; color: var(--text-3); }
  .wz-overview .dz-cards td[data-label="Laatste update"] { order: 4; font-size: 12px; color: var(--text-3); margin-top: -2px; }
  .wz-overview .dz-cards td[data-label="Laatste update"]::before { content: "Bijgewerkt"; font-size: 12px; font-weight: 400; }
}

/* ---- wijzigingen (detail) */
@media (max-width: 640px) {
  /* Leesvolgorde op de telefoon: wat er gevraagd wordt, wat er verandert, wat het kost, en dan
     meteen het besluit. De artefacten, het log en de herkomst komen daarna; op desktop staat het
     besluit in de rechterkolom en verandert er niets. */
  .wz-detail .wz-cols { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .wz-detail .wz-main, .wz-detail .wz-rail { display: contents; }
  .wz-detail .wz-main > :nth-child(1) { order: 1; }
  .wz-detail .wz-main > .tf-wz-diff { order: 2; }
  .wz-detail .wz-rail > :nth-child(2) { order: 3; }
  .wz-detail .wz-rail > .tf-wz-beoordeling { order: 4; }
  .wz-detail .wz-main > .tf-wz-art { order: 5; }
  .wz-detail .wz-main > :nth-child(4) { order: 6; }
  .wz-detail .wz-rail > :nth-child(3) { order: 7; }

  /* X1: "Afwijzen" (rood) stond direct onder de primaire knop, 8px ertussen: één mistik wees af.
     Nu eerst goedkeuren, dan parkeren, en afwijzen apart eronder met ruimte ervoor. */
  .wz-detail .wz-decision-actions .btn-primary { order: 1; min-height: 48px; font-size: 16px; }
  .wz-detail .wz-decision-actions [data-act="tf6-parkeren-open"] { order: 2; min-height: 44px; }
  .wz-detail .wz-decision-actions .wz-reject { order: 3; margin-top: 16px; min-height: 44px; }

  /* X2: de diffblokken droegen een gekleurde zijstreep; de soort staat al in de kop. Het icoon
     in de kop houdt de kleur, zodat de betekenis blijft. */
  .wz-detail .tf-wz-diff-stap { border-left-width: 1px; border-left-color: var(--border); }
  .wz-detail .tf-wz-diff-stap.is-gewijzigd .tf-wz-diff-kop .ic { color: var(--amber-strong); }
  .wz-detail .tf-wz-diff-stap.is-toegevoegd .tf-wz-diff-kop .ic { color: var(--green-strong); }
  .wz-detail .tf-wz-diff-stap.is-verwijderd .tf-wz-diff-kop .ic { color: var(--red-strong); }
  .wz-detail .tf-wz-diff-stap.is-kop .tf-wz-diff-kop .ic, .wz-detail .tf-wz-diff-stap.is-volgorde .tf-wz-diff-kop .ic { color: var(--blue-text); }
  .wz-detail .tf-wz-diff-kop { font-size: 14px; }
  .wz-detail .tf-wz-diff > .panel-head .muted { font-size: 14px !important; } /* inline 12.5px */

  /* X3: een bedrag breekt niet na het euroteken. */
  .wz-detail .cr-budget-row { font-size: 14px; }
  .wz-detail .cr-budget-row b { white-space: nowrap; }

  /* X4: drie keer "Genereren op het voorstel" met elk een regel "Nog niet gegenereerd": de knop
     zegt dat al. Wat blijft is per soort een rij met de telling en de knop. */
  .wz-detail .tf-wz-art-rij > .muted { display: none; }
  .wz-detail .tf-wz-art-noot { font-size: 14px; }
  .wz-detail .tf-wz-uitleg { font-size: 14px; }
}

/* ---- roadmap */
@media (max-width: 640px) {
  /* R1: de hero droeg een diagonale indigo-gradient en een kaartrand; de typografie draagt hem. */
  .rm .rm-hero { background: var(--surface); border-color: transparent; box-shadow: none; padding: 20px 16px; }
  .rm .rm-title { font-size: 24px; line-height: 1.25; }
  .rm .rm-lead { font-size: 16px; line-height: 1.55; }
  .rm .rm-chip { font-size: 12px; }
  .rm .rm-note { font-size: 14px; border-color: transparent; }

  /* R2: kaarten met rand en schaduw binnen een paneel (met een groene rand): dubbele kaders en
     een tekstkolom van 260px. Binnen een paneel worden ze een lijst met haarlijnen; de chip
     "live" zegt al wat de groene rand zei. */
  .rm .panel .rm-card, .rm .panel .rm-ask-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    box-shadow: none; padding: 12px 0; background: transparent; }
  .rm .panel .rm-card:last-child, .rm .panel .rm-ask-item:last-child { border-bottom: 0; }
  .rm .panel .rm-cards, .rm .panel .rm-ask-grid { gap: 0; padding: 0 16px; margin-bottom: 0; }
  .rm .rm-nu { border-color: var(--border); }

  /* R4: tekst op de typeschaal: 14px voor lopende tekst, 12px voor labels. */
  .rm .rm-card-t, .rm .rm-phase-t { font-size: 16px; }
  .rm .rm-card-x, .rm .rm-veld-v, .rm .rm-veld-k, .rm .rm-value-list li, .rm .rm-phase-g > div, .rm .rm-figcap { font-size: 14px; }
  .rm .rm-l, .rm .rm-live { font-size: 12px; }

  /* R3: de tekening schuift binnen haar kader; een zachte rand rechts laat zien dat er meer is. */
  .rm .rm-figure { scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
}

@media (max-width: 400px) {
  /* Op 320 past "Procesnotities" plus de chip niet op één regel: dan gaat de chip eronder, heel. */
  .dec-page .dec-notitie-toggle { flex-wrap: wrap; row-gap: 4px; }
  /* Twee keuzes naast elkaar op 320: minder binnenmarge, zodat "Geen sprint" heel blijft. */
  .del-table-panel .dz-cards td select { padding-left: 10px; padding-right: 26px; }
}

/* ---- minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .dlv-doc-tags .review-chip .dlv-link { transition: none; }
  .dlv-doc-tags .review-chip .dlv-link:active { transform: none; }
}

/* ======== 4.7 Landschap, informatiebehoeften, AI-features, feature requests ======== */
/* ---- applicatielandschap (.ls) ----
   Sinds het herontwerp (okt 2026) staat de opmaak van de tabbladen in styles/landschap.css, met een
   eigen telefoonblok. Hier alleen nog de lijst per laag die de Kaart en de Dekking op de telefoon
   zijn (lsKaart.js en lsDekking.js): een paneel per laag, rijen van 56px die de hele rij als tikdoel
   hebben. Teksten wikkelen: afgekapt verdween juist de naar-applicatie. */
@media (max-width: 640px) {
  .ls .ls-mlijst { display: flex; flex-direction: column; gap: 16px; }
  .ls .ls-mbaan { box-shadow: none; }
  .ls .ls-mbaan-kop { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
  .ls .ls-mbaan-kop h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
  .ls .ls-mbaan-kop .count-chip { font-size: 12px; padding: 0 8px; }
  .ls .ls-mrij { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px;
    border-top: 1px solid var(--sunken); -webkit-tap-highlight-color: transparent;
    transition: background-color var(--m-t2) var(--m-ease); }
  .ls .ls-mbaan-kop + .ls-mrij { border-top: 0; }
  .ls .ls-mrij[data-act] { cursor: pointer; }
  .ls .ls-mrij[data-act]:active { background: var(--sunken); }
  .ls .ls-mrij .ls-listmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .ls .ls-mrij .ls-listmain b { font-size: 16px; font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
  .ls .ls-mrij .ls-listmain span { font-size: 14px; line-height: 1.4; color: var(--text-3); margin-top: 0; overflow-wrap: break-word; }
  .ls .ls-mkv .ls-listmain b .ic { font-size: 14px; color: var(--text-faint); vertical-align: -1px; margin: 0 2px; }
  .ls .ls-hint { font-size: 12px; }
}

/* ---- informatiebehoeften */
@media (max-width: 640px) {
  /* I1: de lijst is waar de pagina voor is. De twee AI-panelen (afleiden, workshops) zakken
     naar onder de lijst; op de desktop staan ze erboven. Sinds het zoekveld van DZ.tabelUI haakt
     dit aan de werkbalk .ib-toolbar (informatie.js). */
  .content:has(> .ib-toolbar) { display: flex; flex-direction: column; }
  .content:has(> .ib-toolbar) > .panel:has(~ .ib-toolbar) { order: 1; margin-top: 8px; }

  /* I2: "Nieuwe behoefte" als eerste, over de volle breedte; het zoekveld eronder. */
  .ib-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ib-toolbar .toolbar-r { order: -1; width: 100%; margin-left: 0; }
  .ib-toolbar [data-act="ib-new"] { flex: 1 1 100%; min-height: 44px; justify-content: center; font-size: 16px; }

  /* I4: de lege staat draagt zijn eigen actie (informatie.js, alleen telefoon). */
  .ib-mleegknop { margin-top: 16px; min-height: 44px; }

  /* I5: rol-invoer en startknop elk over de volle breedte; de placeholder werd afgekapt.
     De inline max-width komt uit informatie.js. */
  #ib-ws-rol { max-width: none !important; flex: 1 1 100%; }
  .panel-pad:has(> div > #ib-ws-rol) [data-act="ib-ws-start"] { flex: 1 1 100%; min-height: 44px; justify-content: center; }
  .panel-pad:has([data-edit="ib-afleid-domein"]) [data-edit="ib-afleid-domein"] { max-width: none !important; flex: 1 1 100%; }
  .panel-pad:has([data-edit="ib-afleid-domein"]) [data-act="ib-afleiden"] { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  .panel-pad:has([data-edit="ib-afleid-domein"]) [data-act="ib-afleid-paste"] { flex: 1 1 100%; min-height: 44px; justify-content: center;
    background: none; border-color: transparent; box-shadow: none; color: var(--pri-text); }
  /* In een leeg project staat de lege staat (met zijn knop) bovenaan en volgen de AI-panelen. */
  .content > .empty:has(.ib-mleegknop) { padding: 24px 16px 32px !important; }
  .content > .empty:has(.ib-mleegknop) + .panel { margin-top: 8px; }
  .panel-pad:has([data-edit="ib-afleid-domein"]) .muted, .panel-pad:has(> div > #ib-ws-rol) .muted { font-size: 14px !important; line-height: 1.5; }

  /* D3: terugknop, code en tags op één rustige regel die netjes wikkelt. */
  .cr-detail:has(.ib-mkern) .cr-detail-head > div { gap: 8px !important; row-gap: 8px; }
  .cr-detail:has(.ib-mkern) .cr-detail-head .btn-ghost { padding-left: 0; }

  /* D1: status en dekking bovenaan (informatie.js, kernPanel). */
  .ib-mkern { margin: 8px 0 16px; padding: 4px 16px; box-shadow: none; }
  .ib-mkern-rij { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 52px; padding: 4px 0; }
  .ib-mkern-rij + .ib-mkern-rij { border-top: 1px solid var(--sunken); }
  .ib-mkern-l { font-size: 14px; color: var(--text-3); }
  .ib-mkern .select { width: 100%; }
  .ib-mkern-dek { font-size: 16px; }
  .ib-mkern-dek p { font-size: 14px !important; }
  .ib-mkern .btn { justify-self: start; min-height: 44px; }

  /* D2: een leeg voorbeeldvak van 260px ("Selecteer een bijlage") is op de telefoon lucht. */
  .cr-detail:has(.ib-mkern) .att-preview:has(> .att-preview-empty) { display: none; }

  /* De behoeftekaart had negen velden en een losse "Bekijk"; de hele rij opent de behoefte al.
     Nu een lijstrij binnen het rolpaneel: de behoefte zelf, daaronder code, status en dekking.
     Doel, moment en vorm staan in het detail. */
  .dz-cards:has(tr[data-act="ib-open"]) tr.proc-row { margin: 0; padding: 12px 40px 12px 16px; border: 0; border-top: 1px solid var(--sunken);
    border-radius: 0; box-shadow: none; background: none; gap: 4px 8px; position: relative; min-height: 56px; }
  .dz-cards:has(tr[data-act="ib-open"]) tr.proc-row:first-child, .dz-cards:has(tr[data-act="ib-open"]) tr.group-row + tr.proc-row { border-top: 0; }
  .dz-cards:has(tr[data-act="ib-open"]) tr.proc-row::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-right: 2px solid var(--text-faint); border-top: 2px solid var(--text-faint); transform: rotate(45deg); }
  .dz-cards:has(tr[data-act="ib-open"]) td[data-label="Behoefte"] { order: -1; flex: 1 0 100%; font-size: 16px; font-weight: 500; line-height: 1.35; }
  .dz-cards:has(tr[data-act="ib-open"]) td.card-title { flex: 0 0 auto; border: 0; padding: 0; margin: 0; font-size: 14px; font-weight: 400; }
  .dz-cards:has(tr[data-act="ib-open"]) td.card-title .cr-code { color: var(--text-3); }
  .dz-cards:has(tr[data-act="ib-open"]) td::before { display: none; }
  .dz-cards:has(tr[data-act="ib-open"]) td:is([data-label="Doel"], [data-label="Moment"], [data-label="Vorm"], [data-label="Gaat naar"], [data-label="Bron"], [data-label="Trigger"]) { display: none; }
  /* Eén tabel met een groepskop per rol (DZ.tabelUI): de kop is de rolnaam met telling, geen kaart. */
  .dz-cards:has(tr[data-act="ib-open"]) tr.group-row { border-radius: 0; box-shadow: none; background: none; }
  .dz-cards:has(tr[data-act="ib-open"]) tr.group-row td { padding: 14px 16px 6px; font-size: 14px; font-weight: 600; }
  .dz-cards:has(tr[data-act="ib-open"]) td[data-label="Dekking"] .muted { font-size: 14px !important; }
  .dz-cards:has(tr[data-act="ib-open"]) td[data-label="Dekking"] { order: 1; }
  .panel:has(tr[data-act="ib-open"]) > .tbl-wrap { padding: 0; }
}

/* ---- AI-features */
@media (max-width: 640px) {
  /* A1: Lijst/Per domein is een weergavekeuze, geen actie: een segment zoals Huidig/Nieuw op het
     landschap, in plaats van een massieve indigo knop. De inline stijl komt uit aifeatures.js. */
  .toolbar-r:has([data-act="ai-view-list"]) > div { display: flex !important; width: 100%; gap: 2px !important; padding: 2px;
    border-radius: 12px; background: var(--sunken); }
  .toolbar-r [data-act^="ai-view-"] { flex: 1 1 0; min-height: 40px; border: 0; border-radius: 10px; background: none; box-shadow: none;
    color: var(--text-2); font-size: 14px; font-weight: 500; }
  .toolbar-r [data-act^="ai-view-"].btn-primary { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
  .toolbar-r [data-act^="ai-view-"] .ic { color: inherit; }
  .toolbar .mob-filterbtn .count-chip { background: var(--pri); color: #fff; font-size: 12px; padding: 0 6px; min-width: 20px; text-align: center; }

  /* A2: titel en telling zeiden twee keer hetzelfde; de uitleg staat al in de paginatekst. */
  /* De inline display komt uit aifeatures.js. */
  .panel-head:has(#dz-ai-count) > .muted { display: none !important; }
  /* A3: de lege staat was een kaart binnen het paneel (dubbele rand en schaduw). */
  .dz-cards tr:has(> td[colspan] .empty) { border: 0; box-shadow: none; background: none; padding: 0; margin: 0; }
  #dz-ai-tbody tr:has(> td[colspan] .empty):active { background: none; }
  /* A4: zonder features en zonder filter zijn tellers van nul en een filterbalk alleen ruis. */
  .content:has(#dz-ai-tbody .empty):has(#dz-clear-filters[hidden]) > :is(.proc-stats, .toolbar) { display: none; }

  /* Een feature was een kaart met acht label/waarde-paren (vier op de telefoon zijn ruis voor
     de vraag "welke features zijn er en waar staan ze"). Nu een lijstrij in het paneel: titel,
     het proces eronder, en alleen status, fase en MVP als chips. Omvang, prioriteit, impact en
     domein staan op de procespagina, waar de hele rij naartoe leidt. */
  .dz-cards:has(> #dz-ai-tbody) tr.proc-row { margin: 0; padding: 12px 40px 12px 16px; border: 0; border-top: 1px solid var(--sunken);
    border-radius: 0; box-shadow: none; background: none; gap: 4px 8px; position: relative; min-height: 56px; }
  .dz-cards:has(> #dz-ai-tbody) tr.proc-row:first-child { border-top: 0; }
  .dz-cards:has(> #dz-ai-tbody) tr.proc-row::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-right: 2px solid var(--text-faint); border-top: 2px solid var(--text-faint); transform: rotate(45deg); }
  .dz-cards:has(> #dz-ai-tbody) td.card-title { border: 0; padding: 0; margin: 0; font-size: 16px; }
  .dz-cards:has(> #dz-ai-tbody) td.card-title .proc-name { font-weight: 500 !important; }
  .dz-cards:has(> #dz-ai-tbody) td[data-label="Proces"] { flex: 1 0 100%; font-size: 14px; color: var(--text-2); }
  .dz-cards:has(> #dz-ai-tbody) td:is([data-label="Proces"], [data-label="Status"], [data-label="Fase"])::before { display: none; }
  .dz-cards:has(> #dz-ai-tbody) td:is([data-label="Domein"], [data-label="Omvang"], [data-label="Prioriteit"], [data-label="Impact"]) { display: none; }
  .dz-cards:has(> #dz-ai-tbody) td[data-label="MVP"]:has(.mvp-no) { display: none; }
  .dz-cards:has(> #dz-ai-tbody) td[data-label="MVP"] { font-size: 14px; }
  .dz-cards:has(> #dz-ai-tbody) tr.group-row td { padding: 16px 16px 4px; }
}

/* ---- feature requests (wensen) */
@media (max-width: 640px) {
  /* W3: kop. De routinechip en Vernieuwen samen op één rustige regel, "Idee indienen" daaronder
     over de volle breedte als de actie van de pagina. */
  .page-head:has([data-act="wn-refresh"]) > div:last-child { width: 100%; gap: 8px !important; }
  .page-head [data-act="wn-refresh"] { min-height: 44px; }
  .page-head [data-act="wn-form-open"] { flex: 1 1 auto; min-height: 44px; justify-content: center; font-size: 16px; }
  .bsc-page .page-head [data-act="wn-form-open"] { flex-basis: 100%; }
  .bsc-page .page-head .tag { font-size: 12px; min-height: 32px; }

  /* W2: de KPI-strook beantwoordt de cockpitvraag; op Ideeën, PRs, Jobs en Agents duwde hij de
     inhoud van het tabblad naar y=500. */
  .bsc-page:has(.bsc-bar .fr-tab.active:not([data-tab="cockpit"])) .bsc-strip { display: none; }

  /* W4: "Meldingen aanzetten op dit apparaat" stak 4px buiten het paneel op 320. */
  .bsc-page [data-act="wn-push-aan"] { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 44px; }

  /* C1: vijf massieve indigo knoppen onder elkaar schreeuwden. De beslisknop wordt tonaal, op
     eigen breedte; de tweede actie een tekstknop ernaast. */
  .bsc-row .bsc-act { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .bsc-row .bsc-act .btn { width: auto; flex: 0 0 auto; }
  .bsc-row .bsc-act .btn-primary { background: var(--pri-soft); color: var(--pri-text); border-color: transparent; box-shadow: none; }
  /* FR-120: de tonale knop hield het witte icoon van .btn-primary .ic (styles.css) en was daarmee
     op de lichte vulling onzichtbaar; het icoon volgt dezelfde tekstkleur als het label. */
  .bsc-row .bsc-act .btn-primary .ic { color: var(--pri-text); }
  .bsc-row .bsc-act .btn:not(.btn-primary) { background: none; border-color: transparent; box-shadow: none; color: var(--text-2); }
  /* C2: het icoon herhaalt het gekleurde soortlabel en kostte 48px tekstbreedte. */
  .bsc-row > .bsc-ico { display: none; }

  /* C3 en P1: een leeg paneel (wensen.js, bsc-mleeg) is één compacte regel onder zijn kop. */
  .bsc-mleeg > .panel-head { border-bottom: 0; padding-bottom: 4px; }
  .bsc-mleeg > :not(.panel-head) { padding: 0 16px 16px !important; margin: 0 !important; border-top: 0 !important;
    font-size: 14px !important; color: var(--text-3) !important; text-align: left; }
  .bsc-mleeg > .empty > .ic { display: none; }
  .bsc-mleeg > .empty h3 { font-size: 14px; margin: 0; color: var(--text-2); }
  .bsc-mleeg > .empty > div { font-size: 14px; }

  /* J1: icoon en statustag naast de schakelaar lieten 100px voor de tekst over op 320. De
     schakelaar zegt zelf al of het aan staat. */
  .bsc-page .pa-flag-ic, .bsc-page .pa-flag > .tag { display: none; }
  .bsc-page .pa-flag { align-items: flex-start; gap: 12px; }
  /* J2: Run, Pauzeer en Hervat als drie gelijke kolommen onder de naam van de routine. De inline
     flex komt uit wensen.js. */
  .bsc-page div:has(> [data-act="wn-routine-verzoek"]) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .bsc-page [data-act="wn-routine-verzoek"] { justify-content: center; min-height: 44px; padding-left: 4px; padding-right: 4px; }
  .bsc-page div:has(> div > [data-act="wn-routine-verzoek"]) > span { font-size: 16px !important; }
  /* J4: lange branchnamen breken op elke plek in plaats van drie regels chip te vullen. */
  .bsc-page .cr-code { overflow-wrap: anywhere; }
  /* P2: het testrunresultaat scrolt in zijn eigen vak in plaats van een scherm lang te worden. */
  .bsc-page pre { max-height: 40svh; overflow: auto; overscroll-behavior: contain; }

  /* K1: het bord als verticale fasenlijst. Acht kolommen van een schermbreedte zijwaarts, waarvan
     zes leeg, gaven nooit het overzicht; gestapeld zie je in één scroll waar alles staat. Lege
     fasen klappen in tot een dunne regel met hun telling. */
  .fr-kanban { flex-direction: column; align-items: stretch; overflow-x: visible; scroll-snap-type: none; padding: 4px 16px 16px; gap: 0; }
  /* Geen bak om elke fase (kaart in kaart in paneel): de fase is een kopregel, de ideeën eronder. */
  .fr-kb-kolom { flex: 0 0 auto; min-width: 0; max-width: none; width: 100%; background: none; border: 0; border-radius: 0; }
  .fr-kb-kop { font-size: 14px; min-height: 44px; padding: 12px 0 8px; border-bottom: 0; color: var(--text); }
  .fr-kb-lijst { padding: 0 0 8px; }
  .fr-kb-kolom:has(> .fr-kb-lijst > .fr-kb-leeg:only-child) .fr-kb-kop { color: var(--text-3); font-weight: 500; min-height: 36px; padding: 8px 0 4px; }
  .fr-kb-kolom:has(> .fr-kb-lijst > .fr-kb-leeg:only-child) .fr-kb-lijst { display: none; }
  .fr-kb-card { padding: 12px; }
  .fr-kb-titel { font-size: 16px; line-height: 1.4; }
  /* K2: steunen is een compacte chip rechts in de voet, niet het zwaarste element van de kaart. */
  .fr-kb-voet .fr-vote { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 12px; }

  /* U1: de keuzelijsten achter de Filters-knop (wensen.js, alleen telefoon). */
  .toolbar:has([data-edit="wn-q"]):not(.filters-open) .toolbar-r { display: none; }
  .toolbar:has([data-edit="wn-q"]) .toolbar-l { flex-wrap: nowrap; }
  .toolbar:has([data-edit="wn-q"]).filters-open .toolbar-l .search { min-width: 0; }
  .toolbar:has([data-edit="wn-q"]) .toolbar-r { margin-top: 8px; }
  .toolbar:has([data-edit="wn-q"]) .mob-filterbtn .count-chip { background: var(--pri); color: #fff; font-size: 12px; padding: 0 6px; min-width: 20px; text-align: center; }

  /* U2: de meldingenkaart houdt zijn zin en knop; de geruststellende tweede regel gaat eraf. */
  .content > .panel:has([data-act="wn-push-weg"]) .muted { display: none; }
  /* U3: drie gelijke segmenten over de volle breedte; "Meldingen" werd afgekapt zonder fade. */
  .fr-tabs:not(.bsc-bar) { display: flex; width: 100%; }
  .fr-tabs:not(.bsc-bar) .fr-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 4px; padding-right: 4px; font-size: 14px; }
  /* U4: de uitleg "Wat gebeurt er met je idee" staat op de telefoon al verborgen (styles.css);
     zijn lege kop bleef als een ingeklapte kaart zonder inhoud staan. */
  .fr-side .panel:has(> .fr-flow) { display: none; }
}
@media (max-width: 400px) {
  /* Zoeken, Filters en de weergaveknoppen op één regel: op een smal scherm is de knop alleen het
     icoon (met de telling), anders hield het zoekveld nog tien tekens over. */
  .toolbar .wn-mfilterlbl { display: none; }
  .toolbar:has(.wn-mfilterlbl) .mob-filterbtn { min-width: 44px; justify-content: center; padding-left: 10px; padding-right: 10px; }
  /* Drie segmenten met een telling passen niet in 288px; de telling staat ook in de paneelkop. */
  .fr-tabs:not(.bsc-bar) .fr-tab .count-chip { display: none; }
}

/* ---- minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .ls .ls-mrij { transition: none; }
}

/* ======== 4.8 Instellingen, beveiliging, AI, beheer, rollen, gebruikers, account, login ======== */
@media (max-width: 640px) {
  /* ---- horizontale paginascroll (zeven routes, één oorzaak) ----
     Een gridkolom van 1fr (= minmax(auto, 1fr)) of een flexkind met min-width:auto nam de
     min-contentbreedte van een horizontaal scrollende strook over (.pa-tabs, .tin-ob-lijst,
     .tin-crumbs). De strook scrolde dus nooit zelf maar duwde de pagina tot 880px breed, en de
     browser zoomde alles uit tot onleesbaar klein. */
  .pa-work, .tin-ob, .gb-2col, .gb-2col-k { grid-template-columns: minmax(0, 1fr); }
  .pa-work > .panel, .tin-ob-rail, .tin-ob-main, .iw-head > div { min-width: 0; }
  .pa-head { flex-wrap: wrap; }
  .pa-head > div { min-width: 0; }
}

/* ================================================================ Platform admin (beheer) */
@media (max-width: 640px) {
  /* Werkbladschakelaar Tenants / Bibliotheek: volle breedte, twee gelijke delen.
     Op 320 was hij 332px en duwde hij de pagina breed (BI1). */
  .pa-actions { gap: 8px; }
  .pa-actions > .ov-groupseg { display: flex; width: 100%; min-width: 0; }
  .pa-actions > .ov-groupseg .ov-groupseg-b { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 40px; font-size: 14px; }
  .pa-actions > .gb-spacer { display: none; }
  /* Nieuwe tenant / Nieuw project: twee gelijke knoppen in plaats van rechts uitgelijnd (B3). */
  .pa-actions > .btn { flex: 1 1 0; justify-content: center; min-width: 0; }

  /* KPI's: vier kleine tegels in een 2x2-raster, "Nu online" als smalle rij eronder (B4). */
  .pa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .pa-stats .pa-stat { padding: 12px; box-shadow: none; }
  .pa-stats .stat-ic { display: none; }
  .pa-stats .stat-label { font-size: 12px; color: var(--text-3); }
  .pa-stats .stat-num { font-size: 20px; margin-top: 4px; }
  .pa-stats .pa-stat:nth-child(5):last-child { grid-column: 1 / -1; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 8px 12px; }
  .pa-stats .pa-stat:nth-child(5):last-child .stat-top { flex: none; }
  .pa-stats .pa-stat:nth-child(5):last-child .pa-av-row { margin-top: 0; }
  .pa-stats .pa-stat:nth-child(5):last-child > :not(.stat-top) { margin-top: 0; font-size: 14px; }

  /* Kop van het tenantdetail: naam en status op de eerste regel, de slug eronder, Pauzeren en
     het menu blijven rechts (B2). */
  .pa-detail-head { flex-wrap: wrap; align-items: center; row-gap: 4px; padding: 12px 16px; }
  .pa-detail-head > .panel-title { flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; column-gap: 8px !important; }
  .pa-detail-head .pa-detail-naam { white-space: normal; overflow-wrap: anywhere; font-size: 18px; line-height: 1.3; }
  .pa-detail-head > span:last-child { margin-left: auto; flex: 0 1 auto !important; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  /* De avatar herhaalt de naam die er groot naast staat; weg geeft de naam de eerste regel. */
  .pa-detail-head > .panel-title > .dz-avatar { display: none; }
  .pa-detail-head .pa-detail-slug { order: 9; flex-basis: 100%; font-size: 12px; }

  /* Overzicht: zes grijze kaders werden een iOS-lijst, label links en waarde rechts (B9). */
  .pa-kvgrid { gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .pa-kvgrid .pa-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 8px 12px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--sunken); }
  .pa-kvgrid .pa-kv:last-child { border-bottom: 0; }
  .pa-kvgrid .pa-kv-l { font-size: 14px; font-weight: 400; color: var(--text-2); margin: 0; }
  .pa-kvgrid .pa-kv-v { font-size: 14px; text-align: right; min-width: 0; }
  .pa-kvgrid .pa-kv { flex-wrap: wrap; }
  .pa-kvgrid .pa-kv-v .select { width: auto; max-width: 100%; }

  /* Versies en verwijderde projecten: de knoppen naast de titel knepen die tot één woord per
     regel. Nu tekst op de volle breedte en de knoppen eronder, gelijk verdeeld (B5). */
  .pa-proj { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .pa-proj > .ic { margin-top: 2px; }
  .pa-proj > div[style*="flex:none"], .pa-proj > .btn[style*="flex:none"] { flex: 1 1 100% !important; }
  .pa-proj > div[style*="flex:none"] { display: flex; gap: 8px; }
  .pa-proj > div[style*="flex:none"] > .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .pa-proj > .btn[style*="flex:none"] { justify-content: center; }
  .pa-proj .proc-sub .count-chip { white-space: nowrap; }
  /* "Maak actief" had een eigen gevulde amberkleur (inline): een vierde knopstijl, direct naast
     Bekijk. Op de telefoon een gewone knop met amber tekst; de bevestiging blijft (B6). */
  .pa-proj .btn[data-act="beheer-bkp-activate"] { background: var(--surface) !important; border-color: var(--border-2) !important;
    color: var(--amber-strong) !important; }

  /* Gebruikers van een tenant: rol, mail en sleutel als rij, Verwijderen rechts los ervan (B8). */
  .pa-user { padding: 12px; }
  .pa-user-act { gap: 8px; }
  .pa-user-act .btn-danger { margin-left: auto; }
  /* De naam is een bewerkbaar veld, maar leest als naam: geen grijze vulling tot je erin tikt. */
  .pa-user-name { font-size: 16px; background: transparent; border-color: transparent; }

  /* Account aanmaken: één kolom, elk veld op de volle breedte (B7). */
  .pa-create { padding: 16px 12px; }
  .pa-create .list-add { flex-direction: column; align-items: stretch; }
  .pa-create .list-add > * { flex: none !important; width: 100%; max-width: none !important; min-width: 0 !important; }
  .pa-create .list-add .input, .pa-create .list-add .select { max-width: none; }
  .pa-create .list-add > .btn { justify-content: center; min-height: 48px; }
  .pa-create > p.muted { font-size: 14px !important; line-height: 1.5; }
}
@media (max-width: 400px) {
  /* Op 320 schoven icoon en label van de werkbladschakelaar over elkaar: alleen het woord. */
  .pa-actions > .ov-groupseg .ov-groupseg-b .ic { display: none; }
  .pa-actions > .ov-groupseg .ov-groupseg-b { padding: 6px 4px; }
  .pa-detail-head > span:last-child .btn .ic { display: none; }
  /* Drie knoppen onder een versie passen op 320 alleen zonder icoon. */
  .pa-proj > div[style*="flex:none"] > .btn .ic { display: none; }
}

/* ================================================================ wachtwoordvelden, overal */
@media (max-width: 640px) {
  /* De shell-sectie van styles.css zette .pw-toggle op position:relative (voor zijn trefvlak).
     Daardoor viel het oogje onder het veld in plaats van erin. Absoluut werkt het trefvlak net
     zo goed, en het oogje staat weer rechts in het veld, als tikdoel van 44px. */
  .pw-wrap .pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; transform: none; width: 44px; padding: 0; border-radius: 0 var(--r) var(--r) 0; }
  .pw-wrap .pw-toggle .ic { font-size: 20px; }
  .pw-wrap .input { padding-right: 44px; }
  .list-add .pw-wrap .input { max-width: none; }
}

/* ================================================================ Mijn account */
@media (max-width: 640px) {
  /* Naam en wachtwoord: veld op de volle breedte en de knop eronder, ook op volle breedte.
     Het wachtwoordblok was onbruikbaar: twee velden van 60px met de knop ernaast (AC1, AC2). */
  .content .panel .list-add:has(> .pw-wrap), .content .panel .list-add:has(#bh-myname) { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 0; }
  .list-add:has(> .pw-wrap) > .pw-wrap, #bh-myname { max-width: none !important; width: 100%; min-width: 0 !important; flex: none !important; }
  .list-add:has(> .pw-wrap) > .btn, .list-add:has(#bh-myname) > .btn { justify-content: center; min-height: 48px; }
  .acc-veld-l { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); margin: 4px 0 -2px; }

  /* Uitlogtijd: de keuze op de volle breedte in plaats van halve breedte zwevend (AC4). */
  .select[data-edit="acc-idle"] { max-width: none !important; width: 100%; }

  /* Meldingsvoorkeuren: de keuze is een compacte pil onder de uitleg in plaats van een veld
     over de volle breedte; vijf rijen worden zo een rustige lijst (AC3). */
  .acc-mld-rij { padding: 12px 0; gap: 8px; }
  .acc-mld-l { font-size: 16px; font-weight: 500; }
  .acc-mld-s { font-size: 14px; line-height: 1.4; }
  .acc-mld-keuze { flex: 0 0 auto; width: auto; max-width: 100%; border-color: transparent; background-color: var(--sunken);
    font-weight: 500; color: var(--text); }
  .acc-mld-voet { font-size: 14px; line-height: 1.45; }
}

/* ================================================================ Rollen & rechten */
@media (max-width: 640px) {
  /* De kop droeg Bewerken / Nieuwe rol / Wijzigingen opslaan op één rij van 434px (RO1). De
     inline stijl zette de kolom rechts uitgelijnd; op de telefoon vult hij de breedte. */
  .pa-head-actions { width: 100%; min-width: 0; align-items: stretch !important; }
  .pa-head-actions > div { flex-wrap: wrap; gap: 8px !important; }
  .pa-head-actions > div > .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .pa-head-actions > .tag { align-self: flex-start; white-space: normal; }
  /* Opslaan hoort in de duimzone: zolang er niets gewijzigd is staat hij er niet (hij kan dan
     toch niets), en zodra er iets te bewaren valt zweeft hij onderaan boven de onderbalk (RO2). */
  .pa-head-actions .btn[data-act="rollen-save"][disabled] { display: none; }
  .pa-head-actions .btn[data-act="rollen-save"]:not([disabled]) { position: fixed; z-index: 30;
    left: 16px; right: 16px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 12px); min-height: 48px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18); animation: mRijs var(--m-t2) var(--m-ease) both; }
  .content:has(.btn[data-act="rollen-save"]:not([disabled])) { padding-bottom: 96px; }

  /* Rolkaarten als lijstrij: naam, één regel met bereik en aantal, geen losse tagregels (RO3). */
  .role-list { gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
  .role-card { align-items: center; min-height: 56px; padding: 10px 12px; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--sunken); }
  .role-card:last-child { border-bottom: 0; }
  .role-card.sel { box-shadow: inset 3px 0 0 var(--pri); }
  .role-card-ic { width: 32px; height: 32px; font-size: 18px; border-radius: 8px; }
  .role-card-name { font-size: 16px; }
  .role-card-desc { font-size: 14px; margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .role-card-tags .tag { font-size: 12px; }
  .role-card-count { font-size: 12px; }

  /* Rechtenrijen: label links, schakelaar rechts, 48px hoog. */
  .perm-row { min-height: 48px; padding: 8px 0; }
  .perm-row-l { font-size: 16px; }
}
@media (max-width: 640px) {
  /* Menu-zichtbaarheid: groepen als uitklaprijen met de afwijkingen in de kop (RO5). */
  .perm-menu-lijst { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .perm-menu-uitklap { border-bottom: 1px solid var(--sunken); }
  .perm-menu-uitklap:last-child { border-bottom: 0; }
  .perm-menu-uitklap > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
    list-style: none; cursor: pointer; }
  .perm-menu-uitklap > summary::-webkit-details-marker { display: none; }
  .perm-menu-uitklap > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); margin-left: 8px; transform: rotate(45deg) translateY(-2px);
    transition: transform var(--m-t2) var(--m-ease); }
  .perm-menu-uitklap[open] > summary::after { transform: rotate(225deg) translate(-2px, 0); }
  .perm-menu-uitklap > summary:active { background: var(--sunken); }
  .perm-menu-kop { font-size: 16px; font-weight: 600; color: var(--text); }
  .perm-menu-stand { font-size: 14px; color: var(--text-3); margin-left: auto; text-align: right; }
  .perm-menu-stand.is-afwijkend { color: var(--pri-text); font-weight: 500; }
  .perm-menu-rijen { padding: 0 12px 8px; }

  /* Rolkaart: de beschrijving staat in het detail; hier naam plus één regel met bereik. */
  .role-card-desc { display: none; }
  .role-card-tags { flex-wrap: nowrap; overflow: hidden; margin-top: 4px; }
}
@media (max-width: 640px) {
  /* De roleditor had 18px binnenrand (inline) plus de paneelrand: 12px geeft de rechtenrijen
     de ruimte die ze op 320 nodig hebben. */
  .panel > div:has(> .roles-editor-body) { padding-left: 12px !important; padding-right: 12px !important; }
  .perm-menu-rijen .perm-row-l { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .perm-menu-rijen .perm-ind .ic { display: none; }
}
@media (max-width: 640px) {
  .perm-menu-kop { min-width: 0; }
  .perm-menu-uitklap > summary .count-chip { flex: none; }

  /* Rolkaart als raster: icoon, naam op de eerste regel, bereik en aantal samen op de tweede
     (RO3). De body doet niet mee als eigen vak, zodat het aantal niet meer naast de naam knijpt. */
  .role-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .role-card > .role-card-ic { grid-row: 1 / span 2; }
  .role-card > .role-card-body { display: contents; }
  .role-card-top { grid-column: 2 / -1; min-width: 0; }
  .role-card-tags { grid-column: 2; margin-top: 0; }
  .role-card > .role-card-count { grid-column: 3; grid-row: 2; }
  /* Systeemrol of aangepast leest het slotje al; in de lijst alleen het bereik. */
  .role-card-tags .tag + .tag { display: none; }

  /* Roldetail: Bekijk als, Dupliceren en het menu op één rij onder de naam (RO4). */
  .panel-head:has(.btn[data-act="rollen-dup"]) { flex-wrap: wrap; row-gap: 8px; }
  .panel-head:has(.btn[data-act="rollen-dup"]) > .panel-title { flex: 1 1 100%; }
  .panel-head:has(.btn[data-act="rollen-dup"]) > div { flex: 1 1 100%; flex-wrap: nowrap !important; }
  .panel-head:has(.btn[data-act="rollen-dup"]) > div > .btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .panel-head:has(.btn[data-act="rollen-dup"]) .inline[data-edit="rollen-naam"] { max-width: 100% !important; }

  /* Beschrijving, bereik, tenant en project: één gegroepeerde lijst in plaats van zes kaders. */
  .roles-editor-body > .pa-detail-grid { gap: 12px; }
  .scope-cards { gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin: 8px 0 0; }
  .scope-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 48px;
    padding: 8px 12px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--sunken); }
  .scope-card:last-child { border-bottom: 0; }
  .scope-card-h { margin: 0; }
  .scope-card-h .scope-card-l { font-size: 14px; font-weight: 400; color: var(--text-2); text-transform: none; letter-spacing: 0; }
  .scope-card-v { font-size: 14px; text-align: right; }
  .scope-card .select { margin-top: 0 !important; width: auto; max-width: 100%; }
}
@media (max-width: 400px) {
  .panel-head:has(.btn[data-act="rollen-dup"]) > div > .btn .ic { display: none; }
}

/* ================================================================ Gebruikers (en de lijst van beheer) */
@media (max-width: 640px) {
  /* Tenant en kostenperiode naast elkaar, de primaire knop eronder op de volle breedte (GE3). */
  .gb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gb-actions > .gb-spacer { display: none; }
  .gb-actions > .gb-periode { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
    padding: 6px 8px 4px 12px; border-radius: var(--r-lg); }
  .gb-actions > .gb-periode .muted { font-size: 12px; }
  .gb-actions > .gb-periode .select { max-width: none !important; width: 100%; min-width: 0; border: 0; padding-left: 0; background-color: transparent; min-height: 32px; }
  .gb-actions > .gb-periode:only-of-type { grid-column: 1 / -1; }
  .gb-actions > .btn { grid-column: 1 / -1; justify-content: center; min-height: 48px; }

  /* Lijstrij (gebruikers en tenants): rechts het bedrag boven de status in plaats van ernaast,
     zodat de naam de ruimte krijgt. */
  .pa-trow { min-height: 56px; padding: 8px 16px; }
  .pa-trow-r { flex-direction: column; align-items: flex-end; gap: 4px; }
  .pa-trow .gb-kosten-sub { display: none; }
  .pa-trow-naam .proc-name { font-size: 16px; }
  .pa-trow-main > .proc-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Beveiligingsrijen (uitnodiging, wachtwoord, sessies, uitloggen): de knop of keuze onder de
     tekst in plaats van ernaast; de tekst kromp daar tot één woord per regel (GE7). Schakelaars
     blijven rechts staan, die zijn smal. */
  .pa-flag { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .pa-flag > .pa-flag-ic { margin-top: 2px; }
  .pa-flag > .btn, .pa-flag > .select, .pa-flag > select, .pa-flag > .tag { flex: 1 1 100%; max-width: none !important; margin-left: 29px; }
  .pa-flag > .btn { justify-content: center; }
  .pa-flag > .tag { flex: none; }

  /* E-mail in gewone letters en afbreken waar het moet, niet midden in een mono-woord (GE6). */
  .gb-ro.mono { font-family: inherit; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
  .gb-ro { font-size: 16px; }

  /* Standaard AI-limiet per rol: per rol drie velden naast elkaar met het label erboven (GE2). */
  .dz-cards tr:has(td[data-label="Calls/dag"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) > td:first-child { grid-column: 1 / -1; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) > td:first-child::before { display: none; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) > td:first-child > .tag { flex: none; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) > td:not(:first-child) { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) > td:not(:first-child)::before { font-weight: 500; }
  .dz-cards tr:has(td[data-label="Calls/dag"]) input { width: 100% !important; min-width: 0; }
}
@media (max-width: 640px) {
  /* Na een tik in de lijst schuift het detail in beeld; het landt onder de topbalk. */
  .pa-detail { scroll-margin-top: calc(var(--topbar-h) + 12px); }
}

/* ================================================================ Nieuwe tenant (tenantintake) */
@media (max-width: 640px) {
  /* Kop van een lopende intake: Later verder vooraan, Intake annuleren (destructief) los
     rechts en rood, niet meer direct naast de neutrale actie (TH3). */
  .iw-head > div[style*="display:flex"] { flex: 1 1 100%; justify-content: space-between; }
  .iw-head > div[style*="display:flex"] > a.btn { order: -1; }
  .iw-head .btn[data-act="tin-cancel"] { color: var(--red-strong); }

  /* De volgende stap staat onderaan de stap, maar de mapping is drie schermen lang: de voet
     plakt onderaan boven de onderbalk, zodat doorgaan altijd onder je duim zit (TH4). */
  .tin-pad-voet:has(> .btn-primary) { position: sticky; z-index: 5; bottom: calc(var(--bottomnav-h) + var(--safe-b));
    margin: 12px -16px 0; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--border); }
  .tin-pad-voet .btn-primary { min-height: 48px; }

  /* Omgeving aanmaken: zodra alles klaar is zweeft de knop onderaan in de duimzone in plaats
     van bovenin de zijbalk, waar je na zes onderdelen naar terug moest scrollen (TI2). */
  .tin-ob-maak:not([disabled]) { position: fixed; z-index: 30; left: 16px; right: 16px; width: auto;
    bottom: calc(var(--bottomnav-h) + var(--safe-b) + 12px); min-height: 48px; box-shadow: 0 8px 24px rgba(16, 24, 40, .18); }
  .content:has(.tin-ob-maak:not([disabled])) { padding-bottom: 96px; }
  /* "Aan: ..." onder een klanttype is een voetnoot, geen tweede kop (TI4). */
  .tin-type-aan { border-top: 0 !important; padding-top: 0 !important; font-size: 12px; }
}

/* ================================================================ Instellingen > Project */
@media (max-width: 640px) {
  /* Samenvatting eerst: "Dit project" stond onder vier schermen instellingen. Op de telefoon
     bovenaan, als compact raster van zes waarden (IP3). */
  .st-grid { display: flex; flex-direction: column; }
  .st-grid > * { width: 100%; }
  .st-grid > .st-rail { order: -1; }
  .st-rail .panel:not(.kost-vb) > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 12px 16px !important; }
  .st-rail .st-rail-title { grid-column: 1 / -1; margin-bottom: 4px; }
  .st-rail .panel:not(.kost-vb) > div > div[style] { flex-direction: column; align-items: flex-start !important; gap: 0 !important; padding: 4px 0 !important; }
  .st-rail .panel:not(.kost-vb) > div > div[style] > .muted { font-size: 12px; }
  .st-rail .panel:not(.kost-vb) > div > div[style] > span:last-child { font-size: 16px; font-weight: 600; text-align: left !important; }

  /* Notitie: vier regels in plaats van twee, de derde werd halverwege doorgesneden (IP2). */
  .st-main textarea.textarea[data-field="note"] { min-height: 120px; }

  /* Keuzegroepen als gegroepeerde iOS-lijst: geen losse kaarten, de uitleg van een niet-gekozen
     optie op twee regels, die van de gekozen optie voluit (IP4). */
  .tf-regime-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
  .tf-regime-grid > .tf-regime-opt { border: 0; border-radius: 0; border-bottom: 1px solid var(--sunken); padding: 12px; min-height: 56px; width: 100%; }
  .tf-regime-grid > .tf-regime-opt:last-child { border-bottom: 0; }
  .tf-regime-title { font-size: 16px; }
  .tf-regime-hint { font-size: 14px; }
  .tf-regime-opt:not(.on) .tf-regime-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .acc-grid { gap: 0; border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
  .acc-grid > .acc-opt { border: 0; border-radius: 0; border-bottom: 1px solid var(--sunken); padding: 12px; min-height: 56px; width: 100%; }
  .acc-grid > .acc-opt:last-child { border-bottom: 0; }
  .acc-opt-title { font-size: 16px; }
  .acc-opt .proc-sub { font-size: 14px; line-height: 1.45; }
  .acc-opt:not(.on) .proc-sub { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Data in- en uitvoer: vier kaarten van elk een half scherm werden rijen van 56px met icoon,
     titel, één regel uitleg en de knop rechts (IP5). */
  .data-cards { gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .data-card { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 10px 12px; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--sunken); min-height: 56px; }
  .data-card:last-child { border-bottom: 0; }
  .data-card > .ic { grid-row: 1 / span 2; font-size: 20px !important; }
  .data-card > div:nth-of-type(1) { grid-column: 2; font-size: 16px !important; font-weight: 500 !important; }
  .data-card > .proc-sub { grid-column: 2; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .data-card > .btn { grid-column: 3; grid-row: 1 / span 2; padding: 0 12px; }

  /* Gevarenstrook: de tekst kromp naast de knop tot twee woorden per regel, dertien regels hoog.
     Tekst op de volle breedte, knop eronder (IP1). */
  .danger-strip { flex-direction: column; align-items: stretch; gap: 8px; }
  .danger-strip > div { display: flex; flex-direction: column; }
  .danger-strip > .ic { display: none; }
  .danger-strip > div > div { font-size: 16px !important; }
  .danger-strip > div > p { font-size: 14px !important; }
  .danger-strip > .btn { flex: none !important; width: 100%; justify-content: center; min-height: 44px; }
}

/* ================================================================ Instellingen > Organisatie */
@media (max-width: 640px) {
  /* 22 medewerkers als kaart van vijf regels waren acht schermen. Nu een dichte rij van 56px:
     naam en één regel "Key user · 6 processen · geen account"; een tik klapt de kaart open met
     account, volgorde en verwijderen (OR1, OR3). */
  .medew-kaart.is-dicht > td:not(:first-child) { display: none; }
  .medew-kaart.is-dicht > td.card-title { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .medew-kaart > td.card-title .medew-meta { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px;
    margin: 2px 0 0; padding: 0 0 0 37px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text-3);
    text-align: left; cursor: pointer; font-weight: 400; }
  .medew-meta > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .medew-meta > .ic { flex: none; font-size: 18px; transition: transform var(--m-t2) var(--m-ease); }
  .medew-meta[aria-expanded="true"] > .ic { transform: rotate(180deg); }
  .medew-kaart:not(.is-dicht) > td:not(:first-child) { animation: mRijs var(--m-t2) var(--m-ease) both; }
  /* De medewerkerslijst leest als lijst: rijen tegen elkaar, niet als losse kaarten. */
  .tbl-wrap:has(.medew-kaart) .dz-cards tr { margin-bottom: 8px; padding: 8px 12px; }
  /* Naam leest als naam, niet als grijs formulierveld; de rand verschijnt pas bij focus (OR2). */
  .dz-cards td.card-title input.inline { background: transparent; border-color: transparent; font-weight: 600; font-size: 16px; padding-left: 0; }
  .dz-cards td.card-title input.inline:focus { background: var(--surface); border-color: var(--pri); padding-left: 8px; }
  /* Geen gekleurde zijstreep op "Nog te bevestigen": de amber teller in de kop zegt het al (OR4). */
  .panel[style*="border-left:3px"] { border-left-width: 1px !important; border-left-color: var(--border) !important; }
  /* Domeinrij: de verantwoordelijke-keuze op de volle breedte in plaats van afgekapt (OR5). */
  .org-domgrid .select { width: 100%; max-width: none !important; }
  .org-domgrid > input.inline { background: transparent; border-color: transparent; font-size: 16px; font-weight: 600 !important; padding-left: 0; }
  .org-domgrid > input.inline:focus { background: var(--surface); border-color: var(--pri); padding-left: 8px; }
}

/* ================================================================ Instellingen > Keuzelijsten */
@media (max-width: 640px) {
  /* Lijst -> detail: de editor stond onder dertig keuzelijsten en na een tik gebeurde er
     zichtbaar niets. Nu eerst de lijst; een tik opent de lijst zelf, met een terugknop (KZ2). */
  .kz-grid:not(.is-detail) > .kz-detail { display: none; }
  .kz-grid.is-detail > .kz-list { display: none; }
  .kz-detail { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .kz-terug { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; padding: 0 8px 0 0;
    border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--pri-text); cursor: pointer; }
  .kz-terug .ic { font-size: 20px; }
  /* Rij van 56px: label, telling rechts met een chevron, geen uitgerekte grijze balk (KZ1). */
  .kz-item { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 56px; align-items: center; font-size: 16px; }
  .kz-item > .count-chip { justify-self: end; }
  .kz-item::after { content: ""; width: 7px; height: 7px; margin: 0 4px 0 4px; border-right: 2px solid var(--text-faint);
    border-top: 2px solid var(--text-faint); transform: rotate(45deg); grid-column: 4; }
  .kz-item { grid-template-columns: minmax(0, 1fr) auto auto 16px; }
  .kz-item > .ti-palette { display: none; }
  .kz-item .kz-item-label { font-size: 16px; }
  /* Waarderij: veld, telling en de pijlen/prullenbak op één regel waar het past (KZ3). */
  .kz-valrow > .input, .kz-valrow > input, .kz-valrow > .inline { flex: 1 1 120px; min-width: 120px; }
}

/* ================================================================ Instellingen > Kostenmodel */
@media (max-width: 640px) {
  /* Het rekenvoorbeeld staat (via .st-grid hierboven) nu boven de factoren: wie een factor
     wijzigt ziet het effect zonder vier schermen te scrollen (KO3). De rijen in gewone letters,
     niet in mono tussen sans-velden (KO4). */
  .kost-vb .mono, .kost-grid td.mono { font-family: inherit; font-size: 14px; }
  .kost-vb .muted { font-size: 14px !important; }
  .kost-vb #vb-band { font-size: 20px !important; }

  /* Factoren per omvang: omschrijving met het label erboven op de volle breedte (KO1), en
     maatfactor en opslag als twee even brede velden naast elkaar (KO2). */
  .dz-cards tr:has(input[data-edit="sizedesc"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td { min-width: 0; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(1) { justify-content: flex-start; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(1) > .tag { flex: none; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(1),
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(2),
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(5) { grid-column: 1 / -1; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(2),
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(3),
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(4) { flex-direction: column; align-items: stretch; gap: 4px; text-align: left !important; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) input { width: 100% !important; min-width: 0 !important; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) input.inline { background: var(--surface); border: 1px solid var(--border-2); min-height: 44px; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) input.input { min-height: 44px; }
  .dz-cards tr:has(input[data-edit="sizedesc"]) > td:nth-child(5) { font-size: 14px; color: var(--text-3); }
}

/* ================================================================ Instellingen > Projectkennis */
@media (max-width: 640px) {
  /* Uitleg ingeklapt tot de eerste zin, "Meer uitleg" klapt de rest open (PK2). */
  .pk-uitleg-m { display: block; padding: 0; }
  .pk-uitleg-m > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; list-style: none; cursor: pointer; }
  .pk-uitleg-m > summary::-webkit-details-marker { display: none; }
  .pk-uitleg-m > summary > .ic { font-size: 20px; color: var(--pri-text); flex: none; }
  .pk-uitleg-meer { color: var(--pri-text); font-weight: 500; white-space: nowrap; }
  .pk-uitleg-m[open] .pk-uitleg-meer { display: none; }
  .pk-uitleg-m > div { padding: 0 16px 12px 48px; font-size: 14px; line-height: 1.5; }
  /* Opmerking: label boven het veld en het veld op de volle breedte, de tekst werd afgekapt (PK1). */
  .pk-table.dz-cards td.pk-opm { flex-direction: column; align-items: stretch; gap: 4px; }
  .pk-table.dz-cards td.pk-opm .pk-opm-input { width: 100%; }
}

/* ================================================================ Instellingen > Import-rapport */
@media (max-width: 640px) {
  /* De bevestigknop stond twee schermen onder het begin van het rapport. De voet met tellingen en
     Annuleren / Toevoegen plakt nu onderaan in beeld zolang je door het rapport scrolt (IR1). */
  .ip4-voet { position: sticky; z-index: 5; bottom: calc(var(--bottomnav-h) + var(--safe-b)); gap: 8px;
    padding: 12px 0; background: var(--surface); border-top: 1px solid var(--border); }
  .ip4-voet-acties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
  .ip4-voet-acties > .btn { justify-content: center; min-height: 48px; width: 100%; }
}

/* ================================================================ Beveiliging & privacy */
@media (max-width: 640px) {
  /* Changelog: de knop "Gezien" naast de tekst kneep die tot vijf woorden per regel, twee
     schermen hoog. Tekst op de volle breedte, knop eronder (BV1). */
  .bv-cl-row { flex-wrap: wrap; }
  .bv-cl-row > .bv-cl-ic { display: none; }
  .bv-cl-row > .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .bv-cl-tekst { font-size: 14px; line-height: 1.5; }

  /* "Op deze pagina" als strook met ankerchips bovenaan in plaats van een lijst van negen rijen
     midden op de pagina; de detailschakelaar als één rij (BV4). */
  .bv-rail { gap: 8px; min-width: 0; }
  .bv-rail > div:first-child { min-width: 0; }
  .bv-rail-kop { display: none; }
  .bv-nav { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }
  .bv-navlink { flex: none; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--r-pill);
    background: var(--surface); font-size: 14px; white-space: nowrap; }
  .bv-navlink:last-child { margin-right: 24px; }
  .bv-navlink:active { background: var(--sunken); }
  .bv-detail { box-shadow: none; padding: 8px 12px; }
  .bv-detail-s { display: none; }

  /* Grenzen: de tag boven de titel in plaats van ernaast, de tekst krijgt de volle breedte (BV2). */
  .bv-grens { flex-direction: column; gap: 4px; }
  .bv-grens .tag { align-self: flex-start; }
  .bv-grens-t { font-size: 16px; }
  .bv-grens-s { font-size: 14px; }
}
@media (max-width: 640px) {
  .bv-cl-tekst.is-kort { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .bv-cl-verder { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500;
    color: var(--pri-text); cursor: pointer; }
}

/* ================================================================ AI en Thinkwise (aisettings) */
@media (max-width: 640px) {
  /* Twee tabstroken boven elkaar plus een intro van vijf regels: de intro op twee regels, de
     inhoud begint eerder (AO1). */
  .content:has(.settings-nav) .settings-head .settings-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Hoofdschakelaar AI: de tekst kromp naast icoon, tag en schakelaar tot één woord per regel.
     Nu tekst op de volle breedte, daaronder de stand links en de schakelaar rechts (AG1). */
  .ais-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
  .ais-hero > .ais-hero-ic { display: none; }
  .ais-hero > div { grid-column: 1 / -1; }
  .ais-hero > div > div { font-size: 16px !important; }
  .ais-hero > div > p { font-size: 14px !important; }
  .ais-hero > .tag { justify-self: start; }

  /* Model per AI-actie: een gegroepeerde lijst in plaats van 25 kaarten; lege verbruikscellen
     zijn weg (AG2). */
  .ais-tbl.dz-cards tr:has(select[data-edit="model-map"]) { margin: 0; border-radius: 0; border-width: 0 0 1px; padding: 10px 4px; }
  .ais-tbl.dz-cards tr:has(select[data-edit="model-map"]):last-child { border-bottom: 0; }
  .ais-tbl.dz-cards td.card-title:has(+ td select[data-edit="model-map"]) { border-bottom: 0; margin-bottom: 0; padding-bottom: 4px; font-size: 16px; }
  .ais-tbl.dz-cards td:has(> select[data-edit="model-map"]) { padding: 0; }
  .ais-tbl.dz-cards td:has(> select[data-edit="model-map"])::before { display: none; }
  .ais-tbl.dz-cards select[data-edit="model-map"] { width: 100%; }
  .ais-tbl.dz-cards td.ais-leeg { display: none; }
  /* "Documenten als context" is een lege, uitgeschakelde functie: op de telefoon weg (AB1). */
  section.panel:has(.ti-paperclip):has(.btn[disabled][title="Binnenkort beschikbaar"]) { display: none; }

  /* Intake-vragen: dichte pakketten met telling (AI2) en nummers die niet meer links wegvallen
     bij 10 (AI1). */
  .vp-defaults { padding-left: 28px; }
  .vp-pak { display: block; margin-bottom: 8px; }
  .vp-pak > summary { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 40px 8px 16px;
    list-style: none; cursor: pointer; position: relative; }
  .vp-pak > summary::-webkit-details-marker { display: none; }
  .vp-pak > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg);
    transition: transform var(--m-t2) var(--m-ease); }
  .vp-pak[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
  .vp-pak > summary:active { background: var(--sunken); }
  .vp-pak-t { font-size: 16px; font-weight: 600; color: var(--text); }
  .vp-pak-s { font-size: 14px; color: var(--text-3); }
  .vp-pak-body { padding: 0 16px 16px; }
  /* Prompt-templates (12 okt): Vera klein naast de uitleg, de twee tabbladen over de volle breedte
     met een tikvlak van 44px, en het zoekveld over de hele breedte. */
  .ais-vera { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; padding: 14px 12px 0 16px; }
  .ais-vera .ais-vera-fig { width: 72px; height: 72px; }
  .ais-vera-lead { font-size: 14px; }
  .ais-ptabs { display: flex; width: 100%; }
  .ais-ptab { flex: 1 1 0; min-height: 44px; white-space: normal; line-height: 1.25; font-size: 14px; }
  .ais-pzoek .search { max-width: none; }
  /* De kop van een promptkaart: pijltje en naam op regel één, de maat en de laag eronder; de technische
     sleutel blijft op de telefoon weg (die zocht je op het bureaublad). */
  .ais-pkop { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; min-height: 44px; }
  .ais-pkop > .muted { display: none; }
  .ais-pkop-r { grid-column: 2; margin-left: 0; flex-wrap: wrap; }
  .ais-maat-deel, .ais-maat-redenen { font-size: 14px; }
  .ais-feat { padding: 14px; }
  .vp-defaults .muted { font-size: 14px; }

  /* AI-taken: verversen als icoon naast de titel in plaats van op een eigen regel. */
  .content:has(> div > [data-act="ait-refresh"]) > div:first-child { position: relative; }
  [data-act="ait-refresh"] { position: absolute; top: 0; right: 0; width: 44px; min-height: 44px; }
  .content:has(> div > [data-act="ait-refresh"]) > div:first-child h2 { padding-right: 52px; min-height: 44px; display: flex; align-items: center; }
  .content:has(> div > [data-act="ait-refresh"]) > div:first-child p { font-size: 14px !important; }

  /* Thinkwise: het vinkje "Verbinding" is een tikdoel van 44px met een vakje van 22px (TW1), en de
     keuzes staan op de volle breedte in plaats van afgekapt (TW2). */
  label:has(> input[data-edit="tw-enabled"]) { min-height: 44px; font-size: 16px !important; }
  input[data-edit="tw-enabled"] { width: 22px; height: 22px; }
  .ais-ctx-value .select, .ais-ctx-value select { width: 100%; max-width: none; }
}

/* ================================================================ Inloggen (en wachtwoord wisselen) */
@media (max-width: 640px) {
  /* Het eerste scherm dat iedereen ziet. Op de telefoon geen kaart in een kaart: het scherm is
     het vlak, zoals een native inlogscherm. Merk bovenaan, velden en knop groot genoeg voor een
     duim, en de inhoud in het bovenste deel zodat het toetsenbord er niets van afdekt. */
  .firstrun { min-height: 100svh; align-items: flex-start; padding: 0; background: var(--surface); }
  .firstrun-card { border: 0; border-radius: 0; box-shadow: none; max-width: none; min-height: 100svh; }
  .firstrun-card > .firstrun-art { display: none; }
  .firstrun-main { padding: calc(48px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
  .firstrun-main .mark { width: 56px; height: 56px; margin-bottom: 24px; }
  .firstrun-main h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
  .firstrun-main p { font-size: 16px; line-height: 1.5; margin: 8px 0 32px; }
  .firstrun-actions { gap: 12px; }
  .firstrun-actions .input { min-height: 48px; font-size: 16px; }
  .firstrun-actions .btn { min-height: 48px; font-size: 16px; font-weight: 600; margin-top: 4px; }
  .firstrun-actions .btn-ghost { font-weight: 500; }
  .firstrun-hint { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .firstrun-hint:empty { display: none; }
}

/* ================================================================ minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .pa-head-actions .btn[data-act="rollen-save"]:not([disabled]),
  .medew-kaart:not(.is-dicht) > td:not(:first-child) { animation: none; }
  .perm-menu-uitklap > summary::after, .vp-pak > summary::after, .medew-meta > .ic { transition: none; }
}
@media (max-width: 640px) {
  /* Mogelijkheden en feature flags: de schakelaar zegt al of iets aan staat; de losse tag
     "Aan/Uit" ernaast kneep de uitleg tot één woord per regel. */
  .pa-flag:has(> .toggle) > .tag, .pa-flag:has(> span > .toggle) > .tag { display: none; }
  .pa-flag .proc-name { font-size: 16px; }
  .pa-flag .proc-sub { font-size: 14px; }
  /* Een lange knoptekst mag afbreken in plaats van over de rand van zijn vak te lopen. */
  .btn[data-act="beheer-acceptaties-reset"] { white-space: normal; text-align: left; height: auto; min-height: 44px; }
}



/* ---------------------------------------------------------------- 5. minder beweging */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .menu:not([hidden]), .dash-fasemenu:not([hidden]),
  html[data-dz-overgang] .bottom-nav .bn-item.active .ic::before { animation: none; }
  details::details-content { transition: none; }
  .dz-confirm, .pm-sheet { animation: none; }
  .sidebar, .app.nav-open .sidebar, .dz-scrim, .btn, .bn-item, .icontile, .seg-btn, .settings-tab, .proc-tab,
  .navtab, .menu-item, .toggle::after, .bottom-nav .bn-item .ic::before { transition: none; }
}