/* Mi casa su casa — drie behandelingen van materiaal, diepte en licht voor de deur (24-09-2026).
   Hoort bij advies-textuur-en-diepte.md in deze map. Laden NA web/src/app.css.

   GEBRUIK
   Eén klasse op het vlak dat het linnen is en zelf niet scrolt (in de app: .deur; op een
   proefpagina: het element dat het scherm vult). Nacht zonder donker thema: zet er .kamer bij,
   net als app.css. Combineren mag: class="deur behandeling-c behandeling-a" (c + het licht van a)
   is de aanbeveling in het advies.

     <main class="deur behandeling-c">                     ← het linnen
       <figure class="passe-partout plaat kop">
         <div class="pp-plaat"><img …><div class="scrim-onder"></div></div>   ← de foto
         <div class="kop-onderrand">…naam…</div>           ← de papieren band onder de foto
       </figure>
       <article class="huisvel">…</article>                ← een vel papier in het gesprek
       <button class="stip">…</button>                     ← glas op de foto (DeurMenu)
       <div class="antwoord">                               ← het blok onderaan
         <input class="veld"> <button class="chip eerst">…</button> <button class="chip">…</button>
       </div>
     </main>

   REGELS
   - Geen kleurwaarde in een regel. Alles is een rol uit app.css (--bg, --pp-papier, --inkt,
     --schaduw-*, --pp-schaduw, --pp-lijn, --dag-bg, --nacht-bg, --dag-pp-papier) of een
     color-mix() daarvan. De enige twee waarden hier zijn de schaduwbasis van MASTER.md §5 (warm
     bruin overdag, zwart 's nachts), als token, zoals app.css ze in --*-schaduw-* gebruikt.
   - Alle drie zetten de textuur van 24-09 uit (korrel, vignet, ruitraster in het passe-partout).
     Niets ligt nog óver foto of tekst; licht en vezel liggen ónder de inhoud.
   - Eén lichtbron, linksboven, dezelfde als op tafel (--tafel-afdruk-schaduw 4px 8px = 1:2, dus
     153°). Schaduwen vallen naar rechtsonder, bovenranden vangen licht.
   - In de Svelte-app zijn component-selectors gescoped (.chip.svelte-xyz, specificiteit 0,2,0).
     Wie dit in de app zet, neemt de regels over in het component; op een losse proefpagina werkt
     het zoals het hier staat. (c) werkt ook in de app zonder dat, want het draait alleen --bg. */


/* ————————————————————————————————————————————————————————————————————————————————
   Gedeelde tokens: dag en nacht, op dezelfde vier plekken als app.css ze wisselt
   ———————————————————————————————————————————————————————————————————————————————— */
