/* ============================================================
   Crime Watch Canada — safety slice: /resources, /missing-children, /tips.
   KDS v1 · Verandah. Light ground, white cards, soft shadows, Inter sentence
   case, brand red used sparingly. Per-section accent comes in as --sf-tone
   (a KDS status colour set inline on the section). Tokens only — no raw
   colours, radii, spacing, durations or fonts.
   Prefix: .sf-
   ============================================================ */

:root {
  /* JS writes --sf-header-h from the real .topbar height; 60px is the CSS fallback. */
  --sf-stick: calc(var(--sf-header-h, 60px));
  --sf-scroll-pad: calc(var(--sf-header-h, 60px) + 72px);
}

/* ---------- shared: page head ---------- */
.sf-head { padding-block: clamp(20px, 5vw, 44px) clamp(14px, 3vw, 24px); }
.sf-head__grid { display: grid; gap: var(--kds-sp-5); align-items: center; }
@media (min-width: 900px) { .sf-head__grid--media { grid-template-columns: 1.1fr .9fr; gap: var(--kds-sp-8); } }
.sf-head h1 { font-size: var(--kds-text-display); margin-bottom: .28em; }
.sf-head .lede { margin-bottom: 0; }
.sf-head__acts { display: flex; gap: var(--kds-sp-3); flex-wrap: wrap; margin-top: var(--kds-sp-4); }
.sf-head__acts .kds-btn { min-height: 48px; }
.sf-head__media { border-radius: var(--kds-radius-xl); overflow: hidden; border: 1px solid var(--kds-border); box-shadow: var(--kds-shadow-2); background: var(--kds-surface-2); }
.sf-head__media img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.sf-head__caption { margin: var(--kds-sp-2) 0 0; font-size: var(--kds-text-xs); color: var(--kds-fg-faint); }

/* anchor aliases (zero-height targets so old deep links keep working) */
.sf-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: var(--sf-scroll-pad); }

/* ---------- shared: content column ---------- */
.sf-content { padding-block: var(--kds-sp-2) clamp(24px, 5vw, 48px); }
.sf-content > * + * { margin-top: clamp(28px, 5vw, 56px); }
.sf-content h2 { font-size: var(--kds-text-2xl); }
@media (min-width: 768px) { .sf-content h2 { font-size: var(--kds-text-3xl); } }

/* ---------- shared: stat / summary card ---------- */
.sf-summary { display: grid; gap: var(--kds-sp-4); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-4) var(--kds-sp-5); margin-top: var(--kds-sp-5); }
.sf-summary__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-3); flex-wrap: wrap; }
.sf-summary__count { font-size: var(--kds-text-xl); font-weight: var(--kds-weight-bold); letter-spacing: var(--kds-tracking-tight); font-variant-numeric: tabular-nums; }
.sf-summary__count b { color: var(--kds-brand); font-weight: inherit; }
.sf-summary__note { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.sf-summary__note svg { width: 14px; height: 14px; flex: none; color: var(--kds-fg-faint); }
.sf-summary .kds-progress { height: 8px; }
.sf-summary .kds-progress__bar { background: var(--kds-brand); }

/* ---------- sticky in-page section nav ---------- */
.sf-subnav { position: sticky; top: var(--sf-stick); z-index: 60; background: color-mix(in srgb, var(--kds-bg) 90%, transparent); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--kds-border); margin-top: var(--kds-sp-5); }
.sf-subnav__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 8px; margin-inline: calc(-1 * var(--kds-gutter)); padding-inline: var(--kds-gutter); }
.sf-subnav__inner::-webkit-scrollbar { display: none; }
.sf-subnav a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--kds-radius-full); border: 1px solid var(--kds-border); background: var(--kds-surface); color: var(--kds-fg-muted); text-decoration: none; font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); white-space: nowrap; }
.sf-subnav a:hover { color: var(--kds-fg); border-color: var(--kds-border-strong); }
.sf-subnav a.is-active { background: var(--kds-fg); color: var(--kds-bg); border-color: var(--kds-fg); }
.sf-subnav a svg { width: 16px; height: 16px; }

