/* The bookshelf and the book reader. Loaded after tokens.css and app.css.
   The colours of paper, cloth, boards and wood are the materials of a
   physical book and are set here; everything else comes from the tokens. */

/* Registered so that a change of reading theme can be eased, gradients included. */
@property --bk-paper { syntax: '<color>'; inherits: true; initial-value: #fbf9f3; }
@property --bk-ink { syntax: '<color>'; inherits: true; initial-value: #1f1b15; }
@property --bk-ink-2 { syntax: '<color>'; inherits: true; initial-value: #6f6657; }
@property --bk-desk { syntax: '<color>'; inherits: true; initial-value: #ebe5d9; }
@property --bk-desk-2 { syntax: '<color>'; inherits: true; initial-value: #dcd4c4; }
@property --bk-board { syntax: '<color>'; inherits: true; initial-value: #3a2a1f; }

/* ---- covers --------------------------------------------------------------------- */
.cover {
  --edge: 1; position: relative; display: block; aspect-ratio: 2 / 3; width: 100%; background: var(--cloth, #3d2a22); border-radius: 2px 5px 5px 2px; overflow: hidden;
  /* The page block and the back board show along the open edge; then the shadow the book throws. */
  box-shadow:
    calc(var(--edge) * 2px) 0 0 -0.5px #ece5d3, calc(var(--edge) * 3px) 0 0 -0.5px #c9bfa7, calc(var(--edge) * 4.5px) 1px 0 -0.5px color-mix(in srgb, var(--cloth, #3d2a22) 78%, #000),
    0 1px 1px rgba(0, 0, 0, 0.22), calc(var(--edge) * 6px) 10px 16px -5px rgba(30, 22, 10, 0.36), calc(var(--edge) * 14px) 26px 38px -18px rgba(30, 22, 10, 0.42);
}
.cover[dir='rtl'] { --edge: -1; border-radius: 5px 2px 2px 5px; }
.cover-art { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-type { position: absolute; inset: 9% 12% 9% 16%; display: flex; flex-direction: column; justify-content: center; gap: 0.7em; text-align: center; color: #efe4c8; font-family: var(--font-display); }
.cover[dir='rtl'] .cover-type { inset: 9% 16% 9% 12%; }
.cover-title { font-size: clamp(0.95rem, 7cqw, 1.6rem); line-height: 1.2; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.cover-author { font-size: clamp(0.62rem, 3.4cqw, 0.8rem); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.cover-rule { height: 1px; background: linear-gradient(90deg, transparent, #c9a55a 20%, #c9a55a 80%, transparent); opacity: 0.8; }
/* The joint where the cover board meets the spine, and the light across the cloth. */
.cover-spine { position: absolute; inset-block: 0; inset-inline-start: 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08) 38%, rgba(255, 255, 255, 0.2) 52%, rgba(0, 0, 0, 0.16) 66%, transparent); }
.cover[dir='rtl'] .cover-spine { transform: scaleX(-1); }
.cover-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0.18), transparent 34%, transparent 70%, rgba(0, 0, 0, 0.14)); pointer-events: none; }
/* The cover that travels between the shelf and the open book. */
.cover.is-flying { view-transition-name: book-cover; }
::view-transition-group(book-cover) { animation-duration: var(--d-5); animation-timing-function: var(--spring); }
::view-transition-old(book-cover), ::view-transition-new(book-cover) { width: 100%; height: 100%; object-fit: fill; }

/* ---- the library -------------------------------------------------------------------- */
.continue {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.4vw, 44px); padding: clamp(18px, 2.6vw, 34px) clamp(20px, 3.4vw, 44px);
  border-radius: var(--r-xl); background: linear-gradient(115deg, var(--c-surface) 30%, color-mix(in srgb, var(--c-accent-wash) 55%, var(--c-surface))); box-shadow: var(--e-1);
  color: inherit; text-decoration: none; transition: box-shadow var(--d-3), transform var(--d-1);
}
.continue:hover { box-shadow: var(--e-2); color: inherit; }
.continue:active { transform: scale(0.995); }
.continue-cover { width: clamp(92px, 11vw, 140px); container-type: inline-size; }
.continue .cover { transition: transform var(--d-4) var(--spring-lively); }
.continue:hover .cover { transform: translateY(-5px) rotate(-1deg); }
.continue-text { min-width: 0; text-align: start; }
.continue h2 { font-size: var(--text-2xl); }
.continue-author { margin: var(--sp-1) 0 0; color: var(--c-ink-2); }
.continue-progress { display: flex; align-items: center; gap: var(--sp-3); max-width: 440px; margin: var(--sp-5) 0; }
.continue-progress .progress { flex: 1; }
.continue-progress span { font-size: var(--text-sm); color: var(--c-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 0; overflow-x: clip; }
.book-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
/* In a long library the text under covers that are far from view is not laid out until it is needed. */
.book-body { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.book-card:hover { color: inherit; }
.book-stand { container-type: inline-size; position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 268px; padding: 24px 26px 0; }
.book-stand .cover { max-width: 164px; transform-origin: 50% 100%; transition: transform var(--d-4) var(--spring-lively), box-shadow var(--d-3); }
.book-card:hover .cover { transform: translateY(-10px) rotate(-0.8deg) scale(1.015); }
.book-card:active .cover { transform: translateY(-4px) scale(0.985); transition-duration: var(--d-1); }
.book-card:focus-visible .cover { outline: 3px solid var(--c-accent); outline-offset: 4px; transform: translateY(-10px); }
.shelf-board, .shelf-art b {
  height: 14px; background: linear-gradient(light-dark(#dccbab, #6a573b), light-dark(#c5b08a, #4f402a) 55%, light-dark(#a8926c, #382c1b));
  box-shadow: 0 16px 20px -12px light-dark(rgba(40, 28, 10, 0.4), rgba(0, 0, 0, 0.7)), inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.14)), inset 0 -3px 0 light-dark(rgba(60, 40, 10, 0.14), rgba(0, 0, 0, 0.3));
}
.shelf-board { position: relative; }
.book-card:first-child .shelf-board { border-radius: 3px 0 0 3px; }
/* The shelf runs on to the edge of the room after the last book. */
.book-card:last-child .shelf-board::after { content: ''; position: absolute; inset-block: 0; left: 100%; width: 200vw; background: inherit; box-shadow: inherit; }
[dir='rtl'] .book-card:first-child .shelf-board { border-radius: 0 3px 3px 0; }
[dir='rtl'] .book-card:last-child .shelf-board::after { left: auto; right: 100%; }
.book-body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: var(--sp-4) 18px var(--sp-7); }
.book-body h3 { font-size: var(--text-lg); }
.book-body .chips { margin-top: 6px; }
.read-progress { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--c-ink) 9%, transparent); overflow: hidden; margin-top: 2px; }
.read-progress > i { display: block; height: 100%; background: var(--c-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
/* An empty shelf, waiting. */
.shelf-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 12px; width: 240px; height: 112px; margin-bottom: 38px; }
.shelf-art i { display: block; width: 50px; height: 78px; border: 1.5px dashed var(--c-line-2); border-radius: 2px 5px 5px 2px; }
.shelf-art i:nth-child(2) { height: 96px; }
.shelf-art i:nth-child(3) { height: 86px; transform: rotate(9deg) translate(6px, 2px); transform-origin: 100% 100%; }
.shelf-art b { position: absolute; inset-inline: 0; bottom: -14px; border-radius: 3px; }

/* ---- reader frame ---------------------------------------------------------------------- */
body.is-reading main { padding: 0; }
.bookview > * { margin-top: 0; }
body.immersive .sidebar, body.immersive .topbar { display: none; }
body.immersive .app { grid-template-columns: minmax(0, 1fr); }

.bookview {
  --bk-paper: #fbf9f3; --bk-ink: #1f1b15; --bk-ink-2: #6f6657; --bk-desk: #ebe5d9; --bk-desk-2: #dcd4c4;
  --bk-board: #3a2a1f; --bk-mark: #f3d77c; --bk-speak: #f1e2b4; --bk-accent: #8a5f17; --bk-line: rgba(31, 27, 21, 0.14);
  --bk-size: 18px; --lh: 29px; --bk-font: var(--font-read); --bk-align: justify;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100vh - var(--topbar-h)); max-width: none; margin: 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--bk-desk), var(--bk-desk-2)); color: var(--bk-ink); overflow: hidden;
  animation: none;
}
body.immersive .bookview { height: 100vh; height: 100dvh; }
.bookview[data-theme='sepia'] { --bk-paper: #f4e8cf; --bk-ink: #3b2d1a; --bk-ink-2: #7a6646; --bk-desk: #d9c8a4; --bk-desk-2: #c4b08a; --bk-board: #4a3220; --bk-mark: #e9c46a; --bk-speak: #ecd9a2; --bk-accent: #7a4f10; --bk-line: rgba(59, 45, 26, 0.18); }
.bookview[data-theme='dark'] { --bk-paper: #1d1c19; --bk-ink: #dcd6c9; --bk-ink-2: #9c9484; --bk-desk: #0f0e0c; --bk-desk-2: #090908; --bk-board: #0a0908; --bk-mark: #6d5712; --bk-speak: #3b331c; --bk-accent: #d9b266; --bk-line: rgba(220, 214, 201, 0.16); }
/* For the length of a change of theme the colours travel instead of switching. */
.bookview.is-theming { transition: --bk-paper var(--d-5) var(--ease-in-out), --bk-ink var(--d-5) var(--ease-in-out), --bk-ink-2 var(--d-5) var(--ease-in-out), --bk-desk var(--d-5) var(--ease-in-out), --bk-desk-2 var(--d-5) var(--ease-in-out), --bk-board var(--d-5) var(--ease-in-out); }
.bookview.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

.bk-head { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px clamp(10px, 2.2vw, 26px); color: var(--bk-ink); transition: opacity var(--d-4); }
.bk-back { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding-inline: 6px 12px; border-radius: var(--r-pill); color: var(--bk-ink-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--w-medium); white-space: nowrap; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1); }
.bk-back:hover { background: color-mix(in srgb, var(--bk-ink) 9%, transparent); color: var(--bk-ink); }
.bk-back:active { transform: scale(0.96); }
.bk-back .icon { --icon: 17px; stroke-width: 2; }
.bk-title { font-family: var(--font-display); font-size: var(--text-md); color: var(--bk-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.bk-head h1 { font-size: var(--text-sm); font-family: var(--font-ui); font-weight: var(--w-semibold); letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-head .chips { flex-wrap: nowrap; overflow: hidden; }
.bk-head .chip { background: color-mix(in srgb, var(--bk-ink) 8%, transparent); color: var(--bk-ink-2); }

/* The book and its controls are laid out by the direction of the book, whatever the direction of the interface. */
.bk-stage, .bk-bar-wrap { direction: ltr; }
.bk-stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; padding: 4px 0 8px; }
.bk-book { position: relative; width: calc(var(--pw) * var(--faces)); height: var(--ph); transition: opacity var(--d-2) ease; }
.bk-book.is-jumping { opacity: 0.25; }
.bk-face { transition: opacity var(--d-3) var(--ease-out); }
.bk-book.is-switching .bk-spread > .bk-page > .bk-face { opacity: 0; transition: none; }
/* The boards of the binding, showing around the page block. */
.bk-boards, .bk-boards-far { position: absolute; inset: -7px -12px -9px; border-radius: 7px; background: linear-gradient(var(--bk-board), color-mix(in srgb, var(--bk-board) 82%, #000)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 20px 34px -14px rgba(0, 0, 0, 0.42), 0 48px 76px -34px rgba(0, 0, 0, 0.55); }
.bookview[data-layout='single'] .bk-boards { inset: -5px -6px -7px; }
.bk-boards-far { display: none; }
/* The edges of the pages not being read, stacked on either side. */
.bk-stack { position: absolute; top: 2px; bottom: 2px; width: var(--w, 4px); background: repeating-linear-gradient(90deg, var(--bk-paper), var(--bk-paper) 1px, color-mix(in srgb, var(--bk-paper) 80%, #000) 1px, color-mix(in srgb, var(--bk-paper) 80%, #000) 2px); transition: width var(--d-4) var(--ease-out); }
.bk-stack-l { right: 100%; border-radius: 2px 0 0 2px; }
.bk-stack-r { left: 100%; border-radius: 0 2px 2px 0; }
.bk-spread { position: absolute; inset: 0; display: flex; }
/* A single page has nothing beside it: the turned leaf slips out of sight past the binding. */
.bookview[data-layout='single'] .bk-spread { overflow: hidden; }
.bk-page { position: relative; width: var(--pw); height: var(--ph); flex: none; background: var(--bk-paper); overflow: hidden; }
/* Paper: a little grain, and the page falling away toward the binding. */
.bk-page::before, .bk-turn-front::before, .bk-turn-flap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bookview[data-theme='dark'] .bk-page::before, .bookview[data-theme='dark'] .bk-turn-front::before, .bookview[data-theme='dark'] .bk-turn-flap::before { mix-blend-mode: screen; opacity: 0.25; }
.bk-page::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bk-left::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.07) 5%, transparent 16%), linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent 4%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 3%, transparent 96%, rgba(0, 0, 0, 0.04)); }
.bk-right::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.07) 5%, transparent 16%), linear-gradient(270deg, rgba(0, 0, 0, 0.05), transparent 4%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 3%, transparent 96%, rgba(0, 0, 0, 0.04)); }
.bookview[data-layout='single'] .bk-right::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 7%); }
.bookview[data-layout='single'][data-dir='rtl'] .bk-right::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.12), transparent 7%); }
.bk-page.is-endpaper { background: color-mix(in srgb, var(--bk-paper) 88%, var(--bk-board)); }

/* ---- a page face ------------------------------------------------------------------------- */
.bk-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--pt) var(--px) var(--pb); color: var(--bk-ink); background: var(--bk-paper); }
.bk-running, .bk-foot { flex: none; height: 26px; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-ink-2); display: flex; align-items: flex-start; justify-content: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.bk-foot { align-items: flex-end; letter-spacing: 0.08em; text-transform: none; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bk-clip { position: relative; flex: none; width: var(--cw); height: var(--ch); overflow: hidden; }
.bk-flow {
  width: var(--cw); height: var(--ch); column-width: var(--cw); column-gap: var(--cgap); column-fill: auto;
  font-family: var(--bk-font); font-size: var(--bk-size); line-height: var(--lh); text-align: var(--bk-align);
  hyphens: auto; -webkit-hyphens: auto; font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
.bk-flow[data-rtl] { font-size: calc(var(--bk-size) * 1.08); font-variant-numeric: normal; }
.bk-flow p { margin: 0; text-indent: 1.4em; orphans: 2; widows: 2; white-space: pre-line; unicode-bidi: plaintext; text-align: inherit; }
.bk-flow p.bk-first, .bk-flow p.bk-h { text-indent: 0; }
.bk-flow p.bk-h { text-align: center; hyphens: none; break-after: avoid; margin-block: 0 var(--lh); color: var(--bk-ink); }
.bk-flow p.bk-h + p.bk-h { margin-top: calc(var(--lh) * -0.5); }
.bk-flow p.bk-h-label { margin-top: var(--lh); font-size: 0.82em; letter-spacing: 0.2em; font-variant: all-small-caps; color: var(--bk-ink-2); }
.bk-flow p.bk-h-title { font-family: var(--font-display); font-size: 1.5em; line-height: calc(var(--lh) * 1.5); letter-spacing: -0.005em; margin-bottom: calc(var(--lh) * 1.5); }
.bk-flow p.bk-h-small { font-size: 0.74em; letter-spacing: 0.06em; color: var(--bk-ink-2); }
.bk-flow p.bk-h-small:last-child { margin: var(--lh) 0 0; }
.bk-flow:not([data-rtl]) p.bk-open::first-letter { float: left; font-family: var(--font-display); font-size: calc(var(--lh) * 2.62); line-height: calc(var(--lh) * 2); padding-inline-end: 0.08em; margin-top: 0.02em; color: var(--bk-accent); }
.bk-flow.is-title { display: flex; flex-direction: column; justify-content: center; column-width: auto; }
.bk-flow.is-title p.bk-h { font-family: var(--font-display); font-size: 1.45em; line-height: calc(var(--lh) * 1.5); letter-spacing: 0.02em; }
.bk-flow.is-title p.bk-h + p.bk-h { font-size: 1em; font-style: italic; line-height: var(--lh); margin-top: 0; letter-spacing: 0; }
.bk-flow p.bk-tr { text-indent: 0; margin: calc(var(--lh) * 0.25) 0 calc(var(--lh) * 0.75); padding-inline-start: 0.9em; border-inline-start: 2px solid var(--bk-line); color: var(--bk-ink-2); }
.bk-flow mark { background: var(--bk-mark); color: inherit; border-radius: 2px; }
.bk-flow .s { border-radius: 2px; transition: background-color var(--d-3), box-shadow var(--d-3); }
.bk-flow .s.speaking { background: var(--bk-speak); box-shadow: 0 0 0 2px var(--bk-speak); }
.bk-note { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; color: var(--bk-ink-2); text-align: center; margin: auto; max-width: 30ch; }
.bk-scan { width: 100%; height: 100%; object-fit: contain; display: block; }
.bk-face.is-scan { padding: 10px 10px 4px; }
.bk-face.is-scan .bk-clip { width: 100%; flex: 1; height: auto; min-height: 0; }
.bk-face.is-blank { background: color-mix(in srgb, var(--bk-paper) 88%, var(--bk-board)); }
/* A ribbon on a bookmarked page. */
.bk-ribbon { position: absolute; top: -2px; inset-inline-end: 9%; width: 18px; height: 44px; z-index: 4; background: linear-gradient(#a23b2c, #7f2a1f); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); transform-origin: 50% 0; animation: ribbon-in var(--d-4) var(--spring-lively) both; }
@keyframes ribbon-in { from { transform: scaleY(0.2); opacity: 0; } }

/* ---- the turning leaf ------------------------------------------------------------------------ */
.bk-turn { position: absolute; top: 0; left: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.bookview[data-layout='single'] .bk-turn { left: 0; }
.bookview[data-layout='single'][data-dir='rtl'] .bk-turn { left: 100%; }
.bk-turn > div { position: absolute; }
.bk-turn-front, .bk-turn-flap { background: var(--bk-paper); overflow: hidden; will-change: clip-path, transform; }
.bk-turn-flap { transform-origin: 0 0; }
.bk-turn .bk-face { transition: none; }
.bk-turn-blank { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bk-paper) 90%, #7a6a4a), var(--bk-paper)); }
.bk-turn-shade-strip, .bk-turn-cast-strip { position: absolute; width: 4000px; margin-left: -2000px; transform-origin: 50% 0; }
.bk-turn-shade-strip { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) 9%, rgba(0, 0, 0, 0) 26%, rgba(255, 255, 255, 0.2) 52%, rgba(255, 255, 255, 0.04) 78%, rgba(0, 0, 0, 0.14)); }
.bk-turn-cast-strip { background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.12) 40%, transparent); }
.bookview[data-theme='dark'] .bk-turn-shade-strip { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 12%, rgba(255, 255, 255, 0.05) 52%, rgba(0, 0, 0, 0.25)); }