:root {
  --beh-licht-hoek: 153deg;                 /* van linksboven naar rechtsonder */
  --beh-licht-van: 0%;                      /* waar het zichtbare linnen begint; op de deur: ~45% (onder de band) */

  /* dag */
  --beh-dag-schaduwbasis: rgb(40 36 30);    /* = basis van --dag-schaduw-* (MASTER §5) */
  --beh-dag-hoogsel: 90%;                   /* hoeveel dagpapier er op een bovenrand valt */
  --beh-dag-snede: 10%;                     /* de rand van een vel: schaduwbasis, geen lijnkleur */
  --beh-dag-nachtrand: 0%;                  /* 's nachts een lichte snede; overdag niet */
  --beh-dag-poel: 45%;                      /* (a) hoeveel papier het licht in het linnen brengt */
  --beh-dag-val: 3%;                        /* (a) hoe ver het linnen rechtsonder wegzakt */
  --beh-dag-diep: 4%;                       /* (c) linnen onder papier; max 6%, zie advies */
  --beh-dag-papier-op: 0%;                  /* papier een haar lichter; overdag kan dat niet zonder wit */
  --beh-dag-contact: 14%;
  --beh-dag-omgeving: 16%;

  /* nacht */
  --beh-nacht-schaduwbasis: rgb(0 0 0);     /* = basis van --nacht-schaduw-* (MASTER §5) */
  --beh-nacht-hoogsel: 10%;
  --beh-nacht-snede: 0%;                    /* 's nachts tekent licht de rand, geen donkere lijn */
  --beh-nacht-nachtrand: 6%;
  --beh-nacht-poel: 30%;
  --beh-nacht-val: 0%;                      /* nooit dieper dan --bg: OLED, zie advies */
  --beh-nacht-diep: 0%;
  --beh-nacht-papier-op: 4%;
  --beh-nacht-contact: 45%;
  --beh-nacht-omgeving: 42%;

  --beh-bg-bron: var(--dag-bg);
  --beh-schaduwbasis: var(--beh-dag-schaduwbasis);
  --beh-hoogsel: var(--beh-dag-hoogsel);
  --beh-snede: var(--beh-dag-snede);
  --beh-nachtrand: var(--beh-dag-nachtrand);
  --beh-poel: var(--beh-dag-poel);
  --beh-val: var(--beh-dag-val);
  --beh-diep: var(--beh-dag-diep);
  --beh-papier-op: var(--beh-dag-papier-op);
  --beh-contact: var(--beh-dag-contact);
  --beh-omgeving: var(--beh-dag-omgeving);
  --beh-vezel-helling: 1;                   /* (b) dekking van de vezel; 's nachts 0 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --beh-bg-bron: var(--nacht-bg);
    --beh-schaduwbasis: var(--beh-nacht-schaduwbasis);
    --beh-hoogsel: var(--beh-nacht-hoogsel);
    --beh-snede: var(--beh-nacht-snede);
    --beh-nachtrand: var(--beh-nacht-nachtrand);
    --beh-poel: var(--beh-nacht-poel);
    --beh-val: var(--beh-nacht-val);
    --beh-diep: var(--beh-nacht-diep);
    --beh-papier-op: var(--beh-nacht-papier-op);
    --beh-contact: var(--beh-nacht-contact);
    --beh-omgeving: var(--beh-nacht-omgeving);
    --beh-vezel-helling: 0;
  }
}
.kamer {
  --beh-bg-bron: var(--nacht-bg);
  --beh-schaduwbasis: var(--beh-nacht-schaduwbasis);
  --beh-hoogsel: var(--beh-nacht-hoogsel);
  --beh-snede: var(--beh-nacht-snede);
  --beh-nachtrand: var(--beh-nacht-nachtrand);
  --beh-poel: var(--beh-nacht-poel);
  --beh-val: var(--beh-nacht-val);
  --beh-diep: var(--beh-nacht-diep);
  --beh-papier-op: var(--beh-nacht-papier-op);
  --beh-contact: var(--beh-nacht-contact);
  --beh-omgeving: var(--beh-nacht-omgeving);
  --beh-vezel-helling: 0;
}
@media (prefers-color-scheme: dark) {
  .kamer {
    --beh-bg-bron: var(--dag-bg);
    --beh-schaduwbasis: var(--beh-dag-schaduwbasis);
    --beh-hoogsel: var(--beh-dag-hoogsel);
    --beh-snede: var(--beh-dag-snede);
    --beh-nachtrand: var(--beh-dag-nachtrand);
    --beh-poel: var(--beh-dag-poel);
    --beh-val: var(--beh-dag-val);
    --beh-diep: var(--beh-dag-diep);
    --beh-papier-op: var(--beh-dag-papier-op);
    --beh-contact: var(--beh-dag-contact);
    --beh-omgeving: var(--beh-dag-omgeving);
    --beh-vezel-helling: 1;
  }
}


/* ————————————————————————————————————————————————————————————————————————————————
   Gedeeld door alle drie: textuur uit, afgeleiden, en de drie dingen die in elke behandeling
   dezelfde fout zijn (de eerste voorzet, het glas, het ruitraster)
   ———————————————————————————————————————————————————————————————————————————————— */
.behandeling-a,
.behandeling-b,
.behandeling-c {
  /* Op het element zelf uitgerekend (niet op :root), anders erven ze de dagwaarde de kamer
     in — dezelfde valkuil als --accent in MASTER §11. */
  --beh-licht: color-mix(in srgb, var(--dag-pp-papier) var(--beh-hoogsel), transparent);
  --beh-rand: color-mix(in srgb, var(--beh-schaduwbasis) var(--beh-snede), transparent);
  --beh-lichtrand: color-mix(in srgb, var(--dag-pp-papier) var(--beh-nachtrand), transparent);
  --beh-papier: color-mix(in srgb, var(--pp-papier), var(--dag-pp-papier) var(--beh-papier-op));
  --beh-contact-kleur: color-mix(in srgb, var(--beh-schaduwbasis) var(--beh-contact), transparent);
  --beh-omgeving-kleur: color-mix(in srgb, var(--beh-schaduwbasis) var(--beh-omgeving), transparent);

  /* De textuur van 24-09 uit: korrel, vignet en het ruitraster in het passe-partout. */
  --textuur-sterkte: 0;
  --textuur-licht: none;
  --pp-korrel: 0;

  position: relative;
  isolation: isolate;
}
/* De korrellaag weg, niet alleen onzichtbaar: een lege laag met mix-blend-mode boven een
   scrollend gesprek kost de compositor nog steeds elk beeld. Het ruitraster idem. */
:is(.behandeling-a, .behandeling-b, .behandeling-c).textuur::after,
:is(.behandeling-a, .behandeling-b, .behandeling-c) .passe-partout::before {
  content: none;
}

/* De eerste voorzet: een stukje papier op het linnen, geen grijs vlak (9% inkt) met een
   blauwgrijze rand (30% nachtblauw op warm linnen). De andere voorzetten: een warme snede. */
:is(.behandeling-a, .behandeling-b, .behandeling-c) .chip {
  border-color: var(--beh-rand);
}
:is(.behandeling-a, .behandeling-b, .behandeling-c) .chip.eerst {
  border-color: transparent; /* blijft voor forced-colors */
  background: var(--beh-papier);
  box-shadow:
    inset 0 1px 0 var(--beh-licht),
    0 0 0 1px var(--beh-rand),
    0 0 0 1px var(--beh-lichtrand),
    0 1px 1px var(--beh-contact-kleur),
    1px 2px 6px -2px var(--beh-omgeving-kleur);
}
:is(.behandeling-a, .behandeling-b, .behandeling-c) .chip:not(.eerst) {
  box-shadow: 0 0 0 1px var(--beh-lichtrand);
}
/* Glas op de foto: dikker (Apple HIG: dikkere materialen voor tekst en fijne tekens), licht op
   de bovenrand, schaduw naar rechtsonder. Zakt de stip in de band, dan geldt de papierregel uit
   Deur.svelte weer (die zet --glas-* zelf). */
:is(.behandeling-a, .behandeling-b, .behandeling-c) .stip {
  --glas-vlak: color-mix(in srgb, var(--beh-papier) 72%, transparent);
  --glas-actief: color-mix(in srgb, var(--beh-papier) 94%, transparent);
  --glas-filter: blur(20px) saturate(1.15);
  --glas-lijn: inset 0 1px 0 var(--beh-licht), inset 0 0 0 1px color-mix(in srgb, var(--dag-pp-papier) 38%, transparent);
  box-shadow: var(--glas-lijn), 2px 4px 10px -2px var(--beh-omgeving-kleur);
}


/* ————————————————————————————————————————————————————————————————————————————————
   (a) Licht van boven — één zacht verloop onder de inhoud, papier op volle helderheid,
       een warme schaduw onder het vel. Geen ruis.
   ———————————————————————————————————————————————————————————————————————————————— */
/* Het verloop is een laag ónder alles (z-index -1 binnen het linnen), geen laag erover. Het
   linnen scrolt niet, dus hij wordt één keer geschilderd. Linksboven tilt hij het linnen op naar
   papier, rechtsonder zakt het een haar weg: gemiddeld blijft het linnen --bg. */
.behandeling-a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    var(--beh-licht-hoek),
    color-mix(in srgb, var(--bg), var(--pp-papier) var(--beh-poel)) var(--beh-licht-van),
    var(--bg) calc(var(--beh-licht-van) + (100% - var(--beh-licht-van)) * 0.55),
    color-mix(in srgb, var(--bg), var(--beh-schaduwbasis) var(--beh-val)) 100%
  );
}
/* Wat zelf var(--bg) schildert, legt een vlak over het licht: laat het linnen doorschijnen. */
.behandeling-a .antwoord {
  background: transparent;
}
.behandeling-a :is(.huisvel, .passe-partout:not(.kop)) {
  background-color: var(--beh-papier);
  border-color: transparent; /* blijft voor forced-colors; de rand komt uit de schaduw */
  box-shadow:
    inset 0 1px 0 var(--beh-licht),
    0 0 0 1px var(--beh-rand),
    0 0 0 1px var(--beh-lichtrand),
    var(--pp-schaduw),
    var(--schaduw-kaart);
}
/* De band onder de foto: papier op het linnen, met een zachte schaduw in plaats van een grijze lijn. */
.behandeling-a .kop-onderrand {
  background-color: var(--beh-papier);
  border-bottom-color: transparent;
  box-shadow:
    0 1px 0 var(--beh-rand),
    0 1px 0 var(--beh-lichtrand),
    0 6px 12px -8px var(--beh-omgeving-kleur);
}