/* ---------- checklist sections ---------- */
.sf-section { --sf-tone: var(--kds-accent); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); overflow: hidden; scroll-margin-top: var(--sf-scroll-pad); }
.sf-content > .sf-section + .sf-section { margin-top: var(--kds-sp-4); }
.sf-section__head { list-style: none; display: grid; grid-template-columns: 44px 1fr 20px; gap: var(--kds-sp-2) var(--kds-sp-4); align-items: start; padding: var(--kds-sp-5); cursor: pointer; }
.sf-section__head::-webkit-details-marker { display: none; }
.sf-section__head:hover { background: var(--kds-surface-2); }
.sf-section__ico { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--kds-radius-md); display: grid; place-content: center; background: color-mix(in srgb, var(--sf-tone) 12%, transparent); color: var(--sf-tone); }
.sf-section__ico svg { width: 22px; height: 22px; }
.sf-section__title { grid-column: 2; grid-row: 1; min-width: 0; }
.sf-section__title h2 { margin: 0 0 .25em; font-size: var(--kds-text-xl); font-weight: var(--kds-weight-semibold); }
.sf-section__intro { display: block; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); max-width: 62ch; }
.sf-section__chev { grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center; width: 20px; height: 20px; color: var(--kds-fg-faint); transition: transform var(--kds-dur-base) var(--kds-ease-standard); }
.sf-section[open] .sf-section__chev { transform: rotate(180deg); }
.sf-section__meter { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: var(--kds-sp-3); margin-top: var(--kds-sp-2); }
.sf-section__meter .kds-progress { flex: 1; min-width: 0; }
.sf-section__meter .kds-progress__bar { background: var(--sf-tone); }
.sf-count { font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); color: var(--kds-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-count.is-complete { color: var(--kds-positive); }
@media (max-width: 420px) { .sf-section__head { grid-template-columns: 38px 1fr 18px; gap: var(--kds-sp-2) var(--kds-sp-3); padding: var(--kds-sp-4); } .sf-section__ico { width: 38px; height: 38px; } .sf-section__ico svg { width: 19px; height: 19px; } }

/* checklist rows */
.sf-list, .sf-steps { list-style: none; margin: 0; padding: 0 var(--kds-sp-5) var(--kds-sp-4); display: grid; gap: 6px; }
.sf-list > li, .sf-steps > li { display: grid; min-width: 0; }
.sf-tip__label { display: grid; grid-template-columns: 26px 1fr; gap: var(--kds-sp-3); align-items: start; min-height: 48px; padding: 12px 14px; border-radius: var(--kds-radius-md); border: 1px solid transparent; background: var(--kds-surface-2); cursor: pointer; position: relative; transition: background var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast); }
.sf-tip__label:hover { border-color: var(--kds-border-strong); }
.sf-tip__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-tip__box { width: 26px; height: 26px; border: 2px solid var(--kds-border-strong); border-radius: var(--kds-radius-xs); background: var(--kds-surface); display: grid; place-content: center; flex: none; transition: background var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast); }
.sf-tip__box::after { content: ""; width: 6px; height: 11px; border: solid var(--kds-surface); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; transition: opacity var(--kds-dur-fast); }
.sf-tip__box--num { color: var(--kds-fg-muted); font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); font-variant-numeric: tabular-nums; }
.sf-tip__box--num::after { display: none; }
.sf-tip__check:checked + .sf-tip__box { background: var(--sf-tone, var(--kds-positive)); border-color: var(--sf-tone, var(--kds-positive)); color: var(--kds-surface); }
.sf-tip__check:checked + .sf-tip__box::after { opacity: 1; }
.sf-tip__check:focus-visible + .sf-tip__box { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }
.sf-tip__body { display: grid; gap: 3px; min-width: 0; }
.sf-tip__title { font-size: var(--kds-text-sm); font-weight: var(--kds-weight-semibold); line-height: 1.35; }
.sf-tip__text { color: var(--kds-fg-muted); font-size: var(--kds-text-sm); line-height: 1.5; }
.sf-tip__check:checked ~ .sf-tip__body .sf-tip__title { color: var(--kds-fg-muted); text-decoration: line-through; text-decoration-color: var(--kds-fg-faint); }
.sf-tip__check:checked ~ .sf-tip__body .sf-tip__text { color: var(--kds-fg-faint); }
@media (min-width: 900px) { .sf-list { grid-template-columns: 1fr 1fr; } }