/* Where a page can be taken by its edge. Text between the edges stays selectable.
   A corner lifts a little under the pointer, to show that it can be taken. */
.bk-edge { position: absolute; top: 0; bottom: 0; width: clamp(34px, 11%, 76px); z-index: 5; cursor: pointer; touch-action: none; background: transparent; border: 0; padding: 0; }
.bk-edge-l { left: 0; }
.bk-edge-r { right: 0; }
.bk-edge[disabled] { cursor: default; }
.bk-edge::after { content: ''; position: absolute; bottom: 0; width: 40px; height: 40px; opacity: 0; transform: scale(0.35); transition: opacity var(--d-2), transform var(--d-4) var(--spring-lively); }
.bk-edge-r::after { right: 0; transform-origin: 100% 100%; background: linear-gradient(315deg, color-mix(in srgb, var(--bk-paper) 72%, #000) 0 50%, transparent 50%); filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.25)); }
.bk-edge-l::after { left: 0; transform-origin: 0 100%; background: linear-gradient(45deg, color-mix(in srgb, var(--bk-paper) 72%, #000) 0 50%, transparent 50%); filter: drop-shadow(2px -2px 3px rgba(0, 0, 0, 0.25)); }
.bk-edge:not([disabled]):hover::after { opacity: 1; transform: none; }
.bookview[data-turning='1'] .bk-edge::after, .bookview.is-dragging .bk-edge::after { opacity: 0; }

/* ---- the cover: opening and closing --------------------------------------------------------- */
.bk-opening { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); z-index: 9; perspective: 4200px; pointer-events: none; }
.bookview[data-layout='single'] .bk-opening { left: 0; }
.bookview[data-dir='rtl'][data-layout='spread'] .bk-opening { left: 0; }
.bk-leaf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; }
.bookview[data-dir='rtl'] .bk-leaf { transform-origin: 100% 50%; }
.bk-leaf .cover { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
/* The inside of the cover: the endpaper, seen once the cover has swung past upright. */
.bk-leaf-inside { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5px 2px 2px 5px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 30%, rgba(0, 0, 0, 0.14)), color-mix(in srgb, var(--bk-paper) 82%, var(--bk-board)); }
/* Closed: only the side under the cover exists; the other half of the binding is folded away.
   The binding is drawn as two fixed halves, and the far one is faded in, so that nothing has to be repainted while the cover moves. */
.bookview[data-layout='spread'] .bk-book:is(.is-closed, .is-opening, .is-closing) .bk-boards { clip-path: inset(-80px -80px -120px calc(50% - 2px)); }
.bookview[data-layout='spread'] .bk-book:is(.is-closed, .is-opening, .is-closing) .bk-boards-far { display: block; opacity: 0; clip-path: inset(-80px calc(50% + 2px) -120px -80px); }
.bookview[data-layout='spread'][data-dir='rtl'] .bk-book:is(.is-closed, .is-opening, .is-closing) .bk-boards { clip-path: inset(-80px calc(50% - 2px) -120px -80px); }
.bookview[data-layout='spread'][data-dir='rtl'] .bk-book:is(.is-closed, .is-opening, .is-closing) .bk-boards-far { clip-path: inset(-80px -80px -120px calc(50% + 2px)); }
.bookview[data-layout='spread'][data-dir='ltr'] .bk-book:is(.is-closed, .is-opening, .is-closing) :is(.bk-left, .bk-stack-l),
.bookview[data-layout='spread'][data-dir='rtl'] .bk-book:is(.is-closed, .is-opening, .is-closing) :is(.bk-right, .bk-stack-r) { opacity: 0; }
.bk-book.is-closed .bk-edge { display: none; }
.bk-book.is-opening { animation: bk-rise 1s var(--ease-out) both; }
.bk-book.is-opening .bk-leaf { animation: bk-open 1s cubic-bezier(0.45, 0, 0.2, 1) both; }
.bk-book.is-opening .bk-opening { animation: bk-leaf-fade 1s linear both; }
.bk-book.is-closing .bk-opening { animation: bk-leaf-fade 0.56s linear reverse both; }
.bookview[data-dir='rtl'] .bk-book.is-opening .bk-leaf { animation-name: bk-open-rtl; }
.bookview[data-layout='spread'] .bk-book.is-opening .bk-boards-far { animation: bk-unfold 1s linear both; }
.bookview[data-layout='spread'] .bk-book.is-opening :is(.bk-left, .bk-right, .bk-stack-l, .bk-stack-r) { animation: bk-reveal 1s linear both; }
.bk-book.is-closing .bk-leaf { animation: bk-open 0.56s cubic-bezier(0.5, 0, 0.3, 1) reverse both; }
.bookview[data-dir='rtl'] .bk-book.is-closing .bk-leaf { animation-name: bk-open-rtl; }
.bookview[data-layout='spread'] .bk-book.is-closing .bk-boards-far { animation: bk-unfold 0.56s linear reverse both; }
.bookview[data-layout='spread'] .bk-book.is-closing :is(.bk-left, .bk-right, .bk-stack-l, .bk-stack-r) { animation: bk-reveal 0.56s linear reverse both; }
/* The leaf only turns; it is its frame that fades at the end, so that the two sides of the leaf stay two sides. */
@keyframes bk-open { 0% { transform: rotateY(0); } 82%, 100% { transform: rotateY(-180deg); } }
@keyframes bk-open-rtl { 0% { transform: rotateY(0); } 82%, 100% { transform: rotateY(180deg); } }
@keyframes bk-leaf-fade { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bk-unfold { 0%, 46% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes bk-reveal { 0%, 78% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bk-rise { from { transform: scale(0.94) translateY(10px); } }
/* In the reveal, only the half that was folded away fades in; the half under the cover is there throughout. */
.bookview[data-layout='spread'][data-dir='ltr'] .bk-book:is(.is-opening, .is-closing) :is(.bk-right, .bk-stack-r),
.bookview[data-layout='spread'][data-dir='rtl'] .bk-book:is(.is-opening, .is-closing) :is(.bk-left, .bk-stack-l) { animation: none; opacity: 1; }

/* ---- floating toolbar and panels ---------------------------------------------------------- */
.bk-bar-wrap { display: flex; justify-content: center; padding: 6px 10px 14px; position: relative; z-index: 12; transition: opacity var(--d-4), transform var(--d-4) var(--spring); }
.bk-bar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: var(--r-pill); max-width: 100%; min-width: 0; background: color-mix(in srgb, var(--bk-paper) 82%, transparent); box-shadow: 0 0 0 0.5px var(--bk-line), 0 12px 30px -12px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); color: var(--bk-ink); }
.bk-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--bk-ink); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1); }
.bk-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--bk-ink) 10%, transparent); color: var(--bk-ink); }
.bk-btn:active:not(:disabled) { transform: scale(0.9); }
.bk-btn:disabled { opacity: 0.32; cursor: default; }
.bk-btn[aria-pressed='true'], .bk-btn[aria-expanded='true'] { background: var(--bk-ink); color: var(--bk-paper); }
.bk-btn[aria-pressed='true']:hover, .bk-btn[aria-expanded='true']:hover { background: var(--bk-ink); color: var(--bk-paper); }
.bk-btn .icon { --icon: 20px; stroke-width: 1.7; }
.bk-btn#bkBookmark[aria-pressed='true'] { background: transparent; color: #a23b2c; }
.bk-btn#bkBookmark[aria-pressed='true'] .icon { fill: currentColor; animation: pop var(--d-4) var(--spring-lively) both; }
.bk-btn.is-text { font-family: var(--font-display); font-size: var(--text-lg); }
.bk-sep { width: 1px; height: 22px; background: var(--bk-line); margin: 0 4px; flex: none; }
.bk-scrub { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; flex: 1 1 240px; max-width: 340px; padding: 0 6px; }
.bk-scrub input { width: 100%; accent-color: var(--bk-accent); height: 18px; margin: 0; }
.bk-scrub output { font-size: var(--text-2xs); color: var(--bk-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.immersive .bookview.is-idle .bk-bar-wrap { opacity: 0; transform: translateY(14px); pointer-events: none; }
body.immersive .bookview.is-idle .bk-head { opacity: 0; }

.bk-panel {
  --field-bg: color-mix(in srgb, var(--bk-ink) 6%, transparent); --fill: color-mix(in srgb, var(--bk-ink) 8%, transparent); --c-raised: color-mix(in srgb, var(--bk-paper) 92%, var(--bk-ink)); --c-ink: var(--bk-ink); --c-ink-2: var(--bk-ink-2); --c-ink-3: var(--bk-ink-2); --c-line-2: var(--bk-line); --c-accent: var(--bk-accent);
  position: absolute; z-index: 14; bottom: 78px; left: 0; width: min(372px, calc(100% - 20px)); max-height: min(72vh, calc(100% - 96px)); overflow: auto;
  padding: var(--sp-5); border-radius: var(--r-lg); background: color-mix(in srgb, var(--bk-paper) 90%, transparent); color: var(--bk-ink);
  -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: 0 0 0 0.5px var(--bk-line), 0 28px 64px -22px rgba(0, 0, 0, 0.62), 0 6px 16px -6px rgba(0, 0, 0, 0.2);
  transform-origin: var(--origin, 50%) 100%; animation: panel-in var(--d-4) var(--spring) both;
}
.bk-panel.is-steady { animation: none; }
.bk-panel.is-leaving { animation: panel-out var(--d-2) var(--ease-in) both; pointer-events: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }
.bk-panel h2 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.bk-panel .label { display: block; margin: var(--sp-4) 0 6px; color: var(--bk-ink-2); }
.bk-panel select, .bk-panel input[type='range'] { width: 100%; }
.bk-panel select { color: var(--bk-ink); border-color: var(--bk-line); }
.bk-panel input[type='range'] { accent-color: var(--bk-accent); height: 22px; }
.bk-panel .seg { display: flex; }
.bk-panel .seg button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
.bk-panel .hint { color: var(--bk-ink-2); }
.bk-swatches { display: flex; gap: 10px; }
.bk-swatch { flex: 1; min-width: 0; height: 48px; padding: 0; border-radius: var(--r-sm); border: 0; box-shadow: inset 0 0 0 1px var(--bk-line); cursor: pointer; font-family: var(--font-display); font-size: var(--text-md); transition: box-shadow var(--d-3), transform var(--d-1); }
.bk-swatch:active { transform: scale(0.96); }
.bk-swatch[data-theme-choice='auto'] { background: linear-gradient(115deg, #fbf9f3 50%, #1d1c19 50%); color: #8a8377; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--w-semibold); text-shadow: 0 0 6px #fbf9f3, 0 0 6px #fbf9f3; }
.bk-swatch[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--bk-accent), 0 0 0 3px color-mix(in srgb, var(--bk-accent) 28%, transparent); }
.bk-list { list-style: none; margin: 0 calc(var(--sp-2) * -1); padding: 0; }
.bk-list button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: start; background: transparent; border: 0; border-radius: var(--r-sm); padding: 9px var(--sp-2); color: var(--bk-ink); cursor: pointer; font-family: var(--font-display); font-size: var(--text-md); transition: background-color var(--d-2); }
.bk-list li + li { border-top: 1px solid var(--bk-line); }
.bk-list button:hover { background: color-mix(in srgb, var(--bk-ink) 7%, transparent); }
.bk-list button[aria-current='true'] { color: var(--bk-accent); }
.bk-list small { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--bk-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-panel .actions { margin-top: var(--sp-4); }
.bk-panel .bk-panel-first { margin-top: 0; }
.bk-panel .bk-panel-next { margin-top: var(--sp-5); }
.bk-panel p.hint { margin: var(--sp-3) 0 0; }
.bk-panel .btn { --btn-fg: var(--bk-ink); --btn-bg: color-mix(in srgb, var(--bk-ink) 9%, transparent); }
.bk-panel .btn-primary { --btn-bg: var(--bk-ink); --btn-fg: var(--bk-paper); }

@media (max-width: 640px) {
  .bk-head { padding: 4px 8px; min-height: 40px; gap: 8px; }
  .bk-head .chips, .bk-title { display: none; }
  .bk-bar { gap: 0; padding: 4px 5px; }
  .bk-btn { width: 36px; height: 36px; }
  .bk-sep, .bk-btn.is-wide { display: none; }
  .bk-scrub { flex-basis: 70px; padding: 0 2px; }
  .bk-stage { padding: 0 0 4px; }
  /* Panels rise from the bottom edge as a sheet. */
  .bk-panel { left: 8px !important; right: 8px; width: auto; bottom: 66px; max-height: min(70vh, calc(100% - 80px)); border-radius: var(--r-lg); transform-origin: 50% 100%; }
  .continue { gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); }
  .continue-cover { width: 84px; }
  .continue h2 { font-size: var(--text-xl); }
  .continue-author { display: none; }
  .continue-progress { flex-direction: column; align-items: stretch; gap: 6px; margin: var(--sp-3) 0; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .book-stand { min-height: 232px; padding: 20px 18px 0; }
  .book-body { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-opening { display: none; }
}