/* The Library (public/library.js, public/picturebook.js) on the shared tokens (public/ui/tokens.css)
   and ui- components: the bookshop shelf with covers, a book's details sheet, the text reader with its
   slim toolbar and sheets, and the picture book reader. The book pages keep their paper look (they
   are the content). Loaded from index.html. */

:where(:root) {
  --lib-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter", Georgia, serif;
  --lib-plank: #CFAE80;
  --lib-plank-top: #E6CDA6;
  --lib-plank-deep: #A9855A;
}
:where(:root[data-theme="dark"]) { --lib-plank: #54432F; --lib-plank-top: #6E5A40; --lib-plank-deep: #3A2E20; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) { --lib-plank: #54432F; --lib-plank-top: #6E5A40; --lib-plank-deep: #3A2E20; }
}

/* =============================== the shelf =============================== */

.lib-screen { display: grid; gap: var(--space-5); }
.lib-screen .ui-section-head .ui-badge { align-self: center; }

/* A shelf: covers standing on a wooden plank. A row that scrolls sideways on a phone, a grid on a tablet. */
.lib-shelf {
  --lib-w: 112px; --lib-gap: var(--space-4);
  display: flex; gap: var(--lib-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  margin: 0 calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4) var(--space-3); scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
}
.lib-shelf::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .lib-shelf { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); scroll-padding-inline: var(--space-3); } }
.lib-shelf-item { flex: 0 0 var(--lib-w); min-width: 0; scroll-snap-align: start; display: grid; }
:where([data-skin="little"]) .lib-shelf { --lib-w: 148px; --lib-gap: var(--space-5); }
@media (min-width: 700px) {
  .lib-shelf {
    --lib-w: 128px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lib-w), 1fr)); row-gap: var(--space-5);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  :where([data-skin="little"]) .lib-shelf { --lib-w: 176px; }
}
/* [launch5] The kid home's picture books stay one sideways row on a tablet too (all of them in a grid
   pushed the games far down the home). */
@media (min-width: 700px) {
  .lib-shelf.lib-shelf--row {
    display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4);
  }
}
/* [speed2] On a phone, a shelf that is not near the screen is not laid out or drawn until it scrolls
   close (content-visibility): the Library has about 490 covers on a dozen shelves, and laying them
   all out took about half a second on a slow phone before the first ones showed. A shelf already
   clips to its box (it scrolls sideways), so nothing looks different. The height is a guess until the
   shelf has been drawn once, then the real one is remembered ("auto"). */
@media (max-width: 699px) {
  .lib-shelf { content-visibility: auto; contain-intrinsic-block-size: auto 260px; }
  :where([data-skin="little"]) .lib-shelf { contain-intrinsic-block-size: auto 320px; }
  /* The same for the covers of a shelf that are off to the side (a shelf can hold 100 books). The
     width is the tile's own; the height a small guess (the row takes its tallest drawn tile). */
  .lib-shelf-item { content-visibility: auto; contain-intrinsic-size: auto var(--lib-w) auto 120px; }
}
/* [rehearsal2] A tablet shelf shows two rows until "See all" (public/library.js twoRows). */
.lib-shelf-item.is-more { display: none; }
.lib-screen .ui-section-head .lib-seeall { margin-left: auto; }
/* [ux] Books found by the search: a grid that wraps (no sideways scrolling). */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-5) var(--space-3); padding-top: var(--space-2); }

