/* De opmaak van de demo zelf: de keuzebalk, de melding en de telefoonstand.
   De tool eronder draagt zijn eigen opmaak (UI v4, `src/app/uiv4/uiv4-styles.js`). De kleuren en
   letters zijn die van de tool; de waarden staan hier nog een keer als terugval, voor het geval
   deze regels eerder tekenen dan de opmaak van de tool. */

body{ margin:0; background:var(--papier, #f6f5f2); color:var(--ink, #1a1a1a);
  font-family:var(--font-ui, 'Inter Tight', 'Helvetica Neue', Arial, sans-serif); }

.demo-balk{ background:var(--warm, #f1ece2); border-bottom:1px solid var(--lijn, #d9d3c5); }
.demo-balk-binnen{ max-width:1344px; margin:0 auto; padding:18px 48px 14px; box-sizing:border-box; }
.demo-balk-kop{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.demo-balk-titel{ font-family:var(--font-display, 'Fraunces', Georgia, serif); font-size:21px; letter-spacing:-.01em; }
.demo-balk-uitleg{ font-size:14px; color:var(--ink-zacht, #4a4a4a); }

.demo-kaarten{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:10px; margin-top:14px; }
.demo-kaart{ display:flex; flex-direction:column; gap:1px; padding:10px 12px 11px; text-decoration:none;
  color:inherit; background:var(--wit, #fff); border:1px solid var(--lijn, #d9d3c5); min-width:0; }
.demo-kaart:hover{ border-color:var(--ink, #1a1a1a); }
.demo-kaart:focus-visible{ outline:2px solid var(--terra, #ba5229); outline-offset:2px; }
.demo-kaart.is-actief{ border-color:var(--ink, #1a1a1a); box-shadow:inset 0 -3px 0 var(--terra, #ba5229); }
.demo-kaart-naam{ font-family:var(--font-display, 'Fraunces', Georgia, serif); font-size:16px; line-height:1.25; }
.demo-kaart-leeftijd{ font-size:12px; color:var(--mute, #8a8580); }
.demo-kaart-regel{ font-size:13px; line-height:1.35; color:var(--ink-zacht, #4a4a4a); margin-top:4px; }

/* P253 — ACHT KAARTEN (was zeven). Op een laptop staan ze naast elkaar; smaller dan 1180 pixels schuif je de
   rij opzij (de pagina zelf schuift niet). */
@media (max-width: 1179px){
  .demo-kaarten{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    margin-left:-48px; margin-right:-48px; padding:0 48px 6px; scroll-padding:0 48px; scrollbar-width:thin; }
  .demo-kaart{ flex:0 0 186px; scroll-snap-align:start; }
}

.demo-disclaimer{ margin:10px 0 0; font-size:12.5px; color:var(--ink-zacht, #4a4a4a); }

/* Opslaan en terugzetten horen niet bij vaste voorbeelden. */
body[data-demo-slot] [data-doe="opslaan"],
body[data-demo-slot] [data-doe="terugzetten"]{ display:none !important; }

/* In de demo is de invoer te zien maar niet te wijzigen. */
body[data-demo-klaar="ja"] [data-uiv4-scherm] input[readonly],
body[data-demo-klaar="ja"] [data-uiv4-scherm] textarea[readonly]{ cursor:default; }

.demo-fout{ padding:48px; font-size:15px; }

/* De melding: rustig, onderaan, niet over de tool heen tot iemand iets probeert. */
.demo-melding{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1000;
  width:min(560px, calc(100% - 32px)); box-sizing:border-box; padding:18px 20px;
  background:var(--ink, #1a1a1a); color:var(--papier, #f6f5f2); display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18); }
.demo-melding.is-open{ display:block; }
.demo-melding-tekst{ margin:0; font-size:15px; line-height:1.5; }
.demo-melding-knoppen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.demo-melding-knop{ display:inline-block; padding:9px 14px; background:var(--papier, #f6f5f2);
  color:var(--ink, #1a1a1a); text-decoration:none; font-size:14px; font-weight:500; }
.demo-melding-sluit{ padding:9px 14px; background:transparent; color:var(--papier, #f6f5f2);
  border:1px solid rgba(246,245,242,.5); font:inherit; font-size:14px; cursor:pointer; }

/* TELEFOON. De tool is gemaakt voor laptop en tablet en verbergt zich onder 768 pixels
   (`src/app/uiv4/schil.js`, de smalle melding). In de demo blijft hij staan. Zijn blokken lopen
   dan onder elkaar; wat breder is dan het scherm (een grafiek, een tabel) schuif je opzij. */
@media (max-width: 767px){
  .demo-balk-binnen{ padding:14px 16px 12px; }
  .demo-balk-titel{ font-size:19px; }
  .demo-kaarten{ gap:8px; margin-left:-16px; margin-right:-16px; padding:0 16px 6px; scroll-padding:0 16px; }
  .demo-kaart{ flex:0 0 168px; padding:9px 11px 10px; }
  .demo-kaart-regel{ font-size:12.5px; }
  .demo-tool{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .demo-tool [data-uiv4-scherm]{ display:block !important; }
  .demo-tool .smal-melding{ display:none !important; }
  .demo-melding{ bottom:16px; }
}