/* ————————————————————————————————————————————————————————————————————————————————
   (b) Echt papier — één gelichte vezeltextuur als ondergrond van het linnen, vast, ónder de
       inhoud. Het papier erop blijft glad: ruw karton onder, glad vel erop.
   ———————————————————————————————————————————————————————————————————————————————— */
/* Zelf gegenereerd, geen foto: geen rechten, geen AI-beeld-label (D9), 1,3 kB. Een wolk (de
   formatie van de pulp, 40–80 px) plus korte gekrulde vezels (turbulence, niet uitgerekt:
   uitgerekte vezels lazen in de proef als geborsteld hout), samen als hoogtekaart belicht van
   linksboven (azimut 243°, hoogte 60°) — reliëf, geen ruis. De uitkomst is grijs rond 50%, en
   soft-light laat 50% ongemoeid: het linnen houdt gemiddeld zijn eigen kleur (multiply maakte
   het grijs). Gemeten: σ 1,4 grijswaarde op linnen, net boven de drempel. Sterkte: de helling
   (slope) in de SVG. 's Nachts uit, zie hieronder. */
.behandeling-b {
  --b-vezel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='3' seed='4' stitchTiles='stitch' result='w'/%3E%3CfeTurbulence type='turbulence' baseFrequency='0.22' numOctaves='2' seed='9' stitchTiles='stitch' result='v'/%3E%3CfeComposite in='v' in2='w' operator='arithmetic' k2='0.3' k3='0.7' result='h'/%3E%3CfeColorMatrix in='h' type='luminanceToAlpha' result='a'/%3E%3CfeDiffuseLighting in='a' surfaceScale='1.2' diffuseConstant='1' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='243' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.0' intercept='-1.232'/%3E%3CfeFuncG type='linear' slope='2.0' intercept='-1.232'/%3E%3CfeFuncB type='linear' slope='2.0' intercept='-1.232'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --b-tegel: 360px;
}
/* Eén laag onder de inhoud: het linnen met de vezel erin gemengd. Het mengen
   (background-blend-mode) gebeurt binnen de eigen achtergrond, niet met wat erboven scrolt: geen
   compositing per beeld, zoals de laag van vandaag wél vroeg. 's Nachts uit (--beh-vezel-helling
   0): soft-light op #10162a duwde in de proef losse pixels naar grijswaarde 2, bijna zwart, en
   dat is precies waar OLED gaat smeren en vlekken. */
