/* ===========================================================================
   Books: the reading room (assets/js/screens/books/reader/*)
   ---------------------------------------------------------------------------
   One full screen layer, <section class="bk-reader">, appended to <body> while
   a book is open, with html.bk-reading on the root.

   z-index: the layer sits at 64 on the shell ladder: above the screen FAB (44),
   the palette FAB (45), the tab bar (50) and the shell fallback toast (60);
   below ui.js overlays (70), #modals (75) and toasts (80), so a dialog or a
   toast opened from the reader shows over it. Inside the layer (its own
   stacking context): stage 1, warm light and brightness 2, timer dim 3,
   loading paper 4, chips and the "Where was I?" card 5, the bars 6, the timer
   hairline 7, the sheet veil 8, panels 9, the error card 10.

   Themes: data-theme on the root (white, cream, dim, night) maps the Books
   tokens of tokens.css onto the roles below; everything in the reader, the
   chrome included, reads only these roles, so Night stays dark everywhere.

   This file has two owners: the reader core (B2) writes everything above the
   line "== marks and ink (B3) ==", the marks plugins everything below it.
   Never rewrite the whole file: edit your own part in place.
   =========================================================================== */

@property --bk-turn {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* --------------------------------------------------------------- the shell */

html.bk-reading,
html.bk-reading body {
  overflow: hidden;
}

/* The app behind the book is not painted, not focusable and not read out. */
html.bk-reading .app {
  visibility: hidden;
}

html.bk-reading .cmdk-fab,
html.bk-reading .busybar {
  display: none;
}

/* ---------------------------------------------------------------- the room */

.bk-reader {
  /* light themes */
  --bk-paper: var(--bk-paper-cream);
  --bk-desk: var(--bk-desk-cream);
  --bk-ink: var(--bk-ink-cream);
  --bk-tint: var(--bk-paper-cream);
  --bk-tint-blend: multiply;
  --bk-cf-theme: invert(0);
  --bk-cf-dark: contrast(1);
  --bk-chrome-bg: var(--bk-chrome-light);
  --bk-panel-bg: var(--white);
  --bk-chrome-ink: var(--ink);
  --bk-chrome-soft: var(--muted);
  --bk-line: var(--gray-200);
  --bk-hover: var(--gray-100);
  --bk-on-bg: var(--navy);
  --bk-on-ink: var(--white);
  --bk-on-soft: var(--gold-a14);
  --bk-chip-bg: var(--navy);
  --bk-chip-ink: var(--white);
  --bk-knob: var(--white);
  --bk-tick: var(--gray-400);
  --bk-m0: var(--gray-200);
  --bk-m1: var(--gold-300);
  --bk-m2: var(--gold);
  --bk-hit-blend: multiply;
  --bk-page-shadow: var(--sh-md);

  position: fixed;
  inset: 0;
  z-index: 64;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bk-desk);
  color: var(--bk-chrome-ink);
  font-family: var(--f-ui);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background var(--t-slow);
}

.bk-reader:focus { outline: none; }


.bk-reader[data-theme="white"] {
  --bk-paper: var(--bk-paper-white);
  --bk-desk: var(--bk-desk-white);
  --bk-ink: var(--bk-ink-white);
  --bk-tint: transparent;
  --bk-tint-blend: normal;
}

.bk-reader[data-theme="dim"] {
  --bk-paper: var(--bk-paper-dim);
  --bk-desk: var(--bk-desk-dim);
  --bk-ink: var(--bk-ink-dim);
  --bk-tint: var(--bk-paper-dim);
  --bk-hover: var(--gray-200);
  --bk-m0: var(--gray-300);
}

.bk-reader[data-theme="night"] {
  --bk-paper: var(--bk-paper-night);
  --bk-desk: var(--bk-desk-night);
  --bk-ink: var(--bk-ink-night);
  --bk-tint: var(--bk-paper-night);
  --bk-tint-blend: lighten;
  --bk-cf-theme: invert(.88) hue-rotate(180deg);
  --bk-chrome-bg: var(--bk-chrome-night);
  --bk-panel-bg: var(--bk-paper-night);
  --bk-chrome-ink: var(--bk-ink-night);
  --bk-chrome-soft: var(--bk-ink-soft-night);
  --bk-line: var(--bk-chrome-line-night);
  --bk-hover: var(--navy-800);
  --bk-on-bg: var(--gold);
  --bk-on-ink: var(--navy-900);
  --bk-chip-bg: var(--navy-600);
  --bk-chip-ink: var(--bk-ink-night);
  --bk-knob: var(--bk-ink-night);
  --bk-tick: var(--bk-ink-soft-night);
  --bk-m0: var(--bk-chrome-line-night);
  --bk-m1: var(--gold-a30);
  --bk-hit-blend: screen;
  --bk-page-shadow: none;
}

.bk-reader[data-dark="1"] { --bk-cf-dark: contrast(1.22); }
.bk-reader[data-dark="2"] { --bk-cf-dark: contrast(1.45) brightness(.97); }

/* ---------------------------------------------------------------- the stage */

.bk-reader .bk-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  touch-action: none;
}

.bk-reader[data-mode="scroll"] .bk-stage { touch-action: pan-x pan-y; }

.bk-reader .bk-world {
  position: absolute;
  inset: 0;
  transform: translate(var(--bk-px, 0px), var(--bk-py, 0px)) scale(var(--bk-z, 1));
  transform-origin: 50% 50%;
  transition: transform var(--t-base);
}

.bk-reader.is-gesture .bk-world { transition: none; }

.bk-reader .bk-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  outline: none;
}

.bk-reader .bk-scroll-in {
  position: relative;
  width: max(100%, var(--bk-tw, 100%));
  height: var(--bk-th, 100%);
  transform-origin: var(--bk-pox, 50%) var(--bk-poy, 0px);
  transform: scale(var(--bk-pz, 1));
}

.bk-reader .bk-scroll-in > .bk-page {
  position: absolute;
  top: var(--bk-top, 0px);
  left: 50%;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------- the book */

.bk-reader .bk-book {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  width: var(--bk-bw);
  height: var(--bk-bh);
  transform: translate(-50%, -50%);
}

.bk-reader .bk-book.is-under { z-index: 1; }
.bk-reader .bk-book.is-over { z-index: 3; }

.bk-reader .bk-side {
  position: relative;
  flex: none;
  width: var(--bk-sw);
  height: var(--bk-sh);
}

.bk-reader .bk-side > .bk-page { position: absolute; top: 0; left: 0; }
.bk-reader .bk-side--l > .bk-page { left: auto; right: 0; }

/* The binding: a soft shade on each side of the spine, a lit line on its edge. */
.bk-reader .bk-book--spread .bk-side::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 12%;
  pointer-events: none;
}

.bk-reader .bk-book--spread .bk-side--l::after {
  right: 0;
  background: linear-gradient(to left, var(--bk-spine-shade), transparent);
  box-shadow: inset -1px 0 0 var(--bk-spine-light);
}

.bk-reader .bk-book--spread .bk-side--r::after {
  left: 0;
  width: 8%;
  background: linear-gradient(to right, var(--bk-spine-shade), transparent);
}

.bk-reader .bk-book--spread .bk-side.is-empty::after { display: none; }

.bk-reader .bk-book--single .bk-side--one::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 3%;
  background: linear-gradient(to right, var(--bk-spine-shade), transparent);
  pointer-events: none;
}

/* Page edges: the stack of read pages on the left grows, the rest shrinks. */
.bk-reader .bk-edge {
  position: absolute;
  top: 0.6%;
  bottom: 0.6%;
  z-index: 0;
  width: calc(1px + var(--bk-edge-w, 0px));
  background: repeating-linear-gradient(to right, var(--bk-paper) 0 1px, var(--bk-edge-line) 1px 2px);
  box-shadow: var(--bk-page-shadow);
  pointer-events: none;
}

.bk-reader .bk-edge--l {
  right: 100%;
  --bk-edge-w: calc(var(--bk-prog, 0) * 7px);
  border-radius: 3px 0 0 3px;
}

.bk-reader .bk-edge--r {
  left: 100%;
  --bk-edge-w: calc((1 - var(--bk-prog, 0)) * 7px);
  border-radius: 0 3px 3px 0;
}

.bk-reader .bk-book.is-cover .bk-edge--l,
.bk-reader .bk-book.is-last .bk-edge--r { display: none; }

.bk-reader .bk-book.is-bump-r { animation: bkr-bump-r var(--t-base); }
.bk-reader .bk-book.is-bump-l { animation: bkr-bump-l var(--t-base); }

@keyframes bkr-bump-r {
  40% { transform: translate(calc(-50% - 10px), -50%); }
}

@keyframes bkr-bump-l {
  40% { transform: translate(calc(-50% + 10px), -50%); }
}

/* ---------------------------------------------------------------- the page */

.bk-reader .bk-page {
  position: relative;
  width: var(--bk-vw);
  height: var(--bk-vh);
  overflow: hidden;
  background: var(--bk-paper);
  box-shadow: var(--bk-page-shadow);
  contain: layout paint;
}

.bk-reader .bk-box {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bk-w);
  height: var(--bk-h);
  transform: translate(calc(-1 * var(--bk-cx, 0px)), calc(-1 * var(--bk-cy, 0px)));
}

.bk-reader .bk-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--bk-cf-theme) var(--bk-cf-dark);
}

.bk-reader .bk-tint {
  position: absolute;
  inset: 0;
  background: var(--bk-tint);
  mix-blend-mode: var(--bk-tint-blend);
  pointer-events: none;
}

.bk-reader .bk-marks,
.bk-reader .bk-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.bk-reader:not([data-tool="read"]) .bk-ink {
  pointer-events: auto;
  touch-action: none;
}

.bk-reader .bk-hits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bk-reader .bk-hit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 2px;
  background: var(--bk-search-hit);
  mix-blend-mode: var(--bk-hit-blend);
  opacity: .5;
}

.bk-reader .bk-hit.is-current {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--gold);
}

