/* Little Leaf · Reading Field Notes. Tokens and component contracts: /DESIGN.md.
   TypeUI fundamentals applied; page coordinates and reward animation stay in feature modules. */
:root {
  --paper:#fff;
  --canvas:#f6f5ef;
  --ink:#243e36;
  --muted:#596b61;
  --green:#285c49;
  --green-dark:#204b3b;
  --soft:#eaf0e6;
  --line:#dde3da;
  --yellow:#f2ce72;
  --warm:#fbf2da;
  --danger:#a53e38;
  --radius:20px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  color-scheme:light
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:1rem/1.65 var(--font)
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  border:0;
  background:transparent;
  padding:0
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
button:not(.word-box) {
  flex-shrink:0
}
a {
  color:var(--green)
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.35;
  overflow-wrap:anywhere
}
h1 {
  font-size:clamp(1.625rem,2.5vw,2.25rem);
  font-weight:700;
  letter-spacing:-.035em
}
h2 {
  font-size:1.375rem
}
h3 {
  font-size:1.125rem
}
img {
  max-width:100%
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid var(--green);
  outline-offset:4px
}
button:not(:disabled):active {
  filter:brightness(.94)
}
.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle
}
.primary,.secondary,.danger,.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  font-size:.875rem;
  line-height:1.4;
  border-radius:12px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s,color .16s
}
.primary,.danger {
  min-height:48px;
  border:1px solid transparent;
  font-weight:600;
  background:var(--green);
  color:white
}
.secondary {
  min-height:48px;
  border:1px solid #b9c7bd;
  background:var(--paper);
  color:var(--green);
  font-weight:600
}
.danger {
  background:var(--danger)
}
.primary:hover:not(:disabled) {
  background:var(--green-dark)
}
.secondary:hover:not(:disabled),.text-button:hover:not(:disabled) {
  background:var(--soft)
}
.text-button {
  color:var(--green);
  padding-inline:8px
}
.full {
  width:100%
}
.compact {
  min-height:48px
}
.muted,.tiny {
  color:var(--muted);
  font-size:.875rem;
  line-height:1.8
}
.tiny {
  margin-top:12px
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--soft);
  color:var(--green);
  font-size:.75rem;
  font-weight:600;
  border-radius:8px;
  padding:6px 10px;
  width:fit-content;
  flex-shrink:0
}
.pill.light {
  background:#ffffffb3
}
.eyebrow,.journey-kicker,.guide-label {
  font-size:.75rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.12em
}
.eyebrow {
  margin-bottom:8px
}
.guide-label {
  display:flex;
  align-items:center;
  gap:8px
}
.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px
}
.top>div:first-child {
  min-width:0
}
.top>.secondary {
  flex-shrink:0
}
/* Navigation */
.sidebar {
  width:216px;
  position:fixed;
  inset:0 auto 0 0;
  padding:32px 20px 24px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
  background:#efeee5;
  z-index:5;
  overflow-y:auto
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  text-decoration:none
}
.brand img {
  width:36px;
  height:36px
}
.brand span {
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:-.03em
}
.brand small {
  display:block;
  font-size:.625rem;
  letter-spacing:.18em;
  font-weight:500;
  margin-top:1px
}
.family {
  display:flex;
  gap:12px;
  align-items:center;
  margin:36px 0 20px;
  font-size:.875rem
}
.family small {
  display:block;
  color:var(--muted);
  font-size:.75rem
}
.avatar {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  background:var(--warm);
  border-radius:50%;
  color:#725822;
  flex-shrink:0
}
nav {
  display:grid;
  gap:8px
}
.nav {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  border-radius:12px;
  text-align:left;
  padding:12px;
  font-size:.875rem;
  width:100%;
  color:var(--muted)
}
.nav:hover {
  background:#e4e8dc
}
.nav.active {
  background:var(--green);
  color:white;
  font-weight:600
}
.sidebar-note {
  margin-top:auto;
  padding:32px 12px 16px
}
.sidebar-note>span {
  color:#897333;
  font-size:1.5rem
}
.sidebar-note p {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:8px
}
.sidebar-note img {
  display:block;
  height:112px;
  width:112px;
  object-fit:contain;
  margin:0 auto 8px
}
.sidebar>.nav {
  font-size:.8125rem
}
.local-label {
  font-size:.75rem;
  color:var(--muted);
  padding:16px 12px 0
}
.local-label i {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  margin-right:6px
}
.family-account {
  font-size:.8125rem;
  margin-top:12px
}
.main {
  margin-left:216px;
  padding:40px clamp(24px,3.7vw,64px);
  max-width:1600px
}
.family-current {
  display:none
}
.mobile-tools {
  display:none
}
/* Shelf */
.library-actions {
  display:flex;
  flex-wrap:wrap;
  max-width:100%;
  align-items:center;
  gap:12px;
  flex-shrink:0
}
.library-actions .reward-entry {
  background:var(--warm);
  border-color:#d9c99b;
  color:#66511e
}
.welcome {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  position:relative;
  border:1px solid #d3dfd0;
  border-radius:24px;
  background:#e9eee1;
  overflow:hidden;
  min-height:256px
}
.welcome-copy {
  padding:32px 36px;
  z-index:1
}
.welcome h2 {
  font-size:clamp(1.5rem,2.7vw,2.125rem);
  letter-spacing:-.02em;
  margin-top:16px
}
.welcome p {
  color:#4d6657;
  font-size:.9375rem;
  line-height:1.8;
  margin:12px 0 20px;
  max-width:38ch
}
.welcome .primary {
  gap:12px
}
.hero-art {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  background:radial-gradient(ellipse at 55% 90%,#d4dfc9 0,transparent 65%)
}
.hero-orbit {
  position:absolute;
  width:240px;
  height:240px;
  border:1px solid #c7d4c0;
  border-radius:50%
}
.hero-orbit:after {
  content:"";
  position:absolute;
  inset:22px;
  border:1px dashed #bccdb5;
  border-radius:50%
}
.hero-pet {
  height:260px;
  width:260px;
  object-fit:contain;
  position:relative;
  transform:rotate(-5deg);
  filter:drop-shadow(0 16px 12px #36543815)
}
.hero-book {
  position:absolute;
  right:12%;
  bottom:30px;
  background:white;
  width:102px;
  height:128px;
  padding:6px;
  transform:rotate(12deg);
  border-radius:6px;
  box-shadow:0 10px 24px #25493624
}
.hero-book img {
  width:100%;
  height:100%;
  object-fit:contain
}
.hero-stamp {
  position:absolute;
  right:24px;
  top:24px;
  color:var(--green);
  font-size:.625rem;
  letter-spacing:.12em;
  border-bottom:1px solid #b5c7ad;
  padding-bottom:4px
}
.facts {
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
  padding:20px 0;
  margin-bottom:20px;
  border-bottom:1px solid var(--line)
}
.facts>div {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.875rem;
  color:var(--muted)
}
.facts strong {
  font-size:1.125rem;
  color:var(--ink);
  font-weight:650
}
.facts .icon {
  width:18px
}
.facts .parent-report-link {
  margin:0 0 0 auto
}
.parent-report-link .text-button {
  font-size:.8125rem
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px
}
.section-heading h2 {
  font-size:1.375rem;
  letter-spacing:-.02em
}
.section-heading h2 span {
  font-size:.8125rem;
  font-weight:500;
  margin-left:8px;
  color:var(--muted)
}
.section-heading p {
  font-size:.875rem;
  color:var(--muted);
  margin-top:6px
}
.search {
  height:48px;
  width:248px;
  display:flex;
  align-items:center;
  gap:12px;
  background:white;
  border:1px solid #b9c7bd;
  border-radius:12px;
  padding:0 12px;
  color:var(--muted)
}
.search input {
  width:100%;
  min-width:0;
  outline:none;
  border:0;
  background:transparent;
  font-size:.875rem
}
.search:focus-within {
  outline:3px solid var(--green);
  outline-offset:3px
}
.search input:focus-visible {
  outline:none
}
.book-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.book-card {
  min-width:0;
  padding:12px;
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  transition:border-color .16s,box-shadow .16s
}
.book-card:hover {
  border-color:#9aae9c;
  box-shadow:0 6px 16px #243e3608
}
.cover-wrap {
  display:block;
  position:relative;
  background:#edf0e6;
  width:100%;
  height:208px;
  padding:20px;
  border-radius:12px;
  overflow:hidden
}
.tone-1 {
  background:#f4eee2
}
.tone-2 {
  background:#e8eef0
}
.tone-3 {
  background:#eee8ed
}
.cover-wrap img {
  height:100%;
  width:100%;
  object-fit:contain;
  filter:drop-shadow(4px 6px 5px #33452f20);
  transition:transform .2s
}
.cover-wrap:hover img {
  transform:translateY(-3px)
}
.page-tag,.sample-tag {
  position:absolute;
  right:8px;
  bottom:8px;
  background:white;
  border-radius:6px;
  padding:2px 8px;
  font-size:.75rem;
  color:var(--muted)
}
.sample-tag {
  left:8px;
  right:auto
}
.book-info {
  position:relative;
  padding:16px 48px 12px 4px
}
.book-info h3 {
  font-size:1rem;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.book-info p {
  font-size:.75rem;
  margin-top:8px;
  color:var(--muted)
}
.round-link {
  position:absolute;
  top:16px;
  right:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  height:44px;
  width:44px;
  background:var(--soft);
  color:var(--green)
}
.round-link:hover {
  background:#dce7d6
}
.book-manage {
  margin:0;
  padding:4px 0 0;
  border-top:1px solid var(--line)
}
.remove-button {
  font-size:.75rem;
  min-height:44px;
  color:#7b5146
}
.import-card {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  padding:24px 12px;
  min-height:300px;
  border:1px dashed #aebbaf;
  border-radius:20px;
  background:transparent
}
.import-card>span {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:var(--soft);
  border-radius:50%;
  color:var(--green)
}
.import-card strong {
  font-size:.9375rem;
  font-weight:600
}
.import-card small {
  font-size:.75rem;
  color:var(--muted)
}
.import-card:hover {
  background:var(--soft)
}
footer {
  margin-top:40px;
  padding:20px 0;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:16px
}
/* Reader */
.reader-main .top {
  margin-bottom:24px
}
.reader-main h1 {
  font-size:clamp(1.5rem,2vw,2rem)
}
.reader-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:24px
}
.reading-stage {
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden
}
.stage-top {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}
.stage-top .pill {
  margin-right:auto
}
.stage-top .text-button {
  font-size:.8125rem
}
.page-area {
  padding:16px;
  min-height:260px;
  display:grid;
  place-items:center;
  background:#fdfcf8
}
.page-image {
  position:relative;
  width:min(100%,calc(46vh * var(--page-ratio)));
  max-width:820px
}
.page-image>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  border-radius:4px
}
.word-boxes {
  position:absolute;
  inset:0
}
.word-box {
  position:absolute;
  padding:0;
  border-radius:3px;
  min-height:6px;
  z-index:1
}
.word-box:hover {
  background:#f2ce7244;
  outline:1px solid #8c6a26
}
.word-box.selected {
  background:#f2ce7270;
  outline:2px solid #896011
}
.page-nav {
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line)
}
.page-nav .secondary {
  font-size:.8125rem;
  padding:8px 12px;
  min-height:44px
}
.page-dots {
  display:flex;
  gap:8px;
  overflow-x:auto;
  max-width:160px;
  scrollbar-width:thin;
  padding:4px 0
}
.page-dots button {
  height:44px;
  min-width:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  font-size:.8125rem
}
.page-dots .active {
  background:var(--green);
  color:white;
  border-color:var(--green)
}
.page-dots .excluded {
  border-style:dashed;
  color:var(--muted);
  background:var(--canvas)
}
.reading-guide {
  align-self:start;
  padding:24px;
  background:var(--soft);
  border:1px solid #d7e0d0;
  border-radius:20px
}
.reading-guide h2,.feedback-panel h2 {
  font-family:var(--font);
  font-size:1.375rem;
  letter-spacing:-.02em;
  line-height:1.45;
  margin:12px 0 8px
}
.reading-guide .muted {
  font-size:.875rem
}
.word-tray {
  padding:16px 0;
  margin:8px 0 16px;
  line-height:2.4;
  border-bottom:1px solid #cad7c6
}
.word {
  font-family:Georgia,serif;
  font-size:1.5rem;
  padding:2px 8px;
  border-radius:8px;
  min-height:44px;
  min-width:32px
}
.word.selected {
  background:var(--yellow);
  box-shadow:inset 0 -2px #a17920
}
.word:hover {
  background:#dde7d4
}
.speed-control {
  font-size:.875rem;
  color:var(--muted);
  gap:8px;
  margin-bottom:12px;
  flex-wrap:wrap
}
.speed-control select {
  padding:10px 28px 10px 12px;
  min-height:44px;
  max-width:none;
  border:1px solid #aebbaf;
  border-radius:10px;
  color:var(--ink);
  font-size:.875rem
}
.guide-actions {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap
}
.guide-actions .text-button {
  font-size:.8125rem
}
.soft-note {
  display:flex;
  gap:12px;
  padding:16px;
  background:#fff9;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:.875rem;
  line-height:1.8;
  margin-top:24px
}
.soft-note .icon {
  margin-top:3px
}
.notice {
  padding:16px;
  background:var(--warm);
  border:1px solid #e6d6ac;
  border-radius:12px;
  font-size:.875rem;
  color:#735a24;
  line-height:1.8;
  margin-top:16px
}
.record-bar {
  position:sticky;
  bottom:16px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid #aebbaf;
  border-radius:16px;
  background:white;
  padding:16px 24px;
  margin-top:24px;
  box-shadow:0 8px 24px #243e3610
}
.record-status {
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0
}
.record-status strong {
  font-size:1rem
}
.record-status small {
  display:block;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:4px
}
.record-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#829b73;
  box-shadow:0 0 0 6px var(--soft);
  flex-shrink:0
}
.record-right {
  display:flex;
  gap:24px;
  align-items:center;
  flex-shrink:0
}
.record-right>span {
  font-size:1rem;
  font-variant-numeric:tabular-nums;
  color:var(--muted)
}
.record-right .primary,.record-right .danger {
  min-height:52px;
  padding-inline:24px;
  font-size:1rem
}
.is-recording {
  border-color:#bc7564
}
.is-recording .record-dot {
  background:var(--danger);
  box-shadow:0 0 0 6px #faeae5;
  animation:blink 1.5s infinite
}
.record-status .text-button {
  font-size:.8125rem;
  min-height:36px;
  padding:4px 0
}
.reader-foot {
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:12px 0
}
.reader-foot .text-button {
  font-size:.8125rem
}
.mic-level {
  font-size:.8125rem;
  color:var(--muted);
  margin:8px 0;
  gap:4px;
  max-width:360px;
  display:flex;
  flex-direction:column
}
.mic-level meter {
  height:16px;
  width:100%;
  min-width:100px
}
.mic-level .mic-warning {
  color:var(--danger)
}
.mic-picker {
  font-size:.875rem;
  display:block;
  margin:16px 0
}
.mic-picker select {
  margin-top:8px;
  display:block;
  width:100%
}
.reading-option {
  font-size:.875rem;
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0
}
.reading-option input {
  width:20px;
  height:20px
}
.page-image~.notice {
  margin:16px
}
/* Saved practice */
.history-summary {
  display:flex;
  align-items:center;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding:0 0 24px;
  margin-bottom:24px;
  color:var(--muted);
  font-size:.875rem
}
.history-summary strong {
  font-size:1.5rem;
  color:var(--green);
  margin-right:6px
}
.history-list {
  display:grid;
  gap:12px
}
.history-entry {
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:16px;
  border:1px solid var(--line);
  background:white;
  border-radius:16px
}
.history-row {
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  min-width:0;
  flex:1;
  text-align:left;
  border:0;
  border-radius:16px;
  background:transparent
}
.history-row:hover {
  background:#f1f5ee
}
.history-row img {
  width:72px;
  height:88px;
  object-fit:contain;
  background:var(--canvas);
  padding:4px;
  border-radius:8px
}
.history-row>div {
  min-width:0;
  flex:1
}
.history-row h3 {
  font-size:1.0625rem
}
.history-row p {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:8px
}
.review-status {
  display:block;
  font-size:.8125rem;
  color:var(--green);
  margin-top:6px
}
.history-entry .remove-button {
  font-size:.8125rem
}
.report-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:24px
}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  align-self:start;
  min-width:0
}
.recording-panel .section-heading {
  align-items:flex-start;
  flex-wrap:wrap
}
.recording-panel .section-heading h2 {
  font-family:var(--font);
  font-size:1.5rem
}
.audio-label {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.9375rem;
  font-weight:600;
  margin:24px 0 12px
}
.playback-section {
  padding:0 0 24px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px
}
.playback-section .audio-label {
  margin-top:0
}
.playback-section .tiny {
  margin-top:8px
}
audio {
  width:100%;
  height:48px;
  display:block
}
video {
  width:100%;
  max-height:440px;
  background:#203b30;
  border-radius:12px
}
.video-placeholder {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:172px;
  border:1px solid var(--line);
  background:var(--canvas);
  border-radius:12px;
  padding:20px
}
.video-placeholder>img {
  width:100px;
  height:128px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:4px
}
.video-placeholder>div {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:8px
}
.video-placeholder strong {
  font-size:.9375rem;
  font-weight:600
}
.video-placeholder span {
  font-size:.8125rem;
  color:var(--muted)
}
.video-placeholder .icon {
  color:var(--green)
}
.report-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px
}
.report-actions .primary,.report-actions .secondary {
  font-size:.875rem;
  padding:10px 14px;
  min-height:48px
}
.report-actions .text-button {
  font-size:.8125rem
}
.feedback-panel {
  background:var(--soft)
}
.feedback-empty {
  padding:24px 0;
  font-size:.875rem;
  color:var(--muted);
  line-height:1.8
}
.feedback-empty>.icon {
  width:32px;
  height:32px;
  margin-bottom:12px
}
.consent {
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:.8125rem;
  line-height:1.8;
  color:var(--muted);
  margin:24px 0 16px
}
.consent input {
  margin-top:4px;
  accent-color:var(--green);
  width:20px;
  height:20px;
  flex-shrink:0
}
.review-summary h3 {
  font-size:1.125rem
}
.review-summary h4 {
  font-size:.9375rem
}
.review-summary ul,.review-summary ol {
  font-size:.875rem;
  line-height:1.8;
  color:var(--ink)
}
.review-scores>div {
  background:white;
  padding:12px 4px
}
.review-scores strong {
  color:var(--green)
}
.review-scores span {
  font-size:.75rem;
  color:var(--muted)
}
.review-details {
  font-size:.875rem
}
.segment {
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem
}
.reference-text {
  font-size:1rem
}
.score-row {
  font-size:.8125rem;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
.issue-word {
  padding:12px;
  margin:4px;
  border-radius:10px;
  background:var(--warm);
  font-family:Georgia,serif;
  font-size:1.125rem;
  min-height:44px
}
.issue-word small {
  display:block;
  font-family:var(--font);
  font-size:.75rem;
  color:#735a24
}
.empty {
  text-align:center;
  background:white;
  padding:64px 24px;
  border:1px dashed #aebbaf;
  border-radius:20px
}
.empty>.icon {
  width:40px;
  height:40px;
  color:var(--green);
  margin-bottom:16px
}
.empty p {
  font-size:.9375rem;
  color:var(--muted);
  margin:12px 0 24px
}
.loading {
  padding:64px 24px;
  text-align:center;
  color:var(--muted)
}
.loading:before {
  content:"";
  display:block;
  width:32px;
  height:32px;
  border:3px solid var(--line);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 24px
}
/* Dialogs, parents and rewards */
dialog {
  color:var(--ink);
  width:calc(100% - 32px);
  max-width:620px;
  max-height:calc(100dvh - 32px);
  border:1px solid var(--line);
  border-radius:24px;
  padding:40px 32px 32px;
  background:white;
  box-shadow:0 24px 80px #243e3630;
  overflow:auto
}
dialog::backdrop {
  background:#233d3659;
  backdrop-filter:blur(4px)
}
dialog h2 {
  font-size:1.5rem;
  line-height:1.4;
  margin:8px 40px 16px 0
}
dialog p {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.8;
  margin:12px 0 20px
}
dialog .primary,dialog .secondary {
  margin-top:12px
}
dialog .secondary {
  margin-left:8px
}
.modal-close {
  position:absolute;
  right:12px;
  top:12px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  color:var(--muted);
  z-index:4
}
.modal-close:hover {
  background:var(--soft)
}
textarea,form input:not([type=checkbox]),select {
  border:1px solid #aebbaf;
  border-radius:12px;
  padding:12px;
  background:#fdfdf9;
  color:var(--ink);
  min-height:48px
}
form input:not([type=checkbox]),textarea {
  width:100%
}
textarea {
  font-family:Georgia,serif;
  font-size:1.25rem;
  line-height:1.8;
  resize:vertical
}
input[type=checkbox] {
  accent-color:var(--green);
  width:20px;
  height:20px;
  flex-shrink:0
}
select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23285c49' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:36px
}
summary {
  cursor:pointer;
  min-height:44px;
  padding:10px 0;
  font-size:.875rem;
  color:var(--green)
}
#toast {
  position:fixed;
  left:calc(50% + 108px);
  bottom:24px;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  background:var(--ink);
  color:white;
  font-size:.875rem;
  line-height:1.6;
  padding:16px 24px;
  border-radius:12px;
  max-width:min(560px,90vw);
  z-index:99;
  transition:opacity .18s,transform .18s
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.help-list {
  padding-left:24px
}
.help-list li {
  margin:20px 0
}
.help-list p {
  margin:8px 0;
  font-size:.875rem
}
#speech-settings-form label,.parent-login label {
  font-size:.875rem
}
.parent-login .text-button {
  margin:12px 0
}
.parent-actions {
  display:grid;
  gap:12px;
  margin-top:20px
}
.parent-actions .secondary {
  margin:0;
  justify-content:flex-start
}
.parent-actions .secondary .icon {
  margin-right:4px
}
.reading-reward {
  margin:0;
  padding:20px;
  border-radius:16px;
  background:var(--warm)
}
.reward-heading h2 {
  font-size:1.375rem
}
.reading-reward>p,.completion-confirm,.rubric,.missing-pages,.rubric p,.coin-history,.reading-compare p {
  font-size:.875rem;
  line-height:1.8
}
.coin-stats>div {
  background:var(--warm);
  color:#735a24;
  border-color:#e4d2a6;
  border-radius:16px
}
.coin-stats strong {
  color:#735418;
  font-size:1.75rem
}
.coin-history small {
  color:var(--muted)
}
.coin-history strong {
  color:#735418
}
.coin-tiers>div {
  font-size:.8125rem
}
.reward-album {
  gap:16px
}
.reward-album article {
  border-radius:16px;
  background:var(--canvas);
  border-color:var(--line)
}
.reward-album strong {
  font-size:1rem;
  color:var(--ink)
}
.reward-album small,.reward-album .pet-species {
  font-size:.8125rem;
  color:var(--muted)
}
.pet-collection-heading span {
  font-size:.875rem;
  color:var(--muted)
}
.parent-stats span {
  font-size:.875rem;
  color:var(--muted)
}
.scope-page small {
  font-size:.8125rem;
  color:var(--muted)
}
.scope-page {
  border-color:var(--line)
}
.scope-sync {
  font-size:.875rem
}
.completion-blocked .blocked-pages {
  font-size:.875rem
}
.reward-reveal .reward-note,.reward-reveal>p {
  font-size:.8125rem
}
.reward-reveal .coin-stats strong {
  color:#735418
}
.reward-reveal .journey-kicker {
  color:var(--muted)
}
.reward-reveal h2 {
  margin-inline:0
}
dialog:has(>.reward-reveal)>.modal-close {
  height:44px;
  width:44px
}
.reading-compare h3 {
  font-size:1.125rem
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes blink {
  50% {
    opacity:.55
  }
}
@media(min-width:1500px) {
  .book-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:192px;
    padding-inline:16px
  }
  .main {
    margin-left:192px;
    padding:32px 24px
  }
  .reader-grid {
    grid-template-columns:minmax(0,1fr) 252px;
    gap:16px
  }
  .reading-guide {
    padding:20px
  }
  .report-grid {
    grid-template-columns:minmax(0,1fr) 300px;
    gap:16px
  }
  .top {
    flex-wrap:wrap
  }
  .hero-book {
    right:4%
  }
  .welcome-copy {
    padding:28px
  }
  .record-right {
    gap:16px
  }
  .book-grid {
    gap:16px
  }
  #toast {
    left:calc(50% + 96px)
  }
}
@media(max-width:960px) {
  .sidebar {
    width:176px;
    padding-inline:12px
  }
  .main {
    margin-left:176px;
    padding:28px 20px
  }
  .brand {
    gap:6px
  }
  .brand span {
    font-size:1rem
  }
  .brand img {
    width:30px
  }
  .family {
    font-size:.75rem
  }
  .family .avatar {
    display:none
  }
  .sidebar-note {
    padding-inline:8px
  }
  .reader-grid,.report-grid {
    grid-template-columns:1fr
  }
  .reading-guide {
    display:block
  }
  .reading-guide h2 br {
    display:none
  }
  .book-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hero-pet {
    width:210px;
    height:210px
  }
  .hero-orbit {
    width:180px;
    height:180px
  }
  .hero-book {
    width:76px;
    height:96px;
    right:4%;
    bottom:32px
  }
  .hero-stamp {
    right:16px
  }
  .welcome-copy {
    padding:24px
  }
  .welcome p {
    font-size:.875rem
  }
  .record-bar {
    padding:16px
  }
  .record-status small {
    max-width:220px
  }
  .facts {
    gap:16px
  }
  .facts>div {
    font-size:.8125rem
  }
  #toast {
    left:calc(50% + 88px)
  }
}
@media(max-width:650px) {
  .sidebar {
    position:sticky;
    top:0;
    width:100%;
    height:auto;
    min-height:112px;
    padding:12px 16px 8px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:visible;
    background:#f6f5eff5;
    backdrop-filter:blur(10px)
  }
  .brand img {
    width:30px;
    height:30px
  }
  .brand span {
    font-size:1rem
  }
  .brand small {
    font-size:.5625rem
  }
  .sidebar .family,.sidebar-note,.sidebar>.nav,.sidebar .local-label,.sidebar .family-account {
    display:none
  }
  .mobile-tools {
    display:inline-flex;
    font-size:.8125rem;
    min-height:44px;
    padding:8px
  }
  .sidebar nav {
    display:flex;
    grid-column:1/-1;
    gap:8px
  }
  .nav {
    font-size:.875rem;
    min-height:44px;
    padding:8px 16px;
    justify-content:center;
    width:auto;
    flex:1
  }
  .nav.active {
    background:var(--soft);
    color:var(--green);
    box-shadow:inset 0 -2px var(--green)
  }
  .main {
    margin:0;
    padding:24px 16px 32px
  }
  .family-current {
    display:block;
    font-size:.8125rem;
    color:var(--muted);
    margin-bottom:12px
  }
  .top {
    gap:16px;
    margin-bottom:24px
  }
  .top h1 {
    font-size:1.625rem
  }
  .eyebrow {
    font-size:.6875rem;
    letter-spacing:.1em
  }
  .top>.secondary {
    font-size:.8125rem
  }
  .library-actions {
    width:100%;
    gap:8px
  }
  .library-actions .reward-entry {
    flex:1
  }
  .library-actions .reward-entry,.library-actions .primary {
    font-size:.8125rem;
    min-height:48px;
    padding:10px 12px
  }
  .welcome {
    min-height:224px;
    grid-template-columns:1fr 128px;
    border-radius:20px
  }
  .welcome-copy {
    padding:24px 0 24px 20px
  }
  .welcome .pill {
    font-size:.6875rem;
    padding:4px 8px
  }
  .welcome .pill .icon {
    width:16px;
    height:16px
  }
  .welcome h2 {
    font-size:1.375rem;
    margin-top:12px
  }
  .welcome p {
    font-size:.8125rem;
    margin:10px 0 16px
  }
  .welcome .primary {
    font-size:.8125rem;
    padding-inline:12px
  }
  .welcome .primary .icon:last-child {
    display:none
  }
  .hero-pet {
    position:absolute;
    width:172px;
    height:172px;
    max-width:none;
    bottom:28px;
    right:-14px
  }
  .hero-orbit {
    position:absolute;
    width:146px;
    height:146px;
    bottom:24px;
    right:-12px
  }
  .hero-stamp {
    top:20px;
    font-size:.5rem;
    right:12px
  }
  .hero-book {
    display:none
  }
  .facts {
    gap:8px 20px;
    padding:16px 0;
    margin-bottom:24px
  }
  .facts>div {
    font-size:.8125rem
  }
  .facts .parent-report-link {
    margin-left:0;
    width:100%;
    justify-content:flex-end
  }
  .facts .parent-report-link .text-button {
    min-height:36px;
    padding:4px 0
  }
  .section-heading {
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px
  }
  .section-heading h2 {
    font-size:1.25rem
  }
  .section-heading p {
    font-size:.8125rem
  }
  .shelf>.section-heading .search {
    width:100%
  }
  .book-grid {
    gap:12px
  }
  .book-card {
    padding:8px;
    border-radius:16px
  }
  .cover-wrap {
    height:156px;
    padding:12px;
    border-radius:8px
  }
  .book-info {
    padding:12px 0 4px
  }
  .book-info h3 {
    font-size:.875rem;
    padding-right:0;
    min-height:42px
  }
  .book-info p {
    font-size:.75rem;
    margin-top:4px
  }
  .round-link {
    position:static;
    width:100%;
    border-radius:8px;
    height:44px;
    margin-top:12px
  }
  .round-link:before {
    content:attr(aria-label);
    font-size:.8125rem
  }
  .round-link {
    display:flex;
    justify-content:center;
    gap:8px
  }
  .round-link .icon {
    width:16px;
    height:16px
  }
  .book-manage {
    margin-top:8px;
    justify-content:center
  }
  .book-manage .remove-button {
    font-size:.75rem;
    width:100%
  }
  .import-card {
    min-height:310px;
    gap:12px;
    padding:16px 4px
  }
  .import-card strong {
    font-size:.8125rem
  }
  .import-card small {
    font-size:.625rem
  }
  .page-tag,.sample-tag {
    font-size:.625rem;
    padding:2px 4px
  }
  footer {
    font-size:.75rem;
    display:block;
    margin-top:24px
  }
  footer span {
    display:block;
    margin-top:8px
  }
  .reader-main .top {
    margin-bottom:20px
  }
  .reader-main h1 {
    font-size:1.5rem
  }
  .reader-grid {
    gap:16px
  }
  .stage-top {
    padding:8px 12px;
    gap:4px
  }
  .stage-top .pill {
    font-size:.75rem
  }
  .stage-top .text-button {
    font-size:.75rem;
    padding-inline:6px
  }
  .page-area {
    padding:12px;
    min-height:200px
  }
  .page-image {
    width:100%
  }
  .page-nav {
    padding:12px;
    gap:8px
  }
  .page-nav .secondary {
    padding:8px;
    font-size:.75rem
  }
  .page-nav .icon {
    width:16px;
    height:16px
  }
  .page-dots {
    max-width:96px;
    gap:4px
  }
  .reading-guide {
    padding:20px
  }
  .reading-guide h2 {
    font-size:1.25rem
  }
  .word-tray {
    margin:8px 0 16px;
    padding:12px 0
  }
  .reading-guide .soft-note {
    display:none
  }
  .guide-actions .text-button {
    font-size:.875rem
  }
  .record-bar {
    bottom:8px;
    gap:12px;
    padding:12px;
    margin-top:16px
  }
  .record-status {
    gap:12px
  }
  .record-status strong {
    font-size:.875rem
  }
  .record-status small {
    font-size:.75rem;
    max-width:156px
  }
  .record-dot {
    width:8px;
    height:8px
  }
  .record-right {
    flex-direction:column;
    gap:4px;
    align-items:flex-end
  }
  .record-right>span {
    font-size:.875rem
  }
  .record-right .primary,.record-right .danger {
    padding:12px;
    min-height:48px;
    font-size:.875rem;
    gap:6px
  }
  .record-status .text-button {
    font-size:.75rem;
    white-space:normal;
    text-align:left
  }
  .reader-foot {
    gap:4px
  }
  .reader-foot .text-button {
    font-size:.75rem
  }
  .mic-level {
    font-size:.75rem
  }
  .history-summary {
    gap:16px;
    padding-bottom:16px;
    margin-bottom:16px;
    font-size:.8125rem
  }
  .history-entry {
    gap:0;
    padding-right:8px
  }
  .history-row {
    padding:12px;
    gap:12px
  }
  .history-row img {
    width:48px;
    height:64px;
    padding:2px
  }
  .history-row h3 {
    font-size:.9375rem
  }
  .history-row p,.review-status {
    font-size:.75rem
  }
  .history-row>.pill,.history-row>.icon {
    display:none
  }
  .history-entry .remove-button {
    font-size:.75rem;
    padding:8px;
    flex-direction:column;
    gap:4px
  }
  .history-entry .remove-button .icon {
    width:16px;
    height:16px
  }
  .panel {
    padding:20px;
    border-radius:16px
  }
  .recording-panel .section-heading h2 {
    font-size:1.25rem
  }
  .recording-panel .section-heading {
    gap:12px
  }
  .recording-panel .pill {
    font-size:.75rem
  }
  .report-actions {
    gap:8px
  }
  .report-actions .primary,.report-actions .secondary {
    font-size:.8125rem;
    padding:10px 12px
  }
  .video-placeholder {
    min-height:152px;
    padding:12px;
    gap:12px
  }
  .video-placeholder>img {
    width:72px;
    height:96px
  }
  .video-placeholder strong {
    font-size:.875rem
  }
  .video-placeholder span {
    font-size:.75rem
  }
  .feedback-panel h2 {
    font-size:1.25rem
  }
  .feedback-panel h2 br {
    display:none
  }
  .consent {
    font-size:.8125rem
  }
  .empty {
    padding:40px 20px
  }
  .empty h2 {
    font-size:1.25rem
  }
  dialog {
    padding:44px 20px 24px;
    border-radius:20px
  }
  dialog h2 {
    font-size:1.375rem;
    margin-right:20px
  }
  dialog p {
    font-size:.875rem
  }
  dialog .secondary {
    margin-left:0
  }
  .modal-close {
    right:8px;
    top:8px
  }
  .reading-reward {
    padding:16px
  }
  .reading-reward .primary,.reading-reward .secondary {
    font-size:.8125rem;
    max-width:100%
  }
  .reward-heading h2 {
    font-size:1.25rem
  }
  .coin-stats>div {
    padding:12px 10px;
    font-size:.75rem;
    gap:8px
  }
  .coin-stats strong {
    font-size:1.5rem
  }
  .coin-stats small {
    display:none
  }
  .coin-symbol {
    width:28px;
    height:28px;
    font-size:.875rem
  }
  .reward-album strong {
    font-size:.875rem
  }
  .reward-album small,.reward-album .pet-species {
    font-size:.75rem
  }
  .scope-sync {
    font-size:.8125rem
  }
  #toast {
    left:50%;
    width:max-content;
    max-width:calc(100vw - 32px);
    font-size:.8125rem;
    bottom:20px;
    padding:12px 16px
  }
}
@media(max-width:360px) {
  .welcome {
    grid-template-columns:1fr 88px
  }
  .hero-pet {
    width:146px;
    height:146px;
    right:-36px
  }
  .hero-stamp {
    display:none
  }
  .welcome-copy {
    padding-left:16px
  }
  .welcome h2 {
    font-size:1.25rem
  }
  .cover-wrap {
    height:132px
  }
  .record-status small {
    max-width:128px
  }
  .record-bar {
    padding:12px 10px
  }
  .record-status {
    gap:8px
  }
  .record-right .icon {
    width:16px
  }
  .stage-top .pill {
    width:100%;
    margin-bottom:4px
  }
  .stage-top .text-button {
    flex:1
  }
  .page-dots {
    max-width:44px
  }
  .coin-stats {
    gap:8px
  }
  .coin-symbol {
    display:none
  }
  .report-actions .text-button {
    padding-inline:0
  }
  .reward-reveal .coin-stats strong {
    font-size:1.25rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(max-width:650px) {
  .welcome .pill {
    display:none
  }
  .welcome h2 {
    margin-top:0
  }
  .welcome-copy {
    padding-top:20px;
    padding-bottom:20px
  }
  .welcome p {
    font-size:.8125rem;
    margin:8px 0 16px
  }
  .facts .parent-report-link {
    width:auto;
    margin-left:auto
  }
  .facts {
    gap:8px 12px
  }
  .facts>div {
    font-size:.75rem
  }
  .facts strong {
    font-size:1rem
  }
  .facts .parent-report-link .text-button {
    font-size:.75rem
  }
  .facts .parent-report-link .icon {
    display:none
  }
}
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  background:white;
  padding:12px 20px;
  border-radius:12px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
.word {
  min-width:44px
}

/* Keep the current page in view and reserve room for the recording controls. */
html {
  scroll-padding-block: 128px 160px;
}
.page-dots {
  position: relative;
}
.word-tray {
  line-height: 1.9;
  max-height: 35vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.reading-guide .soft-note {
  display: none;
}
@media (max-width: 650px) {
  .word-tray {
    max-height: none;
  }
}

.import-hint{font-size:14px;color:#596b61;line-height:1.7;margin:0 0 20px}.import-panel{background:#fff;border:1px solid #cdd7c9;border-radius:20px;padding:24px;margin:0 0 24px}.import-panel h2{font-size:20px;line-height:1.5;margin:0}.import-summary,.import-note{font-size:14px;line-height:1.7;color:#596b61}.import-list{list-style:none;margin:16px 0;padding:0;max-height:360px;overflow-y:auto}.import-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 0;border-top:1px solid #dde3da;overflow-wrap:anywhere}.import-row strong{font-size:16px;font-weight:600;max-width:100%}.import-row>span{font-size:14px;color:#596b61}.import-failed>span{color:#963e33}.import-running>span{color:#285c49;font-weight:600}.import-actions{display:flex;flex-wrap:wrap;gap:10px}.import-actions button{min-height:48px}.import-note{margin:12px 0 16px}@media(max-width:600px){.import-panel{padding:18px}.import-panel h2{font-size:18px}.import-actions button{flex:1 1 140px}}

/* A child's read books stay available without crowding the pending shelf. */
.shelf-switch{display:flex;gap:8px;padding:4px;background:#eaf0e6;border-radius:12px;max-width:440px;margin:16px 0 8px}
.shelf-option{flex:1;min-width:0;min-height:48px;padding:12px 8px;border:0;border-radius:8px;background:transparent;color:#285c49;font-size:14px;line-height:1.5}
.shelf-option.selected{background:#285c49;color:#fff;font-weight:600}
.shelf-option:hover:not(.selected){background:#dde3da}
.shelf-note{font-size:14px;color:#596b61;line-height:1.6;margin:8px 0 16px}
.book-manage{flex-wrap:wrap;gap:4px 12px}
.book-manage .shelf-move{min-height:44px;border-radius:8px;background:#eaf0e6;color:#285c49;padding:8px 12px;font-size:14px}
.book-manage .shelf-move:hover{background:#dde3da}
.shelf-other{min-height:44px;white-space:normal;text-align:left}

/* Compact home: one family entry, reading companion, secondary configuration. */
.sidebar .configuration-entry {margin-top:0; min-height:44px; gap:8px}
.welcome.welcome-compact {grid-template-columns:minmax(0,1fr) auto; min-height:0; border-radius:20px; align-items:center; padding:24px; gap:24px; overflow:visible}
.welcome-compact .welcome-copy {padding:0; min-width:0}
.welcome-compact h2 {font-size:1.5rem; line-height:1.4; margin:0 0 16px; overflow-wrap:anywhere; letter-spacing:0}
.welcome-compact .primary {gap:8px; min-height:48px}
.welcome-compact .hero-art {background:none; gap:16px; position:static}
.welcome-compact .hero-pet {position:static; width:120px; height:120px; transform:none; filter:none}
.welcome-compact .hero-book {position:static; width:72px; height:96px; padding:4px; transform:none; box-shadow:none; flex-shrink:0}
.settings-list {display:grid; gap:8px; margin-top:24px}
.settings-row {display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--paper,#fff); color:var(--ink); text-align:left}
.settings-row span {flex:1}
.settings-row:hover {background:var(--soft)}
.settings-row:active {background:#dce7d7}
@media(max-width:880px) {
  .welcome.welcome-compact {padding:20px; gap:16px}
  .welcome-compact .hero-book {display:none}
  .welcome-compact .hero-pet {width:104px; height:104px}
}
@media(max-width:650px) {
  .sidebar .configuration-entry {display:inline-flex; grid-row:1; grid-column:2; margin:0; width:auto; padding:8px; font-size:.875rem}
  .welcome.welcome-compact {padding:16px; gap:12px}
  .welcome-compact h2 {font-size:1.125rem; margin:0 0 12px}
  .welcome-compact .hero-pet {width:88px; height:88px}
}

/* Secondary shelf instructions appear on demand; the companion softens the sidebar. */
.sidebar-pet {margin-top:auto; padding:24px 12px 12px}
.sidebar-pet img {display:block; width:112px; height:112px; max-width:100%; object-fit:contain; margin:auto}
.shelf-heading {position:relative; display:flex; align-items:center; gap:4px; min-width:0}
.shelf-help-trigger,.import-help-trigger {display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:8px; border-radius:12px; color:var(--muted)}
.shelf-help-trigger:hover,.shelf-help-trigger[aria-expanded="true"],.import-help-trigger:hover,.import-help-trigger[aria-expanded="true"] {background:var(--soft); color:var(--green)}
.shelf-help-tip {position:absolute; left:0; top:100%; z-index:4; width:min(320px,calc(100vw - 32px)); padding-top:8px}
.shelf-help-tip[hidden] {display:none}
.shelf-help-card {padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px #243e3620}
.section-heading .shelf-help-card p,.import-help .shelf-help-card p {margin:0; font-size:.875rem; line-height:1.7; color:var(--ink); overflow-wrap:anywhere}
.section-heading .shelf-help-card p+p,.import-help .shelf-help-card p+p {margin-top:8px; color:var(--muted)}
@media(max-width:650px) {.sidebar-pet {display:none}}

/* Public library shares book content; every family's practice stays on its own shelf. */
.shelf-empty {margin:8px 0 24px}
.shelf-empty .notice {margin-bottom:12px}
.public-intro {color:var(--muted);line-height:1.7;margin:-8px 0 24px}
.public-search {max-width:620px;margin:0 0 24px}
.public-search label {display:block;font-size:.875rem;font-weight:600;margin-bottom:8px}
.public-search>div {display:flex;gap:8px;align-items:stretch}
.public-search input {min-width:0;flex:1;border-color:var(--muted)!important}
.public-search button {flex:none;min-height:48px}
.public-count,.public-privacy {font-size:.875rem;color:var(--muted);line-height:1.7;margin:16px 0}
.public-privacy {border-top:1px solid var(--line);padding-top:16px;margin-top:32px}
.public-status {padding:32px 16px;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.public-status h2 {font-size:1.25rem}
.public-status p {color:var(--muted);line-height:1.7;margin:12px 0 20px}
.public-book-card {display:flex;flex-direction:column}
.public-book-card .book-info {padding:16px 4px 12px;flex:1}
.public-book-card h2 {font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.public-book-card .book-info p {font-size:.8125rem;margin-top:8px;color:var(--muted);line-height:1.6}
.public-card-actions {display:flex;flex-wrap:wrap;gap:8px}
.public-card-actions button {flex:1;white-space:normal;min-width:0;padding:10px 8px;font-size:.875rem;min-height:48px}
.public-image-fallback {color:var(--muted);font-size:.875rem;line-height:1.6}
.public-image-fallback[hidden],.public-preview img[hidden],.public-book-card img[hidden] {display:none}
.public-pagination {display:grid;grid-template-columns:minmax(0,96px) minmax(0,auto) minmax(0,96px);align-items:center;justify-content:center;gap:16px;margin:24px 0 0}
.public-pagination button {min-height:44px;min-width:0;padding:10px 8px;white-space:normal}
.public-pagination span {color:var(--muted);font-size:.875rem;text-align:center;font-variant-numeric:tabular-nums}
#dialog:has(.public-preview) {max-width:760px}
.public-preview-image {position:relative;display:grid;place-items:center;background:var(--soft);border-radius:12px;min-height:160px;overflow:hidden}
.public-preview-image img {display:block;width:100%;height:auto;max-height:50dvh;object-fit:contain}
.public-preview-image .public-image-fallback {padding:24px;text-align:center}
.public-preview .public-pagination {margin:16px 0}
.public-preview .public-pagination .secondary {margin:0;min-width:0}
.public-preview-text {font-family:Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}
.public-preview-action {border-top:1px solid var(--line);padding-top:16px;text-align:center}
.public-preview-action button {min-height:48px;width:100%;margin:0!important}
.public-preview-action p {margin:8px 0 0}
@media(max-width:650px) {
  .sidebar nav {gap:4px}
  .sidebar nav .nav {padding:8px 4px;gap:4px;min-width:0;white-space:normal;flex-shrink:1;font-size:.8125rem;min-height:48px}
  .sidebar nav .nav .icon {display:none}
  .public-book-grid {gap:12px}
  .public-card-actions {display:grid;grid-template-columns:1fr}
  .public-book-card .cover-wrap {height:168px;padding:12px}
  .public-pagination {gap:8px}
  .public-pagination button {padding:10px 8px}
  .public-pagination span {font-size:.8125rem}
  .public-preview .public-pagination .secondary {min-width:0}
}
/* Live preview uses the recording stream and takes space only while the camera is on. */
.reader-visuals.with-camera{display:grid;grid-template-columns:minmax(0,1fr) 148px;align-items:start;background:#fdfcf8}
.reader-visuals .page-area{min-width:0}
.reading-camera{min-width:0;margin:16px 16px 0 0}
.reading-camera-preview{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transform:scaleX(-1);border-radius:12px;background:var(--soft)}
.reading-camera>span{display:block;margin-top:4px;text-align:center;font-size:.75rem;line-height:1.5;color:var(--muted)}
@media(max-width:650px){
  .reader-visuals.with-camera{grid-template-columns:minmax(0,1fr) 96px}
  .reading-camera{margin:12px 12px 0 0}
  .record-bar.is-recording{flex-wrap:wrap;gap:8px}
  .is-recording .record-status{flex:1 1 100%;align-items:flex-start}
  .is-recording .record-status>div{flex:1;min-width:0}
  .is-recording .record-status small{display:none}
  .is-recording .record-dot{margin-top:.5em}
  .is-recording .mic-level{margin:4px 0 0}
  .is-recording .record-right{flex:1 1 100%;flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:8px}
}
/* Recording choices appear only when the reader starts a recording. */
.recording-choice-actions{display:flex;gap:12px;flex-wrap:wrap}
.recording-choice-actions .primary,.recording-choice-actions .secondary{flex:1 1 180px;min-height:48px;margin:0}
.recording-choice .notice{color:var(--danger)}


/* Family-authorized classroom flow: reuse field-notes palette and 44px targets. */
.teacher-classes,.my-classes {min-width:0}
.class-workspace {display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.class-list {background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;min-width:0}
.class-list h2,.class-panel h2 {font-size:1.125rem}
.class-section-title,.class-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.class-section-title h3 span,.class-roster h3 span {color:var(--muted);font-weight:400;font-size:.875rem}
.class-choice {display:flex;flex-direction:column;text-align:left;gap:4px;width:100%;min-height:64px;border:1px solid transparent;border-radius:12px;padding:12px;margin-top:8px;overflow-wrap:anywhere}
.class-choice small,.class-student-open small,.class-application small {display:block;color:var(--muted);font-size:.8125rem;line-height:1.6}
.class-choice:hover,.class-student-open:hover {background:var(--canvas)}
.class-choice[aria-pressed="true"],.class-student-open[aria-pressed="true"] {background:var(--soft);border-color:var(--green)}
.class-main {min-width:0}
.class-heading h2 {font-size:1.5rem}
.class-heading p {font-size:.875rem;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}
.class-heading>div {min-width:0}
.class-code {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:var(--soft);border-radius:16px;margin:0 0 24px}
.class-code small {display:block;color:var(--muted);font-size:.875rem}
.class-code strong {font-size:1.375rem;letter-spacing:.12em;overflow-wrap:anywhere}
.class-panel {padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:20px;min-width:0}
.class-panel+.class-panel {margin-top:24px}
.class-note {margin:16px 0;color:var(--muted);font-size:.875rem;line-height:1.75}
.class-empty {padding:40px 24px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.class-empty h2 {margin:16px 0 8px}.class-empty p {max-width:480px;margin:0 auto 24px;color:var(--muted)}
.class-applications {margin:12px 0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.class-application,.class-history-choice {display:flex!important;align-items:center;gap:12px;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.class-application input,.class-history-choice input,.registration-roles input {flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:0;accent-color:var(--green)}
.class-application span {min-width:0;overflow-wrap:anywhere}
.class-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.class-actions button {min-height:44px;white-space:normal;margin:0!important}.class-actions .primary {min-height:48px}
.class-reading-grid {display:grid;grid-template-columns:minmax(190px,.9fr) minmax(0,1.4fr);gap:16px;margin-top:24px;align-items:start}
.class-reading-grid>.class-panel {margin:0}
.class-search-label {display:block;font-size:.8125rem;color:var(--muted);margin:16px 0 8px}
.class-roster input[type="search"] {width:100%;min-width:0;font-size:.875rem;min-height:44px}
.class-student {margin-top:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.class-student-open {display:flex;align-items:center;text-align:left;gap:8px;width:100%;border:1px solid transparent;border-radius:12px;padding:8px;min-height:64px}
.class-student-open>span:nth-child(2) {flex:1;min-width:0;overflow-wrap:anywhere}
.class-student-open strong {font-size:.875rem}.class-student-open .icon {width:16px}
.class-avatar {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--green)}
.class-remove {color:var(--danger);font-size:.8125rem;min-width:44px;margin-left:4px}
.class-work {padding:20px 0;border-top:1px solid var(--line);margin-top:16px}
.class-work h4 {font-size:1.125rem;line-height:1.5;overflow-wrap:anywhere;margin-top:8px}
.class-work p {font-size:.8125rem;color:var(--muted);margin:8px 0 16px}
.class-work .pill {font-size:.75rem}.class-work .secondary {font-size:.875rem;padding:8px 12px}
.class-homework>.tiny {margin-top:8px}
.class-form-error {color:var(--danger);font-size:.875rem;min-height:24px;margin:8px 0}
.class-dialog label:not(.class-history-choice) {display:block;margin:16px 0 8px;font-weight:600}
.class-dialog input:not([type="checkbox"]),.class-dialog textarea,.class-dialog select {display:block;width:100%;min-width:0;min-height:48px}
.class-dialog .class-actions {margin-top:16px}.class-dialog .class-actions button {flex:1}
.class-sharing-note {background:var(--soft);border-radius:12px;padding:16px;font-size:.875rem;line-height:1.75;margin:16px 0!important}
.class-history-choice {font-weight:400;font-size:.875rem;margin-bottom:12px}
.class-media audio,.class-media video {display:block;width:100%;max-width:100%;margin:20px 0}
.class-media video {max-height:56dvh;background:#111;border-radius:12px}
.class-media h3,.class-media p {overflow-wrap:anywhere}.class-media p {font-size:.875rem}
.class-media-error {color:var(--danger)}
.class-media [hidden] {display:none!important}
#dialog:has(.class-media) {max-width:800px}
.my-classes {max-width:820px}
.class-join-row {display:flex;gap:12px;margin-top:8px}.class-join-row input {flex:1;min-width:0;width:0;min-height:48px}
.class-membership {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid var(--line);margin-top:16px}
.class-membership>div {min-width:0;overflow-wrap:anywhere}.class-membership p,.class-membership small {font-size:.875rem;color:var(--muted)}
.registration-roles {border:0;padding:0;margin:20px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.registration-roles legend {font-weight:600;padding:0 0 8px}
.parent-login .registration-roles label {display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;min-height:72px;cursor:pointer;min-width:0}
.registration-roles label:has(input:checked) {background:var(--soft);border-color:var(--green)}
.registration-roles strong,.registration-roles small {display:block}.registration-roles small {font-size:.75rem;font-weight:400;color:var(--muted);line-height:1.6}
@media(max-width:1180px) {.class-workspace {grid-template-columns:180px minmax(0,1fr);gap:16px}.class-reading-grid {grid-template-columns:1fr}.class-reading-grid>.class-panel {margin:0}}
@media(max-width:880px) {.class-workspace {grid-template-columns:1fr}.class-list {display:flex;gap:8px;flex-wrap:wrap;padding:12px}.class-list .class-section-title {width:100%;margin:0}.class-choice {flex:1 1 140px;width:auto;margin:0}.class-panel {padding:16px}}
@media(max-width:650px) {
  .class-heading {align-items:flex-start;flex-wrap:wrap}.class-code {padding:12px;gap:8px;flex-wrap:wrap}
  .class-code strong {font-size:1.25rem}.class-code .secondary {padding:8px 12px;font-size:.875rem}
  .class-empty {padding:24px 16px}.class-applications {grid-template-columns:1fr}
  .class-actions button {flex:1;min-width:0;padding:8px 12px}
  .class-panel {border-radius:16px}.class-section-title h3 {font-size:1rem}
  .class-join-row {flex-wrap:wrap}.class-join-row input {flex:1 1 160px;width:100%}.class-join-row button {flex:1 1 120px}
  .class-membership {align-items:flex-start;flex-wrap:wrap}.class-membership .text-button {padding:8px 0}
  .registration-roles {grid-template-columns:1fr}.parent-login .registration-roles label {min-height:56px}
  body[data-route="teacher"] .sidebar nav .nav {flex:1 1 25%;font-size:.75rem}
}

.parent-login .registration-roles input {width:20px;min-height:20px;height:20px;margin:0}
.class-roster input[type="search"] {border:1px solid #75877b;border-radius:12px;padding:10px 12px;background:var(--paper)}


/* The shared family shelf is home; importing books is a parent action. */
.sidebar-parent-actions{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.sidebar-section-label{display:block;padding:0 16px 8px;color:var(--muted);font-size:.75rem;line-height:1.5}
.sidebar .parent-import-entry{min-height:48px;white-space:normal}
.family-topbar{flex-wrap:wrap}
.family-topbar .reward-entry{margin-left:auto;max-width:100%;min-height:48px;background:var(--warm);border-color:#d9c99b;color:#66511e;white-space:normal}
.family-topbar .reward-entry:hover{background:#f5e9c8}
@media(max-width:650px){
 .sidebar-parent-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding-top:8px}
 .sidebar-section-label{padding:0;font-size:.75rem}
 .sidebar .parent-import-entry{flex:0 1 auto;padding:8px 12px;font-size:.875rem}
 .family-topbar{gap:12px}
}


/* Child home starts with the bookshelf; secondary tools stay in navigation. */
.shelf-title{font-size:1.5rem;letter-spacing:-.02em;line-height:1.4}
.shelf-title span{font-size:.8125rem;font-weight:500;margin-left:8px;color:var(--muted)}
.shelf-empty{display:flex;flex-wrap:wrap;gap:12px}.shelf-empty .notice{flex-basis:100%;margin:0}.shelf-empty button{white-space:normal}


/* Weekly reading reports are a child page of the family home. */
.family-nav{min-width:0}
.family-subnav{margin:8px 0 0 20px;padding-left:8px;border-left:1px solid var(--line)}
.family-report-link{display:block;width:100%;min-height:44px;padding:8px;text-align:left;border-radius:8px;font-size:.8125rem;line-height:1.5;color:var(--muted);white-space:normal}
.family-report-link:hover,.family-report-link.active{background:var(--soft);color:var(--green)}
.family-report-link.active{font-weight:700}
.parent-report-page{max-width:56rem}
.parent-report-back{margin-bottom:16px;white-space:normal}
.parent-report-heading{margin-bottom:24px}
.parent-report-heading p{margin-top:8px;color:var(--muted);overflow-wrap:anywhere}
.parent-report-content{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px}
.parent-report-content h2{font-size:1.125rem;margin-bottom:8px}
.parent-report-content p{font-size:.875rem;line-height:1.8;overflow-wrap:anywhere}
.parent-report-content .parent-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:24px 0}
.parent-report-content .parent-stats>div{background:var(--soft);padding:16px;overflow-wrap:anywhere}
.parent-report-content .parent-stats strong{font-size:1.75rem;color:var(--green)}
.parent-report-content .parent-stats span{font-size:.875rem;color:var(--muted)}
.parent-report-content .primary,.parent-report-content .secondary{margin-top:16px;max-width:100%;white-space:normal}
.parent-report-content .tiny{margin-top:24px;color:var(--muted)}
@media(max-width:650px){
 .sidebar nav{flex-wrap:wrap}
 .family-nav{display:contents}
 .family-subnav{order:2;flex:1 0 100%;margin:0;border-left:0;border-top:1px solid var(--line);padding:4px 0 0}
 .family-report-link{width:auto;padding:8px 12px}
 .parent-report-content{padding:16px;border-radius:16px}
}


.import-help{position:relative;display:flex;align-items:center;min-width:0}.import-help-trigger{flex:0 0 44px}.import-help .parent-import-entry{min-width:0;flex:1}.import-help-tip{z-index:20}
@media(max-width:650px){.import-help-tip{left:auto;right:0}.import-help{flex:0 1 auto}}

/* One child-facing sequence under the book; it never floats over the picture. */
.reading-intro{margin:12px 0 0;color:var(--green);font-size:1rem}
.record-bar.reading-flow{position:static;inset:auto;z-index:auto;display:block;margin:0;padding:20px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--soft)}
.reading-flow-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.reading-flow-heading strong{font-size:1rem}.record-clock{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums;font-size:.875rem}
.reading-flow-hint{margin:8px 0 12px;font-size:.875rem;line-height:1.6;color:var(--ink)}
.reading-steps{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:8px;align-items:stretch}.reading-steps.single-step{grid-template-columns:1fr}.step-arrow{align-self:center;text-align:center;color:var(--green)}
.reading-flow .reading-step{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:56px;white-space:normal;padding:10px 12px;border:1px solid var(--green);color:var(--green);background:var(--paper);line-height:1.5}
.reading-step .step-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:12px}
.reading-flow[data-next="listen"] .teacher-step,.reading-flow[data-next="record"] .recording-step:not(.danger){background:var(--green);color:white}.reading-flow .recording-step.danger{background:var(--danger);color:white;border-color:var(--danger)}
.reading-flow .tiny{margin:8px 0 0;font-size:.875rem}.reading-flow-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px}.reading-flow-tools small{font-size:.875rem;color:var(--muted)}.reading-flow-tools .text-button{min-height:44px;font-size:.875rem}
@media(max-width:650px){.record-bar.reading-flow{padding:16px}.reading-flow .reading-step{font-size:.875rem;padding:8px 6px;gap:4px}.reading-step .step-number{width:18px;height:18px;flex-basis:18px}.reading-flow .mic-meter{width:100%}}
@media(max-width:359px){.reading-steps{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:6px}.reading-steps.single-step{grid-template-columns:1fr}}

/* Phone navigation stays in document flow so it cannot cover reports or their return controls. */
@media(max-width:650px){body:not([data-route="reader"]) .sidebar{position:static}}

/* Keep page geometry and controls stable while an image is loading. */
.reader-image-status{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;background:var(--paper,#fff);color:var(--ink,#243e36);text-align:center;z-index:2}
.reader-image-status[hidden]{display:none}
.page-image[data-image-state="loading"] .word-boxes,.page-image[data-image-state="error"] .word-boxes{visibility:hidden}