.behandeling-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--bg);
  background-image: var(--b-vezel);
  background-size: var(--b-tegel) var(--b-tegel);
  background-blend-mode: soft-light;
  opacity: var(--beh-vezel-helling);
}
.behandeling-b .antwoord {
  background: transparent;
}
/* Het vel en de band: glad papier, de rand uit schaduw in plaats van een grijze lijn. */
.behandeling-b :is(.huisvel, .passe-partout:not(.kop)) {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--beh-rand), 0 0 0 1px var(--beh-lichtrand), var(--pp-schaduw);
}
.behandeling-b .kop-onderrand {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--beh-rand), 0 1px 0 var(--beh-lichtrand), 0 6px 12px -8px var(--beh-omgeving-kleur);
}


/* ————————————————————————————————————————————————————————————————————————————————
   (c) Diepte door lagen — het linnen een stap onder het papier, het vel met een warme snede,
       licht op de bovenrand en twee lagen schaduw, de foto ín het papier met een schuine snede.
   ———————————————————————————————————————————————————————————————————————————————— */
/* Het linnen zelf draait mee: --bg wordt 4% schaduwbasis dieper (geen nieuwe kleur: de schaduw
   die er al ligt). Omdat het de rol is, volgt alles wat --bg leest (de uitdoof onder de kop, het
   antwoordblok, de mengsels in de voorzetten) vanzelf. Gedempt haalt dan 4,8:1 (huidig) of 5,1:1
   (Zand). 's Nachts 0%: het papier ligt daar al 19% lichter, en dieper dan --bg wil je op OLED
   niet. */
