/* [safety7] Family safety: the "Stay safe" card, the hold-for-help button, check-in, help, the
   "If I'm lost" card, pickup plans and the guardians' safety page (public/family-safety.js,
   public/screens/family-safety.js). Calm, not alarming: one careful red for the help button. */

.sf-card { display: grid; gap: 12px; }
.sf-hold-wrap { display: grid; gap: 6px; justify-items: center; }
.sf-hold {
  --sf-p: 0;
  position: relative; overflow: hidden; width: 100%; min-height: 72px; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px;
  background: var(--danger-soft); color: var(--danger-text); font: 700 var(--text-lg) / 1.2 var(--font-display);
  box-shadow: inset 0 0 0 2px var(--danger); cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.sf-hold--sm { min-height: 52px; font-size: var(--text-md); }
.sf-hold-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--sf-p)); background: var(--danger-strong); opacity: 0.9; }
.sf-hold > :not(.sf-hold-fill) { position: relative; }
.sf-hold.is-holding, .sf-hold.is-done { color: #fff; }
.sf-hold:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sf-hold-hint { font-size: var(--text-sm); color: var(--ink-muted); text-align: center; }
.sf-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-acts .sf-act { flex: 1 1 140px; min-height: 48px; }
.sf-911 { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--warning-soft); color: var(--warning-text); font-size: var(--text-sm); }
.sf-911 svg { flex: none; margin-top: 2px; }
.sf-list { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

.sf-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-kind {
  min-height: 96px; border: 0; border-radius: 16px; background: var(--surface-sunken); color: var(--ink);
  display: grid; place-items: center; gap: 6px; padding: 12px; font: 700 var(--text-md) / 1.2 var(--font-body); cursor: pointer;
}
.sf-kind:hover { background: var(--accent-soft); }
.sf-kind:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sf-loc { display: grid; gap: 6px; margin: 12px 0; }
.sf-shared { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; color: var(--info-text); font-size: var(--text-sm); }
.sf-shared svg { flex: none; margin-top: 2px; }
.sf-done { display: grid; gap: 12px; justify-items: center; text-align: center; color: var(--success-text); }
.sf-done .p-big { color: var(--ink); }
.sf-status { display: grid; gap: 8px; margin-bottom: 12px; }
.sf-status.is-open { box-shadow: inset 0 0 0 2px var(--danger); }
.sf-answer { display: flex; gap: 10px; align-items: center; color: var(--success-text); }

.sf-lost { display: grid; gap: 12px; margin-bottom: 12px; }
.sf-lost-title { margin: 0; font: 700 var(--text-lg) / 1.2 var(--font-display); }
.sf-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-contacts li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.sf-phone { font: 700 var(--text-lg) / 1.2 var(--font-body); color: var(--brand); width: 100%; overflow-wrap: anywhere; }

.sf-code { margin: 8px 0; padding: 14px; border-radius: 12px; background: var(--surface-sunken); text-align: center; font: 700 var(--text-lg) / 1.3 var(--font-display); color: var(--ink-muted); overflow-wrap: anywhere; }
.sf-code.is-shown { color: var(--ink); background: var(--accent-soft); }
.sf-pickup { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.sf-pickup p { margin: 0; }
.sf-kids { display: inline-flex; }
.sf-kids > * + * { margin-left: -8px; }

.sf-feature { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sf-feature:last-child { border-bottom: 0; }
.sf-feature .ui-hint { margin: 0; }
.sf-contact-edit { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: var(--surface-sunken); }
.sf-where { display: grid; gap: 4px; padding: 8px 12px 12px; }
.sf-where p { margin: 0; display: flex; gap: 6px; align-items: center; }
.sf-coords { font-family: var(--font-mono); overflow-wrap: anywhere; }
.sf-hist { display: grid; }
.sf-alert { display: grid; gap: 10px; margin-bottom: 12px; }
.sf-alert.is-open { box-shadow: inset 0 0 0 2px var(--danger); }
.p-kidmode-help { margin-right: 4px; }