/* demo/demo.css — DE EIGEN LAAG VAN DE DEMO.
 * (Niet te verwarren met demo/stijl.css: dat is de KOPIE van de huisstijl van
 *  de site. Andere herkomst, ander ritme van bijwerken; voeg ze niet samen.)
 *
 * DE STIJL DIE ALLEEN DE DEMO NODIG HEEFT.
 *
 * Dit stond als inline <style>-blok in demo/index.html. Sinds de demo twee
 * schillen heeft (/demo en /en/demo) zou het daarmee TWEE KEER in de repo staan:
 * 44 KB CSS, gedupliceerd, en dus gegarandeerd uit de pas lopend zodra iemand er
 * een van bijwerkt. Dat is exact de drift die we bij de koppel-instructie
 * (#32 fase 4) hebben opgeruimd.
 *
 * Nu laden beide schillen dit ene bestand. De schillen verschillen daardoor
 * alleen nog in `lang`, `<title>`, de meta-description en de linkkoppen.
 *
 * NIET TE VERWARREN MET demo/stijl.css: dat is de gekopieerde huisstijl uit
 * index.html en bevat niets demo-eigens. Hier staat alleen wat de demo zelf
 * nodig heeft.
 */
/* Alleen wat de DEMO zelf nodig heeft. Alles hierboven is de gekopieerde
     huisstijl; hier staat niets in dat de klantomgeving ook gebruikt. */
  body { margin:0; background:var(--wash); }

  /* ── DE SCHIL: SITE-NAVIGATIE + DEMO-STRIP ──
     Hier stond een vaste donkere balk in --green-900 met een eigen vorm die
     nergens anders op de site voorkwam. De bezoeker zag twee koppen op elkaar,
     en kon vanuit de demo alleen terug of mailen. Nu staat hier de gewone
     site-navigatie, zodat een prospect door kan naar Prijzen of een
     kennismaking, met daaronder een smalle strip die de demo-mededeling draagt.

     BUITEN #app-layer, net als de oude balk: 2.076 regels in stijl.css zijn op
     die wrapper gescopet, en de site-navigatie hoort daar niet bij. De klassen
     .nav, .nav-inner, .nav-links, .brand, .lang-btn en .btn-primary staan al in
     de gekopieerde stijl.css, dus dit blok voegt alleen toe wat daar ontbreekt. */
  .nav { position:relative; z-index:60; }
  /* Het huidige item. Een prospect moet zien waar hij is. */
  .nav-links a.hier { font-weight:700; text-decoration:underline; text-underline-offset:4px; }
  /* De knop voor een kennismaking is een link met .btn-primary, en `.nav-links a`
     (grijsgroen, --mist) is specifieker dan .btn-primary: grijs op donkergroen,
     3,02 tegen 1. De site zette dat recht in css/plotta-site.css; de gekopieerde
     stijl.css loopt daar niet mee, dus het staat hier. Bij hover won
     `.nav-links a:hover` (inkt op wit); nu de donkergroene hover van .btn-primary. */
  .nav-links a.btn-primary { color:#fff; }
  .nav-links a.btn-primary:hover { color:#fff; background:var(--green-700); }

  /* De grens tussen de website en het product: hierboven de site, hieronder
     kijk je in de app. Rustig, maar op het eerste gezicht leesbaar; dit is de
     zin die voorkomt dat verzonnen cijfers voor echte worden aangezien. */
  .demo-strip {
    border-top:1px solid var(--line, #DCD9CF);
    border-bottom:2px solid var(--green-900);
    background:var(--hull, #F3F1EA); color:var(--ink, #1D2B22);
    font-family:Inter,system-ui,sans-serif; font-size:13px; line-height:1.5;
    padding:9px 22px; text-align:center;
  }
  .demo-strip b { font-weight:700; }
  @media (max-width:700px){
    .demo-strip { padding:8px 14px; font-size:12.5px; text-align:left; }
  }

  /* De navigatie staat in de flow (niet fixed), dus de app hoeft er niet meer
     onderdoor te schuiven. De oude padding-top van 78px kan weg. */

  /* Negeer-knop + het Archief. Deze klassen zitten NIET in de gekopieerde
     stijl.css (die dateert van vóór deze functie), dus staan ze hier.
     Gelijkgetrokken met app/index.html: de knop staat in de VOET van de kaart,
     gedempt, met een menu dat naar boven opent. */
  #app-layer .deepadv .da-head { position:relative; }

  /* ═══ DE TWEEKOLOMS-ADVIESKAART (#78) ═════════════════════════════════════════
     Nageschreven uit app/index.html, want de demo hoort er niet anders uit te zien
     dan de app. Links wat het advies zegt, rechts de metadata die je nodig hebt om
     te besluiten. Deze klassen staan NIET in de gekopieerde stijl.css (die dateert
     van voor deze bouw), dus ze horen hier.

     De grid zit op `.da-grid`, niet op `.deepadv`: zo blijft elke andere kaart die
     `.deepadv` hergebruikt een enkele kolom.

     `min-content 1fr` voor de rijen, niet `auto auto`. Met twee auto-rijen verdeelt
     de browser de extra hoogte van de overspannende hoofdkolom over beide rijen, en
     dan groeit het prioriteitsblok mee met de lengte van het advies. */
  #app-layer .da-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px;
    grid-template-rows:min-content 1fr; grid-template-areas:"main prio" "main zij"; }
  #app-layer .da-grid-geenprio { grid-template-rows:1fr; grid-template-areas:"main zij"; }
  #app-layer .da-main { grid-area:main; min-width:0; }
  #app-layer .da-zij { grid-area:zij; display:flex; flex-direction:column; gap:16px;
    background:var(--rail); border-left:1px solid var(--card-line);
    padding:20px 20px 22px; min-width:0; }
  #app-layer .da-zij-prio { grid-area:prio; display:flex; flex-direction:column;
    align-items:flex-start; gap:7px; padding:20px 20px 16px;
    border-left:1px solid var(--card-line); border-bottom:1px solid var(--card-line); }
  /* De kleur per niveau komt uit `.da-belang` (vier varianten op tokens, in
     stijl.css). Het blok eromheen volgt diezelfde familie, verdund naar de
     railkleur zodat het een vlak blijft en geen waarschuwing wordt. */
  #app-layer .pz-urgent { background:color-mix(in srgb, var(--danger-bg) 55%, var(--rail)); }
  #app-layer .pz-vhoog  { background:color-mix(in srgb, var(--warn-bg) 70%, var(--rail)); }
  #app-layer .pz-hoog   { background:color-mix(in srgb, var(--warn-bg) 45%, var(--rail)); }
  #app-layer .pz-gem,
  #app-layer .pz-laag,
  #app-layer .pz-vlaag  { background:var(--rail); }
  /* Letterkleur = --x-tekst, nooit --x: de eerste is om mee te schrijven.
     De houdbaarheid (#78 fase 1c) krijgt GEEN eigen kleur en geen stand voor "bijna
     verlopen": het is een feit over het advies, geen alarm. Daarom staan de drie
     klassen in dezelfde selectors, net als in app/index.html. */
  #app-layer .da-zij-doe { font-size:13px; line-height:1.45; color:var(--ink-soft); }
  #app-layer .da-zij-tot { font-size:13px; line-height:1.45; font-weight:600;
    color:var(--ink-soft); margin-top:5px; }
  #app-layer .da-zij-tot-uit { font-size:12px; line-height:1.4; color:var(--ink-soft); }
  #app-layer .pz-urgent .da-zij-doe,
  #app-layer .pz-urgent .da-zij-tot,
  #app-layer .pz-urgent .da-zij-tot-uit { color:var(--danger-tekst); }
  #app-layer .pz-vhoog .da-zij-doe,
  #app-layer .pz-vhoog .da-zij-tot,
  #app-layer .pz-vhoog .da-zij-tot-uit,
  #app-layer .pz-hoog .da-zij-doe,
  #app-layer .pz-hoog .da-zij-tot,
  #app-layer .pz-hoog .da-zij-tot-uit { color:var(--warn-tekst); }
  #app-layer .da-zij-rij { display:flex; flex-direction:column; gap:4px; min-width:0; }
  #app-layer .da-zij-lbl { font-size:12px; font-weight:400; color:var(--fog);
    font-family:'Inter',system-ui,sans-serif; letter-spacing:0; text-transform:none; }
  #app-layer .da-zij-v { font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; }
  #app-layer .da-zij-uit { font-size:12.5px; line-height:1.45; color:var(--fog); }
  #app-layer .da-zij-lijn { height:1px; background:var(--card-line); }
  #app-layer .da-zij-taken { margin-top:auto; padding-top:18px;
    border-top:1px solid var(--card-line); display:flex; flex-direction:column; gap:9px; }
  /* In de zijbalk is de meetregel een eigen regel, geen chip in een mono-metaregel:
     hij erft daar geen mono en geen uppercase meer.
     EEN FLEXRIJ, GEEN BLOK: als blok viel het i-wolkje op een eigen regel (34px in
     plaats van 19). Zelfde regel als in app/index.html, met de meting daar. */
  #app-layer .da-zij .da-meet { display:flex; align-items:center; gap:6px;
    font-size:13px; font-weight:400;
    line-height:1.45; letter-spacing:0; text-transform:none; }
  #app-layer .da-zij .da-meet .ld-info { margin-left:0; flex:0 0 auto; }

  /* HET I-WOLKJE STAAT BUITEN DE KAART, net als het negeer-menu en om dezelfde
     reden: `.deepadv` heeft overflow:hidden en de zijbalk staat tegen de
     rechterrand, dus een wolkje van 320px werd afgeknipt (gemeten in de demo: 53
     tot 94px op alle vijftien kaarten). Zie app/index.html voor de volledige
     toelichting, inclusief waarom position:fixen binnen de kaart niet werkt. */
  #app-layer .da-zij .ld-info .ld-tip { display:none; }
  #app-layer .wolk-los { position:fixed; z-index:90; width:320px;
    max-width:calc(100vw - 20px); background:var(--kaart,#fff); color:var(--foam);
    border:1px solid var(--line); border-radius:12px; padding:14px 15px;
    box-shadow:0 12px 40px -8px rgba(0,0,0,0.5);
    font-family:'Inter',sans-serif; font-weight:400; text-transform:none; letter-spacing:0; }
  #app-layer .wolk-los[hidden] { display:none; }
  /* De onderwerp-pills zitten nu in een rij met een eigen kopje erboven, dus hun
     oude marge van 8px bovenaan hoort hier niet meer. */
  #app-layer .da-zij .da-cats { margin:2px 0 0; }
  /* DE KOP IS SERIF EN GROOT. In stijl.css staat hij nog op 21px Inter; die kopie
     loopt niet mee met de app, dus de nieuwe maat staat hier. Newsreader is de serif
     die de demo-schil echt laadt. */
  #app-layer .deepadv h3.da-title { font-family:'Newsreader',Georgia,serif; font-size:34px;
    font-weight:600; margin:0 0 14px; color:var(--ink); line-height:1.15; letter-spacing:0; }

  #app-layer .da-acties { display:flex; align-items:center; gap:14px; }
  /* `flex-wrap` en `justify-content` staan hier expliciet omdat het 640px-blok ze
     op `wrap-reverse` en `space-between` zette voor twee knoppen NAAST elkaar. In een
     kolom duwt `space-between` ze over de hele hoogte uit elkaar. Deze selector is
     specifieker, dus hij wint ook binnen een media-query. */
  #app-layer .da-zij .da-acties { flex-direction:column; align-items:stretch;
    flex-wrap:nowrap; justify-content:flex-start; gap:9px; }
  #app-layer .da-zij .da-acties .fc-cta { width:100%; justify-content:center; }
  #app-layer .da-zij .neg-wrap,
  #app-layer .da-zij .neg-knop { width:100%; }

  /* ── DE ZIJBALK SPLITST, OP HET BESTAANDE BREEKPUNT ──
     600px, hetzelfde breekpunt dat stijl.css al voor deze kaart gebruikt (r.3131) en
     hetzelfde als in de app. GEEN NIEUW breekpunt op 375px. Prioriteit BOVEN de kop
     (dat hoort bij het begin), de rest van de zijbalk en de knoppen ONDER de inhoud
     (dat zijn de acties). Eén template voor beide standen: een grid-gebied zonder
     item is een rij van nul hoog. */
  @media (max-width:600px){
    #app-layer .da-grid,
    #app-layer .da-grid-geenprio { grid-template-columns:1fr;
      grid-template-rows:min-content min-content min-content;
      grid-template-areas:"prio" "main" "zij"; }
    #app-layer .da-zij-prio { border-left:0; padding:16px 15px 14px; }
    #app-layer .da-zij { border-left:0; border-top:1px solid var(--card-line);
      padding:16px 15px 18px; }
    #app-layer .deepadv h3.da-title { font-size:23px; line-height:1.22; margin-bottom:10px; }
    /* DE KAART ZELF HEEFT GEEN PADDING MEER. stijl.css zet hier `16px 14px` op
       `.deepadv` (r.3208), uit de tijd dat de kaart één kolom was. De app heeft die
       padding weggehaald omdat `.da-head` en `.da-body` hun eigen 20/24 al
       meebrachten en die stapelden; in de demo is dat nooit meegekomen.
       Met de zijbalk erbij telt het dubbel: het prioriteitsblok en de zijbalk dragen
       hun eigen padding, en een vlak dat tot de kaartrand hoort te lopen zou 14px
       voor de rand stoppen. Gemeten op 375px: de kaart was 263px van de 375. */
    #app-layer .deepadv { padding:0; }
    #app-layer .deepadv .da-head { padding:15px 15px 13px; }
    #app-layer .deepadv .da-body { padding:8px 15px 18px; }
  }
  /* De CTA draagt `margin-top:16px` uit `.da-naar-taken`, van toen hij nog los
     onder de taaktekst stond. In deze knoppenrij duwt die marge hem 16px omlaag
     en staat hij niet meer op één lijn met de secundaire knop. Met een tekstlink
     viel dat niet op; met een omlijnde knop wel (gemeten: 8px scheef). */
  #app-layer .da-acties .da-naar-taken { margin-top:0; }
  #app-layer .neg-wrap { position:relative; }
  /* ── DE SECUNDAIRE KNOP ──
     Omlijnd, geen vulling: de tegenhanger van de gevulde `.fc-cta`. In de app
     heet deze stijl ook `.knop-2e` en bedient hij zowel "Terugzetten" op
     Afgerond als "Negeer" op de advieskaart -- één regel, meerdere gebruikers.
     Hier staat een kopie omdat `stijl.css` van vóór deze functie dateert.
     `.neg-knop` draagt zelf geen opmaak meer; het is de haak waarop het menu
     zijn open-stand zoekt. */
  #app-layer .knop-2e { font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-soft);
    background:transparent; border:1px solid var(--card-line); border-radius:8px; padding:6px 11px;
    min-height:32px; cursor:pointer; white-space:nowrap; transition:all .14s; }
  #app-layer .knop-2e:hover { color:var(--ink); background:rgba(15,31,23,0.05); border-color:var(--ink-soft); }
  /* Los van de kaart gehangen, net als in de app: .deepadv heeft overflow:hidden
     en zou een menu dat boven de kaartrand uitsteekt afknippen. */
  #app-layer .neg-menu { position:fixed; z-index:60; min-width:230px; padding:6px;
    background:var(--vel); border:1px solid var(--card-line); border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.13); }
  #app-layer .neg-menu[hidden] { display:none; }
  #app-layer .neg-menu-kop { font-size:11.5px; font-weight:600; color:var(--ink-soft); padding:6px 10px 8px; }
  #app-layer .neg-optie { display:block; width:100%; text-align:left; background:none; border:none;
    font-family:inherit; font-size:13.5px; color:var(--ink); text-transform:none; letter-spacing:normal;
    padding:8px 10px; border-radius:8px; cursor:pointer; }
  #app-layer .neg-optie:hover { background:var(--wash); }
  #app-layer .neg-anders { display:flex; gap:6px; padding:8px 10px 6px;
    border-top:1px solid var(--card-line); margin-top:4px; }
  #app-layer .neg-anders[hidden] { display:none; }
  #app-layer .neg-anders-veld { flex:1; min-width:0; font:inherit; font-size:13px; color:var(--ink);
    background:var(--paper); border:1px solid var(--card-line); border-radius:8px; padding:6px 9px; }
  #app-layer .neg-anders-ok { background:var(--ink); color:var(--vel); border:none; border-radius:8px;
    font-family:inherit; font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:normal;
    padding:6px 11px; cursor:pointer; white-space:nowrap; }

  /* Het archief: afgerond, genegeerd en verlopen in een lijst. */
  #app-layer .arch-chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 10px; }
  #app-layer .arch-schips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding-left:2px; }
  #app-layer .arch-chip, #app-layer .arch-schip { font:inherit; cursor:pointer;
    background:var(--vel); border:1px solid var(--card-line); color:var(--ink);
    text-transform:none; letter-spacing:normal; transition:all .14s; }
  #app-layer .arch-chip { font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; }
  #app-layer .arch-schip { font-size:12px; font-weight:500; padding:5px 11px; border-radius:999px; color:var(--ink-soft); }
  #app-layer .arch-chip:hover, #app-layer .arch-schip:hover { border-color:var(--ink-soft); }
  #app-layer .arch-chip.aan { background:var(--ink); color:var(--vel); border-color:var(--ink); }
  #app-layer .arch-schip.aan { background:var(--wash); color:var(--ink); border-color:var(--ink-soft); }
  #app-layer .arch-n { opacity:.6; margin-left:3px; }
  #app-layer .arch-lijst { display:flex; flex-direction:column; gap:12px; }
  #app-layer .arch-leeg { font-size:13.5px; color:var(--ink-soft); padding:18px 2px; }
  #app-layer .arch-kaart { background:var(--paper); border:1px solid var(--card-line);
    border-radius:14px; padding:16px 20px; box-shadow:var(--card-shadow); }
  #app-layer .arch-kop { display:flex; align-items:flex-start; gap:16px; justify-content:space-between; }
  #app-layer .arch-kop-l { min-width:0; }
  #app-layer .arch-kop-r { flex-shrink:0; display:flex; align-items:center; gap:8px; }
  #app-layer .arch-badges { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
  #app-layer .arch-badge { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 9px; border-radius:6px; }
  #app-layer .arch-af { background:var(--ok-bg,#E7F1EA); color:var(--ok,#2F6B4F); }
  #app-layer .arch-neg, #app-layer .arch-verl { background:var(--wash); color:var(--ink-soft); }
  #app-layer .arch-datum { font-size:12px; color:var(--ink-soft); }
  #app-layer .arch-title { font-size:17px; font-weight:600; margin:0 0 4px; color:var(--ink); }
  #app-layer .arch-reden { font-size:12.5px; color:var(--ink-soft); }
  #app-layer .arch-reden span { font-weight:600; }
  #app-layer .arch-meer { font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
    background:none; border:1px solid var(--card-line); border-radius:8px; padding:6px 12px;
    color:var(--ink-soft); text-transform:none; letter-spacing:normal; }
  #app-layer .arch-meer:hover { border-color:var(--ink-soft); color:var(--ink); }
  #app-layer .arch-body { display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--card-line); }
  #app-layer .arch-kaart.open .arch-body { display:block; }
  #app-layer .arch-wat { font-size:14px; color:var(--ink); margin:0 0 8px; line-height:1.55; max-width:70ch; }
  #app-layer .arch-taken { margin-top:12px; }
  #app-layer .arch-taken-kop { font-size:11px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .arch-taak { font-size:13.5px; color:var(--ink); padding:5px 0 5px 16px; position:relative; }
  #app-layer .arch-taak::before { content:'\00b7'; position:absolute; left:4px; color:var(--ink-soft); }
  @media (max-width:640px){
    #app-layer .arch-kop { flex-direction:column; align-items:stretch; }
    #app-layer .arch-kop-r { justify-content:flex-start; }
    #app-layer .da-uitkomst .fc-cta { width:100%; justify-content:center; }
    /* TWEE KNOPPEN OP EEN SMAL SCHERM: ONDER ELKAAR, VOLLE BREEDTE.
       Hier stond `flex-wrap:wrap-reverse` met `justify-content:space-between`, voor
       twee knoppen NAAST elkaar in een rij die bij krapte naar boven wikkelde. Sinds
       #78 staan ze in een kolom van 270px onder elkaar, en in een kolom doet
       `space-between` iets anders dan toen: het duwt de knoppen uit elkaar over de
       hele hoogte. De bronvolgorde (CTA, dan Negeer) is al de leesvolgorde.
       WOORDELIJK GELIJK AAN app/index.html; `scripts/test-advieskaart-knoppen.js`
       toetst allebei met dezelfde regel, zodat ze niet uit elkaar kunnen lopen. */
    #app-layer .da-acties { flex-direction:column; align-items:stretch; gap:9px; }
    #app-layer .da-acties .fc-cta { width:100%; justify-content:center; }
    #app-layer .da-acties .neg-wrap,
    #app-layer .da-acties .neg-knop { width:100%; }
    #app-layer .neg-menu { min-width:min(230px, calc(100vw - 60px)); }
  }
  /* Onderbouwing per advies — spiegelt het gedeelde kern-component onderbouwingBlok
     (why-*/wb-*/ob2-*) uit index.html. Deze klassen staan niet in de gekopieerde
     stijl.css. Geen "—"-bullet voor een bronregel (huisregel: geen em-dashes): de
     onderzoek/principe-pill leidt de regel. */
  #app-layer .why-panel { margin-top:9px; border:1px solid var(--card-line); border-radius:11px; background:var(--paper-2); overflow:hidden; }
  #app-layer .why-block { padding:13px 16px; border-bottom:1px solid var(--card-line-soft); }
  #app-layer .why-block:last-child { border-bottom:none; }
  #app-layer .why-block .wb-label { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; display:flex; align-items:center; gap:7px; }
  #app-layer .why-block .wb-label .wb-ic { width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .why-block .wb-ic svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:2.2; }
  #app-layer .wb-ic.ic-bron { background:#2a6fa0; } #app-layer .wb-ic.ic-trend { background:var(--ok-dim); } #app-layer .wb-ic.ic-exp { background:#8a3fa0; } #app-layer .wb-ic.ic-verw { background:var(--violet-dim); }
  #app-layer .why-block p { margin:0; font-size:13px; color:var(--ink); line-height:1.55; }
  #app-layer .why-block .wb-sources { display:flex; flex-direction:column; gap:8px; }
  #app-layer .why-block .wb-source { font-size:12.5px; color:var(--ink); line-height:1.5; }
  #app-layer .ob2-details { margin-top:16px; }
  #app-layer .ob2-summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-family:inherit; font-size:12px; font-weight:600; padding:8px 12px; border-radius:9px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--violet-dim); user-select:none; }
  #app-layer .ob2-summary::-webkit-details-marker { display:none; }
  #app-layer .ob2-summary:hover { border-color:var(--signal-dim); }
  #app-layer .ob2-sum-ic, #app-layer .ob2-chev { width:14px; height:14px; display:flex; }
  #app-layer .ob2-sum-ic svg, #app-layer .ob2-chev svg { width:14px; height:14px; }
  #app-layer .ob2-chev { margin-left:auto; transition:transform .2s; }
  #app-layer .ob2-details[open] .ob2-chev { transform:rotate(180deg); }
  #app-layer .ob2-panel { margin-top:9px; }
  #app-layer .ob2-type { font-family:'SF Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:4px; vertical-align:middle; margin-right:4px; }
  #app-layer .ob2-type-onderzoek { background:#E1EEE6; color:#1E6157; }
  #app-layer .ob2-type-principe { background:#EDE9F6; color:#6A5A9E; }
  #app-layer .wb-source .ob2-rel { color:var(--ink-soft); font-size:11.5px; }
  #app-layer .ob2-bron-link { font-size:11px; font-weight:600; color:var(--violet-dim); white-space:nowrap; }
  #app-layer .ob2-bron-link:hover { text-decoration:underline; }
  #app-layer .ob2-herkomst { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-top:6px; padding:5px 9px; background:var(--inset,#F4F5F0); border-radius:6px; word-break:break-word; }
  #app-layer .ob2-invals { display:flex; flex-direction:column; gap:7px; }
  #app-layer .ob2-inval { font-size:12.5px; color:var(--ink); line-height:1.45; }
  #app-layer .ob2-inval-bij { color:var(--ink-soft); }
  #app-layer .ob2-meet { font-size:11.5px; color:var(--ink-soft); margin-top:6px; }
  #app-layer .ob2-meet-l { font-weight:700; color:var(--ink); }
  /* Lagen-accordeon (spiegelt adviesLagen uit index.html). Deze klassen staan niet in
     de gekopieerde stijl.css. De brillen krijgen een linkerrand per gewicht i.p.v. het
     live-pictogram. */
  #app-layer .lg-uitklap { margin-top:16px; border-top:1px solid var(--card-line); }
  #app-layer .lg-uit { border-bottom:1px solid var(--card-line); }
  #app-layer .lg-uit summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; cursor:pointer; list-style:none; font-size:14px; font-weight:600; color:var(--ink); user-select:none; }
  #app-layer .lg-uit summary::-webkit-details-marker { display:none; }
  #app-layer .lg-uit summary:hover { color:var(--green-700); }
  #app-layer .lg-chev { flex-shrink:0; font-size:20px; line-height:1; color:var(--fog); transition:transform .2s; }
  #app-layer .lg-uit[open] .lg-chev { transform:rotate(90deg); color:var(--green-700); }
  #app-layer .lg-body { padding:2px 2px 16px; }
  #app-layer .lg-body p { font-size:14px; line-height:1.7; color:var(--ink-soft); margin:0; }
  #app-layer .bril { padding:10px 0 10px 13px; border-left:3px solid var(--line); }
  #app-layer .bril + .bril { margin-top:9px; }
  #app-layer .bril-tx { font-size:14px; line-height:1.65; color:var(--ink-soft); }
  #app-layer .bril-tx b { color:var(--ink); font-weight:600; }
  #app-layer .bril-waarschijnlijk { border-left-color:var(--green-700); }
  #app-layer .bril-mogelijk { border-left-color:var(--warn); }
  #app-layer .bril-uitgesloten { opacity:.68; }
  #app-layer .bril-uitgesloten .bril-tx { font-size:13px; }
  #app-layer .gen-kaart { display:flex; align-items:center; gap:16px; justify-content:space-between;
    background:var(--paper); border:1px solid var(--card-line); border-radius:14px;
    padding:16px 20px; margin-bottom:12px; box-shadow:var(--card-shadow); }
  #app-layer .gen-inhoud { min-width:0; }
  #app-layer .gen-title { font-size:17px; font-weight:600; margin:0 0 4px; color:var(--ink); }
  #app-layer .gen-wat { font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.5; max-width:70ch; }
  #app-layer .gen-herstel { flex-shrink:0; }
  @media (max-width:640px){
    #app-layer .gen-kaart { flex-direction:column; align-items:stretch; }
  }
  /* Persoonlijke begroeting bovenaan Deze week (staat niet in de gekopieerde
     stijl.css, want die dateert van vóór deze functie). */
  #app-layer .dw-groet { font-size:15px; font-weight:500; color:var(--ink-soft);
    margin:0 0 8px; letter-spacing:0; line-height:1.4; }
  #app-layer .dw-wave { display:inline-block; }
  #app-layer .dw-lead { font-family:Newsreader,Georgia,serif; font-size:36px; font-weight:500;
    color:var(--ink); margin:0 0 28px; letter-spacing:-0.02em; line-height:1.1; max-width:20ch; }
  @media (max-width:700px){ #app-layer .dw-lead { font-size:28px; } }

  /* Deze week — overzichtsscherm. Deze klassen zijn ná 21 juli toegevoegd en staan
     dus NIET in de gekopieerde stijl.css; ze horen hier. Zelfde regels als in
     index.html, zodat de demo hetzelfde scherm toont. */
  #app-layer .dw-status { font-size:15px; color:var(--mist); margin:0 0 20px; }
  #app-layer .dw-blok-kop { font-family:'SF Mono',monospace; font-size:10.5px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
  /* AANBEVELINGSKAART (2 koloms), gelijk aan index.html. Off-white kaart tegen de
     witte pagina (zoals de voorbeeldvisual). */
  #app-layer .dw-stap { background:#F5F6F1; border:1px solid var(--card-line); border-radius:14px;
    padding:26px 28px; margin-bottom:28px; box-shadow:var(--card-shadow); }
  #app-layer .dw-stap-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
  #app-layer .dw-stap-obs { display:flex; flex-direction:column; align-items:flex-start; }
  #app-layer .dw-stap-taak { font-family:Newsreader,Georgia,serif; font-size:22px; font-weight:600;
    line-height:1.25; letter-spacing:-0.015em; color:var(--ink); margin:0 0 16px; }
  #app-layer .dw-impact-meter { display:inline-flex; align-items:center; gap:10px; }
  #app-layer .dw-im-dots { display:inline-flex; gap:5px; }
  #app-layer .dw-im-dot { width:9px; height:9px; border-radius:50%; background:var(--sage-300); }
  #app-layer .dw-im-dot.vol { background:var(--green-700); }
  #app-layer .dw-im-label { font-size:13px; font-weight:600; color:var(--ink-soft); }
  #app-layer .dw-stap-actie { display:flex; flex-direction:column; align-items:flex-start;
    border-left:1px solid var(--card-line); padding-left:28px; }
  #app-layer .dw-waarom-label { font-family:'SF Mono',monospace; font-size:10.5px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
  #app-layer .dw-waarom-tekst { font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
  @media (max-width:560px){ #app-layer .dw-stap-grid { grid-template-columns:1fr; gap:20px; }
    #app-layer .dw-stap-actie { border-left:none; padding-left:0; border-top:1px solid var(--card-line); padding-top:18px; }
    #app-layer .dw-stap-taak { font-size:20px; } }
  #app-layer .dw-stap-knoppen { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  #app-layer .dw-stap-alle { margin:0 0 28px; }
  /* Pagina-object rechtsboven in de kop (zoals de echte app; na 21 juli). */
  #app-layer .main { position:relative; }
  #app-layer .scherm-object { position:absolute; top:12px; right:24px; z-index:3; margin:0; width:auto; pointer-events:none; }
  #app-layer .scherm-object img { display:block; height:104px; width:auto; filter:drop-shadow(0 12px 16px rgba(15,31,23,.16)); }
  #app-layer .scherm-object::after { content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
    width:56%; height:13px; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(15,31,23,.20), rgba(15,31,23,0) 72%); filter:blur(5px); }
  #app-layer .scherm-object[data-obj="dezeweek"] img,
  #app-layer .scherm-object[data-obj="rapport"] img,
  #app-layer .scherm-object[data-obj="inzichten"] img { height:112px; }
  #app-layer .scherm-object[data-obj="taken"] img { height:80px; }
  @media (max-width:1100px){
    #app-layer .scherm-object img { height:86px; }
    #app-layer .scherm-object[data-obj="dezeweek"] img,
    #app-layer .scherm-object[data-obj="rapport"] img,
    #app-layer .scherm-object[data-obj="inzichten"] img { height:92px; }
    #app-layer .scherm-object[data-obj="taken"] img { height:66px; }
  }
  @media (max-width:820px){
    #app-layer .scherm-object { top:8px; right:14px; }
    #app-layer .scherm-object img,
    #app-layer .scherm-object[data-obj="dezeweek"] img,
    #app-layer .scherm-object[data-obj="rapport"] img,
    #app-layer .scherm-object[data-obj="inzichten"] img { height:64px; }
    #app-layer .scherm-object[data-obj="taken"] img { height:50px; }
  }
  @media (max-width:560px){ #app-layer .scherm-object { display:none; } }
  /* Lege staat: object groter en gecentreerd boven de tekst; kop-object verbergt zich. */
  #app-layer .main:has(.screen.show .leeg-staat) .scherm-object { display:none; }
  /* En het object wijkt ook voor een kaart die bovenaan het scherm begint. De eerste
     twee regels zijn in de demo INERT: hij rendert nergens een `.dk-cat` of een
     `.dk-groep` (geteld: nul treffers in demo.js). De derde kan hier wel grijpen,
     namelijk zodra een scherm met een advieskaart begint.
     Alle drie op `.screen.show > * >`, want "bovenaan het scherm" is de diepte waarop
     een scherm zijn inhoud zet; een kale `:first-child` kijkt ook in wrappers die
     lager staan. De meting en de volledige toelichting staan in app/index.html. */
  #app-layer .main:has(.screen.show > * > .dk-cat:first-child) .scherm-object,
  #app-layer .main:has(.screen.show > * > #tkDatacheck:first-child .dk-groep) .scherm-object,
  #app-layer .main:has(.screen.show > * > .deepadv:first-child) .scherm-object { display:none; }
  #app-layer .leeg-staat { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:52ch; margin:6vh auto 0; padding:0 20px; }
  #app-layer .leeg-object { display:inline-block; margin:0 0 26px; position:relative; }
  #app-layer .leeg-object img { display:block; height:150px; width:auto; filter:drop-shadow(0 16px 22px rgba(15,31,23,.17)); }
  #app-layer .leeg-object::after { content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:52%; height:16px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(15,31,23,.20), rgba(15,31,23,0) 72%); filter:blur(6px); }
  #app-layer .leeg-staat .leeg-tekst { color:var(--ink-soft); font-size:16px; line-height:1.6; }
  @media (max-width:560px){ #app-layer .leeg-object img { height:110px; } }
  /* Datakwaliteit: afvinken / niet-van-toepassing / terugzetten (na 21 juli). */
  #app-layer .dc-acties { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  #app-layer .dc-act { font-family:inherit; font-size:12px; font-weight:600; padding:6px 12px; min-height:32px;
    border-radius:8px; cursor:pointer; border:1px solid var(--card-line); background:transparent; color:var(--ink-soft);
    white-space:nowrap; transition:color .14s, background .14s, border-color .14s; }
  #app-layer .dc-act:hover { color:var(--ink); background:rgba(15,31,23,0.05); border-color:var(--ink-soft); }
  #app-layer .dc-afg-groep { margin-top:18px; padding-top:14px; border-top:1px solid var(--card-line); }
  #app-layer .dc-afg-kop { font-family:'SF Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .dc-afg-rij { opacity:.72; }
  #app-layer .dc-ernst-af { background:transparent; color:var(--ink-40,#8A968E); font-weight:700; }
  #app-layer .dc-st-label { font-size:11px; color:var(--ink-soft); }
  /* Rail: Instellingen + account onderin vastzetten met ruimte erboven (na 21 juli). */
  #app-layer .side { min-height:calc(100vh - 150px); }
  #app-layer .side-onder { margin-top:auto; display:flex; flex-direction:column; }
  #app-layer .side-foot { margin-top:10px; }
  @media (max-width:860px){
    #app-layer .side { min-height:0; max-height:none; gap:4px; padding:8px 10px; scrollbar-width:none; }
    #app-layer .side::-webkit-scrollbar { display:none; height:0; }
    #app-layer .side-onder { margin-top:0; margin-left:auto; flex-direction:row; align-items:center; flex-shrink:0; }
    #app-layer .side-onder .nav-onder { flex-direction:row; }
    /* Brand compact (alleen merkteken) en nav met actief-label + iconen, net als de app. */
    #app-layer .side .brand { padding:2px 4px; flex-shrink:0; }
    #app-layer .side .brand .name { display:none; }
    #app-layer .side .nav { gap:2px; margin-top:0; }
    #app-layer .side .nav a { padding:9px 11px; font-size:13.5px; white-space:nowrap; flex-shrink:0; gap:8px; }
    #app-layer .side .nav a span,
    #app-layer .side .nav-onder a span { display:none; }
    #app-layer .side .nav a.active span { display:inline; }
    #app-layer .side .nav a .ic { width:19px; height:19px; }
  }
  /* Terugzetten-knop op Afgerond (na 21 juli, dus hier). */
  #app-layer .afg-datum { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
  #app-layer .afg-herstel { font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-soft);
    background:transparent; border:1px solid var(--card-line); border-radius:8px; padding:6px 11px; min-height:32px;
    cursor:pointer; white-space:nowrap; transition:all .14s; }
  #app-layer .afg-herstel:hover { color:var(--ink); background:rgba(15,31,23,0.05); border-color:var(--ink-soft); }

  /* ── DE AFGEROND-KAART OP EEN TELEFOON (#47 fase 4) ──
     GEMETEN op 375 px: acht elementen liepen tot 398, 405 en 424 px, terwijl het
     venster op 375 eindigt EN de pagina niet horizontaal scrollt. Ze werden dus
     niet verschoven maar AFGEKNIPT: de knop "Terugzetten" was op een telefoon
     volledig onbereikbaar.

     De oorzaak zit in twee lagen die elkaar niet kennen. `stijl.css` (de bevroren
     kopie van vóór 21 juli) geeft `.afg-datum` een `white-space:nowrap` en
     `flex-shrink:0` -- terecht, want in de APP staat daar alleen een korte datum
     ("14 sep 2026"). De demo zette er ná die kopie een hele zin in ("Afgerond op
     21 juni 2026 door Sanne") plus een knop, en die twee regels bleven gelden.

     De app breekt hier NIET: zijn `.afg-datum` draagt maar één korte datum en
     `.afg-herstel` bestaat daar niet. Gemeten op dezelfde 375 px: nul elementen
     buiten beeld. Daarom staat deze reparatie in de demo-laag en niet in de app.
     (Dat de demo hier méér toont dan de app is een oudere afwijking; die staat
     als losse regel in het rapport, niet hier.)

     DE ZIN KRIJGT DE VOLLE BREEDTE, de knop komt eronder. Eerst stonden ze naast
     elkaar op die tweede regel, en toen brak "Afgerond op 21 mei 2026 door Mark
     Bakker" in vijf regels van twee woorden. Onder elkaar leest het in twee. */
  @media (max-width:430px){
    #app-layer .afg-card { flex-wrap:wrap; row-gap:10px; }
    /* Een eigen regel onder de tekst, uitgelijnd met de body (vinkje 30 + gap 14).
       `flex:1 1 100%` MET shrink: met `1 0 100%` kan het blok niet onder zijn
       eigen inhoud zakken, en dan blijft de nowrap-zin hem 265 px breed houden
       in een kaart van 263. `min-width:0` heft de automatische minimumbreedte
       van een flex-item op, die hetzelfde doet. */
    #app-layer .afg-datum { flex:1 1 100%; min-width:0; flex-direction:column;
      align-items:stretch; gap:8px; white-space:normal; padding-left:44px; }
    #app-layer .afg-datum .afg-herstel { align-self:flex-end; }
  }
  /* ── DE MARKT-RIJ OP EEN TELEFOON (C44) ──
     De app wrapt deze rij sinds #47 fase 4 onder 430 px; de demo had die regel niet,
     want `stijl.css` is de kopie van vóór die bouw. GEMETEN op 375 px, nl en en: de
     rij eindigt op 298 px en het label "grootste markt" / "biggest market" liep tot
     407 px, voorbij het blok (319). Dezelfde regel als in de app: het label zakt naar
     een eigen regel en lijnt rechts uit; niets wordt afgekapt. */
  @media (max-width:430px){
    #app-layer .mk-row-simple { flex-wrap:wrap; row-gap:6px; }
    #app-layer .mk-row-simple .mk-hoofd-tag { margin-left:auto; }
  }
  /* Taken-kaartkop met sage-gradient + fade (zoals de advieskaart); na 21 juli. */
  #app-layer .card.tk-groep { padding:0; overflow:hidden; }
  #app-layer .tkg-kop { background:linear-gradient(150deg,#E7EDDF,#FBFCFB); padding:18px 22px; margin-bottom:0; border-bottom:1px solid var(--card-line); }
  #app-layer .tk-groep .tk-lijst { padding:9px 22px 15px; }
  #app-layer .tkg-flits { animation:tkgFlits 1.8s ease; }
  @keyframes tkgFlits { 0%,70%{ box-shadow:0 0 0 2px var(--sage-300); } 100%{ box-shadow:var(--card-shadow); } }
  @media (prefers-reduced-motion:reduce){ #app-layer .tkg-flits { animation:none; box-shadow:0 0 0 2px var(--sage-300); } }
  /* COMPLETED RECENTLY — laatste (max 3) afgeronde teamtaken. Witte kaartjes. */
  #app-layer .dw-recent { margin-bottom:20px; }
  #app-layer .dw-recent-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
  #app-layer .dw-recent-kop { font-family:Newsreader,Georgia,serif; font-size:19px; font-weight:600; color:var(--ink); margin:0; }
  #app-layer .dw-recent-all { font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer; font-family:inherit; }
  #app-layer .dw-recent-all:hover { color:var(--ink); text-decoration:underline; }
  #app-layer .dw-recent-lijst { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  #app-layer .dw-recent-rij { display:flex; gap:12px; background:var(--paper); border:1px solid var(--card-line); border-radius:12px; padding:14px 16px; }
  #app-layer .dw-recent-vink { flex-shrink:0; width:18px; height:18px; border-radius:5px; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:1px; }
  #app-layer .dw-recent-mid { min-width:0; }
  #app-layer .dw-recent-t { font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; margin-bottom:6px; }
  #app-layer .dw-recent-meta { font-size:12px; color:var(--ink-soft); line-height:1.55; }
  #app-layer .dw-recent-meta b { color:var(--ink); font-weight:600; }
  @media (max-width:760px){ #app-layer .dw-recent-lijst { grid-template-columns:1fr; } }
  #app-layer .dw-meet { display:block; margin:0 0 20px; }
  #app-layer .dw-meet-strip { display:flex; align-items:center; gap:9px; width:100%;
    background:var(--ok-bg); border:1px solid var(--ok); border-radius:11px; padding:11px 15px;
    font-family:inherit; font-size:13.5px; color:var(--ok-tekst); cursor:pointer; text-align:left; }
  #app-layer .dw-meet-vink { font-weight:700; }
  #app-layer .dw-meet-tx { flex:1; }
  #app-layer .dw-meet-arrow { color:var(--ok); }
  #app-layer .dw-meet-urgent { border:0; }
  #app-layer .dw-voortgang-blok, #app-layer .dw-nieuw, #app-layer .dw-week,
  #app-layer .dw-opbrengst, #app-layer .dw-klaar, #app-layer .dw-data {
    background:var(--paper); border:1px solid var(--card-line); border-radius:14px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--card-shadow); }
  #app-layer .dw-data-lijst { display:flex; flex-direction:column; }
  #app-layer .dw-data-rij { padding:12px 2px; border-top:1px solid rgba(28,40,34,0.06); }
  #app-layer .dw-data-rij:first-child { border-top:0; }
  #app-layer .dw-vink-stil { cursor:default; }
  #app-layer .dw-data .btn-lees { margin-top:14px; }

  /* Rapportages — archief van adviesrondes (na 21 juli, dus hier, niet in stijl.css). */
  #app-layer .rp-kaart { background:var(--paper); border:1px solid var(--card-line); border-radius:14px;
    padding:18px 20px; margin-bottom:14px; box-shadow:var(--card-shadow); max-width:620px; }
  #app-layer .rp-kaart.rp-lopend { border-color:#F0D4BE; background:linear-gradient(168deg,#FFF9F4,var(--paper) 60%); }
  #app-layer .rp-kop { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  #app-layer .rp-titel { font-family:Newsreader,Georgia,serif; font-size:19px; font-weight:600; color:var(--ink); }
  #app-layer .rp-status { font-family:'SF Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; padding:3px 9px; border-radius:6px; white-space:nowrap; }
  #app-layer .rp-status-loopt { background:var(--warn-bg,#F6EBD8); color:var(--warn-tekst); }
  #app-layer .rp-status-af { background:var(--ok-bg); color:var(--ok-tekst); }
  #app-layer .rp-periode { font-size:13px; color:var(--ink-soft); margin-top:4px; }
  #app-layer .rp-meta { font-size:14px; color:var(--ink); margin-top:10px; }
  #app-layer .rp-eff { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
  #app-layer .rp-eff-rij { display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--wash); border-radius:8px; padding:8px 12px; }
  #app-layer .rp-eff-m { font-size:13px; color:var(--ink-soft); }
  #app-layer .rp-eff-v { font-size:14px; font-weight:700; color:var(--ink); }
  #app-layer .rp-eff-v.v-goed { color:var(--ok-tekst); }
  #app-layer .rp-kaart .btn-lees { margin-top:14px; }
  #app-layer .rp-groeit { font-size:13px; color:var(--ink-soft); margin:6px 2px 0; font-style:italic; max-width:620px; }
  #app-layer .dw-vt-rij { display:flex; gap:14px; flex-wrap:wrap; }
  #app-layer .dw-vt { flex:1; min-width:96px; background:var(--wash); border-radius:10px; padding:14px 16px; }
  #app-layer .dw-vt-n { font-family:Newsreader,Georgia,serif; font-size:30px; font-weight:600; color:var(--ink); line-height:1; }
  #app-layer .dw-vt-l { font-size:12.5px; color:var(--ink-soft); margin-top:6px; }
  #app-layer .dw-nieuw-lijst { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  #app-layer .dw-nieuw-lijst li { font-size:14px; color:var(--ink); padding-left:20px; position:relative; line-height:1.45; }
  #app-layer .dw-nieuw-lijst li::before { content:'●'; position:absolute; left:0; top:1px; color:var(--beam); font-size:9px; }
  #app-layer .dw-week { border-color:#F0D4BE; background:linear-gradient(168deg,#FFF9F4,var(--paper) 60%); }
  #app-layer .dw-week-kop { }
  #app-layer .dw-week-lijst { display:flex; flex-direction:column; }
  #app-layer .dw-tkr { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;
    padding:12px 2px; border-top:1px solid rgba(28,40,34,0.06); }
  #app-layer .dw-tkr:first-child { border-top:0; }
  #app-layer .dw-vink { flex-shrink:0; width:26px; height:26px; border-radius:7px;
    border:1.5px solid var(--card-line); background:#fff; color:var(--ok); cursor:pointer;
    font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; }
  #app-layer .dw-tkr-afgerond .dw-vink { background:var(--ok-bg); border-color:var(--ok); }
  #app-layer .dw-tkr-mid { flex:1; min-width:0; }
  #app-layer .dw-tkr-t { font-size:14.5px; color:var(--ink); line-height:1.4; }
  #app-layer .dw-tkr-afgerond .dw-tkr-t { color:var(--ink-soft); text-decoration:line-through; }
  #app-layer .dw-tkr-meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; font-size:12px; color:var(--ink-soft); }
  #app-layer .dw-tkr-duur { color:var(--fog); }
  #app-layer .dw-tkr-bron { color:var(--fog); font-style:italic; }
  #app-layer .dw-week .btn-lees { margin-top:14px; }
  #app-layer .dw-week-klaar { text-align:center; padding:28px 20px; }
  #app-layer .dw-klaar-groot { font-family:Newsreader,Georgia,serif; font-size:24px; font-weight:600; color:var(--ok-tekst); }
  #app-layer .dw-klaar-teller { font-size:14px; color:var(--ink-soft); margin:8px 0 0; }
  #app-layer .dw-opb-wat { font-size:14.5px; color:var(--ink); line-height:1.45; }
  #app-layer .dw-opb-cijfer { font-size:15px; color:var(--ink); margin-top:8px; }
  #app-layer .dw-opb-eff { font-weight:700; }
  #app-layer .dw-opb-eff.v-goed { color:var(--ok-tekst); }
  #app-layer .dw-mijl { display:inline-flex; align-items:center; gap:7px; margin-top:12px;
    background:var(--ok-bg); color:var(--ok-tekst); border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:600; }
  #app-layer .dw-mijl-ic { color:var(--beam); }
  #app-layer .dw-klaar p { font-size:14.5px; color:var(--ink); margin:0 0 14px; line-height:1.5; }

  /* A/B-test foldout (na 21 juli; hoort in demo/index.html, niet in stijl.css) */
  #app-layer .abt-btn { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:8px; border:1px solid var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); cursor:pointer; transition:all .14s; margin-top:8px; }
  #app-layer .abt-btn:hover { background:var(--beam-knop); color:#fff; }
  #app-layer .abt-btn svg { width:13px; height:13px; }
  #app-layer .abt-panel { margin-top:12px; border:1px solid var(--card-line); border-radius:11px; overflow:hidden; background:#fff; }
  #app-layer .abt-head { display:flex; align-items:center; gap:9px; padding:11px 14px; background:linear-gradient(135deg,#EEF3E7,#E7EDDF); border-bottom:1px solid var(--card-line); }
  #app-layer .abt-head .abt-ic { width:24px; height:24px; border-radius:7px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .abt-head .abt-ic svg { width:14px; height:14px; }
  #app-layer .abt-head .abt-h-t { font-size:12.5px; font-weight:700; color:var(--ink); }
  #app-layer .abt-head .abt-h-s { font-size:11px; color:var(--ink-soft); }
  #app-layer .abt-kaarten { display:flex; flex-direction:column; gap:8px; padding:12px 14px; }
  #app-layer .abt-kaart { text-align:left; border:1px solid var(--card-line); border-radius:9px; padding:10px 12px; background:var(--paper-2,#FCFCFA); cursor:pointer; transition:all .14s; width:100%; }
  #app-layer .abt-kaart:hover { border-color:var(--signal-dim); }
  #app-layer .abt-kaart-nu { border-color:var(--signal-dim); background:#fff; box-shadow:0 0 0 1px var(--signal-dim) inset; }
  #app-layer .abt-kaart-kop { display:flex; align-items:center; gap:8px; }
  #app-layer .abt-kaart .abt-radio { color:var(--signal-dim); font-size:13px; }
  #app-layer .abt-kaart-titel { font-size:12.5px; font-weight:700; color:var(--ink); flex:1; }
  #app-layer .abt-tag { font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--sage-100,#E7EDDF); color:var(--green-700,#1D3B2A); }
  #app-layer .abt-waarom { font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin-top:6px; }
  #app-layer .abt-acties { display:flex; gap:8px; padding:0 14px 12px; flex-wrap:wrap; }
  #app-layer .abt-act { font-family:inherit; font-size:12px; font-weight:600; padding:7px 13px; border-radius:8px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .14s; }
  #app-layer .abt-act:hover { border-color:var(--signal-dim); color:var(--ink); }
  #app-layer .abt-act.primary { background:var(--beam-knop); border-color:var(--beam-knop); color:#fff; }
  #app-layer .abt-varianten { padding:0 14px 12px; display:flex; flex-direction:column; gap:10px; }
  #app-layer .abt-var { border:1px solid var(--card-line); border-radius:9px; overflow:hidden; }
  #app-layer .abt-var-kop { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 11px; background:var(--sage-100,#E7EDDF); }
  #app-layer .abt-var-lbl { font-size:11.5px; font-weight:700; color:var(--green-700,#1D3B2A); }
  #app-layer .abt-kopieer { font-family:inherit; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:6px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; }
  #app-layer .abt-kopieer:hover { border-color:var(--signal-dim); color:var(--ink); }
  #app-layer .abt-var-body { font-size:12.5px; color:var(--ink); line-height:1.55; white-space:pre-wrap; padding:11px; background:#fff; }
  #app-layer .abt-meet { font-size:11.5px; color:var(--ink-soft); line-height:1.55; background:var(--paper-2,#FCFCFA); border:1px solid var(--card-line-soft,#F0F1EB); border-radius:9px; padding:10px 12px; }
  #app-layer .abt-meet b { color:var(--ink); }
  #app-layer .abt-res-open { font-family:inherit; font-size:12px; font-weight:600; padding:8px 13px; border-radius:8px; border:1px dashed var(--signal-dim); background:transparent; color:var(--violet-dim); cursor:pointer; align-self:flex-start; }
  #app-layer .abt-res-open:hover { background:var(--sage-100,#E7EDDF); }
  #app-layer .abt-res-form { border:1px solid var(--card-line); border-radius:9px; padding:12px; background:var(--paper-2,#FCFCFA); display:flex; flex-direction:column; gap:9px; }
  #app-layer .abt-res-t { font-size:12px; color:var(--ink); font-weight:600; }
  #app-layer .abt-res-rij { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  #app-layer .abt-res-rij label { font-size:11.5px; color:var(--ink-soft); flex:1; }
  #app-layer .abt-res-in { display:flex; align-items:center; gap:6px; }
  #app-layer .abt-res-in input { width:80px; font-family:inherit; font-size:12.5px; padding:6px 9px; border:1px solid var(--card-line); border-radius:7px; text-align:right; }
  #app-layer .abt-res-in span { font-size:11px; color:var(--ink-soft); }
  #app-layer .abt-res-notitie { font-family:inherit; font-size:12px; padding:8px 10px; border:1px solid var(--card-line); border-radius:7px; resize:vertical; }
  #app-layer .abt-res-knoppen { display:flex; gap:8px; }
  #app-layer .abt-res-klaar { font-size:11.5px; color:var(--ok-tekst,#2F6B43); font-weight:600; display:flex; align-items:center; gap:6px; }
  #app-layer .abt-disclaimer { font-size:10.5px; color:var(--fog); padding:0 14px 12px; font-style:italic; }

  /* Takenpagina: taken voorop (gelijk aan de echte omgeving; na 21 juli) */
  #app-layer .tk-progress { display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:var(--paneel,#fff); border:1px solid var(--card-line); border-radius:14px; padding:14px 18px; margin-bottom:16px; }
  #app-layer .tk-progress .tk-prog-tel { display:flex; align-items:baseline; gap:8px; }
  #app-layer .tk-progress .cs-big { font-family:Newsreader,Georgia,serif; font-size:26px; font-weight:600; color:var(--ink); line-height:1; }
  #app-layer .tk-progress .cs-van { font-size:16px; color:var(--ink-soft); }
  #app-layer .tk-progress .cs-sub { font-size:12.5px; color:var(--ink-soft); }
  #app-layer .tk-progress .tk-tel { display:flex; gap:14px; }
  #app-layer .tk-progress .tkt { display:flex; align-items:baseline; gap:5px; font-size:12.5px; color:var(--ink-soft); }
  #app-layer .tk-progress .tkt b { font-size:15px; color:var(--ink); }
  #app-layer .tk-progress .cap-bar-wrap { flex:1; min-width:120px; height:8px; background:var(--sage-100,#E7EDDF); border-radius:6px; overflow:hidden; }
  #app-layer .tk-progress .cap-bar { height:100%; background:var(--green-700,#1D3B2A); border-radius:6px; transition:width .4s ease; }

  #app-layer .dc-slank { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); padding:9px 14px; border:1px solid var(--card-line); border-radius:11px; margin-bottom:16px; background:var(--paneel,#fff); }
  #app-layer .dc-slank-ok .dc-vink { color:var(--ok-tekst,#2F6B43); font-weight:700; }
  #app-layer .dc-inklap { border:1px solid var(--card-line); border-radius:11px; margin-bottom:16px; background:var(--paneel,#fff); overflow:hidden; }
  #app-layer .dc-inklap-urgent { border-color:#E7C9BE; }
  #app-layer .dc-inklap-kop { width:100%; display:flex; align-items:center; gap:10px; padding:11px 14px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; }
  #app-layer .dc-inklap-kop:hover { background:var(--vel,#FCFCFA); }
  #app-layer .dc-inklap-ic { width:24px; height:24px; flex-shrink:0; border-radius:7px; background:var(--sage-100,#E7EDDF); color:var(--green-700,#1D3B2A); display:flex; align-items:center; justify-content:center; }
  #app-layer .dc-inklap-ic svg { width:15px; height:15px; }
  #app-layer .dc-inklap-urgent .dc-inklap-ic { background:#F6E4DD; color:#A8443D; }
  #app-layer .dc-inklap-t { font-size:13.5px; font-weight:700; color:var(--ink); }
  #app-layer .dc-inklap-tel { font-size:12px; color:var(--ink-soft); font-family:'SF Mono',monospace; }
  #app-layer .dc-inklap-tel.urgent { color:#A8443D; font-weight:700; }
  #app-layer .dc-inklap-chev { margin-left:auto; font-size:17px; color:var(--ink-soft); line-height:1; }
  #app-layer .dc-inklap-body { padding:0 14px 12px; }
  #app-layer .dc-inklap-body .dc-blok { border:none; padding:0; margin:0; background:none; border-radius:0; }
  #app-layer .dc-inklap-body .dc-blok > .dc-kop, #app-layer .dc-inklap-body .dc-intro { display:none; }

  /* Doorvraag-patroon: open invulveld bij een taak + de vervolgtaak (na 21 juli) */
  #app-layer .inp-vraag { margin-top:12px; border:1px solid var(--card-line); border-radius:11px; background:var(--paper-2,#FCFCFA); padding:12px 14px; }
  #app-layer .inp-label { display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px; }
  #app-layer .inp-rij { display:flex; gap:8px; flex-wrap:wrap; }
  #app-layer .inp-veld { flex:1; min-width:180px; font-family:inherit; font-size:13px; padding:8px 11px; border:1px solid var(--card-line); border-radius:8px; background:#fff; color:var(--ink); }
  #app-layer .inp-veld:focus { outline:none; border-color:var(--signal-dim); }
  #app-layer .inp-btn { font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:8px; border:1px solid var(--beam-knop); background:var(--beam-knop); color:#fff; cursor:pointer; }
  #app-layer .inp-btn:hover { opacity:0.9; }
  #app-layer .inp-hint { font-size:11px; color:var(--ink-soft); margin-top:8px; }
  #app-layer .inp-klaar { margin-top:12px; display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--ok-tekst,#2F6B43); background:var(--sage-100,#E7EDDF); border-radius:9px; padding:9px 12px; line-height:1.5; }
  #app-layer .inp-klaar b { color:var(--green-700,#1D3B2A); }
  #app-layer .tkr-vervolg { font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--sage-100,#E7EDDF); color:var(--green-700,#1D3B2A); }
  /* Zichtbare prompt bij de tekstgenerator */
  #app-layer .gen-prompt { margin:12px 14px 0; border:1px dashed var(--sage-300,#C9D6C1); border-radius:9px; background:var(--sage-100,#E7EDDF); padding:10px 12px; }
  #app-layer .gp-label { display:flex; align-items:center; gap:6px; font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--green-700,#1D3B2A); margin-bottom:6px; }
  #app-layer .gp-label svg { width:13px; height:13px; }
  #app-layer .gp-tekst { font-size:12px; color:var(--ink); line-height:1.55; font-style:italic; }

  /* A/B-terugkoppeling: vergrendelde (4-weken) staat */
  #app-layer .abt-locked { margin-top:12px; border:1px solid var(--card-line); border-radius:11px; background:var(--paper-2,#FCFCFA); padding:13px 15px; }
  #app-layer .abt-locked-kop { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); }
  #app-layer .abt-locked-kop svg { width:15px; height:15px; color:var(--ink-soft); }
  #app-layer .abt-locked p { font-size:12px; color:var(--ink-soft); line-height:1.55; margin:6px 0 10px; }
  #app-layer .abt-locked-demo { font-family:inherit; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px dashed var(--signal-dim); background:transparent; color:var(--violet-dim); cursor:pointer; }
  #app-layer .abt-locked-demo:hover { background:var(--sage-100,#E7EDDF); }

  /* ── HET BELANG NAAST HET NUMMER (na 21 juli toegevoegd) ──
     Deze klassen staan bewust HIER en niet in demo/stijl.css: dat bestand is een
     kopie van het stijlblok uit index.html van vóór 21 juli en loopt daar niet
     mee. Zie CLAUDE.md. */
  #app-layer .da-belang { display:inline-flex; align-items:center; gap:6px;
                          padding:3px 8px; border-radius:6px; flex-shrink:0;
                          border:1px solid transparent; }
  #app-layer .da-belang .d { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  #app-layer .da-belang.urgent { background:var(--danger-bg); color:var(--danger-tekst);
                                 border-color:color-mix(in srgb, var(--danger) 28%, transparent); }
  #app-layer .da-belang.urgent .d { background:var(--danger); }
  #app-layer .da-belang.vhoog { background:var(--warn-bg); color:var(--warn-tekst);
                                border-color:color-mix(in srgb, var(--warn) 28%, transparent); }
  #app-layer .da-belang.vhoog .d { background:var(--warn); }
  #app-layer .da-belang.hoog { background:color-mix(in srgb, var(--warn-bg) 55%, var(--vel));
                               color:var(--warn-tekst);
                               border-color:color-mix(in srgb, var(--warn) 16%, transparent); }
  #app-layer .da-belang.hoog .d { background:var(--warn); }
  /* DE ONDERSTE DRIE DELEN EEN NEUTRAAL UITERLIJK, en dat is een correctie.
     Eerst liet ik ze naar de kaartkleur toe verbleken om ze te onderscheiden,
     zoals de mockup met drie grijstinten doet. Gemeten liep de tekst daardoor
     terug naar 3,40 (Laag) en 2,60 (Heel laag): onleesbaar. Precies de fout
     waar het commentaar bij de betekeniskleuren hierboven voor waarschuwt, een
     kleur die als VLAK werkt, werkt niet als LETTER.
     Het woord zegt zelf al welk niveau het is; de kleur hoeft alleen te zeggen
     "dit is de rustige kant van de schaal". Dus: één neutrale stijl, leesbaar,
     en het onderscheid ligt in de tekst. De klassen blijven apart bestaan zodat
     je ze later los kunt bijstellen. */
  #app-layer .da-belang.gem,
  #app-layer .da-belang.laag,
  #app-layer .da-belang.vlaag { background:var(--paper-inset); color:var(--ink-soft);
                                border-color:var(--card-line); }
  #app-layer .da-belang.gem .d,
  #app-layer .da-belang.laag .d,
  #app-layer .da-belang.vlaag .d { background:var(--fog); }

