/* [bedtime] Keep listening (the listening controls and the word being read) and bedtime mode (the
   dark warm theme, the moon button, the time-left chip, the Good night scene and the kid home's
   "Bedtime story"). public/listen.js, public/bedtime.js, public/library.js, public/picturebook.js. */

/* ---------- keep listening ---------- */

/* The word Hazel is saying (a highlight range: the text itself is never changed). */
::highlight(lib-now) { background-color: color-mix(in srgb, var(--accent) 55%, transparent); color: inherit; }
.reader .speaking { transition: background-color var(--dur-fast); }

/* The second row of the tool bar while she reads: back, play or pause, forward, next chapter, speed. */
.lib-listen-row { justify-content: center; gap: var(--space-2); min-height: 56px; padding-top: 4px; padding-bottom: 0; }
.lib-listen-row[hidden] { display: none; }
.lib-play {
  flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: var(--radius-full);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.2));
  transition: transform var(--dur-fast), background-color var(--dur-fast);
}
.lib-play:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.lib-play:active { transform: scale(0.95); }
.lib-play-icon, .lib-play-icon .ui-icon { display: block; width: 26px; height: 26px; }
.lib-play .ui-icon { fill: currentColor; }
.lib-speed {
  flex: none; min-height: var(--tap); min-width: 72px; padding: 0 14px; border-radius: var(--radius-full);
  border: 1.5px solid color-mix(in srgb, var(--lib-ink) 22%, transparent); background: transparent; color: var(--lib-ink);
  font: var(--weight-strong) var(--text-sm) / 1 var(--font-body); cursor: pointer;
}
.lib-speed:hover { background: color-mix(in srgb, var(--lib-ink) 6%, transparent); }
.lib-play:focus-visible, .lib-speed:focus-visible, .bt-chip:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
@media (max-width: 400px) {
  .lib-listen-row { gap: var(--space-1); }
  .lib-speed { min-width: 0; padding: 0 10px; }
}
/* A phone on its side: a slimmer row, so the page keeps its room. */
@media (orientation: landscape) and (max-height: 500px) {
  .lib-listen-row { min-height: 46px; padding-top: 2px; }
  .lib-play { width: 44px; height: 44px; }
}

/* ---------- bedtime mode ---------- */

