/* ==========================================================================
   DAGLICHT-SKIN over app.css — voor élk scherm op de Nederlandse site dat
   nog op het oude blad (app.css) draait: de Weekscan, de bibliotheek, het
   voorbeeld-Playbook, het rapport, de afrekenpagina en de juridische
   pagina's.

   WAAROM EEN SKIN EN GEEN HERBOUW
   Die schermen delen hun opmaak met de Engelse site op .com. Die site houdt
   zijn eigen richting (GRAPHITE CONSOLE, donker). Dit blad wordt daarom
   ALLEEN op het Nederlandse oppervlak ingeladen, ná app.css en brand.css.
   brand.css zet de tokens om naar Daglicht; dit blad corrigeert de plekken
   waar app.css een donkere waarde hard heeft ingetypt in plaats van via een
   token te lopen, en trekt de kop, de voet, de schriftmaten en de knoppen
   gelijk met nl-site.css.

   BRON VAN DE VORMEN
   Alles onder "kop", "voet", "knop" en "schrift" is dezelfde vorm als in
   nl-site.css. Wijkt er iets af, dan is dat een fout: check-uniform.js meet
   beide oppervlakken naast elkaar en valt om zodra ze uit elkaar lopen.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- *
 * app.css kent één lichte modus: body.page-answer, met koel grijs papier en
 * een zwarte knop. Op de Nederlandse site is papier warm en is de knop groen.
 * Deze regel moet ná brand.css staan, anders wint de klasse van de :root. */
body.page-answer{
  --graphite:#F4F3EF; --paper:#F4F3EF;
  --panel:#FFFFFF; --panel-2:#F4F3EF; --raised:rgba(10,10,10,.16);
  --seam:rgba(10,10,10,.16); --seam-soft:rgba(10,10,10,.085);
  --ink:#0A0A0A; --ink-2:rgba(10,10,10,.72); --muted:rgba(10,10,10,.60); --faint:rgba(10,10,10,.60);
  --live:#0A0A0A; --live-dim:rgba(10,10,10,.06);
  --keep:#0A0A0A; --delegate:#8C5309; --automate:#0A0A0A;
  --eliminate:rgba(10,10,10,.60); --signal:#8C5309;
}

/* -------------------------------------------------------------- schrift -- */
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.022em;line-height:1.08}
h1{font-size:clamp(34px,6vw,62px);font-weight:600}
h2{font-size:clamp(27px,3.7vw,42px);font-weight:600}
h3{font-size:clamp(18px,2.1vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2)}
.fine{font-size:13px;color:var(--muted);line-height:1.6}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
::selection{background:var(--live);color:var(--sheet)}
:focus-visible{outline:2px solid var(--live);outline-offset:2px;border-radius:var(--r)}

/* De kicker: op de Nederlandse pagina's een mono-label met een kort streepje,
   niet de lange neonlijn van de console. */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);gap:8px;
}
.eyebrow::before{width:6px;background:var(--seam)}

/* ------------------------------------------------------------------ kop -- *
 * Zelfde balk als op de rest van de site: papier met doorschijn, het
 * merk-lockup links, de navigatie rechts, de Weekscan als groene knop. */
.site-head{
  height:auto;min-height:62px;padding:11px var(--gut,24px);gap:22px;
  justify-content:flex-start;
  background:rgba(244,243,239,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--seam);
}
.site-nav{gap:19px;margin-left:auto;font-size:14.5px}
.site-nav a{
  color:var(--ink-2);font-size:14.5px;font-weight:500;
  padding:5px 0;border-radius:0;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--ink);background:transparent;border-bottom-color:var(--seam)}
.site-nav a.on{color:var(--ink);border-bottom-color:var(--live)}
.site-nav .btn{margin-left:0}

/* het merk-lockup (beeldmerk + naam + payoff), identiek aan nl-site.css */
.wm{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;min-height:44px}
.wm-mark{display:block;flex:0 0 auto;line-height:0}
.wm-mark svg{display:block}
.wm-txt{display:block;line-height:1.15}
.wm-txt b{
  display:block;font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.02em;color:var(--ink);
}
.wm-txt i{
  display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:1px;
}
.lang-switch{
  margin-left:0;order:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--muted);border:1px solid var(--seam);border-radius:var(--r);
  padding:4px 7px;background:var(--sheet);
}
.lang-switch:hover{color:var(--ink);background:var(--sheet);border-color:var(--ink-2)}
/* De menuknop van de kop. Eigen klasse, want `.nav-toggle` wordt door twee
   oudere scripts bediend die elkaar opheffen; deze knop heeft precies één
   schakelaar. Minimaal 44px hoog: het is een raakvlak, geen regel tekst. */
.menu-nl{
  display:none;margin-left:auto;cursor:pointer;
  background:var(--sheet);border:1px solid var(--seam);color:var(--ink);
  border-radius:var(--r);padding:11px 13px;min-height:44px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
}
.menu-nl:hover{border-color:var(--ink-2)}