/* ══════════════════════════════════════════════════════════════════════════
   DE KOP-MODULES (#21 fase 2a)
   ══════════════════════════════════════════════════════════════════════════
   Letterlijk overgenomen uit app/index.html (de blok-CSS bij KOP_MODULES),
   want de demo hoort er niet anders uit te zien dan de app. Alleen de selector
   is meegekomen zoals hij daar staat: alles onder #app-layer, want daar is de
   hele huisstijl op gescopet en de demo zet zijn scherm in datzelfde vak.

   Dit is een KOPIE, geen koppeling: demo/demo.css loopt niet mee met
   app/index.html. Verandert de huisstijl van deze blokken daar, dan verandert
   de demo niet mee. Dat is dezelfde afspraak als bij stijl.css.
   ══════════════════════════════════════════════════════════════════════════ */
  /* Het kind-label, de herkomst-klasse en de twee puntjes zijn met #78 vervallen:
     het soort advies staat nu in de zijbalk onder "Soort advies" en de herkomst
     eronder, allebei als `.da-zij-v` met `.da-zij-uit`. Ze staan daar niet meer
     NAAST elkaar, dus het scheidingsteken dat twee grijze woordlabels uit elkaar
     hield heeft geen reden meer. Uit app/index.html, waar precies hetzelfde is
     weggehaald. */
  /* Wanneer de cijfers gemeten zijn (#67 fase 1). Ouder dan vier weken krijgt
     kleur; dat is geen opsmuk maar de hele reden dat het er staat. Uit
     app/index.html.
     `--warn-tekst`, NIET `--warn`: de eerste is om mee te schrijven, de tweede is
     voor een vlak. Vandaag dezelfde waarde, dus dit verandert geen pixel. */
  #app-layer .da-meet { color:var(--ink-soft); font-weight:700; }
  #app-layer .forward .da-meet { color:var(--ink-soft); }
  #app-layer .da-meet-oud, #app-layer .forward .da-meet-oud { color:var(--warn-tekst); }
  #app-layer .da-meet-leeg, #app-layer .forward .da-meet-leeg { font-style:italic; }
  #app-layer .ob2-sum-n { color:var(--ink-soft); font-weight:500; }

  /* ── DE KOP-MODULES ───────────────────────────────────────────────────────
     Eén container-taal in de groene kop: een WIT, AFGEROND BLOK met dezelfde
     randstijl en hetzelfde mono-label. Bewust gelijk aan .ctx (de metric-cards
     die er al waren), zodat de kop niet in twee vormentalen uiteenvalt. */
  #app-layer .km { margin:12px 0 0; background:var(--paper); border:1px solid var(--card-line);
    border-radius:10px; padding:11px 14px; }
  #app-layer .km-lab { font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.06em;
    text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
  #app-layer .km-warn { border-color:color-mix(in srgb, var(--warn) 45%, var(--card-line)); }
  #app-layer .km-warn .km-lab { color:var(--warn); }

  /* Groot cijfer: één getal draagt de kop. */
  #app-layer .km-hero { text-align:left; }
  #app-layer .km-groot { font-size:30px; font-weight:700; color:var(--ink); line-height:1.1;
    font-variant-numeric:tabular-nums; }
  #app-layer .km-groot-l { font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.06em;
    text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-top:6px; }

  /* Van, naar. */
  #app-layer .km-vn { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px;
    font-variant-numeric:tabular-nums; }
  #app-layer .km-vn-v { font-size:15px; color:var(--ink-soft); }
  #app-layer .km-vn-p { color:var(--fog); }
  #app-layer .km-vn-n { font-size:19px; font-weight:700; color:var(--ink); }
  #app-layer .km-vn-d { font-family:'SF Mono',monospace; font-size:11px; font-weight:700;
    color:var(--ink-soft); background:var(--paper-inset); border-radius:7px; padding:2px 8px; }

  /* Dit tegen het gemiddelde. */
  #app-layer .km-barwrap + .km-barwrap { margin-top:9px; }
  #app-layer .km-barlbl { display:flex; justify-content:space-between; gap:10px;
    font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
  #app-layer .km-barlbl b { color:var(--ink); font-variant-numeric:tabular-nums; }
  #app-layer .km-bar { height:7px; border-radius:999px; background:var(--paper-inset); overflow:hidden; }
  #app-layer .km-bar span { display:block; height:100%; border-radius:999px; }
  #app-layer .km-bar .is-dit { background:var(--beam); }
  #app-layer .km-bar .is-gem { background:var(--fog); }

  /* De kleine tabel. */
  /* `table-layout:fixed` plus een brekend label: zonder die twee duwt een lange
     labeltekst de waardekolom op een telefoon buiten het blok. */
  /* `min-width:0` is GEEN sier: op een telefoon geldt `#app-layer table
     { min-width:520px }` (voor de brede datatabellen die daar horizontaal
     scrollen), en die duwde dit kleine kopblok buiten beeld. */
  #app-layer .km-tbl { width:100%; min-width:0; table-layout:fixed;
    border-collapse:collapse; font-size:12.5px; }
  #app-layer .km-tbl th { text-align:left; font-weight:500; color:var(--ink-soft); padding:3px 0;
    overflow-wrap:anywhere; }
  #app-layer .km-tbl td { width:34%; text-align:right; font-weight:600; color:var(--ink);
    padding:3px 0 3px 10px; font-variant-numeric:tabular-nums; }

  /* Het datum-venster. */
  #app-layer .km-venster { font-family:'SF Mono',monospace; font-size:12.5px; color:var(--ink);
    font-variant-numeric:tabular-nums; }

  /* Test-opzet, concept-tekst, let op, koppel-keuze. */
  #app-layer .km-test-h { font-size:13.5px; color:var(--ink); line-height:1.5; }
  #app-layer .km-test-ab { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px;
    font-size:12.5px; color:var(--ink-soft); }
  #app-layer .km-test-k { font-family:'SF Mono',monospace; font-size:9px; font-weight:700;
    background:var(--paper-inset); border-radius:6px; padding:2px 6px; margin-right:6px; }
  #app-layer .km-test-s { margin-top:8px; font-size:12px; color:var(--ink-soft); }
  #app-layer .km-concept-t { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
  #app-layer .km-concept-p { margin:0; font-size:13px; line-height:1.6; color:var(--mist); }
  #app-layer .km-letop-p { margin:0; font-size:13px; line-height:1.6; color:var(--ink); }
  #app-layer .km-koppel-b { font-size:14px; font-weight:600; color:var(--ink); }
  #app-layer .km-koppel-w { margin:5px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }


/* ══════════════════════════════════════════════════════════════════════════
   ACCOUNTGEGEVENS EN ABONNEMENT (#21 fase 2b)
   ══════════════════════════════════════════════════════════════════════════
   Eigen opmaak, in de bestaande vormentaal: dezelfde .ctx-block-kaders als
   Instellingen, dezelfde knopklassen als de rest van de demo. De app heeft
   hiervoor een eigen .acc-*-set die niet in de gekopieerde stijl.css zit.
   ══════════════════════════════════════════════════════════════════════════ */
  #app-layer .acc-rij { display:flex; justify-content:space-between; gap:16px; padding:7px 0;
    border-top:1px solid var(--card-line); font-size:13.5px; }
  #app-layer .acc-rij:first-of-type { border-top:0; }
  #app-layer .acc-l { color:var(--ink-soft); }
  #app-layer .acc-v { color:var(--ink); font-weight:600; }
  #app-layer .acc-hint { margin:10px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.55; }

  #app-layer .acc-logo-rij { display:flex; align-items:center; gap:14px; margin-top:4px; }
  #app-layer .acc-logo-vlak { display:inline-flex; align-items:center; justify-content:center;
    width:74px; height:48px; background:#fff; border:1px solid var(--card-line); border-radius:9px; }
  #app-layer .acc-logo-uit { font-size:12.5px; color:var(--ink-soft); line-height:1.55; }

  #app-layer .abo-kaart { margin-top:4px; }
  /* Zoals de app sinds C14 (14 oktober 2026): de pakketnaam in Newsreader, 20px.
     Hier stond Inter 700 op 18px, de app noemde Fraunces en toonde Georgia. */
  #app-layer .abo-naam { font-family:'Newsreader',Georgia,serif; font-size:20px; color:var(--ink); }
  #app-layer .abo-sinds { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  #app-layer .abo-regels { margin-top:12px; display:grid; gap:7px; }
  #app-layer .abo-r { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--ink); }
  #app-layer .abo-r-ic { color:var(--ok); font-weight:700; width:14px; flex:none; }
  #app-layer .abo-r-uit { color:var(--fog); }
  #app-layer .abo-r-uit .abo-r-ic { color:var(--fog); }
  #app-layer .abo-knoppen { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
  #app-layer .abo-paneel { margin-top:16px; padding:14px; border:1px solid var(--card-line);
    border-radius:10px; background:var(--paper-2); }
  #app-layer .abo-p-k { font-size:14px; font-weight:700; color:var(--ink); }
  #app-layer .abo-opties { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0; }
  #app-layer .abo-optie { font:inherit; font-size:13px; font-weight:600; cursor:pointer;
    padding:8px 14px; border-radius:8px; border:1px solid var(--card-line); background:var(--paper);
    color:var(--ink); }
  #app-layer .abo-optie:hover { border-color:var(--beam); }
  #app-layer .abo-reden-l { display:block; margin:12px 0 5px; font-size:12.5px; color:var(--ink-soft); }
  #app-layer .abo-ok { margin-top:16px; padding:14px; border-radius:10px;
    border:1px solid color-mix(in srgb, var(--ok) 40%, var(--card-line)); background:var(--paper-2); }
  #app-layer .abo-ok-k { font-size:13.5px; font-weight:700; color:var(--ok); }
  #app-layer .abo-ok p { margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--ink); }

  /* Het klantlogo in het vakje linksonder: wit vlak, want de rail is donker. */
  #app-layer .ava-logo { background:#fff; display:flex; align-items:center; justify-content:center;
    padding:3px; }
  #app-layer .ava-logo svg { width:100%; height:auto; }
  /* Op de rapportkop staat hetzelfde logo kaal, zoals op briefpapier. */
  #app-layer .rd-klantlogo { margin-left:auto; display:flex; align-items:center; }
  /* De tweede chip-rij: "Vergelijken met", naast het tijdsbereik. */
  #app-layer .iz-verg-lbl { margin-left:18px; }

