/* =============================================================================
   Library (pages/library.html): a bookcase of books, and the open book over it
   (js/library-shelf.js, js/library-book.js).

   Wood, paper and gilt are defined here as --lib-* tokens with a dark
   (default) and a light set, like the theme's own colour schemes; the book
   bindings come from the data (--c, set per book). No images: gradients and
   shadows only.
   ============================================================================= */

:root,
:root[data-theme="dark"] {
  --lib-wood-back:   #1b120c;
  --lib-wood:        #563822;
  --lib-wood-hi:     #7b5434;
  --lib-wood-lo:     #2c1b0f;
  --lib-gilt:        #e3c47e;
  --lib-brass:       linear-gradient(180deg, #d9bb72, #a7843c);
  --lib-paper:       #2d271f;
  --lib-paper-2:     #262019;
  --lib-paper-edge:  #463b2d;
  --lib-paper-shade: rgba(0, 0, 0, .3);
  --lib-ink:         #ede3cf;
  --lib-ink-muted:   #b8aa91;
}
:root[data-theme="light"] {
  --lib-wood-back:   #8f6a45;
  --lib-wood:        #96643a;
  --lib-wood-hi:     #bf8a55;
  --lib-wood-lo:     #5f3c1e;
  --lib-gilt:        #ecd08c;
  --lib-brass:       linear-gradient(180deg, #e9cf8a, #b8924a);
  --lib-paper:       #fbf6e9;
  --lib-paper-2:     #f2e9d3;
  --lib-paper-edge:  #ddcfae;
  --lib-paper-shade: rgba(90, 60, 20, .22);
  --lib-ink:         #2a2118;
  --lib-ink-muted:   #6b5c47;
}

/* ---- Controls ------------------------------------------------------------ */
.library .library-controls { align-items: center; }
.library-find { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.library-find .form-input { width: 18rem; max-width: 100%; }
.library-count { margin: 0 !important; }

/* ---- The bookcase ----------------------------------------------------------
   One case. Its shelves are one wrapping row of books: the groups
   (.shelf-group) and their lists are display: contents, so a group can start
   anywhere on a shelf and run on to the next. Where a group starts is set by
   layoutShelves (js/library-shelf.js) with .shelf__gap elements: a break to
   the next shelf, the room between two groups, a pad to a plaque's width.
   The boards are a repeating background every --row pixels, so any number of
   books wraps onto as many shelves as it needs, at any width. A group's
   plaque hangs on the board under its first book. */
.library-shelves { margin-top: var(--space-5); }
.bookcase {
  --scale: 1; --row: 238px; --board: 18px;
  width: fit-content; max-width: 100%; min-width: min(100%, 440px);
  box-sizing: border-box; margin-inline: auto;
  padding: 16px 16px 22px;
  border-radius: 6px 6px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 6px),
    linear-gradient(90deg, var(--lib-wood-lo), var(--lib-wood) 7px, var(--lib-wood-hi) 40%, var(--lib-wood) calc(100% - 7px), var(--lib-wood-lo));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35), inset 0 -6px 0 var(--lib-wood-lo);
}
.bookcase__shelves {
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
  column-gap: 1px; row-gap: 0; min-height: var(--row);
  padding: 0 12px;
  background:
    /* the boards: a lit front edge, the board, its shadowed lip */
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--row) - var(--board)),
      var(--lib-wood-hi) calc(var(--row) - var(--board)) calc(var(--row) - var(--board) + 2px),
      var(--lib-wood) calc(var(--row) - var(--board) + 2px) calc(var(--row) - 5px),
      var(--lib-wood-lo) calc(var(--row) - 5px) var(--row)),
    /* the shadow each board throws on the back panel below it */
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .45) 0, transparent 26px, transparent var(--row)),
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 30px, transparent calc(100% - 30px), rgba(0, 0, 0, .35)),
    var(--lib-wood-back);
  border-radius: 2px;
}
.shelf-group, .shelf-group__books { display: contents; }
.shelf__gap { flex: none; height: var(--row); }
.shelf__gap--break { flex-basis: 100%; width: 100%; height: 0; }
/* The plaque's mount: on the board under the group's first item (a book or
   a stack), from its start edge; it takes no room. */