/* ----------------------------------------------------------------- voet -- */
.site-foot{
  border-top:1px solid var(--seam);padding:42px var(--gut,24px) 64px;
  display:grid;gap:26px;justify-content:stretch;margin-top:22px;
}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.site-foot nav a{color:var(--muted);font-size:14px}
.site-foot nav a:hover{color:var(--ink);text-decoration:underline}
.site-foot .biz{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.75;margin:0}
.site-foot .fine{width:auto;border-top:0;padding-top:0}

/* ----------------------------------------------------------------- knop -- *
 * Op de rest van de site is de hoofdknop een gevuld groen vlak. In app.css is
 * het een donkere knop die bij hover neon wordt. Dat is een ándere knop dan op
 * de verkooppagina's, en dat mag niet. */
.btn{
  background:var(--live);border-color:var(--live);color:var(--sheet);
  font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.005em;
  padding:13px 22px;min-height:46px;line-height:1.6;
}
.btn:hover{background:var(--live-deep);border-color:var(--live-deep);color:var(--sheet)}
.btn-sm{padding:9px 15px;font-size:14.5px;min-height:38px;line-height:1.6}
.btn-ghost,.btn-light{
  background:var(--sheet);border-color:var(--ink);color:var(--ink);font-weight:500;
}
.btn-ghost:hover,.btn-light:hover{background:var(--sheet-2);border-color:var(--ink);color:var(--ink)}
.btn .arrow{font-family:var(--mono);font-size:14px}

/* Tekst die op een accentvlak staat. In app.css is dat hard #0A0A0A; op
   daglicht is dat donker-op-donkergroen en dus onleesbaar. */
.artifact-tab.selected,
.peek-tab[aria-selected="true"],
.flag-opts button.on[data-v=yes],
.flag-opts button.on[data-v=sometimes],
.flag-opts button.on[data-v=no],
.os-next-btn{color:var(--sheet)}
.option.selected .box::after{border-left-color:var(--sheet);border-bottom-color:var(--sheet)}
.sort-btn:hover{border-color:var(--live);color:var(--live)}

/* -------------------------------------------------------------- vlakken -- *
 * Een paneel ligt als vel óp de ondergrond; opgetild is donkerder, niet
 * lichter, want er valt licht op papier. */
.panel,.card,.tile,.box,.artifact,.peek,.score,.os-side,.sample-stats div,.lib-card{
  background:var(--sheet);
}
.ai-stance{background:var(--shade)}
.artifact-head,.sample-note{background:var(--panel-2)}
.os-main{background:var(--paper)}
.meter,.progress-rail{background:var(--sheet-2)}
.gate{background:linear-gradient(180deg,var(--live-tint),transparent 70%),var(--sheet);border-color:var(--live-rule)}

/* De cijfers zijn het luidste element op elke pagina (HORMOZI). */
.score b,.sample-stats b{font-family:var(--display);font-weight:600;color:var(--ink)}
.sample-stats b.live{color:var(--live)}

/* De vier keuzes houden overal dezelfde betekenis. */
.keep,.k{color:var(--keep)}
.delegate,.d{color:var(--delegate)}
.automate,.a{color:var(--automate)}
.eliminate,.e{color:var(--eliminate)}

/* De hoofdknop in de kop is een knop, geen navigatielink. Zonder deze regel
   wint `.site-nav a` op specificiteit: dan staat de belangrijkste knop van de
   site in grijs op groen (1,1:1) én zonder zijn eigen ruimte — hij werd 38 px
   hoog in plaats van de 44 px die hij overal elders is. */
.site-head .btn,
.site-nav a.btn,
.site-nav a.btn:hover{
  color:var(--sheet);background:var(--live);
  padding:9px 15px;font-size:14.5px;line-height:1.6;min-height:44px;
  border:1px solid var(--live);border-radius:var(--r);
}
.site-nav a.btn:hover{background:var(--live-deep);border-color:var(--live-deep)}

/* ----------------------------------------------------- mobiele lezer ----- */
@media (max-width:980px){
  .os-pager,.os-topbar{background:var(--sheet)}
  .os-next.is-end .os-next-btn{color:var(--ink)}
}

/* ------------------------------------------------------------- mobiel ---- *
 * Dezelfde kantelpunten als de rest van de site: het menu klapt in onder
 * 900 px (app.css deed dat pas bij 720) en de tekst zakt naar 16 px bij
 * 640 px (app.css deed dat al bij 720). Anders leest dezelfde site op een
 * tablet in twee maten.                                                    */
@media (max-width:900px){
  .site-head{position:sticky}
  .site-nav{display:none}
  .site-nav.open{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);padding:8px var(--gut,24px) 18px;
    border-bottom:1px solid var(--seam);
  }
  .site-nav.open a{padding:13px 0;border-bottom:1px solid var(--seam-soft)}
  .site-nav.open a.btn{justify-content:center;margin-top:12px;border-bottom-color:var(--live)}
  .site-nav.open .lang-switch{align-self:flex-start;margin-top:12px}
  .menu-nl{display:block}
  .wm-txt i{display:none}
}
@media (max-width:720px){
  body{font-size:17px}
}
@media (max-width:640px){
  body{font-size:16px}
  .site-foot{padding-bottom:44px}
}

/* Afdrukken: de week hoort op papier te kunnen. */
@media print{
  .site-head,.site-foot,.menu-nl{display:none!important}
  body{background:#fff;font-size:11pt}
}