.lib-book { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.lib-cover-box { position: relative; display: block; padding-bottom: 10px; container-type: inline-size; }
.lib-cover-box::after {
  content: ""; position: absolute; left: calc(var(--lib-gap, 16px) / -2 - 1px); right: calc(var(--lib-gap, 16px) / -2 - 1px); bottom: 0; height: 12px;
  background: linear-gradient(var(--lib-plank-top), var(--lib-plank) 35%, var(--lib-plank-deep));
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.5);
}
.lib-book .lib-cover { transition: transform var(--dur-fast) var(--press-ease), box-shadow var(--dur-med); transform-origin: 50% 100%; }
.lib-book:hover .lib-cover { transform: translateY(-4px); }
.lib-book:active .lib-cover { transform: scale(var(--press-scale)); }
.lib-book-title { font: var(--weight-strong) var(--text-sm) / 1.25 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-book-sub { font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where([data-skin="little"]) .lib-book-title { font-size: var(--text-md); text-align: center; }
:where([data-skin="little"]) .lib-book-sub { display: none; }

/* A cover: the real one (a picture), or cloth with a gold frame, the title and the author. */
.lib-cover {
  --cloth: #2F6F9F;
  position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; gap: 4px; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  padding: 16% 11% 12% 17%; border-radius: 3px 8px 8px 3px; text-align: center; color: #FFF6DF;
  background: radial-gradient(130% 70% at 75% 0%, rgba(255, 255, 255, 0.18), transparent 60%), var(--cloth);
  box-shadow: 0 12px 18px -12px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.18);
}
.lib-cover::before { content: ""; position: absolute; inset: 7% 7% 7% 13%; border: 1.5px solid rgba(255, 236, 190, 0.55); border-radius: 4px; pointer-events: none; }
.lib-cover::after { /* the spine */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.08) 4%, rgba(255, 255, 255, 0.16) 5.5%, transparent 8%);
}
.lib-cover-title {
  align-self: center; font: var(--weight-display) clamp(11px, 13cqw, 24px) / 1.12 var(--font-display); overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.lib-cover.is-long .lib-cover-title { font-size: clamp(10px, 11cqw, 20px); }
.lib-cover-author { font: 600 clamp(8px, 8cqw, 14px) / 1.2 var(--font-body); opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-cover.has-pic { display: block; padding: 0; background: #FFFFFF; }
.lib-cover.has-pic::before { display: none; }
.lib-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* How far into a book: streetlights (little ones and kids) or a thin bar (teens and grown-ups). */
.lib-progress-bar { display: block; height: 4px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.lib-progress-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lib-progress-lights { display: block; line-height: 0; }
.lib-progress-lights .ui-streetlights { gap: 4px; }
.lib-progress-lights .ui-streetlight { width: 14px; height: 26px; }
:where([data-skin="little"]) .lib-progress-lights { text-align: center; }
:where([data-skin="little"]) .lib-progress-lights .ui-streetlight { width: 18px; height: 34px; }

/* Teens: a calm list with small covers. */
.lib-thumb { flex: none; display: block; width: 40px; container-type: inline-size; }
.lib-thumb .lib-cover { padding: 0; border-radius: 2px 4px 4px 2px; box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.35); }
.lib-thumb .lib-cover::before { inset: 10% 10% 10% 16%; border-width: 1px; }
.lib-thumb .lib-cover:not(.has-pic) > span { display: none; }
.lib-thumb .lib-cover.has-pic::before { display: none; }

/* A book's details (a sheet). */
.lib-detail { display: grid; gap: var(--space-4); }
.lib-detail-top { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.lib-detail-cover { display: block; container-type: inline-size; }
.lib-detail-info { display: grid; gap: 4px; align-content: start; justify-items: start; }
.lib-detail-author { font-weight: var(--weight-strong); font-size: var(--text-md); }
.lib-detail-facts { font-size: var(--text-sm); }
.lib-detail-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); }
.lib-detail-progress .lib-progress-bar { width: 72px; }
.lib-detail-info .ui-badge { margin-top: var(--space-1); }
.lib-detail-blurb { font: 17px / 1.55 var(--lib-serif); }
:where([data-skin="little"]) .lib-detail-top { grid-template-columns: 140px minmax(0, 1fr); }

/* =============================== the text reader =============================== */

/* Page colors: day, sepia and night. The whole screen takes the page color while reading. */
body.lib-page-day { --lib-page: #FFFDF8; --lib-ink: #231F1A; --lib-soft: #766C5F; --lib-mark: #FFE3A3; --lib-rule: #E9E1D2; }
body.lib-page-sepia { --lib-page: #F3E9D4; --lib-ink: #392D21; --lib-soft: #7C6A54; --lib-mark: #F0CC82; --lib-rule: #DCCBAB; }
body.lib-page-night { --lib-page: #14161B; --lib-ink: #D7D1C4; --lib-soft: #8E887C; --lib-mark: #564816; --lib-rule: #2A2D35; }
body.lib-reading:is(.lib-page-day, .lib-page-sepia, .lib-page-night) { background: var(--lib-page); }
body.lib-reading .ui-main { padding-bottom: 0; }

.reader { color: var(--lib-ink); padding: var(--space-4) var(--space-2) var(--space-3); min-width: 0; }
.reader article {
  font-family: var(--lib-serif); max-width: 34em; margin: 0 auto;
  font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
.reader.s article { font-size: 17px; line-height: 1.6; }
.reader.m article { font-size: 20px; line-height: 1.62; }
.reader.l article { font-size: 24px; line-height: 1.66; }
.reader.xl article { font-size: 30px; line-height: 1.66; }
@media (max-width: 480px) { .reader.m article { font-size: 19px; } .reader.l article { font-size: 23px; } .reader.xl article { font-size: 28px; } }
.reader.easy article { font-family: var(--font-body); letter-spacing: 0.05em; word-spacing: 0.16em; line-height: 2; max-width: 30em; }
.reader article p { margin: 0 0 0.85em; text-align: left; hyphens: manual; overflow-wrap: break-word; } /* a very long word (the picnic basket in The Wind in the Willows) wraps instead of widening the page */
.reader article p.verse { white-space: pre-line; padding-left: 1em; }
.reader article h2 { font: 700 1.3em / 1.2 var(--lib-serif); text-align: center; margin: 0.8em 0 1.3em; color: var(--lib-ink); text-wrap: balance; }
.reader article h2::after { content: ""; display: block; width: 2.4em; height: 1px; margin: 0.7em auto 0; background: var(--lib-soft); opacity: 0.55; }
.reader.easy article h2 { font-family: var(--font-display); }
.reader article h3 { font: 700 1.05em / 1.3 var(--lib-serif); margin: 1.4em 0 0.6em; color: var(--lib-ink); }
.reader .lib-head { display: grid; gap: 0.25em; justify-items: center; text-align: center; margin: 0.6em 0 1.8em; font: 600 15px / 1.35 var(--font-body); color: var(--lib-soft); }
.reader .lib-head b { font: var(--weight-display) clamp(28px, 6.5vw, 42px) / 1.08 var(--font-display); color: var(--lib-ink); text-wrap: balance; margin-bottom: 0.3em; }
.reader .lib-head-year { font-size: 13px; letter-spacing: 0.08em; }
.lib-ornament { display: block; width: 44px; height: 6px; margin-top: 0.6em; opacity: 0.6;
  background: radial-gradient(circle, var(--lib-soft) 2px, transparent 2.5px) 0 0 / 14px 6px repeat-x; }
.reader .speaking { background: var(--lib-mark); color: inherit; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.reader .lib-end {
  display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--lib-rule);
  font: var(--text-sm) / 1.45 var(--font-body); color: var(--lib-soft); break-inside: avoid;
}
.reader .lib-end .ui-btn { font-size: var(--text-md); }
.reader .lib-end .ui-btn--ghost { color: var(--lib-ink); }
.reader .lib-the-end { font: var(--weight-display) 30px / 1.1 var(--font-display); color: var(--lib-ink); text-align: center; margin: var(--space-2) 0; }
@media (max-width: 560px) { .reader { padding: var(--space-3) var(--space-2) var(--space-2); } }

/* Pictures inside books fit the page in both reading styles. */
.reader figure.lib-pic { margin: 0.2em 0 1.1em; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.reader figure.lib-pic img {
  --pic-h: 70vh; display: block; margin: 0 auto; height: auto; border-radius: 6px; background: #FFFFFF;
  width: min(100%, calc(var(--w) * 1.25px), calc(var(--pic-h) * var(--w) / var(--h)));
}
.reader .lib-pages figure.lib-pic img { --pic-h: var(--lib-pic-h, 60vh); }
/* [ios] vh on iPhone is the height with Safari's bars hidden: svh (bars showing) keeps pictures on screen. */
@supports (height: 1svh) {
  .reader figure.lib-pic img { --pic-h: 70svh; }
  .reader .lib-pages figure.lib-pic img { --pic-h: var(--lib-pic-h, 60svh); }
}
.reader figure.lib-pic figcaption { font: italic 0.72em / 1.35 var(--font-body); color: var(--lib-soft); margin-top: 0.45em; }
body.lib-page-night .reader figure.lib-pic img { filter: brightness(0.88); }

/* Turning pages: the chapter is laid out in columns one page wide; the article slides left. */
.lib-pages { overflow: hidden; margin: 0 auto; touch-action: pan-y pinch-zoom; contain: inline-size; }
.reader .lib-pages article { max-width: none; margin: 0; column-fill: auto; transition: transform 0.3s ease; }
.reader .lib-pages article.still { transition: none; }
.reader .lib-pages article p { orphans: 2; widows: 2; }
@media (prefers-reduced-motion: reduce) { .reader .lib-pages article { transition: none; } }

/* The slim toolbar, fixed to the bottom in the page's own color; .lib-space keeps that much room under the text. */
.lib-tools {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; color: var(--lib-ink);
  background: color-mix(in srgb, var(--lib-page) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--lib-rule); padding-bottom: env(safe-area-inset-bottom);
}
.lib-line { height: 3px; background: color-mix(in srgb, var(--lib-soft) 20%, transparent); }
.lib-line > i { display: block; width: 0; height: 100%; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.lib-tools-row {
  display: flex; align-items: center; gap: var(--space-1); max-width: 760px; min-height: 60px; margin: 0 auto;
  padding: 6px max(var(--space-2), env(safe-area-inset-right)) 6px max(var(--space-2), env(safe-area-inset-left));
}
.lib-tools .ui-iconbtn { color: var(--lib-ink); flex: none; }
.lib-tools .ui-iconbtn:hover, .lib-aa:hover { background: color-mix(in srgb, var(--lib-ink) 8%, transparent); }
.lib-tools .ui-iconbtn:disabled { opacity: 0.3; }
.lib-aa {
  flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--lib-ink);
  font: 700 20px / 1 var(--lib-serif); cursor: pointer;
}
.lib-where { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: center; line-height: 1.25; }
.lib-where-top { font-size: var(--text-xs); color: var(--lib-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-where-bottom { font-size: var(--text-sm); font-weight: var(--weight-strong); white-space: nowrap; }
.lib-listen {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px 0 12px;
  border: 1.5px solid color-mix(in srgb, var(--lib-ink) 22%, transparent); border-radius: var(--radius-full); background: transparent; color: var(--lib-ink);
  font: var(--weight-strong) var(--text-sm) / 1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast);
}
.lib-listen:hover { background: color-mix(in srgb, var(--lib-ink) 6%, transparent); }
.lib-listen.is-on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.lib-listen-icon { display: inline-grid; }
.lib-listen-icon .ui-icon { width: 22px; height: 22px; }
@media (max-width: 440px) {
  .lib-tools.is-paged .lib-listen { width: var(--tap); padding: 0; justify-content: center; }
  .lib-tools.is-paged .lib-listen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 370px) {
  .lib-listen { width: var(--tap); padding: 0; justify-content: center; }
  .lib-listen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Sheets: Aa (reading settings), Chapters, the voice. */
.lib-setting { display: grid; gap: 6px; }
.lib-settings .ui-seg--block > label { min-width: 0; }
.lib-settings .ui-seg span { padding-inline: 8px; }
.lib-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lib-swatch { position: relative; cursor: pointer; }
.lib-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.lib-swatch span {
  display: grid; place-items: center; gap: 2px; min-height: 64px; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong);
  font: var(--weight-strong) var(--text-sm) / 1.2 var(--font-body); transition: box-shadow var(--dur-fast);
}
.lib-swatch b { font: 700 20px / 1 var(--lib-serif); }
.lib-swatch--day span { background: #FFFDF8; color: #231F1A; }
.lib-swatch--sepia span { background: #F3E9D4; color: #392D21; }
.lib-swatch--night span { background: #14161B; color: #D7D1C4; }
.lib-swatch input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lib-swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.lib-chapters { margin-inline: calc(-1 * var(--space-2)); }
.lib-chapter { padding-inline: var(--space-2); }
.lib-chapter-n {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-sunken); color: var(--ink-muted); font: var(--weight-strong) var(--text-sm) / 1 var(--font-body);
}
.lib-chapter.is-here .lib-chapter-n { background: var(--accent); color: var(--accent-ink); }
.lib-chapter.is-here .ui-row-title { color: var(--accent-text); }
.lib-chapter .ui-row-end { color: var(--success-text, var(--success)); }

/* The voice controls (public/voice.js draws them with the older classes) on the new look. */
.lib-voice > .stack { display: grid; gap: 8px; }
.lib-voice b { font: var(--weight-strong) var(--text-sm) / 1.3 var(--font-body); color: var(--ink); }
.lib-voice .seg { display: flex; width: 100%; padding: 3px; gap: 2px; border-radius: calc(var(--radius-md) - 2px); background: var(--surface-sunken); }
.lib-voice .seg button {
  flex: 1; min-width: 0; min-height: calc(var(--tap) - 6px); padding: 6px 8px; border: 0; border-radius: calc(var(--radius-md) - 5px); background: transparent;
  color: var(--ink-muted); font: var(--weight-strong) var(--text-sm) / 1.2 var(--font-body); cursor: pointer;
}
.lib-voice .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.lib-voice select {
  min-height: var(--tap); padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  font: var(--weight-body) var(--text-md) / 1.2 var(--font-body);
}
.lib-voice .btn {
  flex: none; min-height: var(--tap); padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  color: var(--ink); font: var(--weight-strong) var(--text-sm) / 1 var(--font-body); cursor: pointer;
}
.lib-voice .small { font-size: var(--text-xs); }
.lib-voice .muted { color: var(--ink-muted); }

/* Guardians: single books for a child (a sheet from the Rules tab). */
.lib-rules-sheet { width: min(680px, 100% - 24px); }
.lib-rules { margin-inline: calc(-1 * var(--space-1)); }
.lib-rule { align-items: center; }
.lib-rule .lib-thumb { width: 36px; }
.lib-rule.is-off .lib-thumb { opacity: 0.45; filter: grayscale(0.6); }
.lib-rule-note { font-style: italic; }
.lib-rule-pick { flex: none; width: auto; min-width: 9.5em; }
@media (max-width: 520px) {
  .lib-rule { flex-wrap: wrap; }
  .lib-rule .ui-row-main { flex-basis: calc(100% - 36px - var(--space-3)); }
  .lib-rule-pick { flex: 1; margin-left: calc(36px + var(--space-3)); }
}

/* =============================== the picture book reader =============================== */

body.pb-open { --pb-page: #FFFBF2; --pb-ink: #2B2622; --pb-mark: #FFE08A; --pb-now: #F2A93B; background: var(--pb-page); }
:where(:root[data-theme="dark"]) body.pb-open { --pb-page: #171A22; --pb-ink: #ECE6D8; --pb-mark: #5A4A16; --pb-now: #C98A2B; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) body.pb-open { --pb-page: #171A22; --pb-ink: #ECE6D8; --pb-mark: #5A4A16; --pb-now: #C98A2B; }
}
body.pb-open .ui-main { max-width: none; padding: 0; gap: 0; }

.pb { position: relative; display: grid; height: var(--pb-h, 70vh); overflow: hidden; color: var(--pb-ink); }
.pb-page {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3); width: 100%; max-width: 1180px; height: 100%; min-height: 0;
  margin: 0 auto; padding: var(--space-3) var(--space-3) var(--space-2);
}
.pb-page.no-pic { grid-template-rows: 1fr; align-items: center; }
.pb-page.no-text { grid-template-rows: minmax(0, 1fr); }
.pb-pic { position: relative; min-height: 120px; align-self: stretch; touch-action: pan-y pinch-zoom; }
/* The picture always fits its space, whatever the words below or beside it need. */
.pb-pic img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--radius-md); background: #FFFFFF; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
}
.pb-pic img.missing { min-width: 50%; min-height: 50%; }
.pb-text {
  max-height: 42vh; max-height: 42svh; /* [ios] svh: with Safari's bars showing */ overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-2);
  font: 700 clamp(24px, 1.8vw + 17px, 40px) / 1.36 var(--font-body); text-align: center; text-wrap: pretty;
}
.pb-text.mid { font-size: clamp(20px, 1.3vw + 15px, 32px); }
.pb-text.long { font-size: clamp(18px, 1vw + 13px, 27px); font-weight: 600; text-align: left; }
.pb-text p { margin: 0 0 0.35em; white-space: pre-line; }
.pb-text p.head { font-family: var(--font-display); font-weight: var(--weight-display); }
.pb-text .w { border-radius: 6px; padding: 0 0.04em; transition: background-color var(--dur-fast); }
.pb.tap .pb-text .w { cursor: pointer; }
.pb-text .w.said { background: var(--pb-mark); }
.pb-text .w.now { background: var(--pb-now); color: #2B1B00; }
.pb-cover-page .pb-text b { display: block; margin-bottom: 0.2em; font: var(--weight-display) clamp(30px, 2.6vw + 20px, 52px) / 1.08 var(--font-display); text-wrap: balance; }
.pb-cover-page .pb-text > span { display: block; font-size: 0.6em; font-weight: 600; opacity: 0.8; }
.pb-end { display: grid; place-items: center; align-content: center; gap: var(--space-4); padding: var(--space-5); text-align: center; }
.pb-end h2 {
  font: var(--weight-display) clamp(44px, 5vw + 28px, 80px) / 1 var(--font-display); color: var(--pb-ink);
  text-shadow: 0 0 28px color-mix(in srgb, var(--firefly, #FFE29A) 70%, transparent);
}
.pb-end-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.pb-credit { max-width: 40em; margin: 0; font-size: var(--text-xs); opacity: 0.75; }
.pb-side { position: absolute; top: 0; bottom: 0; z-index: 2; width: 24%; padding: 0; border: 0; background: none; cursor: pointer; }
.pb-side.prev { left: 0; }
.pb-side.next { right: 0; }
.pb-side:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (orientation: landscape) and (min-width: 600px) {
  .pb-page:not(.no-pic):not(.no-text) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); }
  .pb-page:not(.no-pic):not(.no-text) .pb-text { max-height: 100%; text-align: left; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .pb-page { padding-inline: 0; }
  .pb-pic img { border-radius: 0; box-shadow: none; } /* the picture runs edge to edge on a phone */
  .pb-text { padding-inline: var(--space-4); }
}

/* The bar: big round next and previous buttons for little hands, page dots, Read to me, Tap words, the voice. */
.pb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--pb-page) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--pb-ink) 12%, transparent); color: var(--pb-ink);
}
.pb-bar .pb-turn {
  flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--glow-accent), var(--shadow-1);
}
.pb-bar .pb-turn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.pb-bar .pb-turn .ui-icon { width: 34px; height: 34px; stroke-width: 2.8; }
.pb-bar .pb-turn:disabled { background: color-mix(in srgb, var(--pb-ink) 10%, transparent); color: color-mix(in srgb, var(--pb-ink) 40%, transparent); box-shadow: none; opacity: 1; }
:where([data-skin="little"]) .pb-bar .pb-turn { width: 68px; height: 68px; }
@media (min-width: 600px) { :where([data-skin="little"]) .pb-bar .pb-turn { width: 84px; height: 84px; } }
.pb-middle { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: center; }
.pb-where-row { display: flex; align-items: center; justify-content: center; min-height: 10px; max-width: 100%; }
.pb-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 100%; }
.pb-dots i { width: 8px; height: 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--pb-ink) 20%, transparent); transition: width var(--dur-med) var(--ease-out); }
.pb-dots i.is-read { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pb-dots i.is-here { width: 22px; background: var(--accent); }
.pb-track { position: relative; flex: 1; min-width: 60px; max-width: 220px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-full); background: color-mix(in srgb, var(--pb-ink) 14%, transparent); overflow: hidden; }
.pb-track > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width var(--dur-med) var(--ease-out); }
.pb-where { flex: none; font: var(--weight-strong) var(--text-sm) / 1.2 var(--font-body); }
.pb-where-row { width: 100%; }
.pb-where.is-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--tap); min-height: var(--tap); padding: 0 16px 0 12px;
  border: 1.5px solid color-mix(in srgb, var(--pb-ink) 20%, transparent); border-radius: var(--radius-full); background: transparent; color: var(--pb-ink);
  font: var(--weight-strong) var(--text-sm) / 1 var(--font-body); cursor: pointer; transition: background-color var(--dur-fast);
}
.pb-btn:hover { background: color-mix(in srgb, var(--pb-ink) 6%, transparent); }
.pb-btn-icon { display: inline-grid; }
.pb-btn-icon .ui-icon { width: 22px; height: 22px; }
.pb-read.is-on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.pb-tap[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.pb-bar .pb-voice { color: var(--pb-ink); }
@media (max-width: 560px) {
  .pb-tap { padding: 0; }
  .pb-tap .pb-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .pb-btn { padding: 0; }
  .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); }
}
@media (prefers-reduced-motion: no-preference) { .pb-page { animation: pb-in 0.25s ease; } @keyframes pb-in { from { opacity: 0.3; } to { opacity: 1; } } }

