/* ==========================================================================
   MAHSEN: pagina/blik.css
   Wat alleen de pagina's van de eerste blik dragen, naast publiek.css
   (design-system.md §6 en §10): de landingspagina (/eerste-blik), het
   wachtscherm en het rapport (/eerste-blik/{token}). Elk van die drie hangt
   dit blad zelf, via partials/stijlblad in @push('stijl'), zodat het ná
   publiek.css komt en de andere pagina's het niet laden. De mislukte blik
   hangt het niet: dat is een foutpagina, en die staat helemaal in publiek.css.

   Onder dezelfde regels als publiek.css, en op zijn tokens: geen eigen
   tokenblok, geen letter, geen basis (OntwerpregelsTest). Elke selector draagt
   een klasse die alleen deze pagina's hebben; de paginakop, het blikformulier,
   de vragen, de lijsten, de kaders en het contactblok staan in publiek.css,
   want andere pagina's dragen ze ook.

   Geen monospace en geen streepjeslijn. §1 en §10 lieten ze hier ooit toe,
   voor een gemeten waarde en als drager van de ernst; ze zijn niet nodig, en
   een uitzondering die niemand gebruikt, is alleen een gat. De ernst staat in
   het woord, de breedte van de kantlijn, het gewicht van de titel en de kleur.
   ========================================================================== */

/* -- De landingspagina ----------------------------------------------------- */
/* De kop: de H1 en het antwoord, met het formulier eronder op een gsm en
   ernaast vanaf 62.5rem, zoals de held van de vorige versie. Het formulier
   staat zo op het eerste scherm, ook op 390 bij 844. Een foute inzending
   springt naar #eerste-blik, en landt met wat lucht boven de kaart. */
.blik-kop-formulier { margin-top: 2rem; scroll-margin-top: 1rem; }
@media (min-width: 62.5rem) {
  .blik-kop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
  .blik-kop-formulier { margin-top: 1.5rem; }
}

/* De vaste balk op een gsm springt hier naar het blikformulier (#eerste-blik,
   de eigen balk van de landingspagina), want de knop van de paginakop is dat
   formulier, en geen link naar #contact (NavigatieTest). Hij springt weg
   zolang het formulier in beeld staat, zoals bij de knop van een held
   (publiek.css, --actie): anders lag hij bij het openen over het
   formulier waarvoor de lezer kwam. Op het hele formulier en niet op de knop:
   op 375 bij 667 en op 320 breed staat de knop bij het openen onder de vouw,
   en dan lag de balk half over het adresveld. En op een klasse van deze
   pagina, niet op .knop: een regel op een gedeeld component hoort niet in het
   blad van één pagina (§6). Eén element met die naam per pagina, en deze
   pagina heeft geen .held-actie (NavigatieTest leest de selectors hier).
   Op dezelfde media query als de balk in publiek.css: waar er geen balk is,
   hoeft er ook geen tijdlijn te zijn.

   Een browser zonder scroll-gestuurde animaties (Firefox, en Safari vóór 26:
   elke iPhone die nog op iOS 18 of ouder staat) kent die tijdlijn niet, en
   daar ligt de balk bij het openen op een kleine gsm wel over het adresveld
   (nagebootst op 375 bij 667). Of hij daar wegvalt, beslissen de oprichters;
   tot dan staat hij er, zoals op elke pagina (publiek.css). */
@media (max-width: 43.6875rem) and (min-height: 26rem) {
  @supports (animation-timeline: view()) {
    .blik-kop-formulier { view-timeline: --actie block; view-timeline-inset: 0 calc(3.5rem + 26px); }
  }
}

/* Wat ze meet: de stippen van publiek.css, met de lucht van de soorten werk,
   want elk hoofdstuk beslaat op een gsm twee of drie regels. */
.blik-hoofdstukken { gap: 1rem; }

