* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fafafa;
}
.site-header { padding: 0.75rem 1rem; background: #1f4e79; }
.site-header a { color: #fff; text-decoration: none; font-weight: 600; }
.container { padding: 1rem; max-width: 40rem; margin: 0 auto; }
@media (min-width: 40rem) { .container { padding: 2rem; } }
.button {
  display: inline-block; padding: 0.75rem 1.25rem; font: inherit; font-weight: 600;
  color: #fff; background: #1f4e79; border: 0; border-radius: 0.5rem; text-decoration: none; cursor: pointer;
}
.error { padding: 0.75rem 1rem; background: #fdecea; border-left: 4px solid #b3261e; }
.notice { padding: 0.75rem 1rem; background: #eaf2fb; border-left: 4px solid #1f4e79; }
.class-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.class-list li { margin-bottom: 0.75rem; }
.class-card {
  display: flex; flex-direction: column; gap: 0.25rem; min-height: 3.5rem; padding: 0.75rem 1rem;
  color: inherit; text-decoration: none; background: #fff; border: 1px solid #c9d6e2; border-radius: 0.5rem;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.capture-button { display: block; text-align: center; font-size: 1.25rem; padding: 1.25rem; cursor: pointer; }
.visually-hidden:focus + .capture-button { outline: 3px solid #f0b429; }
.hint { color: #555; font-size: 0.9rem; }
.status-list, .photo-list { list-style: none; margin: 1rem 0; padding: 0; }
.status-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3rem; padding: 0.5rem 0; border-bottom: 1px solid #c9d6e2; }
.status-line[data-state="failed"] { color: #b3261e; }
.status-line .retry { min-height: 3rem; min-width: 5rem; }
.photo-item { margin-bottom: 1rem; }
.photo-item img { display: block; width: 100%; height: auto; border-radius: 0.5rem; background: #e5e5e5; }
.photo-item .photo-time { font-size: 0.9rem; color: #555; }
[hidden] { display: none !important; }
.caption-text { margin: 0.25rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.caption-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.caption-form label { flex: 0 0 100%; font-weight: 600; }
.caption-form textarea { flex: 1 1 100%; font: inherit; padding: 0.5rem; min-height: 4rem; }
.caption-form .button { min-height: 3rem; }
.caption-form[data-state="failed"] .caption-state { color: #b3261e; }
.caption-form[data-state="saved"] .caption-state { color: #1b6e2e; }
.voice { margin-top: 0.75rem; }
.voice-list { list-style: none; margin: 0; padding: 0; }
.voice-list li { margin-bottom: 0.5rem; }
.voice-list audio { display: block; width: 100%; }
.voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.voice-controls .button { min-height: 3rem; }
.voice-controls .button:disabled { opacity: 0.5; cursor: default; }
.voice-controls[data-state="recording"] .record { background: #b3261e; }
.voice-controls[data-state="failed"] .voice-state { color: #b3261e; }
.voice-controls[data-state="saved"] .voice-state { color: #1b6e2e; }
.voice-note { flex: 1 1 100%; margin: 0; }
.demo-banner { margin: 0; padding: 0.4rem 1rem; background: #fde68a; color: #1f2937; text-align: center; font-weight: 600; }
.tags { margin-top: 0.75rem; }
.tags-label { margin: 0 0 0.25rem; font-weight: 600; }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem 0.25rem 0.75rem; background: #eaf2fb; border: 1px solid #c9d6e2; border-radius: 1.5rem; overflow-wrap: anywhere; }
.tag-chip .chip-remove { min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem; font: inherit; color: #b3261e; background: transparent; border: 0; cursor: pointer; }
.tag-none { margin: 0.25rem 0; }
.unmatched-note { color: #7a5200; font-size: 0.9rem; }
.tag-controls { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tag-row label { flex: 0 0 100%; font-weight: 600; }
.tag-row select, .tag-row input { flex: 1 1 10rem; min-height: 3rem; font: inherit; padding: 0.25rem 0.5rem; min-width: 0; }
.tag-row .button { min-height: 3rem; }
.tag-row .button:disabled { opacity: 0.5; cursor: default; }
.tag-controls[data-state="failed"] .tag-state { color: #b3261e; }
.tag-controls[data-state="saved"] .tag-state { color: #1b6e2e; }
.page-card { gap: 0.25rem; }
.page-state { font-weight: 600; color: #1f4f82; }
.page-state[data-state="held"] { color: #7a5200; }
.page-state[data-state="published"] { color: #1b6e2e; }
.page-body { white-space: pre-line; overflow-wrap: anywhere; }
.page-photos img, .removed-photos img { max-width: 100%; height: auto; }
.removed-photos .removed { opacity: 0.7; }
.page-state { font-weight: 600; }
.page-state[data-state="held"] { color: #8a5a00; }
.page-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.caption-form input[type="text"] { flex: 1 1 100%; font: inherit; padding: 0.5rem; min-height: 3rem; }
.review-actions, .picture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; }
.review-actions .button, .picture-actions .button, #publish-confirm .button { min-height: 3rem; }
.review-status.error, .picture-status.error { color: #b3261e; }
.photo-item.removed img { opacity: 0.6; }

.notice-status { display: block; font-weight: 600; }
.notice-status.alert { color: #b3261e; background: #fdecea; border-left: 4px solid #b3261e; padding: 0.5rem 0.75rem; }
.notice-box .button { min-height: 3rem; }

/* Parent site: kid list and per-kid pictures (phone first, one column, 44px tap targets). */
.kid-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.kid-list li { margin-bottom: 0.5rem; }
.kid-link { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.75rem; color: inherit; background: #fff; border: 1px solid #c9d6e2; border-radius: 0.5rem; text-decoration: none; }
.kid-session h2 a { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }
.kid-session { overflow-wrap: anywhere; }
audio { width: 100%; max-width: 100%; }

.level-box { margin: 1rem 0; }
.level-form fieldset { border: 0; padding: 0; margin: 0 0 0.5rem; }
.level-choice { display: block; padding: 0.75rem 0; min-height: 3rem; }
.level-choice input { width: 1.5rem; height: 1.5rem; vertical-align: middle; }
.level-choice .hint { display: block; margin-left: 2rem; }
.level-form .button { min-height: 3rem; }
.level-form .button:disabled { opacity: 0.5; cursor: default; }
.level-status.error, #level-status.error { color: #b3261e; }