.bk-reader .bk-links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bk-reader .bk-link {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 2px;
  pointer-events: auto;
  transition: background var(--t-fast);
}

.bk-reader .bk-link:hover { background: var(--gold-a14); }
.bk-reader .bk-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-ribbon {
  position: absolute;
  top: 0;
  right: 9%;
  z-index: 6;
  width: 28px;
  height: 0;
}

.bk-reader .bk-page-retry[hidden] { display: none; }

.bk-reader .bk-page-retry {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
}

.bk-reader .bk-page.is-flash { animation: bkr-flash var(--t-slower) 2; }

@keyframes bkr-flash {
  50% { box-shadow: 0 0 0 4px var(--gold-a30), var(--bk-page-shadow); }
}

/* PDF.js text layer: transparent glyphs over the canvas, selectable. */
.bk-reader .bk-text {
  --scale-round-x: 1px;
  --scale-round-y: 1px;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: transparent;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.bk-reader .bk-text :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.bk-reader .bk-text > :not(.markedContent),
.bk-reader .bk-text .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.bk-reader .bk-text .markedContent { display: contents; }
.bk-reader .bk-text span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.bk-reader .bk-text ::selection { background: var(--gold-a30); }
.bk-reader .bk-text br::selection { background: transparent; }

.bk-reader .bk-text .bk-eoc {
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  display: block;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.bk-reader:not([data-tool="read"]) .bk-text { pointer-events: none; }

/* ------------------------------------------------------------ the turning */

.bk-reader .bk-leaf {
  position: absolute;
  left: var(--bk-lx);
  top: var(--bk-ly);
  z-index: 4;
  width: var(--bk-lw);
  height: var(--bk-lh);
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: perspective(2400px) rotateY(calc(var(--bk-turn) * -180deg));
  transition: transform var(--t-slow), --bk-turn var(--t-slow);
  will-change: transform;
  pointer-events: none;
}

.bk-reader .bk-leaf--back {
  transform-origin: 100% 50%;
  transform: perspective(2400px) rotateY(calc(var(--bk-turn) * 180deg));
}

.bk-reader .bk-leaf.is-dragging { transition: none; }

.bk-reader .bk-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bk-paper);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bk-reader .bk-face--back { transform: rotateY(180deg); }

.bk-reader .bk-face > .bk-page {
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: none;
}

.bk-reader .bk-blank {
  position: absolute;
  inset: 0;
  background: var(--bk-paper);
}

.bk-reader .bk-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bk-reader .bk-leaf--fwd .bk-face--front .bk-shade {
  background: linear-gradient(to left, var(--bk-turn-shade), transparent 75%);
  opacity: calc(var(--bk-turn) * 2);
}

.bk-reader .bk-leaf--fwd .bk-face--back .bk-shade {
  background: linear-gradient(to left, var(--bk-turn-shade), transparent 75%);
  opacity: calc((1 - var(--bk-turn)) * 2);
}

.bk-reader .bk-leaf--back .bk-face--front .bk-shade {
  background: linear-gradient(to right, var(--bk-turn-shade), transparent 75%);
  opacity: calc(var(--bk-turn) * 2);
}

.bk-reader .bk-leaf--back .bk-face--back .bk-shade {
  background: linear-gradient(to right, var(--bk-turn-shade), transparent 75%);
  opacity: calc((1 - var(--bk-turn)) * 2);
}

.bk-reader .bk-world.is-sliding .bk-book {
  transition: transform var(--t-base), opacity var(--t-base);
}

.bk-reader .bk-world.is-sliding.is-dragging .bk-book { transition: none; }

.bk-reader .bk-book--out {
  transform: translate(calc(-50% - var(--bk-turn) * var(--bk-dir, 1) * 34vw), -50%);
  opacity: calc(1 - var(--bk-turn) * .9);
}

.bk-reader .bk-book--in {
  transform: translate(calc(-50% + (1 - var(--bk-turn)) * var(--bk-dir, 1) * 34vw), -50%);
  opacity: calc(.1 + var(--bk-turn) * .9);
}

/* ------------------------------------------------------------ light layers */

.bk-reader .bk-wash,
.bk-reader .bk-bright,
.bk-reader .bk-dimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bk-reader .bk-wash {
  z-index: 2;
  background: var(--bk-warm-wash);
  mix-blend-mode: multiply;
  opacity: var(--bk-warmth, 0);
}

.bk-reader .bk-bright {
  z-index: 2;
  background: var(--navy-900);
  opacity: calc((1 - var(--bk-bright, 1)) * .9);
}

.bk-reader .bk-dimmer {
  z-index: 3;
  background: var(--navy-900);
  opacity: 0;
  transition: opacity var(--t-slower);
}

.bk-reader.is-timeup .bk-dimmer { opacity: .42; }

.bk-reader .bk-timer-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 7;
  height: 2px;
  pointer-events: none;
}

.bk-reader .bk-timer-line::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--bk-left, 1) * 100%);
  background: var(--gold);
  transition: width var(--t-slow);
}

/* ---------------------------------------------------------------- loading */

.bk-reader .bk-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: var(--bk-desk);
  transition: opacity var(--t-slow);
}

.bk-reader.is-open .bk-loading {
  opacity: 0;
  pointer-events: none;
}

.bk-reader .bk-loading-paper {
  position: relative;
  display: grid;
  place-items: center;
  width: min(72vw, calc(80dvh * var(--bk-ar, .707)));
  aspect-ratio: var(--bk-ar, .707);
  overflow: hidden;
  border-radius: 2px;
  background: var(--bk-paper);
  box-shadow: var(--bk-page-shadow);
}

.bk-reader .bk-loading-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bk-cf-theme);
}

.bk-reader .bk-loading-title {
  padding: 0 12%;
  color: var(--bk-ink);
  font: 600 19px/1.35 var(--f-read);
  text-align: center;
}

.bk-reader .bk-loading-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
  text-align: center;
  opacity: 0;
  transition: opacity var(--t-slow);
}

.bk-reader.is-slow .bk-loading-line { opacity: 1; }
.bk-reader.is-failed .bk-loading-line { opacity: 0; }

.bk-reader .bk-error {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  display: grid;
  gap: var(--s-3);
  width: min(440px, calc(100% - 32px));
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bk-panel-bg);
  box-shadow: var(--sh-lg);
  color: var(--bk-chrome-ink);
  transform: translate(-50%, -50%);
}

.bk-reader .bk-error-t { margin: 0; font: 600 18px/1.3 var(--f-disp); }
.bk-reader .bk-error-m { margin: 0; color: var(--bk-chrome-soft); font-size: 14px; line-height: 1.5; }
.bk-reader .bk-error-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-2); }

/* -------------------------------------------------------------- the bars */

.bk-reader .bk-top,
.bk-reader .bk-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  background: var(--bk-chrome-bg);
  -webkit-backdrop-filter: blur(var(--blur-veil)) saturate(1.2);
  backdrop-filter: blur(var(--blur-veil)) saturate(1.2);
  color: var(--bk-chrome-ink);
  transition: transform var(--t-base), opacity var(--t-fast), background var(--t-slow);
}

.bk-reader .bk-top {
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 56px;
  padding: calc(6px + var(--safe-t)) calc(10px + var(--safe-r)) 6px calc(10px + var(--safe-l));
  border-bottom: 1px solid var(--bk-line);
}

.bk-reader .bk-bottom {
  bottom: 0;
  display: grid;
  gap: 2px;
  padding: 6px calc(12px + var(--safe-r)) calc(4px + var(--safe-b)) calc(12px + var(--safe-l));
  border-top: 1px solid var(--bk-line);
}

.bk-reader.is-chrome-off .bk-top {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.bk-reader.is-chrome-off .bk-bottom {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.bk-reader.is-loading .bk-bottom,
.bk-reader.is-loading .bk-group,
.bk-reader.is-loading .bk-pageno { visibility: hidden; }

.bk-reader .bk-top-l,
.bk-reader .bk-top-r,
.bk-reader .bk-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.bk-reader .bk-top-c {
  display: grid;
  flex: 1;
  min-width: 0;
  padding: 0 var(--s-2);
  line-height: 1.25;
}

.bk-reader .bk-title,
.bk-reader .bk-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bk-reader .bk-title { font-size: 14px; font-weight: 600; }
.bk-reader .bk-sub { color: var(--bk-chrome-soft); font-size: 12px; }

.bk-reader .bk-pageno {
  margin-right: var(--s-2);
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bk-reader .bk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-chrome-ink);
  font: 600 13px/1 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.bk-reader .bk-btn .ic { width: 20px; height: 20px; }
.bk-reader .bk-btn:hover { background: var(--bk-hover); }
.bk-reader .bk-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-btn[aria-pressed="true"],
.bk-reader .bk-btn.is-on {
  background: var(--bk-on-bg);
  color: var(--bk-on-ink);
}

.bk-reader .bk-btn:disabled {
  opacity: .35;
  cursor: default;
}

.bk-reader .bk-btn:disabled:hover { background: transparent; }
.bk-reader .bk-btn--x .ic { transform: rotate(45deg); }
.bk-reader .bk-btn--close { padding-right: 12px; }

.bk-reader .bk-bottom-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* --------------------------------------------------------------- scrubber */

.bk-reader .bk-scrub {
  position: relative;
  flex: 1;
  height: 36px;
  border-radius: var(--r-sm);
  cursor: pointer;
  touch-action: none;
}

.bk-reader .bk-scrub:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-scrub-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--bk-map, var(--bk-m0));
}

.bk-reader .bk-scrub-ticks { position: absolute; inset: 0; pointer-events: none; }

.bk-reader .bk-tick {
  position: absolute;
  top: 50%;
  left: calc(var(--bk-at) * 100%);
  width: 1px;
  height: 10px;
  margin-top: -5px;
  background: var(--bk-tick);
}

.bk-reader .bk-scrub-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--bk-pos, 0) * 100%);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bk-knob);
  box-shadow: var(--sh-sm);
  transition: left var(--t-fast), transform var(--t-fast);
}

