/* Child-facing accessibility and age-appropriate UI defaults (ages 5–12).
   Scope everything to .hm-child-ui so adult/admin/marketing screens keep their layout. */
.hm-child-ui {
  --hm-child-ink: #24304b;
  --hm-child-muted: #5e6880;
  --hm-child-focus: #2f67d8;
  --hm-child-line: #d8def0;
  --hm-child-soft: #f6f7ff;
  --hm-child-card-radius: 18px;
  color: var(--hm-child-ink);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

.hm-child-ui main p,
.hm-child-ui main li,
.hm-child-ui main label,
.hm-child-ui main .muted,
.hm-child-ui main small {
  line-height: 1.6;
}

.hm-child-ui h1,
.hm-child-ui h2,
.hm-child-ui h3 {
  line-height: 1.2;
  text-wrap: balance;
}

.hm-child-ui h1 { letter-spacing: -0.025em; }

.hm-child-ui button,
.hm-child-ui input,
.hm-child-ui select,
.hm-child-ui textarea,
.hm-child-ui a.btn,
.hm-child-ui a.button,
.hm-child-ui .btn,
.hm-child-ui .tab,
.hm-child-ui [role="button"] {
  font: inherit;
}

.hm-child-ui button,
.hm-child-ui select,
.hm-child-ui input:not([type="checkbox"]):not([type="radio"]),
.hm-child-ui a.btn,
.hm-child-ui a.button,
.hm-child-ui .btn,
.hm-child-ui .tab,
.hm-child-ui [role="button"] {
  min-height: 48px;
}

.hm-child-ui input:not([type="checkbox"]):not([type="radio"]),
.hm-child-ui select,
.hm-child-ui textarea {
  font-size: 16px;
  border-width: 2px;
  border-radius: 12px;
}

.hm-child-ui button,
.hm-child-ui a,
.hm-child-ui input,
.hm-child-ui select,
.hm-child-ui textarea,
.hm-child-ui summary,
.hm-child-ui [tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

.hm-child-ui :focus-visible {
  outline: 4px solid color-mix(in srgb, var(--hm-child-focus) 38%, transparent);
  outline-offset: 3px;
  border-color: var(--hm-child-focus) !important;
}

.hm-child-ui main .card,
.hm-child-ui main .question-card,
.hm-child-ui main .question-shell,
.hm-child-ui main .panel {
  border-radius: var(--hm-child-card-radius);
}

.hm-child-ui .hm-child-privacy-tip {
  max-width: 760px;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--hm-child-line);
  border-radius: 14px;
  background: var(--hm-child-soft);
  color: var(--hm-child-muted);
  font-size: .9rem;
  text-align: center;
}

.hm-child-ui .hm-child-privacy-tip a {
  font-weight: 750;
}

@media (max-width: 640px) {
  .hm-child-ui { font-size: 16px; }
  .hm-child-ui button,
  .hm-child-ui select,
  .hm-child-ui input:not([type="checkbox"]):not([type="radio"]),
  .hm-child-ui a.btn,
  .hm-child-ui a.button,
  .hm-child-ui .btn,
  .hm-child-ui .tab,
  .hm-child-ui [role="button"] { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-child-ui *,
  .hm-child-ui *::before,
  .hm-child-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.hm-child-ui .hm-child-welcome {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--hm-child-line);
  border-radius: 20px;
  background: linear-gradient(135deg, #fffdf3, #f5f4ff);
}
.hm-child-ui .hm-child-welcome-icon { font-size: 2.2rem; line-height: 1; }
.hm-child-ui .hm-child-welcome h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.hm-child-ui .hm-child-welcome p { margin: 4px 0 0; color: var(--hm-child-muted); }
@media (max-width: 520px) {
  .hm-child-ui .hm-child-welcome { grid-template-columns: 1fr; text-align: center; }
}