/* Memory book: pages, themes, builder, print.
   A book page is a printed object, so each theme sets its own paper and ink
   explicitly; both are readable whether the app is in light or dark mode. */

.book-theme-warm     { --bp-bg: #F7EFE3; --bp-ink: #3A2E25; --bp-muted: #6E5B49; --bp-accent: #8C6A3C; --bp-rule: #D9C5A6; --bp-mat: #FFFBF4; }
.book-theme-floral   { --bp-bg: #FBEFF0; --bp-ink: #3E2A31; --bp-muted: #78525D; --bp-accent: #8E4E5D; --bp-rule: #E8C6CD; --bp-mat: #FFF8F8; }
.book-theme-ivory    { --bp-bg: #FFFFFF; --bp-ink: #262326; --bp-muted: #5E585E; --bp-accent: #262326; --bp-rule: #DAD6D2; --bp-mat: #F6F4F1; }
.book-theme-lavender { --bp-bg: #F1ECF7; --bp-ink: #2F2742; --bp-muted: #5F5478; --bp-accent: #5C4B86; --bp-rule: #D3C8E6; --bp-mat: #FBF9FE; }

.spread { display: grid; grid-template-columns: 1fr 1fr; border-radius: 4px; overflow: hidden; }
.spread .bpage + .bpage { box-shadow: inset 10px 0 18px -14px rgb(0 0 0 / .25); }

.bpage {
  container-type: inline-size;
  aspect-ratio: 5 / 7; width: 100%; max-width: 100%;
  background: var(--bp-bg, #F7EFE3); color: var(--bp-ink, #3A2E25);
  /* Padding in % (of the page's own column width). cqw would resolve against the
     viewport here, because a container cannot size its own box from itself. */
  padding: 9% 9% 8%; display: flex; flex-direction: column; overflow: hidden; position: relative;
  font-family: var(--f-display);
}
.bpage :is(p, h2, h3) { margin: 0; }
.bpage > * + * { margin-top: 3cqw; }
.bpage > .bp-folio { margin: 0; }
.bpage .art { border-radius: 1px; }

/* Cover */
.bpage-cover { justify-content: flex-end; text-align: center; align-items: center; }
.bpage-cover > * + * { margin-top: 2.4cqw; }
.bp-cover-photo { position: relative; width: 78%; aspect-ratio: 4 / 5; background: var(--bp-mat); padding: 2.4cqw; box-shadow: 0 1cqw 4cqw -2cqw rgb(0 0 0 / .3); margin: 4cqw 0 auto; overflow: hidden; }
.bp-cover-photo > .art, .bp-cover-photo > .bp-img { position: absolute; inset: 2.4cqw; }
.bp-cover-photo .bp-img { overflow: hidden; }
.bp-cover-empty { position: absolute; inset: 2.4cqw; display: grid; place-items: center; border: 1px dashed var(--bp-rule); color: var(--bp-muted); font-family: var(--f-body); font-size: 3.4cqw; padding: 4cqw; text-align: center; }
.bp-cover-title { font-size: 8.2cqw; line-height: 1.12; font-weight: 400; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.bp-cover-sub { font-size: 3.6cqw; color: var(--bp-muted); font-style: italic; }
.bp-cover-mark { width: 7cqw; height: 7cqw; color: var(--bp-accent); stroke-width: 1.2; }
.bp-cover-photo.no-photo { box-shadow: none; background: transparent; }

/* Chapter opener */
.bpage-chapter { justify-content: center; align-items: center; text-align: center; }
.bpage-chapter > * + * { margin-top: 4cqw; }
.bp-ch-num { font-size: 16cqw; color: var(--bp-accent); line-height: 1; font-weight: 400; }
.bp-ch-title { font-size: 7.6cqw; line-height: 1.15; text-wrap: balance; }
.bp-ch-rule { width: 22cqw; height: 1px; background: var(--bp-accent); opacity: .7; }

/* Entry page */
.bp-chapter { font-family: var(--f-body); font-size: 2.6cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--bp-accent); font-weight: 600; }
.bp-photo { position: relative; background: var(--bp-mat); padding: 2cqw; box-shadow: 0 .6cqw 3cqw -1.5cqw rgb(0 0 0 / .3); flex: 0 0 auto; }
.bp-photo .bp-img, .bp-photo > .art { position: relative; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; max-height: 54cqw; width: 100%; }
.bp-photo > .art { inset: auto; }
.bp-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--zoom, 1)); }
.bp-date { font-family: var(--f-body); font-size: 2.7cqw; color: var(--bp-muted); }
.bp-title { font-size: 5.6cqw; line-height: 1.2; text-wrap: balance; }
/* Entry pages: content flows inside .bp-flow. Pagination (js/screens/book.js) measures
   .bp-flow and moves whatever does not fit to continuation pages, so nothing is clipped. */
.bp-flow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bp-flow > * + * { margin-top: 3cqw; }
.bp-flow > * { flex: 0 0 auto; }
.bp-text { font-size: 3.4cqw; line-height: 1.65; color: var(--bp-ink); }
.bp-text p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.bp-text p + p { margin-top: 1.1cqw; }
.bp-text p.bp-blank { min-height: 1.65em; }
.bp-title { overflow-wrap: anywhere; }
.bp-author { font-family: var(--f-body); font-size: 2.6cqw; font-weight: 600; letter-spacing: .02em; }
.bp-author-mother { color: var(--bp-accent); }
.bp-author-father, .bp-author-both { color: var(--bp-muted); }
.bp-voice { display: flex; gap: 2cqw; align-items: center; font-family: var(--f-body); font-size: 2.6cqw; line-height: 1.45; color: var(--bp-muted);
  padding: 1.6cqw 2.6cqw; border: 1px solid var(--bp-rule); border-radius: 2cqw; background: var(--bp-mat); }
.bp-voice strong { color: var(--bp-accent); font-weight: 600; }
.bp-voice-icon { width: 5cqw; height: 5cqw; flex: none; fill: none; stroke: var(--bp-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-cont { font-family: var(--f-body); font-size: 2.5cqw; color: var(--bp-muted); font-style: italic; overflow-wrap: anywhere; }
.bpage-cont .bp-chapter { opacity: .8; }
.bp-folio { position: absolute; bottom: 3.5cqw; left: 0; right: 0; text-align: center; font-family: var(--f-body); font-size: 2.4cqw; color: var(--bp-muted); }
.bpage-letter .bp-text { font-style: italic; line-height: 1.9; }
.bpage-letter .bp-text p.bp-blank { min-height: 1.9em; }
.bpage-letter .bp-title { font-style: normal; }

/* Ethiopic in book pages */
.bpage :lang(am), .bpage[lang="am"] { font-family: var(--f-ethi-display); }
.bp-ethi .bp-cover-title, .bp-ethi .bp-title, .bp-ethi .bp-ch-title, .bp-ethi .bp-text, .bp-ethi .bp-cont { font-family: var(--f-ethi-display); font-style: normal; }
.bp-ethi .bp-chapter { letter-spacing: .04em; }

/* Theme accents */
.book-theme-floral .bpage-cover::before, .book-theme-floral .bpage-chapter::before {
  content: ""; position: absolute; inset: 4cqw; border: 1px solid var(--bp-rule); border-radius: 3cqw; pointer-events: none; }
.book-theme-ivory .bp-cover-title { letter-spacing: .02em; font-size: 7.4cqw; }
.book-theme-lavender .bpage-cover::after { content: ""; position: absolute; left: 9cqw; right: 9cqw; top: 5cqw; height: 1px; background: var(--bp-accent); opacity: .5; }

/* ---------- Theme 5: ጥበብና ብራና · Tibeb & Biranna ----------
   Aged parchment, espresso ink, ochre and crimson. Woven tibeb bands and stepped-diamond
   cross-stitch corners decorate the cover and chapter openers; entry pages get a thin
   band only. Ornaments are absolutely positioned (bands) or page backgrounds (corners),
   so they never change the text area that pagination measures. Ochre is decorative only;
   text uses espresso (13.8:1) or crimson (7.5:1) on the parchment. */
.book-theme-tibeb { --bp-bg: #F5EEDB; --bp-ink: #2C1F1A; --bp-muted: #5B4636; --bp-accent: #8B2635; --bp-rule: #D9C7A0; --bp-mat: #FBF6E9;
  --tibeb-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 .6h24M0 11.4h24' stroke='%238B2635' stroke-width='.8'/%3E%3Cpath d='M12 2.2l3.8 3.8L12 9.8 8.2 6z' fill='%238B2635'/%3E%3Cpath d='M12 4.4l1.6 1.6L12 7.6 10.4 6z' fill='%23F5EEDB'/%3E%3Cpath d='M0 6l2.2-2.2L4.4 6 2.2 8.2zM24 6l-2.2-2.2L19.6 6l2.2 2.2z' fill='%23B8860B'/%3E%3C/svg%3E"); --tibeb-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 .5h12M0 5.5h12' stroke='%238B2635' stroke-width='.6'/%3E%3Cpath d='M6 1.4l1.6 1.6L6 4.6 4.4 3z' fill='%23B8860B'/%3E%3C/svg%3E"); --tibeb-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 27'%3E%3Crect x='0' y='12' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='3' y='9' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='3' y='15' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='6' y='6' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='6' y='12' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='6' y='18' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='9' y='3' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='9' y='9' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='9' y='15' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='9' y='21' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='12' y='0' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='12' y='6' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='12' y='12' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='12' y='18' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='12' y='24' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='15' y='3' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='15' y='9' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='15' y='15' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='15' y='21' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='18' y='6' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='18' y='12' width='2.6' height='2.6' fill='%23B8860B'/%3E%3Crect x='18' y='18' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='21' y='9' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='21' y='15' width='2.6' height='2.6' fill='%238B2635'/%3E%3Crect x='24' y='12' width='2.6' height='2.6' fill='%238B2635'/%3E%3C/svg%3E"); }
.book-theme-tibeb .bpage-cover, .book-theme-tibeb .bpage-chapter {
  background-image: var(--tibeb-corner), var(--tibeb-corner), var(--tibeb-corner), var(--tibeb-corner);
  background-position: 4% 2.8%, 96% 2.8%, 4% 97.2%, 96% 97.2%;
  background-size: 8% auto; background-repeat: no-repeat; }
.book-theme-tibeb .bpage-cover::before, .book-theme-tibeb .bpage-cover::after,
.book-theme-tibeb .bpage-chapter::before, .book-theme-tibeb .bpage-chapter::after {
  content: ""; position: absolute; left: 15%; right: 15%; height: 3.4cqw;
  background: var(--tibeb-band) repeat-x center / auto 100%; pointer-events: none; }
.book-theme-tibeb .bpage-cover::before, .book-theme-tibeb .bpage-chapter::before { top: 3.4cqw; }
.book-theme-tibeb .bpage-cover::after, .book-theme-tibeb .bpage-chapter::after { bottom: 3.4cqw; }
.book-theme-tibeb .bpage-entry::before { content: ""; position: absolute; left: 9%; right: 9%; top: 4cqw; height: 1.7cqw;
  background: var(--tibeb-thin) repeat-x center / auto 100%; opacity: .9; pointer-events: none; }
.book-theme-tibeb .bp-cover-photo { box-shadow: 0 0 0 .5cqw var(--bp-mat), 0 0 0 .8cqw #B8860B, 0 1cqw 4cqw -2cqw rgb(0 0 0 / .3); }
.book-theme-tibeb .bp-ch-rule { height: 1.7cqw; width: 30cqw; opacity: 1; background: var(--tibeb-thin) repeat-x center / auto 100%; }
.book-theme-tibeb .bp-chapter { letter-spacing: .12em; }
/* Ge'ez numerals for chapter numbers in this theme */
.bp-ch-num .n-geez { display: none; }
.book-theme-tibeb .bp-ch-num .n-latin { display: none; }
.book-theme-tibeb .bp-ch-num .n-geez { display: inline; font-family: var(--f-ethi-display); }
.sw-tibeb { background: linear-gradient(135deg, #F5EEDB 50%, #8B2635 50%); box-shadow: inset 0 0 0 2px #B8860B; }

/* Off-screen host used only to measure pages. Same width ratio as every page, so the
   split is identical in the builder, the final preview and print (all sizes use cqw/%). */
.pager-host { position: absolute; left: -100000px; top: 0; width: 480px; visibility: hidden; pointer-events: none; }

/* ---------- Builder ---------- */
.builder { display: grid; grid-template-columns: 300px minmax(0, 1fr) 270px; gap: var(--s5); align-items: start; }
.builder-col { display: grid; gap: var(--s4); min-width: 0; }
.builder-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s4); }
.builder-panel h2 { font-size: var(--fs-md); font-family: var(--f-body); font-weight: 600; }
.builder-stage { display: grid; gap: var(--s4); justify-items: center; position: sticky; top: var(--s4); }
.stage-pages { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); width: 100%; max-width: 760px; box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; }
.stage-pages.is-single { max-width: 420px; }
.stage-pages .bpage + .bpage { box-shadow: inset 10px 0 18px -14px rgb(0 0 0 / .25); }
.stage-nav { display: flex; align-items: center; gap: var(--s3); }
.stage-count { font-size: var(--fs-sm); color: var(--ink-2); min-width: 120px; text-align: center; }
.page-warn { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--warn); background: var(--warn-bg); padding: 6px 12px; border-radius: var(--r-pill); }

.mem-list { display: grid; gap: var(--s2); }
.mem-chapter { display: grid; gap: var(--s2); }
.mem-chapter > h3 { font-size: var(--fs-xs); font-family: var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); font-weight: 600; padding-top: var(--s2); }
:lang(am) .mem-chapter > h3 { letter-spacing: 0; text-transform: none; font-size: .86rem; }
/* Rows: thumbnail + full title on top, controls below. Titles wrap; very long ones are
   clamped to 3 lines with a "Show full title" button (no hover needed). */
.mem-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "thumb body" "ctrl ctrl"; gap: var(--s2) var(--s3); align-items: start; padding: 8px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.mem-row > .thumb { grid-area: thumb; }
.mem-row > .mem-row-body { grid-area: body; }
.mem-row-ctrl { grid-area: ctrl; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: space-between; }
.mem-row-ctrl .select { flex: 1 1 140px; min-width: 0; width: auto; }
.title-toggle { border: 0; background: none; padding: 2px 0; min-height: 28px; font-size: var(--fs-xs); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.mem-row .thumb { width: 40px; height: 40px; }
.mem-row-body { min-width: 0; display: grid; }
.mem-row-title { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
.mem-row-title.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mem-row-date { font-size: var(--fs-xs); color: var(--ink-2); }
.mem-row-actions { display: flex; gap: 2px; }
.mem-row-actions .btn { min-height: 40px; width: 40px; }
.mem-empty { font-size: var(--fs-sm); color: var(--ink-2); padding: var(--s2) 0; }
.mem-row .select { min-height: 36px; padding: 4px 8px; font-size: var(--fs-xs); }

.theme-radios { display: grid; gap: var(--s2); }
.theme-radios label { display: flex; gap: var(--s3); align-items: center; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
.theme-radios input { accent-color: var(--primary); }
.theme-radios label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.cover-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.cover-photos label { position: relative; aspect-ratio: 1; border-radius: var(--r-xs); overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--sunk); display: grid; place-items: center; font-size: var(--fs-xs); color: var(--ink-2); text-align: center; }
.cover-photos label:has(input:checked) { border-color: var(--ink); }
.cover-photos input { position: absolute; opacity: 0; }
.cover-photos label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cover-photos img { width: 100%; height: 100%; object-fit: cover; }

.builder-tabs { display: none; }
@media (max-width: 1240px) {
  .builder { grid-template-columns: 280px minmax(0, 1fr); }
  .builder-right { grid-column: 1 / -1; grid-row: auto; }
  .builder-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .builder { grid-template-columns: 1fr; }
  .builder-stage { position: static; order: -1; }
  .builder-tabs { display: flex; position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg); padding-block: var(--s2); justify-content: center; }
  .builder-col[data-tab]:not(.is-active) { display: none; }
  .builder-right { grid-template-columns: 1fr; }
  .stage-pages { max-width: 440px; }
}

/* Final preview */
.final-pages { display: grid; gap: var(--s6); justify-items: center; }
.final-pages .bpage { max-width: 560px; box-shadow: var(--shadow-lg); border-radius: 3px; }

/* ---------- Print ---------- */
.print-root { display: none; }
@media print {
  @page { size: 148mm 207mm; margin: 0; }
  body { background: #fff; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .bpage { width: 148mm; height: 207mm; aspect-ratio: auto; break-after: page; page-break-after: always; box-shadow: none !important; border-radius: 0; container-type: inline-size; }
  .print-root .bpage:last-child { break-after: auto; }
  .pager-host { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}