/* 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 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; }
  #app-layer .da-acties { display:flex; align-items:center; gap:14px; }
  /* 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 naast elkaar is waar een smal scherm breekt. `wrap-reverse`:
       passen ze, dan staan ze naast elkaar (Negeer links, CTA rechts); passen ze
       niet, dan wikkelt de tweede regel naar BOVEN en staat de donkere knop
       bovenaan. Gewoon `wrap` zou Negeer bovenaan zetten en de hiërarchie
       omdraaien. Zelfde regel als in app/index.html. */
    #app-layer .da-acties { flex-wrap:wrap-reverse; justify-content:space-between;
      align-items:center; gap:10px; }
    #app-layer .da-acties .fc-cta { width:auto; flex:1 1 auto; justify-content:center; }
    /* De twee knoppen hebben bewust niet dezelfde hoogte (12px secundair tegen
       14px gevuld), dus CENTREREN in plaats van stretchen: anders plakt de
       kleinste bovenaan de rij. Gemeten op 375px: 44px tegen 32px. */
    #app-layer .da-acties .neg-wrap { flex:0 1 auto; }
    #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; }
  #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; }
  }
  /* 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 grijze kind-label in de metaregel van de kaart, en de bronnentelling
     achter "Waarop Plotta dit baseert". Allebei uit app/index.html. */
  #app-layer .da-type { color:var(--ink-soft); font-weight:700; }
  #app-layer .forward .da-type { color:var(--ink-soft); }
  /* Waar het advies vandaan komt (#47 fase 3), dezelfde rustige grijze
     behandeling als het kind-label ernaast. Ook uit app/index.html. Het puntje
     scheidt de twee grijze woordlabels, die anders als één label lezen. */
  #app-layer .da-herkomst { color:var(--ink-soft); font-weight:700; }
  #app-layer .da-herkomst::before { content:'·'; margin-right:7px; opacity:.55; }
  #app-layer .forward .da-herkomst { color:var(--ink-soft); }
  /* 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. */
  #app-layer .da-meet { color:var(--ink-soft); font-weight:700; }
  #app-layer .da-meet::before { content:'·'; margin-right:7px; opacity:.55; }
  #app-layer .forward .da-meet { color:var(--ink-soft); }
  #app-layer .da-meet-oud, #app-layer .forward .da-meet-oud { color:var(--warn, #8A6A1F); }
  #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; }
  #app-layer .abo-naam { font-size:18px; font-weight:700; 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; }
}