.bt-moon-btn.is-on { background: var(--accent); color: var(--accent-ink) !important; }
.bt-chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: var(--tap); padding: 0 12px; border: 0; border-radius: var(--radius-full); /* [a11y2] min-width: 44px even when only the moon shows */
  background: color-mix(in srgb, var(--lib-ink, var(--pb-ink, currentColor)) 10%, transparent); color: inherit;
  font: var(--weight-strong) var(--text-xs) / 1 var(--font-body); white-space: nowrap; cursor: pointer;
}
.bt-chip[hidden] { display: none; }
@media (max-width: 400px) { .lib-listen-row .bt-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* The dark warm theme: low light, no blue, for reading in bed. */
body.olly-bedtime { --accent: #B07A34; --accent-ink: #1A1108; --focus: #8AB4FF; --focus-inner: #0A0F1F; /* [a11y2] #B07A34: 5:1 with its dark text (was 4.4); the evening focus ring on the dark page */ background: #0E0A06; color-scheme: dark; }
body.olly-bedtime.lib-reading { --lib-page: #0E0A06; --lib-ink: #C9AE86; --lib-soft: #937C5C; /* [a11y2] soft text 5:1 (was 4.3) */ --lib-mark: #3A2711; --lib-rule: #2A1E12; }
body.olly-bedtime.pb-open { --pb-page: #0E0A06; --pb-ink: #C9AE86; --pb-mark: #3F2B12; --pb-now: #8C5E22; }
body.olly-bedtime .pb-pic img, body.olly-bedtime .reader figure.lib-pic img { filter: brightness(0.62) sepia(0.25); }
body.olly-bedtime #top { background: #0E0A06; color: #C9AE86; }
body.olly-bedtime #top .ui-sky { filter: brightness(0.45) sepia(0.3); }
body.olly-bedtime ::highlight(lib-now) { background-color: #6B4718; }
body.olly-bedtime .lib-tools, body.olly-bedtime .pb-bar { border-top-color: #2A1E12; }
.bt-sheet .ui-chips { margin-top: 4px; }

/* The Good night scene. */
.bt-night {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; padding: var(--space-4);
  background: radial-gradient(ellipse at 50% 30%, #1C2440 0%, #0D1222 55%, #05070D 100%); color: #E9DCC0;
  padding-top: max(var(--space-4), env(safe-area-inset-top)); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}
.bt-night-body { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-3); text-align: center; max-width: 30rem; }
.bt-night h2 { margin: 0; font: var(--weight-display, 800) clamp(30px, 7vw, 46px) / 1.1 var(--font-display); color: #F6E7C4; text-wrap: balance; }
.bt-night p { margin: 0; font: 500 var(--text-md, 17px) / 1.5 var(--font-body); color: #CDBF9F; max-width: 24rem; }
.bt-moon { color: #F2C77A; filter: drop-shadow(0 0 22px rgba(242, 199, 122, 0.45)); }
.bt-moon .ui-icon { fill: #F2C77A; stroke: #F2C77A; }
.bt-night .bt-night-close { margin-top: var(--space-2); background: transparent; color: #E9DCC0; border-color: rgba(233, 220, 192, 0.35); }
.bt-stars { position: absolute; inset: 0; z-index: 0; }
.bt-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF4D6; opacity: 0.55; animation: bt-twinkle 4.2s ease-in-out infinite; }
.bt-stars i:nth-child(3n) { width: 2px; height: 2px; }
.bt-glow { position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none; }
@keyframes bt-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .bt-stars i { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) { .bt-night-body { gap: var(--space-2); } .bt-moon .ui-icon { width: 48px; height: 48px; } }

/* "Bedtime story" on the kid home, in the evening. */
.bt-card { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card, 20px); background: linear-gradient(160deg, #1E2745, #121831); color: #EDE3CC; }
.bt-card-top { display: flex; align-items: center; gap: var(--space-3); }
.bt-card-top p { margin: 0; font: 600 var(--text-sm) / 1.4 var(--font-body); }
.bt-card-moon { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(242, 199, 122, 0.15); color: #F2C77A; }
.bt-card-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.bt-card-books .lib-book-title, .bt-card-books .lib-book-sub { color: #EDE3CC; }
@media (min-width: 700px) { .bt-card-books { grid-template-columns: repeat(3, minmax(0, 150px)); } }

/* Picture books: the moon joins Read to me, Tap words and the voice; on a phone the time left is in
   the moon's sheet instead of a chip, and Read to me is an icon, so all four fit between the big arrows. */
.pb-actions .bt-moon-btn { color: var(--pb-ink); }
@media (max-width: 600px) { .pb-actions .bt-chip { display: none; } }
@media (max-width: 480px) {
  .pb-actions .pb-read { padding: 0; }
  .pb-actions .pb-read .pb-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-actions { gap: var(--space-1); }
  .pb-actions > :is(.pb-btn, .ui-iconbtn) { --tap: 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; } /* 44px is still a full tap target, also for little ones */
}
body.olly-bedtime .pb-tap[aria-pressed="true"] { background: #3F2B12; border-color: #8C5E22; color: var(--pb-ink); }

/* [a11y2] A very narrow screen (a phone at 200% zoom): the reader's tool rows and the picture book's
   bar wrap onto a second line instead of running off the side. */
@media (max-width: 340px) {
  .lib-tools-row, .lib-listen-row, .pb-actions { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .lib-tools-row .lib-where { order: -1; flex-basis: 100%; }
  .pb-bar { flex-wrap: wrap; justify-content: center; }
  .pb-middle { order: -1; flex-basis: 100%; }
}