.behandeling-c {
  --bg: color-mix(in srgb, var(--beh-bg-bron), var(--beh-schaduwbasis) var(--beh-diep));
}
.behandeling-c:not(.behandeling-a, .behandeling-b).textuur::before {
  content: none;
}
.behandeling-c :is(.huisvel, .passe-partout:not(.kop)) {
  background-color: var(--beh-papier);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--beh-licht),                 /* de bovenrand vangt licht */
    0 0 0 1px var(--beh-rand),                      /* de snede: overdag warm, 's nachts niets */
    0 0 0 1px var(--beh-lichtrand),                 /* 's nachts een lichte snede */
    0 1px 1px var(--beh-contact-kleur),             /* contact: waar het papier het linnen raakt */
    3px 6px 16px -6px var(--beh-omgeving-kleur);    /* omgeving: naar rechtsonder, 1:2 zoals de tafel */
}
/* De band: een strook papier. Bovenin licht (de snede van het passe-partout), onderaan een
   schaduw op het linnen. Geen grijze lijn. */
.behandeling-c .kop-onderrand {
  background-color: var(--beh-papier);
  border-bottom-color: transparent;
  box-shadow:
    0 1px 0 var(--beh-rand),
    0 1px 0 var(--beh-lichtrand),
    0 1px 1px var(--beh-contact-kleur),
    0 5px 10px -5px var(--beh-omgeving-kleur);    /* de band is schermbreed: alleen naar onder */
}
/* De foto ligt ín het papier: een passe-partout is schuin gesneden. De onderste snede kijkt naar
   het licht en is een lichte lijn; bovenin valt de foto een haar in de schaduw van het karton.
   Dat vervangt de harde snede van donker naar wit onder de kopfoto. */
.behandeling-c .pp-plaat::after {
  box-shadow:
    inset 0 0 0 1px var(--beh-plaatlijn, var(--pp-lijn)),
    inset 0 -2px 0 -1px var(--beh-licht),
    inset 0 3px 4px -3px var(--beh-omgeving-kleur);
}
/* Een band met jou (G3) houdt zijn gouden haarlijn. */
.behandeling-c .pp-band > .pp-plaat {
  --beh-plaatlijn: var(--goud-lijn);
}
/* De scrim onder de attributie niet meer als donkere balk over de volle breedte: rechts (waar de
   regel staat) op volle sterkte, links nog 45% (Google's eigen merk houdt een grond). */
.behandeling-c .kop .scrim-onder {
  -webkit-mask-image: linear-gradient(to left, var(--inkt) 40%, color-mix(in srgb, var(--inkt) 45%, transparent) 100%);
  mask-image: linear-gradient(to left, var(--inkt) 40%, color-mix(in srgb, var(--inkt) 45%, transparent) 100%);
}
/* Het veld is ingedrukt (Refactoring UI: inset = schaduw bínnen bovenaan, licht op de onderrand);
   de voorzetten liggen erop. Zo zegt het materiaal wat typen is en wat tikken is. */
.behandeling-c .veld {
  background: var(--beh-papier);
  border-color: var(--beh-rand);
  box-shadow: inset 0 1px 2px var(--beh-contact-kleur), 0 1px 0 var(--beh-licht);
}


/* ————————————————————————————————————————————————————————————————————————————————
   De aanbeveling: (c) met het licht van (a) — class="deur behandeling-c behandeling-a"
   ———————————————————————————————————————————————————————————————————————————————— */
/* (c) geeft de diepte, (a) alleen nog het licht: geen extra wegzakken rechtsonder (4% + 3% zou
   gedempt op 4,56:1 zetten) en een kleinere poel, zodat het papier bovenin zijn stap houdt. */
.behandeling-a.behandeling-c {
  --beh-val: 0%;
  --beh-poel: 30%;
}


/* ————————————————————————————————————————————————————————————————————————————————
   Toegankelijkheid, voor alle drie
   ———————————————————————————————————————————————————————————————————————————————— */
/* Minder transparantie gevraagd: glas wordt papier. */
@media (prefers-reduced-transparency: reduce) {
  :is(.behandeling-a, .behandeling-b, .behandeling-c) .stip {
    --glas-vlak: var(--beh-papier);
    --glas-filter: none;
  }
}
/* Meer contrast gevraagd: geen verloop en geen vezel, en de snede wordt een echte rand. */
@media (prefers-contrast: more) {
  :is(.behandeling-a, .behandeling-b)::before {
    content: none;
  }
  :is(.behandeling-a, .behandeling-b, .behandeling-c) :is(.huisvel, .passe-partout:not(.kop), .chip, .veld) {
    border-color: var(--rand);
  }
}
/* Windows' hoog contrast gooit box-shadow weg; de transparante randen hierboven worden dan
   vanzelf zichtbaar in de systeemkleur. Niets extra nodig — daarom staan ze op transparent en
   niet op 0. */