/* Tickaboo — /guides/school-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 7, the last of the set.
 *
 * Chrome and shared blocks live in components.css. Only page-specific
 * rules are here. Every color-mix() carries a solid fallback first.
 */

/* ═══════════════════════════════════════════════════════════════════
   THE SIGNATURE ILLUSTRATION
   Two schools with a hard divider between them, each holding its own
   document. The page's first claim is that these are two different
   legal questions, so the picture has to show a split rather than a
   comparison of degree.
   ═══════════════════════════════════════════════════════════════════ */
.ill--split {
  --sl-card: #EDF4EC;
  --sl-card-alt: #FAF3EC;
  --sl-solid: #BDD3C1;
  --sl-solid-alt: #E4CFB8;
  --sl-paper: #FFFFFF;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ill--split {
    --sl-card: color-mix(in srgb, var(--color-surface) 40%, var(--color-surface-tint));
    --sl-card-alt: color-mix(in srgb, var(--color-paper) 46%, var(--color-surface-tint));
    --sl-solid: color-mix(in srgb, var(--color-primary) 30%, var(--color-surface-tint));
    --sl-solid-alt: color-mix(in srgb, var(--color-paper) 92%, var(--color-muted));
  }
}

.sl__card { fill: var(--sl-card); }
.sl__card--alt { fill: var(--sl-card-alt); }
.sl__roof, .sl__body { fill: var(--sl-solid); }
.sl__roof--alt, .sl__body--alt { fill: var(--sl-solid-alt); }
.sl__door, .sl__win { fill: var(--color-surface-tint); }
.sl__door--alt, .sl__win--alt { fill: var(--color-surface-tint); }
/* One school flies a flag, the other wears a crest. It is the shortest
   way to say government and non-government without a label. */
.sl__flag { fill: var(--color-primary); }
.sl__crest { fill: var(--color-dark); }

.sl__doc { fill: var(--sl-paper); stroke: var(--color-border); stroke-width: 1.5; }
.sl__docband, .sl__docbandfoot { fill: var(--color-primary); }
.sl__docband--alt, .sl__docbandfoot--alt { fill: var(--color-dark); }
.sl__docline {
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.42;
}

.sl__divide {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-dasharray: 7 6;
}
.sl__vs { fill: var(--color-surface-tint); stroke: var(--color-border); stroke-width: 2; }
.sl__vsline { fill: none; stroke: var(--color-muted); stroke-width: 2.6; stroke-linecap: round; opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════════
   THE TWO COLUMNS
   Equal weight on purpose. Neither school type is the default, and a
   layout that made one primary would answer the question wrongly for
   half the readers.
   ═══════════════════════════════════════════════════════════════════ */
.sc-two {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 820px) { .sc-two { grid-template-columns: 1fr 1fr; } }

.sc-col {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.sc-col--alt { background: var(--color-paper); }
.sc-col__tag {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-dark);
}
.sc-col h3 { margin: 0 0 0.8rem; font-size: 1.125rem; }
.sc-col p { margin: 0 0 0.85rem; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.6; }
.sc-col strong { color: var(--color-ink); }
.sc-col__note {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.sc-note {
  max-width: 66ch;
  margin: clamp(1.75rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.sc-which .section-lead,
.sc-states .section-lead { max-width: 66ch; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   THE STATE TABLE
   The "read by us" flag is the honest part of this page, so it gets a
   chip rather than a footnote.
   ═══════════════════════════════════════════════════════════════════ */
.cmp--states { min-width: 820px; }
.cmp--states tbody th { min-width: 4.5rem; }
.cmp--states td a { color: var(--color-primary); }
.sc-read {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   THE QUOTED POLICY LINES, inside the dark drench
   ═══════════════════════════════════════════════════════════════════ */
.sc-quotes {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.07);
  background: color-mix(in srgb, var(--color-surface-tint) 7%, transparent);
  display: grid;
  gap: 0.75rem;
}
.sc-quotes li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(245,235,224,0.82);
  color: color-mix(in srgb, var(--color-dark-ink) 82%, transparent);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.sc-quotes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.65rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent-2);
}
.sc-quotes strong { color: var(--color-dark-ink); }

.sc-punch {
  margin-top: 1.6rem;
  color: var(--color-dark-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  max-width: 36ch;
}