.bk-reader .bk-scrub.is-dragging .bk-scrub-knob {
  transform: scale(1.2);
  transition: transform var(--t-fast);
}

.bk-reader .bk-tip[hidden] { display: none; }

.bk-reader .bk-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: clamp(64px, calc(var(--bk-pos, 0) * 100%), calc(100% - 64px));
  justify-items: center;
  gap: 4px;
  min-width: 120px;
  max-width: 200px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--bk-panel-bg);
  box-shadow: var(--sh-lg);
  transform: translateX(-50%);
  pointer-events: none;
}

.bk-reader .bk-tip:not([hidden]) { display: grid; }

.bk-reader .bk-tip-page {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  min-height: 60px;
}

.bk-reader .bk-tip-page canvas {
  display: block;
  width: 88px;
  height: auto;
  box-shadow: var(--sh-sm);
  filter: var(--bk-cf-theme);
}

.bk-reader .bk-tip-l { font-size: 12.5px; font-variant-numeric: tabular-nums; }

.bk-reader .bk-tip-c {
  max-width: 176px;
  overflow: hidden;
  color: var(--bk-chrome-soft);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bk-reader .bk-foot {
  justify-self: center;
  min-height: 28px;
  padding: 2px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bk-chrome-soft);
  font: 500 12px/1.2 var(--f-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.bk-reader .bk-foot:hover { background: var(--bk-hover); }
.bk-reader .bk-foot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------------ chips */

.bk-reader .bk-pills {
  position: absolute;
  left: 50%;
  bottom: calc(92px + var(--safe-b));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  transition: bottom var(--t-base);
}

.bk-reader.is-chrome-off .bk-pills { bottom: calc(20px + var(--safe-b)); }

.bk-reader .bk-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  background: var(--bk-chip-bg);
  box-shadow: var(--sh-md);
  color: var(--bk-chip-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.bk-reader .bk-pill.is-in { opacity: 1; transform: none; }

.bk-reader .bk-pill-go,
.bk-reader .bk-pill-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  min-width: 0;
  padding: 0 4px 0 14px;
  border: 0;
  background: none;
  color: inherit;
  font: 600 13px/1.25 var(--f-ui);
  text-align: left;
  cursor: pointer;
}

.bk-reader .bk-pill-go span { overflow: hidden; text-overflow: ellipsis; }
.bk-reader .bk-pill-go .ic { color: var(--gold); }

.bk-reader .bk-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
}

.bk-reader .bk-pill-x .ic { transform: rotate(45deg); }

.bk-reader .bk-pill-go:focus-visible,
.bk-reader .bk-pill-x:focus-visible { outline: none; border-radius: 999px; box-shadow: var(--focus-ring); }

/* "Where was I?" */
.bk-reader .bk-where {
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: 5;
  display: grid;
  gap: 6px;
  width: min(420px, calc(100% - 32px));
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bk-panel-bg);
  box-shadow: var(--sh-lg);
  color: var(--bk-chrome-ink);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.bk-reader .bk-where.is-in { opacity: 1; transform: translate(-50%, 0); }
.bk-reader .bk-where-t { font: 600 16px/1.3 var(--f-disp); }
.bk-reader .bk-where-ch { font: italic 15px/1.4 var(--f-read); }
.bk-reader .bk-where-p { color: var(--bk-chrome-soft); font-size: 12.5px; }

.bk-reader .bk-where-q {
  display: block;
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--gold);
  font: 14px/1.5 var(--f-read);
}

.bk-reader .bk-where .btn { justify-self: start; margin-top: var(--s-2); }

/* ----------------------------------------------------------------- panels */

.bk-reader .bk-veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--veil);
  opacity: 0;
  transition: opacity var(--t-base);
}

.bk-reader .bk-veil.is-in { opacity: 1; }

.bk-reader .bk-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  width: min(380px, 92vw);
  background: var(--bk-panel-bg);
  box-shadow: var(--sh-lg);
  color: var(--bk-chrome-ink);
  outline: none;
  transition: transform var(--t-base);
}

.bk-reader .bk-panel--wide { width: min(470px, 94vw); }

.bk-reader .bk-panel--right {
  right: 0;
  padding-right: var(--safe-r);
  border-left: 1px solid var(--bk-line);
  transform: translateX(104%);
}

.bk-reader .bk-panel--left {
  left: 0;
  padding-left: var(--safe-l);
  border-right: 1px solid var(--bk-line);
  transform: translateX(-104%);
}

.bk-reader .bk-panel--sheet {
  top: auto;
  left: 0;
  right: 0;
  width: auto;
  max-height: 78%;
  padding-bottom: var(--safe-b);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(104%);
}

.bk-reader .bk-panel.is-in { transform: none; }

.bk-reader .bk-grab {
  flex: none;
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--bk-line);
}

.bk-reader .bk-panel-h {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-3) var(--s-3) var(--s-2) var(--s-5);
}

.bk-reader .bk-panel-t {
  flex: 1;
  margin: 0;
  font: 600 16px/1.3 var(--f-disp);
}

.bk-reader .bk-panel-b {
  flex: 1;
  min-height: 0;
  padding: var(--s-1) var(--s-5) var(--s-5);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.bk-reader .bk-hint {
  margin: var(--s-2) 0;
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.bk-reader .bk-empty {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  color: var(--bk-chrome-soft);
  font-size: 14px;
}

.bk-reader .bk-empty p { margin: 0; }

/* Contents */
.bk-reader .bk-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-reader .bk-toc-b {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s-2) 10px calc(var(--s-3) + var(--bk-depth, 0) * 16px);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bk-chrome-ink);
  font: 400 14px/1.4 var(--f-ui);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.bk-reader .bk-toc-i[data-depth="0"] .bk-toc-b { font-weight: 600; }
.bk-reader .bk-toc-i:not([data-depth="0"]) .bk-toc-b { font-size: 13.5px; }
.bk-reader .bk-toc-b:hover { background: var(--bk-hover); }
.bk-reader .bk-toc-b:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-toc-b:disabled { opacity: .5; cursor: default; }

.bk-reader .bk-toc-b.is-on {
  background: var(--bk-on-soft);
  box-shadow: inset 3px 0 0 var(--gold);
}

.bk-reader .bk-toc-t { flex: 1; min-width: 0; }
.bk-reader .bk-toc-tick { color: var(--green); line-height: 0; }

.bk-reader .bk-toc-p {
  flex: none;
  color: var(--bk-chrome-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Pages */
.bk-reader .bk-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-4) var(--s-3);
  padding-top: var(--s-2);
}

.bk-reader .bk-thumb {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bk-chrome-soft);
  font: 500 12px/1.2 var(--f-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.bk-reader .bk-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-thumb-img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--bk-ar, .707);
  overflow: hidden;
  background: var(--bk-paper);
  box-shadow: var(--sh-sm);
  opacity: .72;
  transition: opacity var(--t-fast);
}

.bk-reader .bk-thumb-img canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--bk-cf-theme);
}

/* The same paper tint as the pages, so a cream book has cream thumbnails. */
.bk-reader .bk-thumb-img::before,
.bk-reader .bk-tip-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bk-tint);
  mix-blend-mode: var(--bk-tint-blend);
  pointer-events: none;
}

.bk-reader .bk-thumb:hover .bk-thumb-img { opacity: 1; }
.bk-reader .bk-thumb.is-read .bk-thumb-img { opacity: 1; }
.bk-reader .bk-thumb.is-skim .bk-thumb-img { opacity: .9; }

.bk-reader .bk-thumb.is-read .bk-thumb-img::after,
.bk-reader .bk-thumb.is-skim .bk-thumb-img::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
}

.bk-reader .bk-thumb.is-skim .bk-thumb-img::after { background: var(--gold-300); }

.bk-reader .bk-thumb.is-current .bk-thumb-img {
  opacity: 1;
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.bk-reader .bk-thumb.is-current { color: var(--bk-chrome-ink); font-weight: 700; }

/* Go to page, timer */
.bk-reader .bk-goto,
.bk-reader .bk-until { display: grid; gap: var(--s-2); }

.bk-reader .bk-goto-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.bk-reader .bk-goto-row .ui-input { flex: 1; min-width: 0; }

.bk-reader .bk-until {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-top: var(--s-3);
}

.bk-reader .bk-field-err { margin: 0; color: var(--red-700); font-size: 12.5px; }
.bk-reader[data-theme="night"] .bk-field-err { color: var(--red); }

/* Lists of actions (More, timer) */
.bk-reader .bk-list { display: grid; gap: 2px; }

.bk-reader .bk-list-b {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bk-chrome-ink);
  font: 500 14px/1.3 var(--f-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast);
}

.bk-reader .bk-list-b .ic { color: var(--bk-chrome-soft); }
.bk-reader .bk-list-b:hover { background: var(--bk-hover); }
.bk-reader .bk-list-b:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-list-b:disabled { opacity: .5; cursor: default; }
.bk-reader .bk-pace { margin-top: var(--s-4); }

/* Search */
.bk-reader .bk-search { display: grid; gap: var(--s-2); }

.bk-reader .bk-search-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bk-reader .bk-search-row .ui-input { flex: 1; min-width: 0; margin-right: var(--s-1); }

.bk-reader .bk-search-s {
  min-height: 18px;
  margin: 0;
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
}