/* ══════════════════════════════════════════════════════════════════════════
   KOPPELEN (#21 fase 2b)
   ══════════════════════════════════════════════════════════════════════════ */
  #app-layer .kp-sectie { margin-bottom:26px; }
  #app-layer .kp-sectie-k { font-size:15px; font-weight:700; color:var(--ink); }
  #app-layer .kp-sectie-s { font-size:12.5px; color:var(--ink-soft); margin:2px 0 14px; }
  /* De blokkop van #40 fase 1: stip, label, pakket-chip, en rechts de telling.
     Dezelfde opbouw als in app/index.html; alleen de tokens zijn die van de demo. */
  #app-layer .kp-groep-kop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 6px; }
  #app-layer .kp-dotje { width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
  #app-layer .kp-dotje.uit { background:var(--card-line); }
  #app-layer .kp-groep-lab { font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-soft); }
  #app-layer .kp-groep-lab.uit { color:var(--ink-soft); opacity:.7; }
  #app-layer .kp-badge-uit { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .kp-groep-telling { margin-left:auto; font-size:12.5px; color:var(--ink-soft); }
  /* De eerlijke zin onder de binnenkort-rij (#40 fase 4). */
  #app-layer .kp-bouwnoot { font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:10px 2px 0; }

  /* De bovenbouw (#40 fase 3): nu te doen, de drie tegels, het akkoord. */
  #app-layer .kp-nu { background:var(--paper); border:1px solid var(--card-line); border-radius:14px;
    padding:16px 18px; margin:0 0 24px; display:flex; flex-direction:column; gap:14px; }
  #app-layer .kp-nu-kop { display:flex; align-items:center; gap:12px; }
  #app-layer .kp-nu-lab { font-family:'SF Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-soft); }
  #app-layer .kp-nu-lijn { flex:1; height:1px; background:var(--card-line); }
  #app-layer .kp-nu-telling { font-size:12.5px; color:var(--ink-soft); }
  #app-layer .kp-focus { display:flex; gap:13px; align-items:flex-start; flex-wrap:wrap; border-radius:12px;
    padding:14px 15px; background:var(--paper-inset); border:1px solid var(--card-line); }
  #app-layer .kp-focus.kp-f-goed { background:color-mix(in srgb, var(--ok) 10%, transparent); border-color:var(--ok); }
  #app-layer .kp-focus.kp-f-wacht { background:color-mix(in srgb, var(--warn) 12%, transparent); border-color:var(--warn); }
  #app-layer .kp-focus.kp-f-fout { background:color-mix(in srgb, var(--danger) 10%, transparent); border-color:var(--danger); }
  #app-layer .kp-f-merk { width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:var(--paper);
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  #app-layer .kp-f-tekst { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:3px; }
  #app-layer .kp-f-titel { font-size:15px; font-weight:700; color:var(--ink); }
  #app-layer .kp-f-body { font-size:13px; line-height:1.5; color:var(--ink-soft); }
  #app-layer .kp-tegels { display:flex; gap:10px; flex-wrap:wrap; }
  #app-layer .kp-tegel { flex:1 1 190px; min-width:170px; display:flex; flex-direction:column; gap:8px;
    background:var(--paper-inset); border:1px solid var(--card-line); border-radius:13px; padding:12px 13px; }
  #app-layer .kp-tegel.uit { opacity:.75; }
  #app-layer .kp-tegel-kop { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  #app-layer .kp-tegel-pil { font-family:'SF Mono',ui-monospace,monospace; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; background:var(--paper); border:1px solid var(--card-line); border-radius:999px;
    padding:3px 9px; color:var(--ink); }
  #app-layer .kp-tegel-telling { font-size:12px; color:var(--ink-soft); white-space:nowrap; }
  #app-layer .kp-tegel-noot { font-size:12px; color:var(--ink-soft); line-height:1.45; }
  #app-layer .kp-toestemming { display:flex; gap:12px; align-items:center; flex-wrap:wrap;
    border-top:1px solid var(--card-line); padding-top:13px; }
  #app-layer .kp-toest-tekst { flex:1 1 300px; min-width:0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
  #app-layer .kp-toest-tekst b { color:var(--ink); }
  #app-layer .kp-chip { flex:none; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;
    background:var(--paper-inset); color:var(--ink-soft); border:1px solid var(--card-line); }
  #app-layer .kp-chip.kp-t-gekoppeld { color:var(--ok); border-color:var(--ok); }

  /* De stap-voor-stap per bron (#40 fase 2), zelfde vorm als in de app. */
  #app-layer .kp-stappen { margin:10px 0 0; background:var(--paper-inset); border:1px solid var(--card-line); border-radius:10px; }
  #app-layer .kp-stappen > summary { display:flex; align-items:center; gap:9px; flex-wrap:wrap; cursor:pointer;
    padding:11px 13px; font-size:13px; font-weight:700; color:var(--ink); list-style:none; }
  #app-layer .kp-stappen > summary::-webkit-details-marker { display:none; }
  #app-layer .kp-stappen-t { flex:1 1 180px; min-width:0; }
  #app-layer .kp-rolchip { font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--paper);
    border:1px solid var(--card-line); border-radius:999px; padding:3px 9px; white-space:nowrap; }
  #app-layer .kp-stappen-body { padding:0 13px 13px; display:flex; flex-direction:column; gap:9px; }
  #app-layer .kp-stappen-lijst { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;
    font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
  #app-layer .kp-sa-lab { font-family:'SF Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft); }
  #app-layer .kp-sa { background:var(--paper); border:1px solid var(--card-line); border-radius:9px; padding:9px 11px; }
  #app-layer .kp-sa-adres { font-family:'SF Mono',ui-monospace,monospace; font-size:12px; word-break:break-all; color:var(--ink); }
  #app-layer .kp-sa-noot { font-size:12px; color:var(--ink-soft); margin:0; line-height:1.5; }
  #app-layer .kp-door > summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--ink); list-style:none; }
  #app-layer .kp-door > summary::-webkit-details-marker { display:none; }
  #app-layer .kp-door-body { padding-top:8px; }
  #app-layer .kp-groep-h { font-family:'Newsreader',Georgia,serif; font-size:20px; font-weight:600;
    color:var(--ink); margin:0 0 4px; letter-spacing:-.01em; }
  #app-layer .kp-groep-lead { font-size:13.5px; color:var(--ink-soft); line-height:1.6;
    margin:0 0 14px; max-width:600px; }
  #app-layer .kp-kaart { background:var(--paper); border:1px solid var(--card-line);
    border-radius:12px; padding:16px 18px; margin-bottom:12px; }
  #app-layer .kp-kop { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
  #app-layer .kp-naam { font-size:15px; font-weight:700; color:var(--ink); }
  #app-layer .kp-sub { font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
  #app-layer .kp-badge { flex:none; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
    background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .kp-badge-gekoppeld { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); }
  #app-layer .kp-badge-geweigerd { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }
  #app-layer .kp-badge-wacht_op_data,
  #app-layer .kp-badge-ingesteld { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
  #app-layer .kp-uit { margin:10px 0 0; font-size:13px; line-height:1.6; color:var(--ink); }
  #app-layer .kp-signaal { margin-top:12px; padding:11px 13px; border-radius:9px;
    border:1px solid color-mix(in srgb, var(--warn) 45%, var(--card-line)); background:var(--paper-2); }
  #app-layer .kp-sig-k { font-size:12.5px; font-weight:700; color:var(--warn); }
  #app-layer .kp-signaal p { margin:4px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink); }
  #app-layer .kp-vinkjes { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:13px; }
  #app-layer .kp-vink { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--fog); }
  #app-layer .kp-vink.aan { color:var(--ink); }
  #app-layer .kp-vink-ic { font-weight:700; color:var(--fog); }
  #app-layer .kp-vink.aan .kp-vink-ic { color:var(--ok); }
  #app-layer .kp-velden { margin-top:13px; }
  #app-layer .kp-veld { display:flex; justify-content:space-between; gap:14px; font-size:12.5px;
    padding:6px 0; border-top:1px solid var(--card-line); }
  #app-layer .kp-veld-l { color:var(--ink-soft); }
  #app-layer .kp-veld-v { font-family:'SF Mono',monospace; color:var(--ink); overflow-wrap:anywhere; }
  #app-layer .kp-toegang { margin-top:13px; padding-top:12px; border-top:1px solid var(--card-line); }
  #app-layer .kp-toegang p { margin:0; font-size:12.5px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
  #app-layer .kp-eigenaar { margin-top:5px !important; color:var(--ink-soft) !important; }
  #app-layer .kp-knoppen { margin-top:14px; display:flex; gap:9px; flex-wrap:wrap; }
  #app-layer .kp-door { background:var(--paper-2); border:1px solid var(--card-line);
    border-radius:12px; padding:16px 18px; margin-bottom:26px; }
  #app-layer .kp-door-k { font-size:14px; font-weight:700; color:var(--ink); }
  #app-layer .kp-door-u { margin:4px 0 11px; font-size:12.5px; color:var(--ink-soft); }
  #app-layer .kp-door-tekst { margin:0 0 12px; padding:12px 14px; background:var(--paper);
    border:1px solid var(--card-line); border-radius:9px; font-family:'SF Mono',monospace;
    font-size:11.5px; line-height:1.65; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; }
  #app-layer .kp-binnenkort { display:grid; gap:9px; }
  #app-layer .kp-bk { display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:13px 16px; border:1px dashed var(--card-line); border-radius:11px; opacity:.72; }
  #app-layer .kp-badge-bk { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .kp-demo { border:1px dashed var(--beam); border-radius:12px; padding:15px 17px;
    background:var(--paper-2); }
  #app-layer .kp-demo-k { font-size:13.5px; font-weight:700; color:var(--beam-tekst, var(--ink)); }
  #app-layer .kp-demo p { margin:4px 0 11px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
  #app-layer .kp-demo-knoppen { display:flex; flex-wrap:wrap; gap:7px; }
  /* Twee rijen sinds #47 fase 4: GA4 en het e-mailkanaal. Het label ervoor is
     nodig zodra het er meer dan één is; met één rij wist je nog welke bron je
     bediende, met twee niet meer. */
  #app-layer .kp-demo-rij + .kp-demo-rij { margin-top:11px; }
  #app-layer .kp-demo-l { display:block; margin-bottom:6px; font-family:'SF Mono',monospace;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
  #app-layer .kp-veld-leeg { color:var(--fog); font-style:italic; }
  /* De onderwerpen van een advies, onder de kop. */
  #app-layer .da-cats { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
  #app-layer .da-cat { font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:2px 8px;
    border-radius:999px; background:var(--paper-inset); color:var(--ink-soft); }