.shelf__item, .shelf__stack { position: relative; }
.shelf-group__mount {
  position: absolute; z-index: 2; inset-inline-start: 0; bottom: calc(var(--board) / 2); height: 0; width: max-content;
  display: flex; align-items: center; pointer-events: none;
}
.shelf-group__plaque {
  /* centred on the front edge of the shelf */
  flex: none; max-width: min(16rem, 70vw); box-sizing: border-box;
  padding: 1px calc(12px * var(--scale)); border-radius: 2px;
  background:
    radial-gradient(circle at 5px 50%, #5e4618 0 1.3px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 5px) 50%, #5e4618 0 1.3px, transparent 1.8px),
    var(--lib-brass);
  color: #2b1d0a;
  font: 600 calc(11px * var(--scale))/1.4 Georgia, 'Times New Roman', serif; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: opacity .18s ease, filter .18s ease;
}
.is-dim-group .shelf-group__plaque { opacity: .3; filter: grayscale(.85); }
.shelf__item, .shelf__stack {
  height: var(--row); box-sizing: border-box; padding-bottom: var(--board);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.shelf__stack { margin-inline: 6px; }
.shelf__stack .shelf__item { height: auto; padding: 0; }
.shelf__stack .shelf__item:not(:first-child) { margin-top: -1px; }
.shelf__item.lean-r { margin-right: var(--swing); }
.shelf__item.lean-l { margin-left: var(--swing); }
.bookcase__end {
  /* an iron bookend after the last book (in the last group's row of books) */
  align-self: flex-end; flex: none; width: 10px; height: 64px; margin: 0 6px var(--board) 4px;
  background: linear-gradient(90deg, #1d1d1d, #4a4a4a 40%, #262626);
  border-radius: 2px 2px 0 0; box-shadow: 1px 0 2px rgba(0, 0, 0, .5);
}

.book { display: block; color: inherit; text-decoration: none; border-radius: 3px; outline: none; }
.spine {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(var(--w) * var(--scale) * 1px); height: calc(var(--h) * var(--scale) * 1px);
  padding: 14% 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0, rgba(255, 255, 255, .15) 14%, rgba(255, 255, 255, .05) 34%, rgba(0, 0, 0, .08) 62%, rgba(0, 0, 0, .45) 100%),
    var(--c);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 2px 0 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14);
  overflow: hidden;
  transition: translate .18s ease, filter .18s ease, opacity .18s ease;
}
.shelf__item--lean .spine { transform: rotate(var(--lean)); }
.lean-r .spine { transform-origin: 100% 100%; }
.lean-l .spine { transform-origin: 0 100%; }
.spine__band {
  position: absolute; inset-inline: 0; top: 9%; height: 6px;
  border-block: 1.5px solid var(--lib-gilt); opacity: .8;
}
.spine__band--low { top: auto; bottom: 8%; }
.spine__title, .spine__syr {
  writing-mode: vertical-rl;
  color: var(--lib-gilt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-height: 100%; text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.spine__title { font: 600 calc(13px * var(--scale))/1 Georgia, 'Times New Roman', serif; letter-spacing: .05em; }
.spine__syr { font-family: var(--font-syriac); font-size: calc(15px * var(--scale)); }

/* Lying flat: the spine faces out sideways, its title runs across. */
.shelf__item--flat .spine {
  width: calc(var(--h) * var(--scale) * 1px); height: calc(var(--w) * var(--scale) * 1px);
  flex-direction: row; padding: 0 12%; gap: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, .04) 30%, rgba(0, 0, 0, .1) 65%, rgba(0, 0, 0, .45) 100%),
    var(--c);
  transform: translateX(var(--nudge));
  border-radius: 2px;
}
.shelf__item--flat .spine__band { inset-block: 0; inset-inline: auto; top: 0; left: 8%; width: 6px; height: auto; border-block: 0; border-inline: 1.5px solid var(--lib-gilt); }
.shelf__item--flat .spine__band--low { left: auto; right: 8%; }
.shelf__item--flat .spine__title, .shelf__item--flat .spine__syr { writing-mode: horizontal-tb; max-width: 100%; }

.book:hover .spine, .book:focus-visible .spine { translate: 0 -8px; filter: brightness(1.12); }
.shelf__item--flat .book:hover .spine, .shelf__item--flat .book:focus-visible .spine { translate: 0 -3px; }
.book:focus-visible .spine { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.is-dim .spine { opacity: .22; filter: grayscale(.85); }
.is-out .spine { visibility: hidden; }

/* ---- List view ------------------------------------------------------------ */
.liblist { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.liblist__group { display: grid; gap: var(--space-4); }
.liblist__group + .liblist__group { margin-top: var(--space-4); }
.library .liblist__group-title {
  margin: 0; font: 600 var(--font-size-lg)/1.3 Georgia, 'Times New Roman', serif;
  font-variant: small-caps; letter-spacing: .08em; color: var(--color-text-muted);
}
.liblist__book { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.library .liblist__title { font-size: var(--font-size-xl); margin: 0 0 var(--space-1); }
.library .liblist__works { columns: 2 18rem; column-gap: var(--space-8); list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.liblist__works li { break-inside: avoid; margin-bottom: var(--space-1); }

/* ---- The open book ---------------------------------------------------------
   A modal dialog over the page: the bookcase stays behind it, dimmed and
   blurred. ::backdrop does not take the page's custom properties in every
   browser, so its colours are written out per scheme. */
html.has-book { overflow: hidden; }
dialog.libbook {
  --color-text: var(--lib-ink); --color-text-muted: var(--lib-ink-muted);
  --color-surface: var(--lib-paper-2); --color-surface-alt: var(--lib-paper-edge); --color-border: var(--lib-paper-edge);
  padding: 0; margin: 0; border: 0; background: transparent; color: var(--lib-ink);
  width: 100%; height: 100%; max-width: none; max-height: none; overflow: hidden;
}
dialog.libbook[open] { display: flex; align-items: center; justify-content: center; }
dialog.libbook::backdrop { background: rgba(10, 6, 4, .62); backdrop-filter: blur(3px) saturate(.8); animation: lib-fade .3s ease; }
:root[data-theme="light"] dialog.libbook::backdrop { background: rgba(48, 32, 18, .45); }
@keyframes lib-fade { from { opacity: 0; } }

.libbook__frame {
  width: min(1240px, calc(100% - 48px)); height: min(900px, calc(100% - 40px));
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.libbook__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 10px; border-radius: 10px;
  background: var(--lib-paper-2); border: 1px solid var(--lib-paper-edge);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.libbook__bar .btn-outline { color: var(--lib-ink); border-color: var(--lib-paper-edge); }
.libbook__bar .btn-outline:hover { background: var(--lib-paper); }
.libbook__title {
  flex: 1; min-width: 0; margin: 0;
  font: 600 var(--font-size-lg)/1.3 Georgia, 'Times New Roman', serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.libbook__voc { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); white-space: nowrap; }
.libbook__tabs { display: none; }
.libbook__stage { flex: 1; min-height: 0; display: flex; }

.spread {
  flex: 1; min-width: 0; min-height: 0; position: relative;
  display: flex; direction: ltr;     /* physical: which page is left or right is set by the book */
  padding: 12px; border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .06) 2%, transparent 6%, transparent 94%, rgba(255, 255, 255, .06) 98%, rgba(0, 0, 0, .3)),
    var(--c, #5a2a1a);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.spread--rtl .leaf--a { order: 3; }
.spread--rtl .spread__gutter { order: 2; }
.spread--rtl .leaf--b { order: 1; }
.spread__gutter { flex: none; width: 2px; background: rgba(0, 0, 0, .45); }

.leaf {
  flex: 1 1 0; min-width: 0; position: relative; box-sizing: border-box;
  overflow: auto; overscroll-behavior: contain;
  padding: 0 34px 36px; color: var(--lib-ink);
  background: var(--lib-paper);
  scrollbar-width: thin; scrollbar-color: var(--lib-paper-edge) transparent;
}
.leaf > :first-child:not(.leaf__nav) { margin-top: 28px; }
/* The page on the left and the page on the right: darker towards the spine,
   a few page edges on the outside (more for a thick book). */
.spread:not(.spread--rtl) .leaf--a, .spread--rtl .leaf--b {
  background: linear-gradient(90deg, var(--lib-paper) 0 86%, var(--lib-paper-shade) 100%), var(--lib-paper);
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 1px 0 var(--lib-paper-edge), -4px 2px 0 var(--lib-paper-2);
}
.spread:not(.spread--rtl) .leaf--b, .spread--rtl .leaf--a {
  background: linear-gradient(270deg, var(--lib-paper) 0 86%, var(--lib-paper-shade) 100%), var(--lib-paper);
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 1px 0 var(--lib-paper-edge), 4px 2px 0 var(--lib-paper-2);
}
.spread--thick:not(.spread--rtl) .leaf--a, .spread--thick.spread--rtl .leaf--b {
  box-shadow: -2px 1px 0 var(--lib-paper-edge), -4px 2px 0 var(--lib-paper-2), -6px 3px 0 var(--lib-paper-edge), -8px 4px 0 var(--lib-paper-2);
}
.spread--thick:not(.spread--rtl) .leaf--b, .spread--thick.spread--rtl .leaf--a {
  box-shadow: 2px 1px 0 var(--lib-paper-edge), 4px 2px 0 var(--lib-paper-2), 6px 3px 0 var(--lib-paper-edge), 8px 4px 0 var(--lib-paper-2);
}
.leaf a { color: var(--lib-ink); text-decoration-color: var(--lib-ink-muted); }
.leaf:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }

/* Title page */
.titlepage { text-align: center; font-family: Georgia, 'Times New Roman', serif; }
/* a printer's ornament drawn in CSS: a lozenge between two rules */
.titlepage__orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 1.5rem; color: var(--lib-ink-muted); }
.titlepage__orn::before, .titlepage__orn::after { content: ""; width: 56px; border-top: 1px solid currentColor; opacity: .7; }
.titlepage__orn span { width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }
.titlepage__syr { font-family: var(--font-syriac); font-size: 2rem; margin: 0 0 .5rem; }
.titlepage__title { font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.2; font-weight: 600; margin: 0 0 .75rem; }
.titlepage__date { font-variant: small-caps; letter-spacing: .12em; margin: 0; color: var(--lib-ink-muted); }
.titlepage__rule { width: 40%; height: 0; margin: 1.25rem auto; border-top: 1px solid var(--lib-ink-muted); opacity: .5; }
.titlepage__stats { font-size: .95rem; margin: 0 0 1rem; }
.titlepage__prov { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; text-align: start; font-family: var(--font-ui); font-size: var(--font-size-sm); margin: 1rem 0; }
.titlepage__prov dt { color: var(--lib-ink-muted); }
.titlepage__prov dd { margin: 0; overflow-wrap: anywhere; }
.titlepage__credit { font-family: var(--font-ui); font-size: var(--font-size-xs); color: var(--lib-ink-muted); }
.titlepage__about { text-align: start; font-family: var(--font-ui); font-size: var(--font-size-sm); line-height: 1.6; color: var(--lib-ink-muted); margin-top: 1.5rem; }
.titlepage__about p { margin: 0 0 .75rem; }
.titlepage__links { font-family: var(--font-ui); font-size: var(--font-size-sm); margin-top: 1.5rem; }
.titlepage__changed strong { color: var(--lib-ink); font-weight: 600; }
.titlepage__credits:empty { display: none; }
.titlepage__h { font: 600 var(--font-size-sm)/1.4 var(--font-ui); text-align: start; color: var(--lib-ink-muted); margin: 1.25rem 0 0; text-transform: uppercase; letter-spacing: .06em; }
.titlepage__credits .titlepage__prov { margin-top: .5rem; }

/* Contents */
.leaf__heading { font: 600 1.35rem/1.3 Georgia, 'Times New Roman', serif; font-variant: small-caps; letter-spacing: .08em; text-align: center; margin: 0 0 1.25rem; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 .6rem; }
.toc__link { display: flex; align-items: baseline; gap: .4rem; text-decoration: none; font: 1.05rem/1.4 Georgia, 'Times New Roman', serif; border-radius: 3px; }
.leaf .toc__link { text-decoration: none; }
.toc__link:hover .toc__title, .toc__link:focus-visible .toc__title { text-decoration: underline; }
.toc__link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.toc__dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--lib-ink-muted); opacity: .45; transform: translateY(-.3em); }
.toc__n { font-size: .85rem; color: var(--lib-ink-muted); white-space: nowrap; }
.toc__meta { display: block; font-size: .8rem; color: var(--lib-ink-muted); }
/* A long contents (65 books of the Old Testament): tighter, two columns on a wide page. */
.toc--long { columns: 2 14rem; column-gap: 1.5rem; }
.toc--long li { margin: 0 0 .3rem; break-inside: avoid; }
.toc--long .toc__link { font-size: .95rem; }

/* Text page: previous / next in the top corners */
.leaf__nav {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 -26px 1rem; padding: 10px 0 8px;
  background: inherit;
}
.leafbtn {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--lib-paper-edge); background: var(--lib-paper-2); color: var(--lib-ink);
  display: inline-grid; place-items: center; padding: 0; cursor: pointer;
}
.leafbtn:hover:not(:disabled) { background: var(--lib-paper-edge); }
.leafbtn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.leafbtn:disabled { opacity: .3; cursor: default; }
.leaf__where {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .2rem .6rem; text-align: center; font-family: Georgia, 'Times New Roman', serif; padding-top: .3rem;
}
.leaf__work { font-size: 1.15rem; font-weight: 600; }
.leaf__author { color: var(--lib-ink-muted); font-size: .9rem; }
.leaf__pick { font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--lib-ink-muted); white-space: nowrap; }
.leaf__pick .form-select { display: inline-block; width: auto; padding: 1px 26px 1px 8px; font-size: var(--font-size-sm); background-color: var(--lib-paper-2); color: var(--lib-ink); border-color: var(--lib-paper-edge); }
.leaf__text .reader__line { font-size: 1.6rem; line-height: 2.25; }
.leaf__text .tok:hover, .leaf__text .tok--on { background: var(--lib-paper-edge); outline-color: var(--lib-ink-muted); }
.leaf__key { margin: 1.5rem 0 0; }
.leaf__key .tok { font-size: 1.1rem; cursor: default; }
.leaf__folio { text-align: center; font-family: Georgia, 'Times New Roman', serif; color: var(--lib-ink-muted); margin: 1rem 0 0; }
/* The margin: each line's citation ref (1.3, 46.12); a printed page's start. */
.leaf__text .reader__no { width: auto; min-width: 2.4rem; margin-inline: 0 .6rem; color: var(--lib-ink-muted); }
.leaf__text .reader__pb {
  display: inline-block; margin-inline-end: .5rem; padding: 0 .35rem; border: 1px solid var(--lib-paper-edge); border-radius: 3px;
  font: var(--font-size-xs)/1.6 var(--font-ui); color: var(--lib-ink-muted); vertical-align: middle;
}
.leaf__pick .form-select { max-width: 12rem; }
/* The footer of a text page: credit and licence (LIBRARY.md 4.5). */
.leaf__foot { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--lib-paper-edge); font-family: var(--font-ui); font-size: var(--font-size-xs); line-height: 1.6; color: var(--lib-ink-muted); }
.leaf__foot p { margin: 0 0 .35rem; overflow-wrap: anywhere; }
.leaf__foot summary { cursor: pointer; }
.leaf__foot details p { margin-top: .35rem; }
.leaf__simtho { margin: 1rem 0 0; }
.leaf__simtho .btn { color: var(--lib-ink); border-color: var(--lib-paper-edge); }
.leaf__simtho .btn:hover { background: var(--lib-paper-2); }
.leaf__panel .word-card { background: var(--lib-paper-2); border-color: var(--lib-paper-edge); }

