/* Parent zone: plainer and denser than the child's screens, same materials. */
.parent, .parent-gate { max-width: 46rem; width: 100%; margin: 0 auto; }
.parent h1 { font-size: var(--text-xl); text-shadow: 0 3px 0 var(--white); }
.parent h3 { font-size: var(--text-base); margin: var(--s-4) 0 var(--s-2); }
.parent-tabs button { flex: 1; }
.gate { max-width: 24rem; margin: var(--s-5) auto 0; width: 100%; }
.gate-lock { display: grid; place-items: center; }
.gate-lock svg { width: 64px; height: auto; }
.gate h1 { font-size: var(--text-xl); }

details { border-top: 2px dotted var(--paper-2); padding-top: var(--s-3); margin-top: var(--s-3); }
summary { cursor: pointer; font-weight: 700; min-height: 32px; }
details[open] > summary { margin-bottom: var(--s-3); }
.danger-zone summary { color: var(--bad); }

.kid-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.kid-head > svg { width: 64px; height: auto; flex: none; }
.kid-head h2 { margin: 0; }
.kid-thumb svg { width: 48px; height: auto; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.stat { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); padding: var(--s-2) var(--s-3); display: flex; flex-direction: column; }
.stat strong { font-size: var(--text-xl); }
.stat span { font-size: var(--text-xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.data th, .data td { text-align: left; padding: var(--s-2) var(--s-2); border-bottom: 2px dotted var(--paper-2); }
.data th { font-size: var(--text-xs); color: var(--ink-soft); }
.ledger { display: flex; flex-direction: column; font-size: var(--text-sm); }
.ledger li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 2px dotted var(--paper-2); }
.ledger .neg { color: var(--bad); }
.ledger .pos { color: var(--good); }
.request { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) 0; border-bottom: 2px dotted var(--paper-2); }
.request:last-child { border-bottom: 0; }

.kid-head > .kid-photo { width: 64px; flex: none; }
.kid-thumb .kid-photo { width: 48px; }
.photo-field { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.photo-now svg, .photo-now .kid-photo { width: 84px; height: auto; }
.muted.small { font-size: var(--text-sm); }

/* Edit child: which subjects the child sees. Each subject is a full-width tap target; a ticked one is filled green. */
.subjects-field { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 2px solid var(--line); }
.subjects-field h3 { font-size: var(--text-base); margin: 0; }
.subjects-field > p { margin: 0 0 var(--s-1); }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); }
.subject-toggle {
  display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3);
  background: var(--white); border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; line-height: 1.25;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.subject-toggle:has(input:checked) { background: var(--go-soft); border-color: var(--go); }
.subject-toggle:not(:has(input:checked)) .subject-sign { filter: grayscale(1); opacity: 0.5; }
.subject-toggle:not(:has(input:checked)) .subject-name { color: var(--ink-soft); }
.subject-toggle:focus-within { outline: 3px solid var(--go-soft); outline-offset: 2px; }
.subject-toggle input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--go); }
.subject-sign {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--white); font-size: 0.8rem; font-weight: 800; transition: filter var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.setting-box { background: var(--white); border: 2px solid var(--line); border-radius: 14px; padding: var(--s-3); }