/* 孩子档案、历史与薄弱点页。配色、字号来自 assets/site.css。 */

main.kids { width: min(760px, 100%); margin: 0 auto; padding: 20px 16px 56px; }
.kids h1 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -0.02em; }
.kids h2 { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -0.02em; }
.kids .lede { margin: 0 0 16px; font-size: 1rem; }
.kids .muted { color: var(--muted); }
.kids .small { font-size: 0.92rem; }
.kids .err { color: var(--bad); margin: 8px 0 0; font-weight: 650; }
.kids .quiet-link { margin: 0 0 14px; }
.kids .quiet-link a { color: var(--brand-strong); font-weight: 700; }
.kid-note { margin-top: 18px; }
.kids button.danger { color: var(--bad); }

.kid-card, .kid-form, .kid-section > .rec, .kid-empty-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kid-card { padding: 14px 16px; margin-bottom: 12px; border-top: 3px solid var(--line); }
.kid-card.is-current { border-top-color: var(--brand); }
.kid-head { display: flex; align-items: center; gap: 8px; }
.kid-head h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.kid-badge { background: var(--brand); color: var(--on-brand); font-size: 0.78rem; font-weight: 800; padding: 1px 9px; border-radius: 999px; }
.kid-meta { margin: 2px 0 0; color: var(--muted); font-weight: 650; overflow-wrap: anywhere; }
.kid-stat { margin: 4px 0 10px; }
.kid-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-empty { margin: 8px 0 14px; padding: 14px 16px; background: var(--bg-muted); border-radius: var(--radius-sm); color: var(--muted); }

.kid-form { padding: 16px; margin-top: 16px; }
.kid-form label { display: block; margin: 12px 0 4px; font-weight: 700; }
.kid-form input, .kid-form select { width: 100%; }
.kid-form .form-actions { display: flex; gap: 8px; margin-top: 14px; }
.kid-form .form-actions button { flex: 1 1 0; }
.kid-form .small { margin: 8px 0 0; }

.kid-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.kid-picker label { font-weight: 700; }
.kid-picker select { flex: 1 1 160px; min-width: 0; }
.kid-tabs { margin: 10px 0 16px; }
.kid-section { margin-bottom: 26px; }
.kid-section > .btn { margin-top: 8px; }

.kid-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  white-space: nowrap;
}
.kid-tag.weak { background: var(--bad-bg); color: var(--bad); }
.kid-tag.shaky { background: var(--diagram-shaky-bg); color: var(--diagram-shaky); }
.kid-tag.ok { background: var(--ok-bg); color: var(--ok); }
.kid-tag.unk { background: var(--unk-bg); color: var(--unk); }
.kid-tag.root { background: var(--bad); color: var(--on-bad); }
.kid-tag.sub { background: var(--brand-soft); color: var(--brand-strong); }

.wk-list { list-style: none; margin: 8px 0 0; padding: 0; }
.wk-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.wk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wk-name { font-weight: 800; font-size: 1.04rem; color: var(--brand-strong); overflow-wrap: anywhere; }
.wk-meta { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.wk-retest { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 0.92rem; color: var(--brand-strong); }

.rec { margin-bottom: 10px; }
.rec > summary { list-style: none; cursor: pointer; padding: 12px 14px; min-height: 44px; }
.rec > summary::-webkit-details-marker { display: none; }
.rec-top { display: flex; align-items: center; gap: 8px; }
.rec-label { overflow-wrap: anywhere; }
.rec-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.rec-date { color: var(--muted); font-size: 0.88rem; margin-right: 4px; }
.rec-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.rec-body h4 { margin: 12px 0 4px; font-size: 0.98rem; }
.rec-topics { margin: 0; padding-left: 20px; }
.rec-topics li { margin: 2px 0; overflow-wrap: anywhere; }
.rec-topics a { color: var(--brand-strong); font-weight: 650; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }