/* Общая книжная вёрстка подключена через reading.css. Здесь элементы семейного режима. */
.role-label {
  padding: 7px 14px;
  color: var(--ink);
  background: var(--soft);
  border-radius: 20px;
  font-weight: 650;
  font-size: 14px;
}
.family-list, .assignment-list {
  display: grid;
  gap: 12px;
}
.assignment, .family-card, .card {
  padding: 16px;
  margin-block: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.card p:last-child, .assignment p:last-child { margin-bottom: 0; }
.quote {
  color: var(--muted);
  margin-block: 8px 16px;
  white-space: pre-wrap;
}
.feedback-note p, .answer-text, .transcript-detail p, .story-text { overflow-wrap: anywhere; }
.voice-detail .audio-capture { margin: 4px 0 8px; }
.audio-capture .player { margin-bottom: 6px; }
.record-live { margin-block: 0; }
.record-live .timer { min-width: 3.4ch; }
.capture-controls { display: grid; justify-items: center; }
.file-choice { position: relative; }
.file-choice:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.join-panel { margin-top: 24px; }
.join-panel .field { max-width: 38ch; }
.join-panel input { font: inherit; }
.side .ico { width: 15px; }
#account-sheet { position: fixed; inset: 0; margin: auto; width: min(460px, calc(100vw - 32px)); }
#account-sheet .tools-toggle { font: 26px/1 system-ui, sans-serif; }
#app form { min-width: 0; }
#app textarea { font-weight: 450; }
#app button[aria-busy="true"] { opacity: .66; }
#live { z-index: 9; }
[aria-invalid="true"] { outline: 2px solid var(--error); }


/* Фото и поле текста стоят рядом, рамка совпадает с видимыми краями снимка. */
.photo-entry,.photo-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.photo-entry .button,.photo-tools .button { min-height:44px; font-size:16px; }
.page-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); gap:10px; max-width:100%; padding:12px 2px; }
.gallery-page { min-width:0; min-height:120px; padding:6px; border:1px solid #c8d4cd; border-radius:12px; background:#fff; font-size:16px; }
.gallery-page img { width:100%; height:100px; object-fit:contain; display:block; }
.gallery-page span { display:block; overflow-wrap:anywhere; line-height:1.25; }
.photo-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; margin:12px 0; min-width:0; }
.photo-visual,.photo-result { min-width:0; margin:0; }
.photo-label { display:block; margin-bottom:8px; font-size:16px; font-weight:600; line-height:1.35; }
.photo-stage { position:relative; width:min(100%, calc(35vh * var(--photo-aspect, 1))); line-height:0; touch-action:none; user-select:none; overflow:hidden; }
.photo-stage img { display:block; width:100%; height:auto; border-radius:8px; }
.photo-editor.is-expanded .photo-visual { grid-column:1 / -1; }
.photo-editor.is-expanded .photo-stage { width:min(100%, calc(75vh * var(--photo-aspect, 1))); }
.photo-result textarea { box-sizing:border-box; width:100%; min-width:0; min-height:180px; font-size:16px; }
.photo-editor > [data-selection-preview],.photo-editor > .photo-tools,.photo-editor > .local-result,.photo-editor > .subline { grid-column:1 / -1; min-width:0; }
.region-box { position:absolute; border:2px solid #167f63; background:rgba(70,181,137,.06); box-shadow:0 0 0 9999px rgba(0,0,0,.12); outline-offset:3px; cursor:move; }
.region-box [data-region-handle] { position:absolute; width:44px; height:44px; border:0; background:transparent; padding:0; touch-action:none; }
.region-box [data-region-handle]::after { content:''; position:absolute; inset:auto; transform:none; box-sizing:border-box; width:10px; height:10px; background:#fff; border:2px solid #167f63; border-radius:50%; }
.region-box [data-region-handle="nw"] { left:0; top:0; }
.region-box [data-region-handle="ne"] { right:0; top:0; }
.region-box [data-region-handle="sw"] { left:0; bottom:0; }
.region-box [data-region-handle="se"] { right:0; bottom:0; }
.region-box [data-region-handle="nw"]::after { left:0; top:0; }
.region-box [data-region-handle="ne"]::after { right:0; top:0; }
.region-box [data-region-handle="sw"]::after { left:0; bottom:0; }
.region-box [data-region-handle="se"]::after { right:0; bottom:0; }
.photo-tools { margin-top:2px; }
@media (max-width:329px) { .photo-editor { grid-template-columns:minmax(0,1fr); } .photo-visual,.photo-result { grid-column:1 / -1; } .photo-stage { width:min(100%, calc(65vh * var(--photo-aspect, 1))); } }
.topbar .brand { min-height: 44px; }