.sf-section__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--kds-sp-3); padding: var(--kds-sp-3) var(--kds-sp-5); border-top: 1px solid var(--kds-border); background: var(--kds-surface-2); font-size: var(--kds-text-xs); color: var(--kds-fg-muted); flex-wrap: wrap; }
.sf-reset { background: none; border: 0; color: var(--kds-fg-muted); font: inherit; font-weight: var(--kds-weight-semibold); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; padding: 0 2px; }
.sf-reset:hover { color: var(--kds-brand); }

/* ---------- neighbourhood-watch guides ---------- */
.sf-guides { scroll-margin-top: var(--sf-scroll-pad); }
.sf-guides__grid { margin-top: var(--kds-sp-5); }
.sf-guide { --sf-tone: var(--kds-accent); padding: 0; overflow: hidden; }
.sf-guide__head { display: grid; gap: var(--kds-sp-2); padding: var(--kds-sp-4) var(--kds-sp-5) var(--kds-sp-3); }
.sf-guide__head h3 { margin: 0; font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.sf-guide__meter { display: flex; align-items: center; gap: var(--kds-sp-3); }
.sf-guide__meter .kds-progress { flex: 1; min-width: 0; }
.sf-guide__meter .kds-progress__bar { background: var(--sf-tone); }
.sf-steps { padding: 0 var(--kds-sp-4) var(--kds-sp-3); }
.sf-steps .sf-tip__label { background: transparent; padding: 10px 10px; min-height: 44px; }
.sf-steps .sf-tip__label:hover { background: var(--kds-surface-2); border-color: transparent; }
.sf-steps .sf-tip__check:checked + .sf-tip__box--num { color: var(--kds-surface); }
.sf-steps .sf-tip__text { color: var(--kds-fg); }
.sf-steps .sf-tip__check:checked ~ .sf-tip__body .sf-tip__text { color: var(--kds-fg-faint); text-decoration: line-through; text-decoration-color: var(--kds-fg-faint); }

/* ---------- emergency & reporting contacts ---------- */
.sf-contacts { scroll-margin-top: var(--sf-scroll-pad); }
.sf-contacts__grid { display: grid; gap: var(--kds-sp-3); margin-top: var(--kds-sp-5); }
@media (min-width: 640px) { .sf-contacts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .sf-contacts__grid { grid-template-columns: repeat(3, 1fr); } }
.sf-contact { display: grid; gap: 4px; align-content: start; background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-4) var(--kds-sp-5); }
.sf-contact__name { font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.sf-contact__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--kds-text-xl); font-weight: var(--kds-weight-bold); letter-spacing: var(--kds-tracking-tight); text-decoration: none; color: var(--kds-fg); font-variant-numeric: tabular-nums; }
.sf-contact__tel svg { width: 18px; height: 18px; color: var(--kds-fg-faint); flex: none; }
.sf-contact__tel:hover { color: var(--kds-brand); }
.sf-contact__tel:hover svg { color: var(--kds-brand); }
.sf-contact__note { margin: 2px 0 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.sf-contact__link { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-size: var(--kds-text-sm); font-weight: var(--kds-weight-medium); color: var(--kds-link); text-decoration: none; }
.sf-contact__link:hover { text-decoration: underline; }
.sf-contact__link svg { width: 14px; height: 14px; }
.sf-contact--urgent { border-color: color-mix(in srgb, var(--kds-danger) 40%, var(--kds-border)); background: var(--kds-danger-soft); }
.sf-contact--urgent .sf-contact__name { color: var(--kds-danger); }
.sf-contact--urgent .sf-contact__tel { font-size: var(--kds-text-2xl); color: var(--kds-danger); }
.sf-contact--urgent .sf-contact__tel svg { color: var(--kds-danger); }
@media (min-width: 640px) { .sf-contact--urgent { grid-column: 1 / -1; } }

/* ---------- closing CTA band ---------- */
.sf-cta { display: grid; gap: var(--kds-sp-4); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); }
.sf-cta h3 { margin: 0 0 .3em; font-size: var(--kds-text-lg); }
.sf-cta p { margin: 0; font-size: var(--kds-text-sm); }
.sf-cta .btn-row .kds-btn { min-height: 46px; }
@media (min-width: 760px) { .sf-cta { grid-template-columns: 1fr auto; align-items: center; gap: var(--kds-sp-6); padding: var(--kds-sp-6); } }

/* ============================================================
   /missing-children
   ============================================================ */