.bk-reader .bk-results {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-reader .bk-result {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bk-chrome-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}

.bk-reader .bk-result:hover { background: var(--bk-hover); }
.bk-reader .bk-result:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-result.is-on { background: var(--bk-on-soft); box-shadow: inset 3px 0 0 var(--gold); }

.bk-reader .bk-result-p {
  color: var(--bk-chrome-soft);
  font: 600 11.5px/1.2 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.bk-reader .bk-result-t { font: 14px/1.5 var(--f-read); }

.bk-reader .bk-result-t mark {
  border-radius: 2px;
  background: var(--bk-search-hit);
  color: inherit;
}

/* Display */
.bk-reader .bk-sec {
  padding: var(--s-3) 0 var(--s-4);
  border-bottom: 1px solid var(--bk-line);
}

.bk-reader .bk-sec:last-child { border-bottom: 0; }

.bk-reader .bk-sec-t {
  margin: var(--s-1) 0 var(--s-3);
  color: var(--bk-chrome-soft);
  font: 600 11.5px/1.2 var(--f-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bk-reader .bk-set {
  display: grid;
  gap: 6px;
  margin: var(--s-3) 0;
}

.bk-reader .bk-set-l { color: var(--bk-chrome-soft); font-size: 12.5px; }

.bk-reader .bk-set .seg { display: flex; }
.bk-reader .bk-set .seg button { flex: 1; min-height: 36px; white-space: normal; }

.bk-reader .bk-range {
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bk-reader .bk-range:focus { outline: none; }
.bk-reader .bk-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--bk-m0); }
.bk-reader .bk-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bk-m0); }

.bk-reader .bk-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bk-knob);
  box-shadow: var(--sh-sm);
  -webkit-appearance: none;
  appearance: none;
}

.bk-reader .bk-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bk-knob);
  box-shadow: var(--sh-sm);
}

.bk-reader .bk-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.bk-reader .bk-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

.bk-reader .bk-row { margin: var(--s-2) 0; }
.bk-reader .bk-row .bk-hint { margin: 0 0 0 56px; }
.bk-reader .bk-switch { width: 100%; color: var(--bk-chrome-ink); }

.bk-reader .bk-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.bk-reader .bk-swatch {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--s-2) 2px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--bk-chrome-ink);
  font: 500 11.5px/1.2 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.bk-reader .bk-swatch:hover { background: var(--bk-hover); }
.bk-reader .bk-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-swatch.is-on { border-color: var(--gold); background: var(--bk-on-soft); }

.bk-reader .bk-swatch-dot {
  width: 30px;
  height: 30px;
  border: 1px solid var(--bk-line);
  border-radius: 50%;
  background: var(--bk-paper-cream);
}

.bk-reader .bk-swatch[data-theme="auto"] .bk-swatch-dot { background: linear-gradient(135deg, var(--bk-paper-cream) 50%, var(--bk-paper-night) 50%); }
.bk-reader .bk-swatch[data-theme="white"] .bk-swatch-dot { background: var(--bk-paper-white); }
.bk-reader .bk-swatch[data-theme="dim"] .bk-swatch-dot { background: var(--bk-paper-dim); }
.bk-reader .bk-swatch[data-theme="night"] .bk-swatch-dot { background: var(--bk-paper-night); }

/* Keyboard shortcuts */
.bk-reader .bk-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin: var(--s-2) 0;
}

.bk-reader .bk-keys dt { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-reader .bk-keys dd { margin: 0; font-size: 13.5px; }

.bk-reader .bk-kbd {
  padding: 2px 7px;
  border: 1px solid var(--bk-line);
  border-radius: 6px;
  background: var(--bk-paper);
  box-shadow: inset 0 -1px 0 var(--bk-line);
  color: var(--bk-chrome-ink);
  font: 500 11.5px/1.5 var(--f-mono);
}

/* Password and other controls inside the reader */
html.bk-reading .bk-pw { display: grid; gap: var(--s-2); }
html.bk-reading .bk-pw-err { margin: 0; color: var(--red-700); font-size: 12.5px; }

/* ----------------------------------------------- Night: shared components */

.bk-reader[data-theme="night"] .ui-input {
  border-color: var(--bk-chrome-line-night);
  background: var(--navy-800);
  color: var(--bk-ink-night);
}

.bk-reader[data-theme="night"] .ui-input::placeholder { color: var(--bk-ink-soft-night); }

.bk-reader[data-theme="night"] .btn--ghost {
  border-color: var(--bk-chrome-line-night);
  background: transparent;
  color: var(--bk-ink-night);
}

.bk-reader[data-theme="night"] .btn--ghost:hover { background: var(--navy-800); }
.bk-reader[data-theme="night"] .seg { background: var(--navy-800); }
.bk-reader[data-theme="night"] .seg button { color: var(--bk-ink-soft-night); }
.bk-reader[data-theme="night"] .seg button:hover { color: var(--bk-ink-night); }
.bk-reader[data-theme="night"] .seg button.is-on { background: var(--navy-600); color: var(--bk-ink-night); }
.bk-reader[data-theme="night"] .ui-switch-track { background: var(--navy-600); }
.bk-reader[data-theme="night"] .ui-switch[aria-checked="true"] .ui-switch-track { background: var(--gold); }
.bk-reader[data-theme="night"] .ui-switch-thumb { background: var(--bk-ink-night); }

.bk-reader[data-theme="dim"] .ui-input,
.bk-reader[data-theme="dim"] .seg button.is-on { background: var(--gray-50); }

/* ui.js dialogs opened from the reader (className bk-ov bk-ov--<theme>). */
html.bk-reading .ui-dialog.bk-ov--night {
  background: var(--bk-paper-night);
  color: var(--bk-ink-night);
}

html.bk-reading .ui-dialog.bk-ov--night .ui-dialog-t { color: var(--bk-ink-night); }
html.bk-reading .ui-dialog.bk-ov--night .ui-dialog-desc { color: var(--bk-ink-soft-night); }

html.bk-reading .ui-dialog.bk-ov--night .ui-input {
  border-color: var(--bk-chrome-line-night);
  background: var(--navy-800);
  color: var(--bk-ink-night);
}

html.bk-reading .ui-dialog.bk-ov--night .btn--ghost {
  border-color: var(--bk-chrome-line-night);
  background: transparent;
  color: var(--bk-ink-night);
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 899.98px) {
  .bk-reader .bk-pageno { display: none; }
}

@media (max-width: 599.98px) {
  .bk-reader .bk-top { gap: 0; padding-left: calc(4px + var(--safe-l)); padding-right: calc(4px + var(--safe-r)); }
  .bk-reader .bk-top-c { padding: 0 var(--s-1); }
  .bk-reader .bk-btn--close .bk-btn-l,
.bk-reader .bk-wide-only,
.bk-reader .bk-btn--turn { display: none; }
  .bk-reader .bk-btn--close { padding-right: 9px; }
  .bk-reader .bk-bottom { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); }
  .bk-reader .bk-pills { bottom: calc(84px + var(--safe-b)); }
}