/* -- Het wachtscherm ------------------------------------------------------- */
/* Wat de lezer straks leest, op papier, onder de H1 van de foutpagina. */
.wachtblad { max-width: 34rem; margin-top: 2rem; padding: 1.5rem 1.5rem 1.75rem; border-radius: var(--r-kaart); background: var(--papier); }
.wachtblad .stippen { margin-top: 0.75rem; }

/* -- Het rapport: de kop --------------------------------------------------- */
.blik-adres { margin-top: 1rem; color: var(--zand-licht); overflow-wrap: anywhere; }
/* Het adres als één blok: het breekt niet op zijn koppelteken zolang het op
   een eigen regel past ("bakkerij-" en "peeters.be" op twee regels leest als
   twee adressen), en pas binnenin als het ook daar niet past. */
.blik-adres strong { display: inline-block; color: var(--creme); }

/* De telling: een kaart in crème op walnoot, zoals de prijskaart, met het
   getal voor het woord en de getallen onder elkaar. Het dringende getal is
   het grootste; de andere staan op de maat van een grote zin. */
.telling { display: grid; gap: 0.25rem; width: fit-content; max-width: 100%; margin: 2rem 0 0; padding: 1rem 1.5rem 1.125rem 1rem; border-radius: var(--r-kaart); background: var(--creme); color: var(--walnoot); }
.telling-rij { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; column-gap: 0.875rem; }
.telling-rij dt { grid-column: 2; grid-row: 1; font-size: 1.125rem; font-weight: 700; }
.telling-rij dd { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--t-groot); font-weight: 800; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.telling-rij--dringend dd { font-size: 2.25rem; line-height: 1.1; }

/* Wat de meting zelf zegt over haar grenzen, met een koperen kantlijn. */
.blik-let-op { max-width: var(--maat); margin-top: 1.5rem; padding-left: 1rem; border-left: 4px solid var(--koper); color: var(--zand-licht); }

/* -- Het rapport: waar u begint -------------------------------------------- */
/* Links wat wij eerst zouden aanpakken en de inhoud, rechts de afdruk van de
   pagina; op een gsm de afdruk eronder, want wie het rapport opent, zoekt
   eerst waar hij begint. */
.blik-begin { display: grid; gap: 3rem; }
.blik-begin > * { min-width: 0; }
.blik-kop-klein { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }
.blik-eerst, .blik-inhoud { display: grid; gap: 0.875rem; margin: 1rem 0 0; }
.blik-eerst { padding-left: 1.75rem; }
.blik-eerst li::marker { color: var(--koper-diep); font-weight: 800; }
.blik-eerst + nav { margin-top: 3rem; }
.blik-inhoud { padding: 0; list-style: none; }
.blik-inhoud a { font-weight: 700; }
.blik-waar { display: block; color: var(--inkt-zacht); font-size: var(--t-klein); line-height: 1.5; }
/* Onder de inhoud: alles openklappen, en tot wanneer het rapport op dit adres
   staat, met de link naar uzelf. De twee horen bij elkaar, dus dicht onder
   elkaar; met ?alles staat alleen de tweede er. */