/* ---- Turning a leaf, and the cover opening ---- */
.turnlayer { position: absolute; inset: 0; pointer-events: none; perspective: 2400px; z-index: 5; }
.turnlayer__under, .turnleaf { position: absolute; }
.turnleaf { transform-style: preserve-3d; }
.turnleaf__face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; box-shadow: 0 0 24px rgba(0, 0, 0, .35); }
.turnleaf__face--back { transform: rotateY(180deg); }
.turnleaf__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; }
.leaf--copy { position: absolute; inset: 0; overflow: hidden; }

.flycover { position: fixed; z-index: 10; pointer-events: none; transform-style: preserve-3d; }
.flycover__front, .flycover__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6px; }
.flycover__front {
  display: grid; place-items: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .08) 6%, transparent 30%, rgba(0, 0, 0, .25)),
    var(--c);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 0 14px var(--c), inset 0 0 0 16px var(--lib-gilt);
}
.flycover__title { font: 600 2rem/1.25 Georgia, 'Times New Roman', serif; color: var(--lib-gilt); text-align: center; padding: 2rem; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.flycover__back {
  transform: rotateY(180deg);
  /* marbled endpaper */
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .18) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .14) 0 12%, transparent 13%),
    repeating-radial-gradient(circle at 40% 45%, #6c4b2a 0 6px, #8b6a3e 6px 11px, #4c3a2a 11px 15px);
  border-radius: 6px;
}

