/* Два оформления одного детского сценария. */
.child-screen {
  --child-ink: #30291f;
  --child-muted: #625748;
  --child-paper: #fbf5e8;
  --child-surface: #fffaf0;
  --child-rule: #d8cbb7;
  --child-action: #55412e;
  color: var(--child-ink);
  background: var(--child-paper);
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
  overflow-wrap: anywhere;
}
.child-screen[data-child-style="illustrated"] {
  --child-ink: #183c57;
  --child-muted: #3b5e73;
  --child-paper: #fff2df;
  --child-surface: #fffaf2;
  --child-rule: #c8d8df;
  --child-action: #235579;
  background: #fff2df;
}
.child-screen .step-line { margin-bottom: 14px; }
.child-screen .rec-label, .child-screen .progress-row, .child-screen .reader-heading small { color: var(--child-muted); }
.child-screen .progress-segments i { background: var(--child-rule); }
.child-screen .progress-segments i.is-done, .child-screen .progress-segments i.is-now { background: var(--child-action); }
.child-screen .back, .child-screen .inline-link, .child-screen summary { color: var(--child-action); min-height: 44px; }
.child-screen .screen-title, .child-screen .child-reader-head h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; line-height: 1.13; letter-spacing: -.02em; font-weight: 400; color: var(--child-ink); margin: 0 0 8px; }
.child-reader-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--child-rule); }
.child-reader-head > div { min-width: 0; }
.child-reader-head p { color: var(--child-muted); font-size: 15px; line-height: 1.35; margin: 0; }
.child-fox { display: none; }
.child-screen[data-child-style="illustrated"] .child-reader-head { position: relative; overflow: hidden; min-height: 118px; margin: 0 -18px; padding: 14px 40% 14px 18px; background: #d4ecf8; border: 0; }
.child-screen[data-child-style="illustrated"] .child-reader-head h1 { font: 750 clamp(23px, 3.2vw, 28px)/1.1 ui-rounded, "Trebuchet MS", system-ui, sans-serif; letter-spacing: -.035em; }
.child-screen[data-child-style="illustrated"] .child-fox { position: absolute; inset: 0 0 0 auto; display: block; width: 40%; max-width: 190px; height: 100%; object-fit: cover; object-position: 51% center; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.child-screen .button { min-height: 48px; border-color: var(--child-action); color: var(--child-action); }
.child-screen .button.primary { background: var(--child-action); color: #fff; }
.child-screen .button.secondary { background: var(--child-surface); }
.child-screen .record-panel { margin: 14px 0 0; padding: 12px; border: 1px solid var(--child-rule); background: var(--child-surface); border-radius: 12px; }
.child-screen .capture-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.child-screen .capture-controls .button { flex: 1 1 auto; }
.child-screen .capture-controls .inline-link { justify-content: center; }
.child-screen .record-panel.is-recording { position: sticky; top: max(6px, env(safe-area-inset-top)); z-index: 2; box-shadow: 0 4px 18px #30291f24; }
.child-screen .record-live { margin: 4px 0; }
.child-screen .player { margin: 0 0 8px; }
.child-screen .reader-next { margin-top: 12px; }
.child-screen .reader-next .button { width: 100%; }
.child-screen .reading-page { margin: 20px 0 8px; }
.child-screen .story-text p { color: var(--child-ink); font-size: 22px; line-height: 1.55; letter-spacing: 0; }
.child-screen .feedback-note, .child-screen .status-note { background: var(--child-surface); color: var(--child-ink); border-color: var(--child-rule); }
.child-screen .repair-target, .child-screen .card, .child-screen .cover { color: var(--child-ink); background: var(--child-surface); border-color: var(--child-rule); box-shadow: none; }
.child-screen .editorial-title, .child-screen .repair-target h2 { color: var(--child-ink); }
.child-screen .field textarea { color: var(--child-ink); background: var(--child-surface); }
.child-screen .quote { color: var(--child-muted); }
.child-screen .voice-detail { margin: 8px 0; }
.child-screen .actions { margin-top: 20px; }
.child-screen .actions .button { flex: 1 1 auto; }
.child-screen details.card { margin-top: 20px; padding: 0 14px; }
.child-screen :focus-visible { outline: 3px solid #b65427; outline-offset: 3px; }
.child-screen ::selection { color: #183c57; background: #f6cc9e; }
@media (max-width: 480px) {
  .child-screen { padding: 14px; margin-inline: -4px; }
  .child-screen[data-child-style="illustrated"] .child-reader-head { margin-inline: -14px; padding-left: 14px; }
  .child-screen .screen-title, .child-screen .child-reader-head h1 { font-size: 26px; }
}