@media (pointer: coarse) {
  .bk-reader .bk-btn { min-width: 44px; height: 44px; }
  .bk-reader .bk-scrub { height: 44px; }
  .bk-reader .bk-foot { min-height: 36px; }
  .bk-reader .bk-pill-go,
.bk-reader .bk-pill-t { min-height: 44px; }
  .bk-reader .bk-pill-x { width: 44px; height: 44px; }
  .bk-reader .bk-scrub-knob { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-reader .bk-page.is-flash,
.bk-reader .bk-book.is-bump-l,
.bk-reader .bk-book.is-bump-r { animation: none; }
}

/* Last in the core part, and doubled for weight: anything in the reading room
   that carries the hidden attribute stays hidden, whatever display its own
   class (.btn, a grid, a flex row) asks for. */
.bk-reader [hidden][hidden] { display: none; }

/* == marks and ink (B3) == */
/* Everything from this line to the end of the file belongs to the marks
   plugins of the reader (reader/marks.js, selection.js, ink.js,
   notes-panel.js). The reader core keeps its own rules above this section.

   Stacking inside a page box (reader core order, then ours on top):
   canvas, tint, marks (highlights and highlighter ink, blended), hits, text,
   ink (pen strokes), links, then .bk-pins (sticky notes and note badges) and
   .bk-live (the stroke being drawn). Floating pieces sit in the reader root,
   on the ladder of the reader core: the drawing palette at 6 (with the bars,
   later in the DOM), the selection menu and the popovers at 11 (above the
   panels at 9, so a menu opened next to a side panel is never under it). */

.bk-reader {
  --bk-mk-bg: var(--bk-chrome-light);
  --bk-mk-fg: var(--ink);
  --bk-mk-soft: var(--muted);
  --bk-mk-line: var(--gray-200);
  --bk-mk-hover: var(--gray-100);
  --bk-mk-field: var(--white);
  --bk-mk-ink: var(--bk-pen-ink);
}

.bk-reader[data-theme="night"] {
  --bk-mk-bg: var(--bk-chrome-night);
  --bk-mk-fg: var(--bk-ink-night);
  --bk-mk-soft: var(--bk-ink-soft-night);
  --bk-mk-line: var(--bk-chrome-line-night);
  --bk-mk-hover: var(--navy-800);
  --bk-mk-field: var(--navy-900);
  --bk-mk-ink: var(--bk-ink-night);
}

/* ------------------------------------------------------------ highlights */

/* The whole marks layer blends with the page under it, so a highlight never
   dims the letters: multiply on light paper, screen on night paper. */
.bk-reader .bk-box > .bk-marks { mix-blend-mode: multiply; }
.bk-reader[data-theme="night"] .bk-box > .bk-marks { mix-blend-mode: screen; }

.bk-reader .bk-mk--highlight rect{ fill: var(--bk-hl-gold); }
.bk-reader .bk-mk--highlight[data-color="green"] rect{ fill: var(--bk-hl-green); }
.bk-reader .bk-mk--highlight[data-color="blue"] rect{ fill: var(--bk-hl-blue); }
.bk-reader .bk-mk--highlight[data-color="red"] rect{ fill: var(--bk-hl-red); }
.bk-reader[data-theme="night"] .bk-mk--highlight rect { fill: var(--bk-hl-gold-night); }
.bk-reader[data-theme="night"] .bk-mk--highlight[data-color="green"] rect { fill: var(--bk-hl-green-night); }
.bk-reader[data-theme="night"] .bk-mk--highlight[data-color="blue"] rect { fill: var(--bk-hl-blue-night); }
.bk-reader[data-theme="night"] .bk-mk--highlight[data-color="red"] rect { fill: var(--bk-hl-red-night); }

.bk-reader .bk-mk--underline rect{ fill: var(--bk-mk-ink); opacity: .78; }

.bk-reader .bk-mk--note .bk-mk-wash{ fill: var(--gold-a05); }
.bk-reader .bk-mk--note line{
  stroke: var(--gold-600);
  stroke-width: 1.6;
  stroke-dasharray: 2 3;
  stroke-linecap: round;
}
.bk-reader[data-theme="night"] .bk-mk--note line { stroke: var(--gold); }

/* The mark whose menu is open. */
.bk-reader .bk-mk.is-on rect:not(.bk-mk-wash){
  stroke: var(--gold-600);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.bk-reader .bk-mk.is-flash,
.bk-reader .bk-ink-path.is-flash,
.bk-reader .bk-pin.is-flash,
.bk-reader .bk-rib.is-flash{ animation: bk-mk-flash var(--t-slower) 2; }

@keyframes bk-mk-flash {
  0%, 100% { opacity: 1; }
  45% { opacity: .2; }
}

/* ------------------------------------------------------------------ ink */

.bk-reader .bk-ink-path{ stroke: none; }
.bk-reader .bk-ink-path--pen{ fill: var(--bk-mk-ink); }
.bk-reader .bk-ink-path--pen[data-color="blue"]{ fill: var(--bk-pen-blue); }
.bk-reader .bk-ink-path--pen[data-color="red"]{ fill: var(--bk-pen-red); }
.bk-reader .bk-ink-path--pen[data-color="green"]{ fill: var(--bk-pen-green); }
.bk-reader .bk-ink-path--pen[data-color="gold"]{ fill: var(--bk-pen-gold); }

.bk-reader .bk-ink-path--highlighter{ fill: var(--bk-hl-gold); }
.bk-reader .bk-ink-path--highlighter[data-color="green"]{ fill: var(--bk-hl-green); }
.bk-reader .bk-ink-path--highlighter[data-color="blue"]{ fill: var(--bk-hl-blue); }
.bk-reader .bk-ink-path--highlighter[data-color="red"]{ fill: var(--bk-hl-red); }
.bk-reader[data-theme="night"] .bk-ink-path--highlighter { fill: var(--bk-hl-gold-night); }
.bk-reader[data-theme="night"] .bk-ink-path--highlighter[data-color="green"] { fill: var(--bk-hl-green-night); }
.bk-reader[data-theme="night"] .bk-ink-path--highlighter[data-color="blue"] { fill: var(--bk-hl-blue-night); }
.bk-reader[data-theme="night"] .bk-ink-path--highlighter[data-color="red"] { fill: var(--bk-hl-red-night); }

/* The stroke being drawn, on a canvas over the page for latency. */
.bk-reader .bk-live{
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bk-reader .bk-live--hl{ mix-blend-mode: multiply; }
.bk-reader[data-theme="night"] .bk-live--hl { mix-blend-mode: screen; }

/* While a drawing tool is chosen a finger draws instead of scrolling. */
.bk-reader[data-tool="pen"] .bk-box,
.bk-reader[data-tool="highlighter"] .bk-box,
.bk-reader[data-tool="eraser"] .bk-box,
.bk-reader[data-tool="note"] .bk-box {
  touch-action: none;
  cursor: crosshair;
}
.bk-reader[data-tool="eraser"] .bk-box { cursor: cell; }
.bk-reader[data-tool="note"] .bk-box { cursor: copy; }

/* -------------------------------------------- sticky notes and note badges */

.bk-reader .bk-pins{
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.bk-reader .bk-pin{
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gold-300);
  border-radius: 8px 8px 8px 3px;
  background: var(--gold-100);
  color: var(--gold-700);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.bk-reader .bk-pin::before{
  content: '';
  position: absolute;
  inset: -9px;
}
.bk-reader .bk-pin:hover{ box-shadow: var(--sh-md); }
.bk-reader .bk-pin:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-pin.is-dragging{
  box-shadow: var(--sh-lg);
  transform: translate(-50%, -50%) scale(1.12);
  cursor: grabbing;
}
.bk-reader .bk-pin .ic{ width: 15px; height: 15px; }

.bk-reader .bk-pin--note{
  width: 20px;
  height: 20px;
  border-color: var(--gold-600);
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-900);
  transform: translate(-20%, -75%);
}
.bk-reader .bk-pin--note .ic{ width: 12px; height: 12px; }

/* ----------------------------------------------------------- the ribbon */

.bk-reader .bk-rib{
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 44px;
  height: 58px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-touch-callout: none;
}
.bk-reader .bk-rib-shape{
  display: block;
  width: 20px;
  height: 38px;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-fast), transform var(--t-base);
}
.bk-reader .bk-rib:hover .bk-rib-shape,
.bk-reader .bk-rib:focus-visible .bk-rib-shape{ opacity: .45; transform: translateY(-4px); }
.bk-reader .bk-rib:focus-visible{ outline: none; }
.bk-reader .bk-rib:focus-visible::after{
  content: '';
  position: absolute;
  inset: 2px 4px 8px;
  border-radius: var(--r-sm);
  box-shadow: var(--focus-ring);
}
/* While the bars show, an empty ribbon is a faint hint on touch screens. */
@media (pointer: coarse) {
  .bk-reader:not(.is-chrome-off) .bk-rib:not(.is-on) .bk-rib-shape { opacity: .22; transform: translateY(-6px); }
}
.bk-reader .bk-rib.is-on .bk-rib-shape{
  opacity: 1;
  transform: none;
  background: linear-gradient(180deg, var(--gold-600), var(--gold) 26%, var(--gold));
}
.bk-reader .bk-rib.is-on{ filter: drop-shadow(0 2px 2px var(--bk-spine-shade)); }

/* ---------------------------------------------------- the selection menu */

.bk-reader .bk-sel,
.bk-reader .bk-pop{
  position: fixed;
  left: var(--bk-px, 8px);
  top: var(--bk-py, 64px);
  z-index: 11;
  border: 1px solid var(--bk-mk-line);
  border-radius: var(--r);
  background: var(--bk-mk-bg);
  color: var(--bk-mk-fg);
  box-shadow: var(--sh-lg);
  font-family: var(--f-ui);
  -webkit-backdrop-filter: blur(var(--blur-veil));
  backdrop-filter: blur(var(--blur-veil));
}
.bk-reader .bk-sel:not([data-side]),
.bk-reader .bk-pop:not([data-side]):not(.is-docked){ visibility: hidden; }
.bk-reader .bk-sel[hidden]{ display: none; }

.bk-reader .bk-sel{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
  animation: bk-mk-in var(--t-fast);
}

@keyframes bk-mk-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.bk-reader .bk-sel-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.bk-reader .bk-sel-row--sw{ padding-bottom: 4px; border-bottom: 1px solid var(--bk-mk-line); }

.bk-reader .bk-sw{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  min-height: 50px;
  padding: 6px 6px 5px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-fg);
  font: 600 11px/1.2 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.bk-reader .bk-sw:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-sw:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-sw[aria-pressed="true"]{ background: var(--bk-mk-hover); box-shadow: inset 0 0 0 1.5px var(--gold-600); }
.bk-reader .bk-sw-dot{
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 1px var(--bk-edge-line);
}
.bk-reader .bk-sw[data-color="green"] .bk-sw-dot{ background: var(--green); }
.bk-reader .bk-sw[data-color="blue"] .bk-sw-dot{ background: var(--blue); }
.bk-reader .bk-sw[data-color="red"] .bk-sw-dot{ background: var(--red); }
.bk-reader .bk-sw--ul .bk-sw-dot{
  width: 22px;
  height: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
  border-bottom: 3px solid var(--bk-mk-fg);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.bk-reader .bk-sw-t{ white-space: nowrap; }

.bk-reader .bk-sel-b,
.bk-reader .bk-sel-t{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-fg);
  font: 600 13px/1 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast);
}
.bk-reader .bk-sel-b:hover,
.bk-reader .bk-sel-t:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-sel-b:focus-visible,
.bk-reader .bk-sel-t:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-sel-t{ padding: 0 12px; }

@media (pointer: coarse) {
  .bk-reader .bk-sel-b,
  .bk-reader .bk-sel-t{ min-width: 44px; height: 44px; }
}

/* ------------------------------------------------------------ popovers */

.bk-reader .bk-pop{
  width: min(340px, calc(100vw - 16px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s-3);
  animation: bk-mk-in var(--t-fast);
}
.bk-reader .bk-pop.is-docked{
  left: 8px;
  right: 8px;
  top: calc(var(--safe-t) + 60px);
  width: auto;
  max-height: calc(100dvh - 140px);
}
.bk-reader .bk-pop--define{ width: min(300px, calc(100vw - 16px)); }

.bk-reader .bk-pop-body{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.bk-reader .bk-pop-sw{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px;
}
.bk-reader .bk-pop-sw .bk-sw{ min-width: 56px; flex: 1 1 0; }

.bk-reader .bk-pop-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.bk-reader .bk-pop-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 54px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-fg);
  font: 600 12px/1.2 var(--f-ui);
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bk-reader .bk-pop-btn:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-pop-btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-pop-btn[aria-pressed="true"]{ border-color: var(--gold-600); color: var(--gold-700); background: var(--gold-a14); }
.bk-reader[data-theme="night"] .bk-pop-btn[aria-pressed="true"] { color: var(--gold); }
.bk-reader .bk-pop-btn--danger{ color: var(--red-700); }
.bk-reader[data-theme="night"] .bk-pop-btn--danger { color: var(--red); }

.bk-reader .bk-pop-note,
.bk-reader .bk-pop-quote,
.bk-reader .bk-pop-word{
  margin: 0;
  color: var(--bk-mk-fg);
  font: 400 15px/1.5 var(--f-read);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bk-reader .bk-pop-note{
  max-height: 9em;
  overflow: auto;
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-a05);
}
.bk-reader .bk-pop-quote{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-left: var(--s-3);
  border-left: 3px solid var(--bk-mk-line);
  color: var(--bk-mk-soft);
  font-style: italic;
}
.bk-reader .bk-pop-word{ font-weight: 600; }
.bk-reader .bk-pop-hint{ margin: 0; color: var(--bk-mk-soft); font-size: 12.5px; line-height: 1.45; }

.bk-reader .bk-pop-action{
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  margin: 0;
  color: var(--bk-mk-fg);
  font-size: 13px;
  line-height: 1.45;
}
.bk-reader .bk-pop-action .ic{ flex: none; margin-top: 2px; color: var(--green); }

.bk-reader .bk-pop-tags,
.bk-reader .bk-pop-chips,
.bk-reader .bk-np-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bk-reader .bk-tag{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bk-mk-hover);
  color: var(--bk-mk-soft);
  font: 600 11.5px/1.5 var(--f-ui);
}

.bk-reader .bk-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--bk-mk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bk-mk-fg);
  font: 600 12px/1.2 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast);
}
.bk-reader .bk-chip:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-chip:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
@media (pointer: coarse) { .bk-reader .bk-chip{ min-height: 44px; } }