.sf-urgent { display: flex; gap: var(--kds-sp-3); align-items: flex-start; border: 1px solid color-mix(in srgb, var(--kds-danger) 38%, var(--kds-border)); background: var(--kds-danger-soft); border-radius: var(--kds-radius-lg); padding: var(--kds-sp-4); margin-top: var(--kds-sp-4); }
.sf-urgent svg { width: 20px; height: 20px; flex: none; color: var(--kds-danger); margin-top: 2px; }
.sf-urgent b { display: block; color: var(--kds-danger); font-weight: var(--kds-weight-semibold); margin-bottom: 2px; }
.sf-urgent p { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg); }
.sf-urgent a, .sf-emergency a { color: var(--kds-danger); font-weight: var(--kds-weight-semibold); }

.sf-hour { scroll-margin-top: var(--sf-scroll-pad); }
.sf-hour__steps { list-style: none; margin: var(--kds-sp-5) 0 0; padding: 0; counter-reset: sfstep; display: grid; gap: var(--kds-sp-3); }
.sf-hour__steps li { counter-increment: sfstep; position: relative; padding: var(--kds-sp-4) var(--kds-sp-4) var(--kds-sp-4) 62px; background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); font-size: var(--kds-text-sm); line-height: 1.55; color: var(--kds-fg-muted); }
.sf-hour__steps li strong { color: var(--kds-fg); font-weight: var(--kds-weight-semibold); }
.sf-hour__steps li::before { content: counter(sfstep); position: absolute; left: var(--kds-sp-4); top: var(--kds-sp-4); width: 28px; height: 28px; border-radius: var(--kds-radius-full); display: grid; place-content: center; background: var(--kds-surface-2); color: var(--kds-fg-muted); font-size: var(--kds-text-xs); font-weight: var(--kds-weight-bold); font-variant-numeric: tabular-nums; }
.sf-hour__steps:not(.sf-hour__steps--compact) li:first-child { border-color: color-mix(in srgb, var(--kds-danger) 40%, var(--kds-border)); }
.sf-hour__steps:not(.sf-hour__steps--compact) li:first-child::before { background: var(--kds-danger); color: var(--kds-danger-fg); }
.sf-hour__steps--compact li { padding-block: var(--kds-sp-3); }
@media (min-width: 860px) { .sf-hour__steps { grid-template-columns: 1fr 1fr; } .sf-hour__steps--compact { grid-template-columns: 1fr; } }