/* ── DE MAANDHISTORIE op Zoekverkeer (#13 fase 2) ──
   De demo toont EEN maand in plaats van de uitklapbare reeks van de app: elk
   getal hier is een herhaling van wat een regel hoger al staat, en zestien
   maanden verzinnen zou honderden niet-na-te-kijken cijfers opleveren. */
#app-layer .zm-demo { margin-top:18px; }
#app-layer .zm-maand-kop { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:10px 0 2px; border-top:1px solid var(--card-line); margin-top:12px; }
#app-layer .zm-demo .zm-naam { font-weight:600; }
#app-layer .zm-demo .zm-tot { margin-left:auto; font-size:12.5px; color:var(--ink-soft);
  font-family:'SF Mono',monospace; }
#app-layer .zm-demo .zm-deel { margin:0 0 10px; font-size:12.5px; color:var(--ink-soft); }
#app-layer .zm-demo .zm-notitie { margin:14px 0 0; font-size:12px; color:var(--fog); max-width:62ch; }
@media (max-width:640px){
  #app-layer .zm-demo .zm-tot { margin-left:0; flex:1 0 100%; }
}

/* ── HET I-WOLKJE TEGEN DE RECHTERRAND (#14) ──
   Een cijferkaartje mag sinds de kruis-scan een uitleg dragen. Het LAATSTE
   kaartje staat tegen de kaartrand, en `.deepadv` heeft `overflow:hidden`: een
   tip die naar rechts uitsteekt wordt daar afgeknipt in plaats van over de rand
   te hangen. Deze variant hangt hem aan de rechterkant op. Staat hier en niet in
   `stijl.css`, want dat bestand is de kopie van het stijlblok van vóór 21 juli;
   de app heeft dezelfde regel in zijn eigen blok. */