/* ---- Phone: one page at a time ------------------------------------------- */
@media (max-width: 760px) {
  .bookcase { --scale: .78; --row: 190px; --board: 14px; padding: 12px 10px 18px; min-width: 100%; }
  .bookcase__shelves { padding: 0 6px; }
  .library-find .form-input { width: 100%; }
  .library-find { width: 100%; }

  .libbook__frame { width: 100%; height: 100%; gap: 0; }
  .libbook__bar { border-radius: 0; gap: var(--space-2); padding: 6px 8px; box-shadow: none; border-width: 0 0 1px; }
  .libbook__close-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .libbook__title { font-size: var(--font-size-base); }
  .libbook__tabs { display: flex; gap: 6px; padding: 6px 8px; background: var(--lib-paper-2); border-bottom: 1px solid var(--lib-paper-edge); }
  .libbook__tabs .btn { flex: 1; color: var(--lib-ink); border: 1px solid var(--lib-paper-edge); background: transparent; }
  .libbook__tabs .btn[aria-pressed="true"] { background: var(--color-primary); border-color: transparent; color: var(--color-primary-text); }
  .spread { padding: 0; border-radius: 0; box-shadow: none; }
  .spread__gutter { display: none; }
  .spread .leaf, .spread.spread--thick .leaf {
    position: absolute; inset: 0; padding: 0 16px 28px;
    border-radius: 0; box-shadow: none; background: var(--lib-paper);
  }
  .leaf > :first-child:not(.leaf__nav) { margin-top: 18px; }
  .leaf__nav { margin: 0 -8px .75rem; }
  .spread[data-show="a"] .leaf--b, .spread[data-show="b"] .leaf--a { visibility: hidden; }
  .leaf__text .reader__line { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spine, .shelf-group__plaque { transition: none; }
  dialog.libbook::backdrop { animation: none; }
}

/* ---- A scanned book (LIBRARY.md §9): its printed pages as images ---------
   Each page fills its leaf: the image is as tall as the leaf allows and
   keeps its shape; a click opens the full-size image. */
.leaf--scan { display: flex; flex-direction: column; padding: 0 18px 14px; }
.leaf--scan > :first-child:not(.leaf__nav) { margin-top: 18px; }
.leaf--scan .leaf__nav { margin: 0 -10px .5rem; }
.scanpage { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.scanpage--end { background: repeating-linear-gradient(135deg, transparent 0 14px, var(--lib-paper-2) 14px 15px); border-radius: 2px; }
.scanpage__link { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; max-width: 100%; }
.scanpage__img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--lib-paper-edge);
  cursor: zoom-in;
}
:root[data-theme="dark"] .scanpage__img, :root:not([data-theme]) .scanpage__img { filter: brightness(.9) sepia(.08); }
.scanpage__folio { flex: none; font: .8rem/1.2 Georgia, 'Times New Roman', serif; color: var(--lib-ink-muted); }
.leaf--scan .leaf__foot { flex: none; margin-top: .4rem; }
@media (max-width: 760px) {
  .leaf--scan { padding: 0 10px 10px; }
}
dialog.libbook.is-scan-single .libbook__tabs { display: none; }
/* Where a grammar section starts, when the full entry links here (?y=). */
.scanpage { position: relative; }
.scanpage__mark {
  position: absolute; height: 2.6em; margin-top: -.6em; pointer-events: none; border-radius: 2px;
  background: rgba(227, 167, 47, .32); box-shadow: 0 0 0 2px rgba(227, 167, 47, .75);
  animation: scan-mark 5s ease-out forwards;
}
@keyframes scan-mark { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scanpage__mark { animation: none; } }