.blik-alles, .blik-bewaren { margin-top: 1.5rem; }
.blik-alles + .blik-bewaren { margin-top: 0.75rem; }
.blik-beelden-raster { display: grid; gap: 1rem; align-items: end; }
.blik-gsm { max-width: 12rem; }
@media (min-width: 43.75rem) {
  .blik-beelden-raster { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .blik-gsm { max-width: none; }
}
@media (min-width: 62.5rem) {
  .blik-begin { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4.5rem; align-items: start; }
}

/* -- Het rapport: de bevindingen ------------------------------------------- */
/* Elke bevinding is een vraag van publiek.css (papier, radius 20, de plus),
   met de ernst in vier dragers: het woord onder de titel, de breedte van de
   kantlijn, de titel in 800 bij wat dringend is, en de kleur. In
   hoogcontrast verdwijnt de kleur, en blijven het woord en de breedte. */
/* De bevindingen delen één kolom, en een lange gemeten waarde (een adres, een
   bestandsnaam) maakte die kolom op 320px breder dan het scherm, voor elke
   bevinding eronder: min-width 0, en zo'n waarde breekt waar het moet. */
/* Op een breed scherm hoogstens 52rem: over de volle 1240px stond de plus
   1100px van een titel van 600, en leesde de lijst als een muur. */
.blik-bevindingen { max-width: 52rem; margin-top: 2rem; }
.blik-bevindingen > * { min-width: 0; }
/* De kantlijn met rechte hoeken aan haar kant: op een kaart met radius 20 liep
   ze in de hoeken spits toe tot een sikkel, en die las als een schaduw (§1).
   De tekst schuift de breedte van de kantlijn terug, zodat de titels van elke
   ernst op één lijn staan, zoals zonder kantlijn. */
.bevinding--dringend, .bevinding--beter, .bevinding--niet-gemeten { border-radius: 6px var(--r-kaart) var(--r-kaart) 6px; }
.bevinding--dringend { border-left: 8px solid var(--walnoot); }
.bevinding--beter { border-left: 4px solid var(--koper-diep); }
.bevinding--niet-gemeten { border-left: 4px solid var(--veldrand); }
.bevinding--dringend > summary, .bevinding--dringend > .vraag-antwoord { padding-left: calc(1.5rem - 8px); }
.bevinding--beter > summary, .bevinding--beter > .vraag-antwoord, .bevinding--niet-gemeten > summary, .bevinding--niet-gemeten > .vraag-antwoord { padding-left: calc(1.5rem - 4px); }
@media (min-width: 56.25rem) {
  .bevinding--dringend > summary, .bevinding--dringend > .vraag-antwoord { padding-left: calc(1.875rem - 8px); }
  .bevinding--beter > summary, .bevinding--beter > .vraag-antwoord, .bevinding--niet-gemeten > summary, .bevinding--niet-gemeten > .vraag-antwoord { padding-left: calc(1.875rem - 4px); }
}
/* Een titel met een lang woord ("ondernemingsnummer") duwde op 320px de plus
   buiten beeld: de titel mag krimpen, en breekt dan met een afbreekstreepje,
   waar een summary dat anders niet doet (publiek.css, hyphens: manual). */
.bevinding-kop { display: grid; gap: 0.25rem; min-width: 0; -webkit-hyphens: auto; hyphens: auto; }
.bevinding--dringend .bevinding-titel { font-weight: 800; }
.bevinding-ernst { color: var(--inkt-zacht); font-size: var(--t-klein); font-weight: 700; }
.bevinding-meting { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bevinding-reden { font-weight: 700; }
.bevinding-orde-meting { display: block; color: var(--inkt-zacht); font-size: var(--t-klein); overflow-wrap: anywhere; }

/* -- Het rapport: wat de machine niet zag, en wat u ermee kan -------------- */
.blik-wegen { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.blik-wegen p { margin-top: 0.25rem; color: var(--zand-licht); }
.blik-wissen { max-width: var(--maat); margin-top: 3rem; color: var(--zand-licht); }

/* -- Hoog contrast en papier ----------------------------------------------- */
@media (forced-colors: active) {
  .telling, .wachtblad { border: 2px solid CanvasText; }
}

/* Een rapport gaat vaak op papier naar wie de site bouwde; ?alles klapt dan
   elke bevinding open. Wat alleen op een scherm iets doet, valt weg, en de
   tweede tekstkleur van de walnoten vlakken wordt zwart, want die vlakken
   worden wit (publiek.css). */
@media print {
  .blik-alles { display: none; }
  .bevinding { break-inside: avoid; }
  .blik-adres, .blik-adres strong, .blik-let-op, .blik-wegen p, .blik-wissen { color: black; }
}