.sf-cases { scroll-margin-top: var(--sf-scroll-pad); }
.sf-cases__grid { display: grid; gap: var(--kds-sp-3); margin-top: var(--kds-sp-5); }
@media (min-width: 720px) { .sf-cases__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .sf-cases__grid { grid-template-columns: repeat(3, 1fr); } }
.sf-case { display: grid; grid-template-columns: 104px 1fr; padding: 0; overflow: hidden; background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); }
.sf-case__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 6; background: var(--kds-surface-2); }
.sf-case__body { padding: var(--kds-sp-4); display: grid; gap: var(--kds-sp-2); align-content: start; }
.sf-case__name { margin: 0; font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.sf-case__age { color: var(--kds-fg-muted); font-weight: var(--kds-weight-regular); }
.sf-case__facts { margin: 0; display: grid; gap: 3px; font-size: var(--kds-text-xs); }
.sf-case__facts div { display: flex; gap: 8px; }
.sf-case__facts dt { color: var(--kds-fg-faint); min-width: 64px; }
.sf-case__facts dd { margin: 0; color: var(--kds-fg-muted); }
.sf-case__summary { margin: 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
@media (max-width: 400px) { .sf-case { grid-template-columns: 1fr; } .sf-case__img { aspect-ratio: 4 / 3; max-height: 220px; } }

/* honest empty state — a signpost to MCSC, not a grey box */
.sf-nocases { display: grid; gap: var(--kds-sp-4); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); margin-top: var(--kds-sp-5); }
.sf-nocases__logo { display: inline-block; }
.sf-nocases__logo img { display: block; width: 210px; max-width: 100%; height: auto; }
.sf-nocases h3 { margin: 0 0 .35em; font-size: var(--kds-text-lg); }
.sf-nocases p { margin: 0 0 .7em; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.sf-nocases p:last-of-type { margin-bottom: 0; }
.sf-nocases .btn-row { margin-top: var(--kds-sp-2); }
.sf-nocases .btn-row .kds-btn { min-height: 46px; }
@media (min-width: 760px) { .sf-nocases { grid-template-columns: 240px 1fr; gap: var(--kds-sp-6); align-items: center; padding: var(--kds-sp-6); } }

.sf-partner { scroll-margin-top: var(--sf-scroll-pad); }
.sf-partner__grid { display: grid; gap: var(--kds-sp-5); }
.sf-partner__brand img { display: block; width: 210px; max-width: 100%; height: auto; margin-bottom: var(--kds-sp-3); }
.sf-partner__body h2 { margin-bottom: .35em; }
.sf-quote { margin: var(--kds-sp-5) 0; padding-inline-start: var(--kds-sp-4); border-inline-start: 3px solid var(--kds-brand); }
.sf-quote p { margin: 0 0 6px; font-size: var(--kds-text-lg); font-weight: var(--kds-weight-semibold); line-height: 1.35; letter-spacing: var(--kds-tracking-tight); }
.sf-quote cite { font-style: normal; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.sf-partner__sub { margin-top: clamp(24px, 5vw, 44px); font-size: var(--kds-text-lg); }
.sf-programs { margin-top: var(--kds-sp-4); }
.sf-program { display: grid; gap: 4px; align-content: start; background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-4) var(--kds-sp-5); }
.sf-program__num { font-size: var(--kds-text-xs); font-weight: var(--kds-weight-bold); color: var(--kds-brand); font-variant-numeric: tabular-nums; letter-spacing: var(--kds-tracking-wide); }
.sf-program h3 { margin: 0 0 .2em; font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.sf-program p { margin: 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
@media (min-width: 860px) { .sf-partner__grid { grid-template-columns: 240px 1fr; align-items: start; } .sf-partner__brand { padding-top: 6px; } }

.sf-amber { display: grid; gap: var(--kds-sp-4); scroll-margin-top: var(--sf-scroll-pad); }
.sf-amber__card { background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); }
.sf-amber__card .kds-prose { font-size: var(--kds-text-sm); }
.sf-amber__card .kds-prose p:last-child { margin-bottom: 0; }
.sf-links { display: grid; gap: var(--kds-sp-3); align-content: start; }
.sf-links h3 { font-size: var(--kds-text-xs); letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-faint); margin: 0; }
.sf-link { display: grid; gap: 3px; background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-4); text-decoration: none; color: inherit; transition: box-shadow var(--kds-dur-fast) var(--kds-ease-standard), transform var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast); }
.sf-link:hover { box-shadow: var(--kds-shadow-2); transform: translateY(-2px); border-color: var(--kds-border-strong); }
.sf-link strong { font-size: var(--kds-text-sm); font-weight: var(--kds-weight-semibold); display: flex; align-items: center; gap: 6px; }
.sf-link strong svg { width: 14px; height: 14px; color: var(--kds-fg-faint); }
.sf-link span { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
@media (min-width: 1020px) { .sf-amber { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ============================================================
   /tips
   ============================================================ */
.sf-tips { padding-block: var(--kds-sp-2) clamp(24px, 5vw, 48px); }

/* the three promises, above the fold on every viewport */
.sf-safebar { display: grid; gap: var(--kds-sp-3); background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-4) var(--kds-sp-5); }
@media (min-width: 720px) { .sf-safebar { grid-template-columns: repeat(3, 1fr); gap: var(--kds-sp-5); } }
.sf-promise { display: grid; grid-template-columns: 34px 1fr; gap: var(--kds-sp-3); align-items: start; }
.sf-promise__ico { width: 34px; height: 34px; border-radius: var(--kds-radius-md); display: grid; place-content: center; background: var(--kds-positive-soft); color: var(--kds-positive); }
.sf-promise__ico svg { width: 18px; height: 18px; }
.sf-promise b { display: block; font-size: var(--kds-text-sm); font-weight: var(--kds-weight-semibold); }
.sf-promise span { display: block; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.45; }

.sf-tips__grid { display: grid; gap: var(--kds-sp-4); margin-top: var(--kds-sp-4); }
@media (min-width: 1020px) { .sf-tips__grid { grid-template-columns: 1.45fr 1fr; align-items: start; } }

.sf-form { background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); display: grid; gap: var(--kds-sp-5); }
@media (min-width: 640px) { .sf-form { padding: var(--kds-sp-6); } }

/* context banner when arriving from an alert / wanted person / missing case */
.sf-context { display: grid; gap: var(--kds-sp-2); justify-items: start; padding: var(--kds-sp-4); border: 1px solid var(--kds-border); border-left: 3px solid var(--kds-brand); background: var(--kds-surface-2); border-radius: var(--kds-radius-lg); }
.sf-context__label { font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.sf-context__title { font-size: var(--kds-text-lg); font-weight: var(--kds-weight-semibold); letter-spacing: var(--kds-tracking-tight); line-height: 1.25; }
.sf-context__links { display: flex; gap: 4px var(--kds-sp-4); flex-wrap: wrap; font-size: var(--kds-text-sm); }
.sf-context__links a { min-height: 32px; display: inline-flex; align-items: center; }

.sf-emergency { display: flex; gap: var(--kds-sp-3); align-items: flex-start; padding: var(--kds-sp-4); border-radius: var(--kds-radius-lg); background: var(--kds-danger-soft); border: 1px solid color-mix(in srgb, var(--kds-danger) 38%, var(--kds-border)); font-size: var(--kds-text-sm); }
.sf-emergency svg { width: 20px; height: 20px; flex: none; color: var(--kds-danger); margin-top: 1px; }
.sf-emergency b { display: block; color: var(--kds-danger); font-weight: var(--kds-weight-semibold); margin-bottom: 2px; }
.sf-emergency p { margin: 0; }

.sf-optional { font-weight: var(--kds-weight-regular); color: var(--kds-fg-muted); }
.sf-req { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--kds-radius-full); background: var(--kds-danger-soft); color: var(--kds-danger); font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); }
.sf-field--optional { border: 1px dashed var(--kds-border-strong); border-radius: var(--kds-radius-lg); padding: var(--kds-sp-4); background: var(--kds-surface-2); }
.sf-field--optional .kds-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-optflag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--kds-radius-full); background: var(--kds-positive-soft); border: 0; font-size: var(--kds-text-xs); font-weight: var(--kds-weight-semibold); color: var(--kds-positive); }
.sf-optflag svg { width: 13px; height: 13px; }
.sf-message { min-height: 170px; }
.sf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sf-form__foot { display: grid; gap: var(--kds-sp-3); }
.sf-form__foot .kds-btn { min-height: 50px; width: 100%; }
.sf-form__foot .small { margin: 0; }
@media (min-width: 640px) { .sf-form__foot { grid-template-columns: auto 1fr; align-items: center; gap: var(--kds-sp-4); } .sf-form__foot .kds-btn { width: auto; } }

