/* Slice 2's blocks on the subpages (D-257, visual-pass.md §13): the markup is src/pagina/blokken.mjs's, the pen and the hours
   core/blokken.js's. Every rule is scoped under its section; the home page does not load this file. The lab's original is
   mockups/stroom-v4-lab/blokken/blokken-in.css. */

/* ---------- the grease pencil: the ring of /over-ons/' contact sheet, as ticks and crosses. Drawn by default (no script); a section the
   script has taken (data-pen) hides each mark until the pen lays it ---------- */
:is(.beloftes, .vragen) .bk-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:is(.beloftes, .vragen) .bk-pen path { fill: none; stroke: var(--rood); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.beloftes[data-pen] .bk-pen path { stroke-dashoffset: 1; }
:is(.beloftes, .vragen) .bk-pen.is-af path { stroke-dashoffset: 0; }

/* ======================= beloftes ======================= */
/* the mark stands in the margin column where the red disc stood */
.beloftes .bl-merk { position: relative; width: 36px; height: 36px; margin-top: -3px; }
.beloftes .bl-merk .bk-pen path { stroke-width: 2.7; }
/* what we never promise: a grey cross beside it, and the row faded to the floor (Alex, 24-09): the explanation at 4.6:1 on the white
   sheet, the claim a step darker at 5.4:1 */
.beloftes .bl-kruis path { stroke: #A39D95; }
.beloftes .bl-blad .belof-nee li { color: #7A756E; }
.beloftes .bl-blad .belof-nee li b { color: #6D6861; }

/* one white sheet: our letterhead, the two lists on its ruled lines, the hand-off at its foot */
.beloftes .bl-blad {
  --fg: var(--inkt); --fg2: #57534e; --lijn: rgba(20, 20, 20, .12);
  position: relative; margin-top: var(--kop-y); padding: var(--vel-p); border-radius: var(--r-plaat); background: #fff; color: var(--inkt);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 60px 120px -60px rgba(20, 20, 20, .38);
}
.beloftes .bl-blad .belof-grid { margin-top: 0; }
.beloftes .bl-hoofd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-bottom: var(--kop-y); padding-bottom: 20px; border-bottom: 1px solid var(--lijn); }
.beloftes .bl-hoofd img { display: block; width: auto; height: 13px; }
.beloftes .bl-hoofd span { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.beloftes .bl-blad .belof-uit { margin: clamp(24px, 3vw, 48px) 0 0; }

/* ======================= vragen ======================= */
/* the number under the heading in a small white card, with the hours live */
.vragen .vr-bel {
  --fg2: #57534e;
  max-width: 400px; margin: var(--sub-y) 0 0; padding: 20px 24px 18px; border-radius: var(--r-kaart); background: #fff; color: var(--inkt);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 36px 70px -40px rgba(20, 20, 20, .4);
}
.vragen .vr-zin { margin: 0; font-size: 18px; font-weight: 540; line-height: 1.3; letter-spacing: -.01em; }
.vragen .vr-tel { display: inline-block; margin-top: 8px; font-size: 22px; font-weight: 620; letter-spacing: -.01em; color: var(--inkt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vragen .vr-tel:hover { text-decoration-color: var(--rood); }
.vragen .vr-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.vragen .vr-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #A8A29A; }
.vragen .vr-status.is-open i { background: var(--rood); animation: vr-puls 2.4s ease-in-out infinite; }
@keyframes vr-puls { 50% { opacity: .35; } }

/* the pencil ticks a question the first time it opens, in the margin left of the list, and the tick stays: what he has read is marked.
   Without script the tick shows while the question is open */
.vragen .lijst summary { position: relative; }
.vragen .vr-vink { position: absolute; left: calc(-1 * clamp(32px, 2.8vw, 46px)); top: 50%; width: 26px; height: 26px; margin-top: -14px; }
.vragen .vr-vink .bk-pen path { stroke-dashoffset: 1; }
.vragen:not([data-pen]) details[open] .vr-vink .bk-pen path, .vragen .vr-vink .bk-pen.is-af path { stroke-dashoffset: 0; }

@media (max-width: 760px) {
  .vragen .vr-tel { font-size: 20px; }
  /* no margin beside the list on the phone: every question keeps room for its tick */
  .vragen .lijst summary { padding-left: 36px; }
  .vragen .vr-vink { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vragen .vr-status.is-open i { animation: none; }
}