/* ======================= tap-a-word dictionary (public/words.js) ======================= */

/* The word someone is looking up (CSS Custom Highlight, where the browser has it). */
::highlight(lib-word) { background-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Pressing and holding a word looks it up, so phones don't open their own menu or select text. */
@media (pointer: coarse) {
  .reader article [data-i] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.reader.tap-words article [data-i] { cursor: help; }

.words-sheet { display: grid; gap: var(--space-2); }
.words-pos { font: var(--weight-strong) var(--text-xs) / 1.2 var(--font-body); text-transform: lowercase; color: var(--ink-muted); }
.words-def { font: var(--weight-strong) var(--text-lg) / 1.35 var(--font-body); margin: 0; }
.words-ex { font-style: italic; color: var(--ink-muted); margin: 0; }
.words-from { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.words-senses { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }
.words-senses li { line-height: 1.4; }
.words-senses .words-ex { display: inline; }
.words-more summary { cursor: pointer; font-weight: var(--weight-strong); min-height: var(--tap); display: flex; align-items: center; }
.words-credit { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.words-say.is-on { background: var(--accent-soft); }
.words-sheet.is-little .words-def { font-size: var(--text-xl); }
.words-sheet.is-little .words-pos { display: none; }
.ui-sheet.words .ui-sheet-title { font-size: var(--text-xl); }

/* ======================= reading streaks, goals, books finished ======================= */

.lib-reading-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.lib-streak-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong, var(--ink)); }
.lib-streak-words { margin: 0; font: var(--weight-display) var(--text-lg) / 1.25 var(--font-display); }
.lib-week { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.lib-week .ui-muted { font-size: var(--text-sm); }
.lib-reading-card.is-calm { grid-template-columns: 1fr; gap: var(--space-2); }
.lib-reading-card.is-calm .lib-streak-words { font: var(--weight-strong) var(--text-md) / 1.3 var(--font-body); }
.lib-reading-card.is-calm .ui-muted { margin: 0; font-size: var(--text-sm); }
.lib-reading-glow, .lib-finished-glow { position: absolute; inset: 0; pointer-events: none; }
.lib-finished { position: relative; }
.lib-finished-glow { z-index: 0; }
.lib-finished .lib-shelf, .lib-finished .ui-list { position: relative; z-index: 1; }
:where([data-skin="little"]) .lib-streak-words { font-size: var(--text-xl); }
:where([data-skin="little"]) .lib-streak-icon { width: 56px; height: 56px; }

/* The Today tab (guardians): minutes read each day this week. */
.lib-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.lib-day { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: var(--text-xs); color: var(--ink-muted); min-height: 44px; }
.lib-day b { font-weight: var(--weight-strong); }
.lib-day.is-read { background: var(--accent-soft); color: var(--ink); }
.lib-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.lib-goal .ui-chips { margin-top: var(--space-1); }

/* Keep reading: a small x takes a book off the shelf (the book itself opens with a tap). */
.lib-kr { position: relative; min-width: 0; }
.lib-kr-x.ui-iconbtn { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: var(--surface, #fff); color: var(--ink, inherit); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.lib-kr-x.ui-iconbtn svg { width: 16px; height: 16px; }
.lib-kr--row { display: flex; align-items: center; }
.lib-kr--row > .ui-row { flex: 1; min-width: 0; }
.lib-kr--row > .lib-kr-x.ui-iconbtn { position: static; box-shadow: none; margin-right: 8px; }

/* [books-modern] Books in another language (public/languages.js): a small badge on the cover, in the
   details and in the guardians' list; the note where "Read to me" would be; the full credit an open
   license asks for, in the details. */
.lib-cover-box > .lib-lang { position: absolute; z-index: 2; top: 6px; left: 6px; font-size: 11px; padding: 2px 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); pointer-events: none; }
.lib-lang--row { margin-left: var(--space-2); vertical-align: middle; font-size: 11px; }
.lib-lang-note { font-size: var(--text-sm); margin: 0; }
.lib-detail-credit { margin: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--ink-muted); overflow-wrap: anywhere; }
.pb-cover-page .pb-text > .pb-lang { display: inline-flex; margin-top: 0.6em; font-size: 14px; opacity: 1; }
.pb-lang-note { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: var(--tap); font: var(--weight-strong) var(--text-sm) / 1.25 var(--font-body); text-align: center; }
.pb-credit { overflow-wrap: anywhere; }

/* [landscape] Turning pages on a wide screen turned sideways: two pages side by side (library.js
   sets .is-spread), with a soft fold down the middle like an open book. A phone on its side also
   gets a slimmer tool bar under the book. */
.lib-pages.is-spread {
  background: linear-gradient(90deg, transparent calc(50% - 16px), color-mix(in srgb, var(--lib-rule) 60%, transparent) 50%, transparent calc(50% + 16px)) no-repeat;
}
@media (orientation: landscape) and (max-height: 500px) {
  .lib-tools-row { min-height: 48px; padding-block: 2px; }
  .reader { padding-top: var(--space-2); }
}