.sf-aside { display: grid; gap: var(--kds-sp-4); align-content: start; }
.sf-panel { background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); }
.sf-panel h3 { margin: 0 0 .55em; font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.sf-panel > p:last-child { margin-bottom: 0; }
.sf-panel__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kds-sp-3); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.5; }
.sf-panel__list strong { color: var(--kds-fg); font-weight: var(--kds-weight-semibold); }
.sf-panel__list--bullets { list-style: disc; padding-inline-start: 1.15em; gap: var(--kds-sp-2); }

/* the escape hatch — call Crime Stoppers instead */
.sf-hatch { background: var(--kds-surface); border: 1px solid color-mix(in srgb, var(--kds-brand) 34%, var(--kds-border)); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); display: grid; gap: var(--kds-sp-3); }
.sf-hatch__ico { width: 38px; height: 38px; border-radius: var(--kds-radius-md); display: grid; place-content: center; background: var(--kds-brand-soft); color: var(--kds-brand); }
.sf-hatch__ico svg { width: 20px; height: 20px; }
.sf-hatch h3 { margin: 0; font-size: var(--kds-text-md); font-weight: var(--kds-weight-semibold); }
.sf-hatch p { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sf-hatch .kds-btn { min-height: 48px; }

/* ---------- /tips/thanks ---------- */
.sf-thanks { display: grid; gap: var(--kds-sp-4); padding-block: var(--kds-sp-2) clamp(24px, 5vw, 48px); }
.sf-thanks__mark { width: 56px; height: 56px; border-radius: var(--kds-radius-full); display: grid; place-content: center; background: var(--kds-positive-soft); color: var(--kds-positive); margin-bottom: var(--kds-sp-4); }
.sf-thanks__mark svg { width: 28px; height: 28px; }
.sf-thanks__panel { background: var(--kds-surface); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-1); padding: var(--kds-sp-5); }
.sf-thanks__panel h2 { margin: 0 0 .4em; font-size: var(--kds-text-lg); }
.sf-thanks__grid { display: grid; gap: var(--kds-sp-4); }
@media (min-width: 760px) { .sf-thanks__grid { grid-template-columns: 1fr 1fr; } }
.sf-thanks .sf-panel .kds-btn { min-height: 46px; margin-top: var(--kds-sp-3); }
.sf-thanks__foot { display: flex; gap: var(--kds-sp-3); flex-wrap: wrap; padding-top: var(--kds-sp-2); }