#app-layer .ld-tip-rechts { left:auto; right:-8px; transform:none; }
#app-layer .ld-tip-rechts::after { left:auto; right:12px; transform:none; }

/* ── EN HETZELFDE NAAR BOVEN (#47 fase 3) ──
   De herkomst-chip staat in de BOVENSTE regel van de kaart, dus een tip die
   omhoog opent wordt door diezelfde `overflow:hidden` afgeknipt -- gemeten: de
   helft van de tekst viel weg. Deze variant hangt hem eronder. Woordelijk gelijk
   aan `.ld-tip-onder` in app/index.html; hij ontbrak in de demo omdat er tot nu
   toe geen wolkje bovenin een kaart stond. */
#app-layer .ld-tip-onder { bottom:auto; top:calc(100% + 10px); }
#app-layer .ld-tip-onder::after { top:auto; bottom:100%;
  border-top-color:transparent; border-bottom-color:var(--abyss); }

/* ── HET SEIZOENSBLOK op Zoekverkeer (zoekverkeer-seizoen-totaal) ──
   Woordelijk dezelfde regels als in app/index.html. Ze staan HIER en niet in
   demo/stijl.css, want dat bestand is een kopie van het stijlblok zoals het op
   21 juli was; alles wat daarna aan de app is toegevoegd hoort in deze eigen
   laag. Zie CLAUDE.md, sectie demo.

   TWEE KOLOMMEN, en dat is een correctie die in de app is gemeten: met de twee
   staven ONDER elkaar in dezelfde cel, allebei op hun eigen schaal en allebei
   beginnend op dezelfde lijn, kreeg juni 2025 een staaf van 90% voor 238.749
   vertoningen naast een van 78% voor 6.956 klikken. Vrijwel even lang, en een
   voetnoot repareert dat niet. Naast elkaar met een kop erboven lees je naar
   beneden in plaats van opzij. */