.bk-reader .bk-pop-field{ display: flex; flex-direction: column; gap: 6px; }
.bk-reader .bk-pop-l{ color: var(--bk-mk-soft); font: 600 12px/1.3 var(--f-ui); }
.bk-reader .bk-pop-in{
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--bk-mk-line);
  border-radius: var(--r-sm);
  background: var(--bk-mk-field);
  color: var(--bk-mk-fg);
  font: 400 14px/1.45 var(--f-ui);
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bk-reader .bk-pop-in:focus{ outline: none; border-color: var(--gold-600); box-shadow: var(--focus-ring); }
.bk-reader .bk-pop-in::placeholder{ color: var(--bk-mk-soft); }
.bk-reader textarea.bk-pop-in{ font: 400 15px/1.5 var(--f-read); }
.bk-reader .bk-pop-in--sticky{ min-height: 120px; background: var(--gold-100); color: var(--ink); }
.bk-reader .bk-pop-in--sticky::placeholder{ color: var(--gold-700); }
.bk-reader .bk-pop-in--date{ width: auto; }
.bk-reader[data-theme="night"] .bk-pop-in--date { color-scheme: dark; }

.bk-reader .bk-pop-acts{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-2);
}
.bk-reader .bk-pop-del{ margin-right: auto; color: var(--red-700); }
.bk-reader[data-theme="night"] .bk-pop-del { color: var(--red); }
.bk-reader[data-theme="night"] .bk-pop .btn--ghost,
.bk-reader[data-theme="night"] .bk-panel .bk-np .btn--ghost {
  border-color: var(--bk-mk-line);
  background: transparent;
  color: var(--bk-mk-fg);
}
.bk-reader[data-theme="night"] .bk-pop .btn--plain { color: var(--bk-mk-fg); }

.bk-reader .bk-pop-links{ display: flex; flex-direction: column; gap: 2px; }
.bk-reader .bk-pop-link{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  color: var(--bk-mk-fg);
  font: 600 13px/1.3 var(--f-ui);
  text-decoration: none;
  transition: background var(--t-fast);
}
.bk-reader .bk-pop-link span{ flex: 1; }
.bk-reader .bk-pop-link .ic:last-child{ color: var(--bk-mk-soft); }
.bk-reader .bk-pop-link:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-pop-link:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

/* Kept off screen: the copy fallback for browsers without the clipboard API. */
.bk-reader .bk-copy-ta{
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ------------------------------------------------------- the palette */

/* The palette floats at the top, under the bars: the bottom belongs to the
   scrubber and to the toasts of ui.js, which would cover its last buttons. */
.bk-reader .bk-pal{
  position: absolute;
  left: 50%;
  top: calc(var(--safe-t) + 68px);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--bk-mk-line);
  border-radius: 999px;
  background: var(--bk-mk-bg);
  color: var(--bk-mk-fg);
  box-shadow: var(--sh-lg);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(var(--blur-veil));
  backdrop-filter: blur(var(--blur-veil));
  transition: top var(--t-base);
  user-select: none;
  -webkit-user-select: none;
  animation: bk-mk-in var(--t-fast);
}
.bk-reader .bk-pal[hidden]{ display: none; }
.bk-reader.is-chrome-off .bk-pal { top: calc(var(--safe-t) + 12px); }


.bk-reader .bk-pal-g{
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.bk-reader .bk-pal-g + .bk-pal-g{ border-left: 1px solid var(--bk-mk-line); }

.bk-reader .bk-pal-b,
.bk-reader .bk-pal-c,
.bk-reader .bk-pal-w,
.bk-reader .bk-pal-done{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bk-mk-fg);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
@media (pointer: coarse) {
  .bk-reader .bk-pal-b,
  .bk-reader .bk-pal-c,
  .bk-reader .bk-pal-w{ width: 44px; height: 44px; }
}
.bk-reader .bk-pal-b:hover,
.bk-reader .bk-pal-c:hover,
.bk-reader .bk-pal-w:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-pal-b:focus-visible,
.bk-reader .bk-pal-c:focus-visible,
.bk-reader .bk-pal-w:focus-visible,
.bk-reader .bk-pal-done:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-pal-b[aria-pressed="true"]{ background: var(--navy); color: var(--white); }
.bk-reader[data-theme="night"] .bk-pal-b[aria-pressed="true"] { background: var(--gold); color: var(--navy-900); }
.bk-reader .bk-pal-b:disabled{ opacity: .38; cursor: default; }
.bk-reader .bk-pal-b:disabled:hover{ background: transparent; }

.bk-reader .bk-pal-dot{
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bk-mk-ink);
  box-shadow: inset 0 0 0 1px var(--bk-edge-line);
}
.bk-reader .bk-pal-c[data-color="blue"] .bk-pal-dot{ background: var(--bk-pen-blue); }
.bk-reader .bk-pal-c[data-color="red"] .bk-pal-dot{ background: var(--bk-pen-red); }
.bk-reader .bk-pal-c[data-color="green"] .bk-pal-dot{ background: var(--bk-pen-green); }
.bk-reader .bk-pal-c[data-color="gold"] .bk-pal-dot{ background: var(--bk-pen-gold); }
.bk-reader .bk-pal-c[data-tool="highlighter"] .bk-pal-dot{ background: var(--gold); border-radius: 5px; }
.bk-reader .bk-pal-c[data-tool="highlighter"][data-color="green"] .bk-pal-dot{ background: var(--green); }
.bk-reader .bk-pal-c[data-tool="highlighter"][data-color="blue"] .bk-pal-dot{ background: var(--blue); }
.bk-reader .bk-pal-c[data-tool="highlighter"][data-color="red"] .bk-pal-dot{ background: var(--red); }
.bk-reader .bk-pal-c[aria-pressed="true"]{ box-shadow: inset 0 0 0 2px var(--gold-600); }

.bk-reader .bk-pal-line{
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--bk-mk-fg);
}
.bk-reader .bk-pal-w[data-w="1"] .bk-pal-line{ height: 4px; }
.bk-reader .bk-pal-w[data-w="2"] .bk-pal-line{ height: 7px; }
.bk-reader .bk-pal-w[aria-pressed="true"]{ box-shadow: inset 0 0 0 2px var(--gold-600); }

.bk-reader .bk-pal-done{
  width: auto;
  padding: 0 16px;
  background: var(--gold);
  color: var(--navy-900);
  font: 700 13px/1 var(--f-ui);
}
.bk-reader .bk-pal-done:hover{ background: var(--gold-600); }
@media (pointer: coarse) { .bk-reader .bk-pal-done{ height: 44px; } }

/* On a phone the palette keeps two rows (three with the pen widths): the
   page arrows go (the reader's bottom bar has them) and the groups lose
   their separators. */
@media (max-width: 600px) {
  .bk-reader .bk-pal{
    column-gap: 6px;
    row-gap: 4px;
    width: calc(100vw - 16px);
    padding: 6px 4px;
    border-radius: var(--r-lg);
  }
  .bk-reader .bk-pal-g{ padding: 0; }
  .bk-reader .bk-pal-g + .bk-pal-g{ border-left: 0; }
  .bk-reader .bk-pal-pages{ display: none; }
  .bk-reader .bk-pal-tools{ order: 1; }
  .bk-reader .bk-pal-hist{ order: 2; }
  .bk-reader .bk-pal-done{ order: 3; padding: 0 14px; }
  .bk-reader .bk-pal-colors{ order: 4; }
  .bk-reader .bk-pal-widths{ order: 5; }
}

/* ----------------------------------------------------- the notes panel */

.bk-reader .bk-np{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bk-reader .bk-np-head{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bk-reader .bk-np-search{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  border: 1px solid var(--bk-mk-line);
  border-radius: var(--r-sm);
  background: var(--bk-mk-field);
  color: var(--bk-mk-soft);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bk-reader .bk-np-search:focus-within{ border-color: var(--gold-600); box-shadow: var(--focus-ring); }
.bk-reader .bk-np-q{
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bk-mk-fg);
  font: 400 14px/1.4 var(--f-ui);
}
.bk-reader .bk-np-q:focus{ outline: none; box-shadow: none; }
.bk-reader .bk-np-q::placeholder{ color: var(--bk-mk-soft); }

.bk-reader .bk-np-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.bk-reader .bk-np-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--bk-mk-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bk-mk-fg);
  font: 600 12px/1.2 var(--f-ui);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.bk-reader .bk-np-chip:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-np-chip:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-np-chip[aria-pressed="true"]{ border-color: var(--navy); background: var(--navy); color: var(--white); }
.bk-reader[data-theme="night"] .bk-np-chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: var(--navy-900); }
.bk-reader .bk-np-n{ color: inherit; opacity: .65; font-family: var(--f-mono); font-size: 11px; }
@media (pointer: coarse) { .bk-reader .bk-np-chip{ min-height: 44px; } }

.bk-reader .bk-np-count{ margin: 0; color: var(--bk-mk-soft); font-size: 12px; }
.bk-reader .bk-np-count:empty{ display: none; }

