/* pages/children.css — Children (parent console, kids layer).
 *
 * Shared kids-layer layout utilities (`.kids …`) live in dashboard.css (all of
 * this layer's page stylesheets load together, per the operator console pattern).
 * This file adds only the children-specific pieces: the Strict/Guided chooser, the
 * guided category toggles and the per-site lists. Scoped so it can't collide with
 * another builder's CSS. Uses only kit.css design tokens. */

/* ---- Strict / Guided chooser (shared by add-child and the child/device detail) ---- */
.kids .kids-field-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.kids .kids-modes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.kids .kids-mode-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px;
}
.kids .kids-mode-opt.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.kids .kids-mode-opt input { margin-top: 2px; }
.kids .kids-mode-text { min-width: 0; }
.kids .kids-mode-title { font-weight: 650; }
.kids .kids-mode-sub { font-size: 0.82rem; margin-top: 2px; }
.kids .kids-mode-note { font-size: 0.82rem; margin: 6px 0 0; }
.kids .kids-strict-note { margin: 10px 0 0; }

/* ---- guided blocked-category toggles ---- */
.kids .kids-cats { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.kids .kids-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kids .kids-cat-head h3 { margin: 0; }
.kids .kids-cat-note { font-size: 0.82rem; margin: 6px 0 12px; }
.kids .kids-cat-group { margin-bottom: 12px; }
.kids .kids-cat-glabel { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 10px 0 4px; }
.kids .kids-cat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border); margin: 0; cursor: pointer;
}
.kids .kids-cat-row:last-child { border-bottom: none; }
.kids .kids-cat-row.locked { cursor: default; color: var(--text-muted); }
.kids .kids-cat-row.locked .ico { color: var(--text-faint); flex: none; }
.kids .kids-cat-text { min-width: 0; }
.kids .kids-cat-name { font-weight: 550; }
.kids .kids-cat-sub { font-size: 0.8rem; margin-top: 1px; }
.kids .kids-cat-row input[type="checkbox"] { flex: none; }

/* ---- per-site allow / block lists ---- */
.kids .kids-site-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 10px; }
.kids .kids-site-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kids .kids-site-row:last-child { border-bottom: none; }
.kids .kids-site-name { font-family: var(--mono); font-size: 0.86rem; word-break: break-all; }
.kids .kids-site-add { display: flex; gap: 8px; align-items: center; }
.kids .kids-site-add input { flex: 1; }
.kids .kids-site-add button { flex: none; }

/* ---- profile (rename) + delete-profile (danger) panels ---- */
.page-child .kids-profile { max-width: 560px; }
.page-child .kids-danger h2 { color: var(--danger); }

/* ---- add-child panel + linked-device link row ---- */
.kids .kids-add { max-width: 560px; }
.kids .kids-linkrow { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.kids .kids-linkrow select { flex: 1; }
.kids .kids-linkrow button { flex: none; }
.kids .kids-detail-head { margin-bottom: 14px; }