/* ============================================================
   Print — "Print this checklist" should end up on a fridge door.
   ============================================================ */
.sf-printhead { display: none; }
@media print {
  @page { margin: 12mm 12mm 14mm; }
  .egress, .topbar, .menu-panel, .tabbar, .foot, .flash-region, .skip-link,
  .sf-subnav, .sf-head__acts, .sf-head__media, .sf-summary, .sf-section__chev,
  .sf-section__meter, .sf-section__foot, .sf-guides, .sf-cta, .sticky-cta { display: none !important; }
  body { background: #fff !important; padding-bottom: 0 !important; font-size: 10.5pt; }
  .site-main { min-height: 0; }
  .wrap, .wrap--narrow { width: 100%; }

  .sf-printhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10pt; border-bottom: 1.5pt solid #000; padding-bottom: 4pt; margin-bottom: 8pt; font-size: 9pt; }
  .sf-printhead b { font-size: 12pt; }

  .sf-head { padding: 0 0 8pt; }
  .sf-head h1 { font-size: 20pt; margin-bottom: 3pt; }
  .sf-head .lede { font-size: 10pt; color: #333; max-width: none; }
  .sf-head .eyebrow { display: none; }

  .sf-content { padding: 0; }
  .sf-content > * + * { margin-top: 10pt; }

  .sf-section { break-inside: avoid; background: transparent; border: 0; border-top: 1pt solid #999; border-radius: 0; box-shadow: none; margin-top: 10pt; page-break-inside: avoid; }
  .sf-section__head { display: block; padding: 6pt 0 3pt; }
  .sf-section__ico { display: none; }
  .sf-section__title h2 { font-size: 13pt; margin-bottom: 2pt; }
  .sf-section__intro { font-size: 9pt; color: #444; }
  .sf-list { display: block; padding: 3pt 0 0; columns: 1; }
  .sf-tip__label { display: grid; grid-template-columns: 14pt 1fr; gap: 6pt; background: transparent; border: 0; padding: 2.5pt 0; min-height: 0; break-inside: avoid; }
  .sf-tip__box { width: 12pt; height: 12pt; border: 1pt solid #333; border-radius: 2pt; background: #fff; }
  .sf-tip__box::after { display: none; }
  .sf-tip__check:checked + .sf-tip__box { background: #333; }
  .sf-tip__title { font-size: 10pt; }
  .sf-tip__text { font-size: 8.8pt; color: #333; line-height: 1.35; }
  .sf-tip__check:checked ~ .sf-tip__body .sf-tip__title,
  .sf-tip__check:checked ~ .sf-tip__body .sf-tip__text { text-decoration: none; color: #333; }

  .sf-contacts { break-before: page; }
  .sf-contacts h2 { font-size: 13pt; }
  .sf-contacts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6pt; margin-top: 6pt; }
  .sf-contact { border: 1pt solid #999; border-radius: 3pt; box-shadow: none; background: #fff; padding: 5pt 7pt; break-inside: avoid; }
  .sf-contact--urgent { grid-column: 1 / -1; border-width: 1.5pt; border-color: #000; }
  .sf-contact__name { font-size: 7.5pt; color: #333; }
  .sf-contact__tel { font-size: 13pt; color: #000; min-height: 0; }
  .sf-contact--urgent .sf-contact__tel { font-size: 17pt; }
  .sf-contact__tel svg { display: none; }
  .sf-contact__note { font-size: 8pt; color: #333; }
  .sf-contact__link { font-size: 8pt; color: #333; min-height: 0; }
  .sf-contact__link svg { display: none; }
  a { color: #000 !important; text-decoration: none; }
}