/* Tickaboo — /guides/childcare-photo-consent/
 *
 * Linked by hand from the page head, and site.js by hand before </body>,
 * as every nested route must (current.md 17b).
 * Built 8 September 2026. Phase 4 guide 4.
 *
 * The guide chrome (.g-hero, .method, .cmp) and the guide building blocks
 * (.steps, .layers, .drench, .close__lead) both live in components.css now.
 * Only what is specific to this page is here.
 *
 * Every color-mix() carries a solid declaration immediately before it. A
 * var() holding an unsupported function is invalid at computed-value time
 * and falls to the property's initial value, which for SVG fill is black.
 */

/* ═══════════════════════════════════════════════════════════════════
   THE SIGNATURE ILLUSTRATION
   Two forms side by side: one blanket tick against a decision per
   destination. The whole argument of the page, before a word of it.
   Tokens only, no shadows, no faces (current.md §10).
   ═══════════════════════════════════════════════════════════════════ */
.ill--forms {
  --cf-paper: #FBF7F2;
  --cf-bad: #E7DACB;
  --cf-rule: #E6D8C8;
  --cf-stamp: #DCEADD;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill--forms {
    --cf-paper: color-mix(in srgb, var(--color-paper) 26%, var(--color-surface-tint));
    --cf-bad: color-mix(in srgb, var(--color-paper) 82%, var(--color-muted));
    --cf-rule: var(--color-border);
    --cf-stamp: color-mix(in srgb, var(--color-surface) 62%, var(--color-surface-tint));
  }
}

.cf__sheet {
  fill: var(--cf-paper);
  stroke: var(--cf-rule);
  stroke-width: 1.5;
}
.cf__band { fill: var(--color-primary); }
.cf__bandfoot { fill: var(--color-primary); }
.cf__bandline { fill: none; stroke: var(--color-surface-tint); stroke-width: 3.2; stroke-linecap: round; opacity: 0.8; }
/* The bundled form is the same artefact gone grey: it is not a different
   kind of document, it is this one with the choices taken out. */
.cf__sheet--bad { fill: var(--color-surface-tint); }
.cf__band--bad, .cf__bandfoot--bad { fill: var(--cf-bad); }

.cf__line { fill: none; stroke: var(--color-muted); stroke-width: 3.2; stroke-linecap: round; opacity: 0.42; }
.cf__line--strong { opacity: 0.7; }
.cf__line--stamp { stroke: var(--color-dark); opacity: 0.55; stroke-width: 3; }
.cf__rule { fill: none; stroke: var(--cf-rule); stroke-width: 1.5; }
.cf__sign { fill: none; stroke: var(--color-dark); stroke-width: 2.6; stroke-linecap: round; opacity: 0.6; }

.cf__box { fill: var(--color-surface-tint); stroke: var(--color-muted); stroke-width: 2; }
.cf__box--bad { fill: var(--color-muted); stroke: var(--color-muted); }
.cf__box--yes { fill: var(--color-primary); stroke: var(--color-primary); }
.cf__box--nope { fill: var(--color-surface-tint); stroke: var(--color-dark); }
.cf__tick { fill: none; stroke: var(--color-surface-tint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf__tick--bad { stroke: var(--color-surface-tint); stroke-width: 2.6; }
.cf__cross { fill: none; stroke: var(--color-dark); stroke-width: 2.4; stroke-linecap: round; }
.cf__stamp { fill: var(--cf-stamp); }

/* ═══════════════════════════════════════════════════════════════════
   HOW LONG: split, so the "new use needs a new yes" rule sits beside
   the calendar question rather than after it. It is the answer people
   actually need and it is not the one they came for.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   SHARED SMALL BITS
   ═══════════════════════════════════════════════════════════════════ */
.cn-note {
  max-width: 62ch;
  margin: clamp(1.75rem, 3vw, 2.25rem) auto 0;
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.cn-note.centred { text-align: center; }
.cn-note strong { color: var(--color-ink); }
.cn-four .section-lead,
.cn-withdraw .section-lead,
.cn-record .section-lead { max-width: 66ch; margin-inline: auto; }