.bk-reader .bk-np-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bk-reader .bk-np-ch h3{
  margin: var(--s-3) 0 var(--s-1);
  color: var(--bk-mk-soft);
  font: 700 11px/1.3 var(--f-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bk-reader .bk-np-ch:first-child h3{ margin-top: 0; }

.bk-reader .bk-np-item{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.bk-reader .bk-np-item:hover{ background: var(--bk-mk-hover); }
.bk-reader .bk-np-go{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: var(--s-2) 84px var(--s-2) var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-fg);
  font-family: var(--f-ui);
  text-align: left;
  cursor: pointer;
}
.bk-reader .bk-np-go:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-np-meta{
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bk-mk-soft);
  font: 600 11.5px/1.3 var(--f-ui);
}
.bk-reader .bk-np-page{ margin-left: auto; font-family: var(--f-mono); font-weight: 500; }
.bk-reader .bk-np-dot{
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.bk-reader .bk-np-dot[data-color="green"]{ background: var(--green); }
.bk-reader .bk-np-dot[data-color="blue"]{ background: var(--blue); }
.bk-reader .bk-np-dot[data-color="red"]{ background: var(--red); }
.bk-reader .bk-np-dot[data-kind="underline"]{ height: 3px; border-radius: 1px; background: var(--bk-mk-fg); }
.bk-reader .bk-np-dot[data-kind="note"]{ background: transparent; box-shadow: inset 0 0 0 2px var(--gold-600); }
.bk-reader .bk-np-dot[data-kind="sticky"]{ border-radius: 3px; background: var(--gold-100); box-shadow: inset 0 0 0 1px var(--gold-600); }
.bk-reader .bk-np-dot[data-kind="bookmark"]{ width: 8px; height: 12px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); }
.bk-reader .bk-np-dot[data-kind="ink"]{ background: var(--bk-pen-blue); border-radius: 50% 50% 50% 0; }

.bk-reader .bk-np-text{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bk-mk-fg);
  font: 400 14.5px/1.5 var(--f-read);
}
.bk-reader .bk-np-text--plain{ font-family: var(--f-ui); font-size: 13.5px; }
.bk-reader .bk-np-note{
  padding-left: var(--s-2);
  border-left: 2px solid var(--gold);
  color: var(--bk-mk-fg);
  font: 400 13px/1.45 var(--f-ui);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bk-reader .bk-np-action{
  display: flex;
  gap: 6px;
  color: var(--bk-mk-fg);
  font: 400 13px/1.45 var(--f-ui);
}
.bk-reader .bk-np-action .ic{ flex: none; margin-top: 2px; color: var(--green); }

.bk-reader .bk-np-acts{
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 0;
  opacity: .9;
}
.bk-reader .bk-np-act{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-soft);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.bk-reader .bk-np-act:hover{ background: var(--bk-mk-bg); color: var(--bk-mk-fg); }
.bk-reader .bk-np-act:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-np-act--danger:hover{ color: var(--red-700); }
@media (pointer: coarse) {
  .bk-reader .bk-np-act{ width: 40px; height: 40px; }
  .bk-reader .bk-np-go{ padding-right: 126px; }
}

.bk-reader .bk-np-edit{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-2) var(--s-2);
}

.bk-reader .bk-np-empty{ list-style: none; }

.bk-reader .bk-np-export{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--bk-mk-line);
}
.bk-reader .bk-np-export-t{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--bk-mk-soft);
  font: 600 12px/1.3 var(--f-ui);
}

/* ------------------------------------------------- the assistant panel */

.bk-reader .bk-ask{ display: flex; flex-direction: column; gap: var(--s-3); }
.bk-reader .bk-ask-quote{
  margin: 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--gold);
  color: var(--bk-mk-soft);
  font: italic 400 14.5px/1.5 var(--f-read);
}
.bk-reader .bk-ask-wait,
.bk-reader .bk-ask-err,
.bk-reader .bk-ask-src{
  margin: 0;
  color: var(--bk-mk-soft);
  font-size: 13px;
  line-height: 1.45;
}
.bk-reader .bk-ask-err{ color: var(--bk-mk-fg); }
.bk-reader .bk-ask-src{ display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bk-reader .bk-ask-answer p{
  margin: 0 0 var(--s-3);
  color: var(--bk-mk-fg);
  font: 400 15px/1.6 var(--f-read);
}
.bk-reader .bk-ask-cites{ display: flex; flex-wrap: wrap; gap: 6px; }
.bk-reader .bk-ask-sk{ display: flex; flex-direction: column; gap: 8px; }
.bk-reader .bk-ask-sk span{
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--bk-mk-hover);
  animation: bk-ask-pulse var(--t-loop) ease-in-out infinite alternate;
}
.bk-reader .bk-ask-sk span:nth-child(2){ width: 86%; }
.bk-reader .bk-ask-sk span:nth-child(3){ width: 64%; }

@keyframes bk-ask-pulse {
  from { opacity: .45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-reader .bk-mk.is-flash,
  .bk-reader .bk-ink-path.is-flash,
  .bk-reader .bk-pin.is-flash,
  .bk-reader .bk-rib.is-flash,
  .bk-reader .bk-sel,
  .bk-reader .bk-pop,
  .bk-reader .bk-pal,
  .bk-reader .bk-ask-sk span{ animation: none; }
  .bk-reader .bk-mk.is-flash rect:not(.bk-mk-wash){
    stroke: var(--gold-600);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
}

/* == assistant (W2) == */
/* The reading assistant panel (reader/assistant.js): four actions, a question
   field, the answers of this session newest first, and the month's spend.
   Every selector sits under .bk-reader and takes its colours from the marks
   set (--bk-mk-*), so the panel follows Night like the notes panel does. The
   waiting lines reuse .bk-ask-wait and .bk-ask-sk of the marks section. */

.bk-reader .bk-as{ display: flex; flex-direction: column; gap: var(--s-4); }

.bk-reader .bk-as-note{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--bk-mk-hover);
  color: var(--bk-mk-fg);
  font-size: 13px;
  line-height: 1.45;
}
.bk-reader .bk-as-note[hidden]{ display: none; }

.bk-reader .bk-as-acts{ display: flex; flex-direction: column; gap: 6px; }
.bk-reader .bk-as-act{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-3);
  row-gap: 1px;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--bk-mk-line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-fg);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.bk-reader .bk-as-act:hover:not(:disabled){ background: var(--bk-mk-hover); }
.bk-reader .bk-as-act:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.bk-reader .bk-as-act:disabled{ opacity: .5; cursor: default; }
.bk-reader .bk-as-act-ic{
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-a14);
  color: var(--gold-700);
}
.bk-reader[data-theme="night"] .bk-as-act-ic{ color: var(--gold); }
.bk-reader .bk-as-act-t{ font: 600 14px/1.3 var(--f-ui); }
.bk-reader .bk-as-act-s{
  overflow: hidden;
  color: var(--bk-mk-soft);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-reader .bk-as-ask{ display: flex; flex-direction: column; gap: 6px; }
.bk-reader .bk-as-l{ color: var(--bk-mk-soft); font: 600 12px/1.3 var(--f-ui); }
.bk-reader .bk-as-ask-row{ display: flex; align-items: flex-end; gap: var(--s-2); }
.bk-reader .bk-as-q{ flex: 1 1 auto; min-width: 0; min-height: 44px; resize: none; }
.bk-reader .bk-as-send{ flex: none; }

.bk-reader .bk-as-list{ display: flex; flex-direction: column; gap: var(--s-3); }
.bk-reader .bk-as-empty{ margin: 0; color: var(--bk-mk-soft); font-size: 12.5px; line-height: 1.5; }

.bk-reader .bk-as-e{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--bk-mk-line);
  border-radius: var(--r-sm);
  background: var(--bk-mk-field);
}
.bk-reader .bk-as-e.is-new{ animation: bk-as-in var(--t-base) both; }
.bk-reader .bk-as-e-h{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  min-width: 0;
}
.bk-reader .bk-as-e-k{
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--bk-mk-fg);
  font: 700 12px/1.3 var(--f-ui);
}
.bk-reader .bk-as-e-k .ic{ color: var(--gold-600); }
.bk-reader .bk-as-e-s{
  min-width: 0;
  overflow: hidden;
  color: var(--bk-mk-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-reader .bk-as-e-q{
  margin: 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--gold);
  color: var(--bk-mk-soft);
  font: italic 400 14px/1.5 var(--f-read);
  overflow-wrap: anywhere;
}

.bk-reader .bk-as-text{
  color: var(--bk-mk-fg);
  font: 400 15px/1.6 var(--f-read);
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
.bk-reader .bk-as-text p{ margin: 0 0 var(--s-2); }
.bk-reader .bk-as-text p:last-child,
.bk-reader .bk-as-text .bk-as-list-in:last-child{ margin-bottom: 0; }
.bk-reader .bk-as-list-in{ margin: 0 0 var(--s-2); padding-left: 1.25em; }
.bk-reader .bk-as-list-in li{ margin: 0 0 4px; }
.bk-reader ul.bk-as-list-in{ list-style: disc; }
.bk-reader ol.bk-as-list-in{ list-style: decimal; }
.bk-reader .bk-as-h{ font-weight: 700; }
.bk-reader .bk-as-pg{
  padding: 0 4px;
  border-radius: 4px;
  background: var(--gold-a14);
  color: var(--bk-mk-fg);
  font: 600 12px/1.5 var(--f-ui);
  white-space: nowrap;
}
.bk-reader .bk-as-pg.is-unknown{ background: transparent; color: var(--bk-mk-soft); }

.bk-reader .bk-as-cites{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bk-reader .bk-as-cites-l{ margin-right: 2px; color: var(--bk-mk-soft); font: 600 12px/1.3 var(--f-ui); }

.bk-reader .bk-as-foot{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--bk-mk-line);
}
.bk-reader .bk-as-src{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  color: var(--bk-mk-soft);
  font-size: 12px;
  line-height: 1.45;
}
.bk-reader .bk-as-cost{ flex-basis: 100%; padding-left: 20px; }
.bk-reader .bk-as-copy{
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--bk-mk-soft);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.bk-reader .bk-as-copy:hover{ background: var(--bk-mk-hover); color: var(--bk-mk-fg); }
.bk-reader .bk-as-copy:focus-visible{ outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-as-err{ margin: 0; color: var(--bk-mk-fg); font-size: 13.5px; line-height: 1.5; }
.bk-reader .bk-as-soft{ margin: 0; color: var(--bk-mk-soft); font-size: 12.5px; line-height: 1.45; }
.bk-reader .bk-as-err-acts{ display: flex; flex-wrap: wrap; gap: var(--s-2); }

.bk-reader .bk-as-month{
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--bk-mk-line);
  color: var(--bk-mk-soft);
  font-size: 12px;
  line-height: 1.45;
}
.bk-reader .bk-as-month[hidden]{ display: none; }

.bk-reader[data-theme="night"] .bk-as .btn--ghost{
  border-color: var(--bk-mk-line);
  background: transparent;
  color: var(--bk-mk-fg);
}

@media (pointer: coarse){
  .bk-reader .bk-as .btn{ min-height: 44px; }
  .bk-reader .bk-as-copy{ width: 44px; height: 44px; }
}

@keyframes bk-as-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .bk-reader .bk-as-e.is-new{ animation: none; }
}

/* == wave 2 reading comfort (W1) == */
/* Everything from this line to "== end of wave 2 reading comfort (W1) =="
   belongs to the comfort plugins: reader/textmode.js, tts.js, ruler.js,
   ambient.js and quote.js. Layers inside the reader: Text Mode lies over the
   stage at 1 (later in the DOM, so above it, and under the warm light and the
   brightness at 2); the reading ruler sits at 3 with the timer dim, under the
   chips (5) and the bars (6). */

/* Narrow screens have no room for the comfort buttons: textmode.js puts their
   rows in a "Reading comfort" section of the reader's More panel instead. */
@media (max-width: 719.98px) {
  .bk-reader .bk-cf-wide { display: none; }
}

.bk-reader .bk-cf-state {
  margin-left: auto;
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
}

/* ------------------------------------------------------------- Text Mode */

.bk-reader .bk-tm {
  --bk-tm-font: var(--f-read);
  --bk-tm-measure: 34em;
  --bk-tm-gut: 3.2rem;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bk-paper);
  color: var(--bk-ink);
  transition: background var(--t-slow), color var(--t-slow);
}