#app-layer .zs-demo .zs-kop { margin:0 0 4px; font-size:16px; display:inline-flex; align-items:center; }
#app-layer .zs-rij, #app-layer .zs-kolomkop {
  display:grid; grid-template-columns:118px 1fr 1fr 78px; gap:10px 22px; align-items:center; }
#app-layer .zs-rij { padding:5px 2px; border-top:1px solid var(--line-soft); }
#app-layer .zs-rij:first-of-type { border-top:1px solid var(--card-line); }
#app-layer .zs-kolomkop { padding:0 2px 5px; font-size:11px; color:var(--fog);
  font-family:'SF Mono',monospace; text-transform:lowercase; }
#app-layer .zs-maand { font-size:12.5px; color:var(--ink-soft); }
#app-layer .zs-maand b { display:block; font-weight:600; color:var(--ink); font-size:13px; }
#app-layer .zs-cel { display:flex; align-items:center; gap:8px; min-width:0; }
#app-layer .zs-staaf { height:9px; border-radius:3px; background:var(--beam); min-width:2px; }
#app-layer .zs-cel.zs-klik .zs-staaf { opacity:.45; }
#app-layer .zs-getal { font-size:12px; font-family:'SF Mono',monospace; color:var(--ink-soft);
  white-space:nowrap; }