.bk-reader .bk-tm[data-font="jakarta"] { --bk-tm-font: var(--f-ui); }
.bk-reader .bk-tm[data-measure="narrow"] { --bk-tm-measure: 28em; }
.bk-reader .bk-tm[data-measure="wide"] { --bk-tm-measure: 42em; }
.bk-reader.is-textmode .bk-stage { visibility: hidden; }

.bk-reader .bk-tm-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  outline: none;
  overflow-anchor: none;
  padding: calc(76px + var(--safe-t)) calc(var(--s-5) + var(--safe-r)) calc(136px + var(--safe-b)) calc(var(--s-5) + var(--safe-l));
}

.bk-reader .bk-tm-col {
  position: relative;
  max-width: var(--bk-tm-measure);
  margin: 0 auto;
  font-family: var(--bk-tm-font);
  font-size: var(--bk-tm-size, 20px);
  line-height: var(--bk-tm-leading, 1.6);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Room after the last line, so the last page of the window can reach the top. */
.bk-reader .bk-tm-col::after {
  content: '';
  display: block;
  height: 45vh;
}

.bk-reader .bk-tm-flow {
  position: relative;
  z-index: 1;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.bk-reader .bk-tm-p {
  margin: 0 0 .85em;
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.bk-reader .bk-tm[data-justify="1"] .bk-tm-p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.bk-reader .bk-tm-p.is-small { font-size: .86em; opacity: .84; }

.bk-reader .bk-tm-h2,
.bk-reader .bk-tm-h3 {
  margin: 1.7em 0 .7em;
  font-family: var(--bk-tm-font);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.bk-reader .bk-tm-h2 { font-size: 1.45em; }
.bk-reader .bk-tm-h3 { font-size: 1.18em; }
.bk-reader .bk-tm-flow > :first-child { margin-top: 0; }

/* The printed page number in the gutter, on the line where the page begins. */
.bk-reader .bk-tm-pg::before {
  content: attr(data-label);
  position: absolute;
  left: calc(-1 * var(--bk-tm-gut));
  width: calc(var(--bk-tm-gut) - 10px);
  overflow: hidden;
  padding-top: .5em;
  color: var(--bk-chrome-soft);
  font: 500 11px/1 var(--f-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.bk-reader .bk-tm-blank { height: 1px; }

.bk-reader .bk-tm-scan {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  margin: 1.2em 0;
  padding: var(--s-4);
  border: 1px dashed var(--bk-line);
  border-radius: var(--r-md);
  color: var(--bk-chrome-soft);
  font: 14px/1.5 var(--f-ui);
}

.bk-reader .bk-tm-scan p { margin: 0; }

.bk-reader .bk-tm-more {
  display: flex;
  margin: var(--s-4) auto;
  font-family: var(--f-ui);
}

.bk-reader .bk-tm .ic.bk-tm-up { transform: rotate(180deg); }

.bk-reader .bk-tm-status {
  margin: var(--s-4) 0;
  color: var(--bk-chrome-soft);
  font: 13px/1.5 var(--f-ui);
  text-align: center;
}

.bk-reader .bk-tm-status:empty { display: none; }

.bk-reader .bk-tm-hl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bk-reader .bk-tm-hl-r,
.bk-reader .bk-tts-r {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 3px;
  background: var(--bk-tts-sentence);
}

/* On night paper the day tint is too faint to follow. */
.bk-reader[data-theme="night"] .bk-tts-r {
  background: var(--bk-tts-sentence-night);
}

.bk-reader .bk-tm-setl {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

.bk-reader .bk-tm-val {
  color: var(--bk-chrome-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
  .bk-reader .bk-tm { --bk-tm-gut: var(--s-5); }
  .bk-reader .bk-tm-scroll { padding-top: calc(68px + var(--safe-t)); }
}

/* ------------------------------------------------------------ read aloud */

/* The sentence being read, on the page: under the text layer, inside box. */
.bk-reader .bk-tts-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: var(--bk-hit-blend);
}

.bk-reader .bk-tts-row {
  display: flex;
  gap: var(--s-2);
}

.bk-reader .bk-tts-play { flex: 1; }
.bk-reader .bk-tts-status:empty { display: none; }
.bk-reader .bk-tts-voice { width: 100%; }

/* --------------------------------------------------------- reading ruler */

.bk-reader .bk-ruler {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bk-reader .bk-ruler-dim {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bk-ruler-dim);
}

.bk-reader .bk-ruler-dim--top {
  top: 0;
  height: var(--bk-ruler-y, 40%);
}

.bk-reader .bk-ruler-dim--bottom {
  top: calc(var(--bk-ruler-y, 40%) + var(--bk-ruler-h, 48px));
  bottom: 0;
}

.bk-reader .bk-ruler-band {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--bk-ruler-y, 40%);
  height: var(--bk-ruler-h, 48px);
  background: var(--bk-ruler-band);
  box-shadow: inset 0 1px 0 var(--gold-a30), inset 0 -1px 0 var(--gold-a30);
  transition: top var(--t-fast), height var(--t-fast);
}

.bk-reader .bk-ruler.is-dragging .bk-ruler-band { transition: none; }

.bk-reader .bk-ruler-grip {
  position: absolute;
  top: 50%;
  right: calc(6px + var(--safe-r));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.bk-reader .bk-ruler[data-hand="left"] .bk-ruler-grip {
  right: auto;
  left: calc(6px + var(--safe-l));
}

.bk-reader .bk-ruler.is-dragging .bk-ruler-grip { cursor: grabbing; }
.bk-reader .bk-ruler-grip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.bk-reader .bk-ruler-knob {
  width: 10px;
  height: 28px;
  border-radius: 5px;
  background: var(--gold);
  box-shadow: var(--sh-sm);
}

/* ------------------------------------------------------------ quote card */

.bk-reader .bk-qc-body {
  display: grid;
  gap: var(--s-4);
}

.bk-reader .bk-qc-frame {
  overflow: hidden;
  border: 1px solid var(--bk-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.bk-reader .bk-qc-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}

.bk-reader .bk-qc-side {
  display: grid;
  gap: var(--s-3);
}

.bk-reader .bk-qc-side .seg { display: flex; }
.bk-reader .bk-qc-side .seg button { flex: 1; min-height: 36px; }

.bk-reader .bk-qc-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.bk-reader .bk-qc-acts .btn { flex: 1; }

.bk-reader .bk-qc-result {
  display: grid;
  gap: var(--s-2);
  color: var(--bk-chrome-soft);
  font-size: 13px;
}

.bk-reader .bk-qc-result:empty { display: none; }
.bk-reader .bk-qc-dl { justify-content: center; }
.bk-reader .bk-qc-hint { margin: 0; }

/* --------------------------------------------------------- ambient sound */

.bk-reader .bk-amb-t {
  display: grid;
  gap: 2px;
}

.bk-reader .bk-amb-t span {
  color: var(--bk-chrome-soft);
  font-size: 12.5px;
  font-weight: 400;
}

.bk-reader .bk-amb-b.is-on {
  background: var(--bk-on-soft);
  box-shadow: inset 3px 0 0 var(--gold);
}

.bk-reader .bk-amb-b.is-on .ic { color: var(--gold-600); }

@media (pointer: coarse) {
  .bk-reader .bk-tts-row .btn,
  .bk-reader .bk-qc-acts .btn,
  .bk-reader .bk-qc-dl,
  .bk-reader .bk-tm-more,
  .bk-reader .bk-tm-scan .btn { min-height: 44px; }

  .bk-reader .bk-qc-side .seg button,
  .bk-reader .bk-tm-setl + .bk-range { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-reader .bk-ruler-band,
  .bk-reader .bk-tm { transition: none; }
}

/* == end of wave 2 reading comfort (W1) == */