#app-layer .zs-cel.zs-klik .zs-getal { color:var(--fog); }
#app-layer .zs-notitie { margin:12px 0 0; font-size:12px; color:var(--fog); max-width:62ch; }
/* Op mobiel vallen de cellen onder elkaar en beginnen ze weer op dezelfde lijn.
   Daar draagt alleen de vertoningenreeks de vorm en zijn de klikken een tweede
   WAARDE; anders keert precies de leesfout terug die hierboven is opgelost. */
@media (max-width:600px){
  #app-layer .zs-rij { grid-template-columns:1fr; gap:2px; }
  #app-layer .zs-kolomkop { display:none; }
  #app-layer .zs-maand b { display:inline; }
  #app-layer .zs-cel::after { content:attr(data-reeks); font-size:11px; color:var(--fog);
    font-family:'SF Mono',monospace; white-space:nowrap; }
  #app-layer .zs-cel.zs-klik .zs-staaf { display:none; }
  #app-layer .zs-cel.zs-klik { margin-left:2px; }
}

/* ── DE TERMEN DIE JUIST IN DEZE MAAND ZWAAR WOGEN ──
   Woordelijk dezelfde regels als in app/index.html. Zo min mogelijk: een
   kopregel en de namen, geen percentage en geen verhoudingsgetal. Een getal dat
   de klant niet kan duiden hoort er niet. */
#app-layer .zm-seiz { margin:14px 0 0; padding-top:10px;
  border-top:1px solid var(--line-soft); max-width:62ch; }
#app-layer .zm-seiz-kop { font-size:12.5px; color:var(--ink-soft); display:flex;
  align-items:center; gap:2px; margin-bottom:5px; }
#app-layer .zm-seiz-lijst { margin:0; padding:0; list-style:none; display:flex;
  flex-wrap:wrap; gap:6px 8px; }
#app-layer .zm-seiz-lijst li { font-size:12.5px; color:var(--ink);
  background:var(--hull-2); border:1px solid var(--line-soft);
  border-radius:6px; padding:2px 8px; }

/* De klikratio is een WAARDE en geen derde staaf; zie de toelichting in
   app/index.html. Rechts uitgelijnd zodat de decimalen onder elkaar staan. */
#app-layer .zs-cel.zs-ctr { justify-content:flex-end; }
#app-layer .zs-kolomkop > span:last-child { text-align:right; display:flex;
  justify-content:flex-end; align-items:center; gap:2px; }
@media (max-width:600px){
  #app-layer .zs-cel.zs-ctr { justify-content:flex-start; margin-left:2px; }
}

/* ── WAT DE KLANT ONS HEEFT VERTELD (M16) ──
   Nieuw in app/index.html, dus hier en NIET in stijl.css: dat bestand is een
   kopie van het stijlblok uit de marketingpagina en loopt niet mee met de app.
   Let op: stijl.css heeft al een `.vbv-rij`; dat is een andere klasse en botst
   niet, maar het scheelt een letter. */
#app-layer .bv-rij { background:var(--paper); border:1px solid var(--line);
                     border-radius:9px; padding:12px 15px; margin-bottom:10px; }
#app-layer .bv-rij:last-child { margin-bottom:0; }
#app-layer .bv-zin { margin:0; font-size:14px; line-height:1.5; color:var(--ink); }
#app-layer .bv-meta { margin:5px 0 0; font-size:11.5px; color:var(--fog); }
#app-layer .bv-wacht { margin:7px 0 0; font-size:12px; line-height:1.5; color:var(--warn); }
#app-layer .bv-eerder { margin:5px 0 0; font-size:12px; line-height:1.5; color:var(--ink-soft); }
/* WAAROP HET ZOEKVERKEER-SCHERM RUST. Woordelijk gelijk aan app/index.html. Deze
   klasse is ná 21 juli toegevoegd en hoort dus in demo.css en niet in de
   gekopieerde stijl.css. Geen waarschuwkleur: dit is geen gebrek maar een
   mededeling dat het werkt zoals de klant het vertelde. */
#app-layer .zk-segment { margin:14px 0 0; padding:11px 13px; font-size:13px; line-height:1.55;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--card-line);
  border-radius:10px; }

/* ── DE BADGE EN "NIET GEMETEN" (9 oktober 2026) ──
   Allebei ná 21 juli, dus hier en niet in stijl.css.
   De badge staat in de kopregel van de kaart, naast het nummer; hoofdletters en
   de mono-letter erft hij van .da-flag. Zelfde regel als in app/index.html. */
#app-layer .da-badge { letter-spacing:0.12em; }
/* "Niet gemeten" op Taken > Afgerond: rustig grijs, zonder icoon. Een advies dat
   de app bewust niet meet, hoort geen stijgend pijltje en geen klokje te krijgen,
   want er komt geen meting. Zelfde grijs als de "nog meten"-regel ernaast. */
#app-layer .afg-result.afg-geen-meting { color:var(--fog); }
#app-layer .afg-result.afg-geen-meting b { font-weight:600; color:var(--ink-soft); }

/* ── WAAR BOUWT DIT ADVIES OP VOORT? (S20 fase A, 10 oktober 2026) ──
   Ná 21 juli, dus hier en niet in stijl.css. Woordelijk gelijk aan de vv-regels in
   app/index.html: de regel "Bouwt voort op: {titel}" onder "Gebaseerd op", en
   "Kreeg een vervolg" in het archief. De titel is een link die in de zin
   doorloopt; lange titels breken af in plaats van de kolom op te rekken. */
#app-layer .vv-blok { display:flex; flex-direction:column; gap:4px; margin-top:6px; min-width:0; }
#app-layer .vv-regel { font-size:13.5px; line-height:1.45; color:var(--ink-soft);
                       overflow-wrap:anywhere; min-width:0; }
#app-layer .vv-link { font:inherit; font-weight:600; color:var(--ink); background:none; border:0;
                      padding:0; margin:0; text-align:left; text-decoration:underline;
                      text-decoration-color:var(--fog); text-underline-offset:3px;
                      overflow-wrap:anywhere; }
#app-layer a.vv-link { cursor:pointer; }
#app-layer a.vv-link:hover { text-decoration-color:var(--ink); }
#app-layer a.vv-link:focus-visible { outline:2px solid var(--beam); outline-offset:2px; border-radius:2px; }
#app-layer .vv-lijn { display:block; font-size:12px; line-height:1.45; color:var(--fog); overflow-wrap:anywhere; }

/* ── WAT TELT VOOR JOU ALS RESULTAAT (S38, 23 oktober 2026) ──
   Ná 21 juli, dus hier en niet in stijl.css. Het i-wolkje naast de kaarttitel hangt
   op een telefoon aan de titel, niet aan de bol: woordelijk de .tip-kop-regels uit
   app/index.html. Zonder dit valt het wolkje van 320 px op 375 px buiten beeld. */
#app-layer .tip-kop { display:flex; align-items:center; position:relative; }
#app-layer .tip-kop .ld-info { flex:0 0 auto; }
@media (max-width:560px){
  #app-layer .tip-kop .ld-info { position:static; }
  #app-layer .tip-kop .ld-tip-onder { left:0; right:0; width:auto;
    transform:none; top:calc(100% + 8px); max-height:min(340px, 55vh); }
  #app-layer .tip-kop .ld-tip-onder::after { display:none; }
}