/* ───────────────────────── base ───────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--bg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  /* Alegreya's oldstyle figures sit better in running prose; verse numbers,
     chapter pickers and slider values opt back into lining/tabular below. */
  font-variant-numeric: oldstyle-proportional;
  /* Crisper letterforms: proper kerning, contextual ligatures, and quotes/marks
     hung into the margin where the browser supports it. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  hanging-punctuation: first allow-end last;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Script follows language: anything tagged Hebrew sets in Shofar, anything Greek
   in Alegreya — wherever the markup carries lang="he" / lang="grc". So native
   text never inherits a Latin display face (e.g. a Cormorant heading, which has
   no Hebrew/Greek) and silently falls through to whatever system font does.
   Specific classes (.t.he, .book-card .he, …) still set size/weight on top. */
:lang(he) { font-family: var(--hebrew); }
:lang(grc) { font-family: var(--serif); }

/* Smooth, consistent hover/focus transitions across interactive surfaces. Placed
   early so the few elements that need bespoke timing (covers, slider thumb, toast)
   set their own later and win by source order. */
.book-card, .recent-chip, .chip, .seg button, .lane-chip,
.link-row, .result.navigable, .result-open, .remove, .hl-remove, .swatch,
.case-toggle, .gear, #back, .star, .linkcopy, .search-field, .note-input,
.chapnav button, .chapnav select, .pb-ref, .pb-check, .vnum-inline, .home-parashah {
  transition:
    background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* ───────────────────────── topbar ───────────────────────── */
/* The topbar's total height (content + top/bottom padding + the safe-area
   inset) — shared with .reader-controls below so its sticky offset and its
   hide-animation travel distance both stay locked to the real thing instead
   of a second hardcoded guess that could drift out of sync with it. */
:root { --topbar-h: calc(3.25rem + env(safe-area-inset-top)); }
/* the page's side padding, kept in step with #app / .reader-page below so the top bar lines up with it */
:root { --page-pad: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
:root:has(#app > .reader-page) { --page-pad: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right)); }
/* position:fixed, not sticky: #topbar is the very first element on the page,
   always meant to be pinned to the screen top with no "flows normally, then
   sticks" phase — and it turns out that matters. Verified in a real browser
   (not just read from the CSS) that position:sticky on this element loses
   track of being "stuck" once scrolled deep into a long page and the class
   toggles a few times: it silently reverts to rendering at its normal,
   unstuck flow position — thousands of pixels off-screen at any real scroll
   depth — even though the JS-toggled class is completely correct throughout
   (.reader-controls, nested inside #app rather than sitting as the page's
   first element, doesn't hit this and stays correctly stuck at any depth).
   Fixed removes it from flow entirely, so #app compensates with matching
   top padding below (--topbar-h added to its own 1rem). */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* the wordmark and titles line up with the page's own side padding (--page-pad); the icons stay at the right edge, even where reader pages widen the side margins */
  padding: calc(0.5rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.5rem var(--page-pad);
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Reader chrome dock — see src/chrome.js + lib/chrome-scroll.js. The topbar and the reader bar are ONE unit:
   when the reader scrolls down deliberately, <html data-chrome="hidden"> slides BOTH up by the same distance
   (--chrome-shift = topbar + bar height, measured by chrome.js) over the same transition, so they can never
   drift apart and nothing is left ghosting at the top of the screen. A flick up (or the pointer reaching the
   top edge, or keyboard focus) returns them. `visibility` flips after the slide so a hidden bar is not
   focusable. Outside the reader there is no bar and the attribute never leaves "shown". */
:root {
  --chrome-dur: 0.28s;
  --chrome-ease: cubic-bezier(0.22, 0.9, 0.28, 1);        /* settles gently: quick out of the gate, soft landing */
  --chrome-shift: -12rem;                                /* overwritten by chrome.js */
  --topbar-shift: -3.5rem;
}
#topbar, .reader-controls {
  transition: transform var(--chrome-dur) var(--chrome-ease), visibility 0s linear 0s;
  will-change: transform;
}
:root[data-chrome="hidden"] #topbar,
:root[data-chrome="hidden"] .reader-controls {
  transform: translate3d(0, var(--chrome-shift), 0);
  visibility: hidden;
  /* leave a touch faster than it arrives, and only turn invisible once it is off-screen */
  transition: transform calc(var(--chrome-dur) * 0.8) cubic-bezier(0.4, 0, 0.9, 0.5), visibility 0s linear calc(var(--chrome-dur) * 0.8);
}
@media (prefers-reduced-motion: reduce) {
  #topbar, .reader-controls, :root[data-chrome="hidden"] #topbar, :root[data-chrome="hidden"] .reader-controls { transition: none; }
}
/* Electron on macOS only (electron/main.cjs's titleBarStyle:"hiddenInset" —
   no native title bar, just the traffic lights floating over the page's own
   content): #topbar becomes the title bar for real, already live-tinted per
   theme/accent like everywhere else, instead of a strip of OS-grey sitting
   above it. Draggable so the window still moves by its topbar the way a
   native title bar would; the interactive children are carved back out as
   no-drag so they stay clickable. Left padding clears the traffic lights.
   Windows/Linux keep the default native frame (untested here — see
   CLAUDE.md), so this is scoped to exactly mac + Electron, not just
   "any native wrapper". */
html[data-native="electron"][data-platform="darwin"] #topbar {
  -webkit-app-region: drag;
}
/* Room for the traffic lights only when they are there: not in full screen, not in a browser, not on iOS. */
html[data-native="electron"][data-platform="darwin"]:not([data-fullscreen]) #topbar { padding-left: 6.25rem; }
html[data-native="electron"][data-platform="darwin"] #back,
html[data-native="electron"][data-platform="darwin"] #title,
html[data-native="electron"][data-platform="darwin"] .gear {
  -webkit-app-region: no-drag;
}
#navback { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; }
#back { margin-inline-start: -0.5rem; }  /* the chevron's glyph, not its tap area, sits on the page edge */
#gear { margin-inline-end: -0.5rem; }   /* likewise the last icon on the right */
#title {
  margin: 0;
  /* the header bar's titles share the wordmark's typeface (Fraunces), whatever the environment */
  font-family: "Besorah Title", var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent-ink);
}
.gear, #back {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-ink);
}
.gear:hover, #back:hover { background: var(--hover); }
/* With nothing to go back to the button takes no room, so the wordmark / title sits on the page's left edge (the base
   display:grid would otherwise defeat the [hidden] attribute). */
#back[hidden] { display: none; }
.icon { width: 1.4rem; height: 1.4rem; display: block; }

/* ───────────────────────── layout ───────────────────────── */
/* #topbar is now position:fixed (removed from flow, see #topbar above), so
   #app's own top padding must additionally reserve its height — otherwise
   the fixed topbar would overlap the first line of content. */
#app { padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)); padding-top: calc(1rem + var(--topbar-h)); max-width: 58rem; margin: 0 auto; }
.foil { color: var(--accent); }
.divider { display: block; width: 9.5rem; height: auto; margin: 1.3rem auto; color: var(--foil-ink); }
/* The reader's chapter-heading divider sits tight to the title (compact head). */
.chapter-title + .divider { margin: 0.55rem auto 0.2rem; }

/* ───────────────────────── home: books in an alcove ───────────────────────── */
.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 2.5rem 1rem 3rem;
  min-height: calc(100dvh - 8rem);
  justify-content: center;
}
/* a recessed niche so the books sit in a lit space, not a void */
.bookcase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 50rem);
  padding: 4rem 2rem 0;
  border-radius: 0.7rem 0.7rem 0 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, #06080c), color-mix(in srgb, var(--accent) 9%, #05060a));
  box-shadow:
    inset 0 2px 26px rgba(0,0,0,.55),
    inset 0 0 0 1px color-mix(in srgb, var(--foil) 14%, transparent);
}
.bookcase::before { /* warm light spilling from the top of the niche */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 48% at 50% -2%, color-mix(in srgb, var(--foil) 24%, transparent), transparent 62%);
}
/* Time-of-day ambient: the light in the alcove warms toward evening and dims at
   night (set once on render from the local hour — static, so it respects
   reduced-motion). Amber at dawn/dusk, brighter and cooler through the day. */
.bookcase[data-tod="morning"]::before { background: radial-gradient(ellipse 78% 52% at 50% -3%, color-mix(in srgb, #ffd9a0 32%, transparent), transparent 60%); }
.bookcase[data-tod="day"]::before     { background: radial-gradient(ellipse 80% 54% at 50% -4%, color-mix(in srgb, #fff3da 30%, transparent), transparent 60%); }
.bookcase[data-tod="evening"]::before { background: radial-gradient(ellipse 74% 50% at 50% -2%, color-mix(in srgb, #ffb267 34%, transparent), transparent 58%); }
.bookcase[data-tod="night"]::before   { background: radial-gradient(ellipse 66% 44% at 50% -1%, color-mix(in srgb, var(--foil) 16%, transparent), transparent 64%); }
.books {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  gap: 1.4rem;
  align-items: flex-end;
  justify-content: center;
}
.cover {
  position: relative;
  width: clamp(8.5rem, 30vw, 20rem);
  /* Height tracks the viewport WIDTH (so narrow screens get shorter books, not
     tall skinny ones), capped by height for short windows and 28rem on large. */
  height: clamp(15rem, min(46vw, 62vh), 28rem);
  border-radius: 0.18rem 0.55rem 0.55rem 0.18rem;
  background:
    /* diagonal sheen */
    linear-gradient(108deg, transparent 32%, rgba(255,255,255,.05) 46%, transparent 60%),
    /* binding fold (left) + soft right edge */
    linear-gradient(90deg, rgba(0,0,0,.5) 0 2.5%, rgba(255,255,255,.09) 4% 6%, transparent 9% 90%, rgba(0,0,0,.34) 100%),
    /* centre glow */
    radial-gradient(125% 80% at 50% 26%, rgba(255,255,255,.06), transparent 60%),
    var(--cover-bg);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 30px -14px rgba(0,0,0,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1rem 1.35rem;
  color: var(--foil);
  text-decoration: none;
  /* a real 3D body: depth --thick, turned toward the reader so the gilded fore-edge
     shows. Each book carries its OWN perspective() (so the two side-by-side books
     are each viewed head-on, not through a shared off-centre vanishing point), and
     preserve-3d keeps the back cover + page block in its 3D space. */
  --thick: 2.1rem;
  transform-style: preserve-3d;
  transform: perspective(1000px) translateY(0) rotateY(-17deg);
  /* pivot the turn about the book's base so it stays planted on the shelf
     (centre-origin made the books float above it) */
  transform-origin: center bottom;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cover::before { /* faint leather grain */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(3deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px);
  opacity: 0.2;
  /* NB: no mix-blend-mode here. A blended descendant forces .cover to isolate,
     which flattens its transform-style: preserve-3d — collapsing the rotated page
     block to zero width (the book would turn but show no gilded fore-edge). */
}
.cover::after { /* contact shadow where the book meets the shelf */
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -8px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
  filter: blur(2px);
  z-index: -1;
}
/* Hover: lift and lean a little further toward the reader (deepening the turn it
   already has), so the book reaches out. Mirrored for the RTL Tanakh. */
.cover:hover { box-shadow: 0 32px 44px -16px rgba(0,0,0,.82); }
.cover-nt:hover { transform: perspective(1000px) translateY(-15px) rotateY(-27deg); }
.cover-tanakh:hover { transform: perspective(1000px) translateY(-15px) rotateY(27deg); }

/* Distinct hide per volume. The colours are a hand-picked pair PER THEME (set as
   --leather-tanakh / --leather-nt in themes.css), so each accent gets its own
   handsome, complementary pairing rather than one mechanical accent tint (which
   went jaundiced/sickly). The shared gold foil ties the two volumes together. */
/* The Tanakh is the far larger canon (~3× the New Covenant), so give it ~3× the
   page-block depth — a visibly fatter tome on the shelf. */
.cover-tanakh { --cover-bg: var(--leather-tanakh); --thick: 9rem; }
.cover-nt { --cover-bg: var(--leather-nt); --thick: 3rem; }
/* The Tanakh is a Hebrew book — it opens right-to-left, so mirror the cover:
   binding fold on the RIGHT, pages opening leftward (sheen + border-radius flip
   to match). Only this volume; the New Covenant stays left-bound. */
.cover-tanakh {
  border-radius: 0.55rem 0.18rem 0.18rem 0.55rem;
  background:
    linear-gradient(108deg, transparent 32%, rgba(255,255,255,.05) 46%, transparent 60%),
    linear-gradient(270deg, rgba(0,0,0,.5) 0 2.5%, rgba(255,255,255,.09) 4% 6%, transparent 9% 90%, rgba(0,0,0,.34) 100%),
    radial-gradient(125% 80% at 50% 26%, rgba(255,255,255,.06), transparent 60%),
    var(--cover-bg);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 30px -14px rgba(0,0,0,.72);
  /* turn the opposite way so the Tanakh presents its OWN (left) fore-edge */
  transform: perspective(1000px) translateY(0) rotateY(17deg);
}

/* ── Book depth (real 3D) ─────────────────────────────────────────────────────
   Inside the cover's preserved 3D space: the BACK COVER sits one --thick behind
   the front, and the PAGE BLOCK is the fore-edge side wall, folded into depth
   about the front cover's edge so it genuinely bridges the two covers. With the
   book turned ~13° the gilded pages show between them. The NT is left-bound (its
   fore-edge + page block on the right); the RTL Tanakh mirrors to the left. */
.cover-pages, .cover-back { position: absolute; pointer-events: none; }
/* back cover: a full panel one thickness behind the front */
.cover-back {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(0,0,0,.5), rgba(0,0,0,.66)), var(--cover-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  transform: translateZ(calc(var(--thick) * -1));
}
/* page block: the side wall along the fore-edge, folded 90° into depth. Fine
   VERTICAL striations are the page edges over a gilt sheen; the covers overhang
   top and bottom (the small inset) for a true edge. */
.cover-pages {
  top: 3%; bottom: 0.2rem;
  left: 97%;
  height: 96%;
  width: var(--thick);
  transform-origin: left center;
  transform: rotateY(90deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 9%, transparent 91%, rgba(0,0,0,.24)),
    repeating-linear-gradient(90deg, rgba(120,86,26,.5) 0 0.5px, rgba(255,247,214,0) 0.5px 2.4px),
    linear-gradient(90deg, #b88f38, #fdf4cc 44%, #e3c06a 74%, #a9802f);
}
/* RTL Tanakh: page block on the LEFT, folded the other way */
.cover-tanakh .cover-pages {
  left: auto; height: 96%; right: 97%; top: 3%;
  transform-origin: right center;
  transform: rotateY(-90deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 9%, transparent 91%, rgba(0,0,0,.24)),
    repeating-linear-gradient(90deg, rgba(120,86,26,.5) 0 0.5px, rgba(255,247,214,0) 0.5px 2.4px),
    linear-gradient(270deg, #b88f38, #fdf4cc 44%, #e3c06a 74%, #a9802f);
}

.cover .crown {
  width: 3.4rem; height: 2.55rem;
  filter: drop-shadow(0 1px 0.5px rgba(0,0,0,.28));
}
/* Per-volume foil emblem: tablets of the covenant (Tanakh), the crown (New
   Covenant). Sized to the SAME height so they read as a balanced pair and the
   title below starts at the same place — the crown is naturally wider. */
.cover .emblem {
  margin-top: 0.55rem;
  filter: drop-shadow(0 1px 0.5px rgba(0,0,0,.28));
}
.cover .emblem-tanakh { width: 2.75rem; height: 2.75rem; }
.cover .emblem-nt { width: 3.6rem; height: 2.75rem; }
.cover .cover-title {
  position: relative;
  text-align: center;
  font-size: clamp(1.6rem, 5.2vw, 2rem);
  line-height: 1.15;
  min-height: 3.4rem;
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 0.5px rgba(0,0,0,.28);
}
.cover .cover-title.he {
  font-size: clamp(1.6rem, 8vw, 3rem);
}
.cover .cover-title.grc {
  font-size: clamp(1.2rem, 3.5vw, 2.5rem);
}
.cover .cover-title span {
  margin: auto;
}
.cover .cover-title::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin: 0.7rem auto 0;
  background: var(--foil);
  opacity: 0.65;
  border-radius: 2px;
  margin-top: auto;
}
.cover .cover-sub {
  position: relative;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: clamp(.3em, 2vw, 0.75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.92;
  text-align: center;
}
.cover .cover-sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 2px;
  background: var(--foil);
  opacity: 0.65;
  border-radius: 2px;
}
/* double gold tooling border */
.cover-frame {
  position: absolute;
  inset: 0.6rem;
  border: 1.5px solid var(--foil);
  border-radius: 0.16rem;
  opacity: 0.72;
  pointer-events: none;
}
.cover-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 0.75px solid var(--foil);
  border-radius: 0.1rem;
  opacity: 0.55;
}

/* the wooden shelf the books stand on (top surface + front edge thickness) */
.shelf-board {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0.5rem;
  border-radius: 1px;
  background: linear-gradient(180deg, #b98553 0%, #8a5a2c 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,196,.55);
}
.shelf-board::before { /* front face (gives the shelf thickness) + cast shadow */
  content: "";
  position: absolute;
  left: -2.5%;
  right: -2.5%;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.15rem;
  background: linear-gradient(180deg, #6f4622 0%, #553518 62%, #3c270f 100%);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 16px 24px -8px rgba(0,0,0,.8);
}
.shelf-board::after { /* wood grain on the front face */
  content: "";
  position: absolute;
  left: -2.5%;
  right: -2.5%;
  top: 100%;
  height: 1.15rem;
  border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 3px, transparent 3px 12px);
  opacity: 0.5;
}
.home-hint {
  margin: .5rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  opacity: 0.6;
}
/* Search bar on the home screen — under the shelf, above the this-week teaser.
   Extra margin-top on top of .home's own flex gap, so the gap above (from the
   alcove) reads wider than the gap below (to the teaser) without changing
   that one uniformly for every child of .home. */
.home-search { width: min(92vw, 32rem); margin-top: 2.2rem; } /* a focal point of its own: air above, less below */
.home-search .search-field { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12); }
.home-search .search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* This-week's portion teaser under the shelf on the home screen. */
.home-parashah {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  margin-top: 0.4rem; padding: 0.5rem 1.1rem; border-radius: 0.5rem;
  text-decoration: none; color: var(--ink); text-align: center;
  transition: background-color 0.15s ease;
}
.home-parashah:hover { background: var(--hover); }
/* a foil flourish crowning the this-week teaser, like an inscription */
.home-parashah::before {
  content: "";
  width: 5rem; height: 0.85rem;
  margin-bottom: 0.2rem;
  background-color: var(--foil-ink);
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
}
.hp-label {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-ink); opacity: 0.75;
}
.hp-he { font-family: var(--hebrew); font-size: 1.55rem; line-height: 1.2; color: var(--foil-ink); }
.hp-name { font-size: 0.9rem; letter-spacing: 0.03em; opacity: 0.8; }

/* "Recently read" — chips of this session's chapters, below the bookcase. */
.recent-strip {
  margin: 1rem auto 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem 0.65rem;
  align-items: center; justify-content: center;
  max-width: 40rem;
}
.recent-label {
  width: 100%;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.55;
}
.recent-chip {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.85rem; text-decoration: none;
}
.recent-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ───────────────────────── book index ───────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.6rem 0 0.7rem;
  color: var(--accent-ink);
}
.section-head h2 :lang(grc) {
  font-weight: 500;
}
/* A small foil diamond before the section name, then a foil rule fading out after
   it — so 'Torah', 'Nevi'im' &c. read as illuminated section marks. */
.section-head::before {
  content: ""; flex: none;
  width: 0.5rem; height: 0.5rem;
  transform: rotate(45deg); border-radius: 1px;
  background: var(--foil-ink); opacity: 0.85;
}
.section-head::after {
  content: ""; flex: 1; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--foil-ink) 75%, transparent), transparent);
}
.section-head h2 { margin: 0; font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: 0.01em; }
/* A subordinate grouping within a section (e.g. The Twelve under Nevi'im):
   quieter and indented so it reads as a child of the section above it. */
.section-subhead { margin: 0.9rem 0 0.6rem; padding-inline-start: 0.9rem; gap: 0.5rem; opacity: 0.92; }
.section-subhead::before { width: 0.36rem; height: 0.36rem; opacity: 0.7; }
.section-subhead h3 { margin: 0; font-family: var(--display); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.01em; }

/* Slim foil underline under the section headings on the saved-views, search,
   settings and data pages. */
.results-head, .data-page h2, .slider-group h3 { position: relative; padding-bottom: 0.3rem; }
.results-head::after, .data-page h2::after, .slider-group h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 7rem; max-width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--foil-ink), transparent);
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}
.book-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.15rem;
  text-align: start;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 0.5rem;
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: inherit;
}
.book-card:hover { border-color: var(--accent); background: var(--hover); }
.book-card .bn { font-weight: 600; }
.book-card .bne { font-size: 0.8rem; opacity: 0.82; }
.book-card .he { font-family: var(--hebrew); font-size: 1.2rem; }
.book-card .grc { font-family: var(--serif); }

/* Extensible footer below the book grid: weekly Torah portion now, room for more
   schedules later (study plans, the monthly Psalms cycle, …) stacked beneath. */
.index-extras { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
/* a grand filigree rule closing the book grid, above the portion bands */
.index-rule {
  display: block;
  width: min(16rem, 60%); height: auto;
  align-self: center;
  margin: 0.2rem auto 1rem;
  color: var(--foil-ink);
}

/* ── this-week's Torah portion band — echoes the homepage cover (leather + gold
   tooling). Tanakh page uses the Tanakh hide, the NT page the NT hide. ── */
.parashah-band {
  position: relative;
  max-width: 34rem;
  min-width: 15rem;
  border-radius: 0.5rem;
  padding: 1.9rem 2.05rem 1.95rem;
  margin: 0.25rem auto 1.4rem;
  color: rgba(243, 231, 198, 0.92);
  background:
    linear-gradient(108deg, transparent 30%, rgba(255,255,255,.05) 46%, transparent 62%),
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
    var(--pb-leather, var(--leather-tanakh));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 28px -16px rgba(0,0,0,.7);
}
.parashah-band::before { /* faint leather grain, matching the cover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(3deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px);
  opacity: 0.2;
  mix-blend-mode: overlay;
}
.band-tanakh { --pb-leather: var(--leather-tanakh); }
.band-nt { --pb-leather: var(--leather-nt); }
/* Daily schedules (five-a-day Psalms, Mel's study). The schedule name reads as a
   proper title (like the portion title); readings centre under it, a little larger
   and more legible than a portion's stacked list. */
.band-daily .pb-readings { max-width: none; }
.band-daily .pb-row { justify-content: flex-start; }
.band-daily .pb-meaning { font-size: 0.86rem; font-style: normal; opacity: 0.85; letter-spacing: 0.03em; }
.band-daily .pb-ref { font-size: 1.05rem; }
.band-daily .pb-check { width: 1.25rem; height: 1.25rem; }
/* double gold tooling border (as on the cover) */
.pb-frame {
  position: absolute;
  inset: 0.4rem;
  border: 1.5px solid var(--foil);
  border-radius: 0.35rem;
  opacity: 0.6;
  pointer-events: none;
}
.pb-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 0.75px solid var(--foil);
  border-radius: 0.3rem;
  opacity: 0.5;
}
.pb-head { position: relative; text-align: center; }
.pb-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--foil);
  opacity: 0.9;
}
.pb-he {
  font-family: var(--hebrew);
  direction: rtl;
  font-size: clamp(1.3rem, 4.5vw, 1.65rem);
  line-height: 1.15;
  margin: 0.15rem 0 0.05rem;
  color: var(--foil);
  text-shadow: 0 1px 0.5px rgba(0,0,0,.3);
}
/* every card's title: English, in the wordmark's face (Fraunces), gold like cover lettering */
.pb-title { font-family: "Besorah Wordmark", var(--display); font-weight: 600; font-size: clamp(1.45rem, 4.6vw, 1.85rem); line-height: 1.15; letter-spacing: 0.005em; margin: 0.25rem 0 0.1rem; color: var(--foil); text-shadow: 0 1px 0.5px rgba(0, 0, 0, .3); }
.pb-name { font-size: 0.92rem; letter-spacing: 0.03em; }
.pb-meaning { font-size: 0.75rem; opacity: 0.82; font-style: italic; margin-top: 0.1rem; }
.pb-head::after { /* foil rule under the heading */
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin: 0.5rem auto 0;
  background: var(--foil);
  opacity: 0.6;
  border-radius: 2px;
}
.pb-readings { position: relative; max-width: 30rem; min-width: 15rem; margin: 0.55rem auto 0; }
.pb-sec-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foil);
  opacity: 0.85;
  margin: 0.45rem 0 0.05rem;
}
.pb-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.2rem 0; }
.pb-check {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--foil);
  background: transparent;
  color: var(--foil);
  display: block;
  cursor: pointer;
  text-align: center;
  opacity: 0.85;
  padding: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.pb-check .icon { width: .8rem; height: .8rem; 
margin: auto; opacity: 0; }
.pb-check:hover { opacity: 1; }
.pb-check:hover .icon { opacity: 0.4; }
.pb-check[aria-pressed="true"] { background: var(--foil); opacity: 1; }
.pb-check[aria-pressed="true"] .icon { opacity: 1; color: #1a1206; }
.pb-ref { color: rgba(243, 231, 198, 0.92); text-decoration: none; font-size: 0.88rem; }
.pb-ref:hover { color: #fff; text-decoration: underline; }
.pb-ref--plain { opacity: 0.65; }
.pb-row.done .pb-ref { opacity: 0.5; text-decoration: line-through; }
.settings-note { font-size: 0.8rem; opacity: 0.65; margin: 0.4rem 0 0; }

/* ───────────────────────── reader ───────────────────────── */
/* The reader bar: sticky right below the topbar, centred groups that wrap to stack. It slides away and back
   WITH the topbar as one unit (see "Reader chrome dock" above and src/chrome.js) on every screen size. No
   fill of its own beyond the theme's chrome tone. */
.reader-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.85rem;
  margin: 0.2rem 0 0.9rem;
  position: sticky;
  top: var(--topbar-h); /* docks directly under the fixed header bar (the bar's own padding gives the air) */
  z-index: 15;
  padding: 0.5rem 0.7rem;
  /* border-radius: 1.1rem; */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
}
/* Lifted shadow on every floating control (the same weight as .hl-bar, the
   other panel-less floating toolbar) so each pill/select stays legible over
   whatever chapter text scrolls beneath it once stuck. */
.reader-controls .seg,
.reader-controls .chip,
.reader-controls .chapnav button,
.reader-controls .chapnav select {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* The bare "Columns"/"Text" label has no pill of its own — a soft halo keeps
   it readable over the text scrolling underneath, instead of a background box. */
.reader-controls .par-toggles-label {
  text-shadow: 0 0 5px var(--bg), 0 0 5px var(--bg), 0 0 9px var(--bg);
}
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.seg button { border: 1px solid transparent; background: var(--card); padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.seg button:not([aria-pressed="true"]):hover { border-color: var(--accent); }
/* The pill clips its buttons (overflow:hidden), so the first/last button must be rounded to the pill, or its
   hover border is square and gets cut off at the ends. Matching radii keep the ring one width all the way round. */
.seg button:first-child { border-radius: 999px 0 0 999px; }
.seg button:last-child { border-radius: 0 999px 999px 0; }
.seg button:only-child { border-radius: 999px; }
.chapnav { display: flex; align-items: center; gap: 0.4rem; }
/* Match the filter pills (.chip / .seg / .lane-chip): rounded, card-filled, with
   an accent border on hover. */
.chapnav button {
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.chapnav button[disabled] { opacity: 0.4; cursor: default; }
.chapnav button:not([disabled]):hover { border-color: var(--accent); }
/* Prev/next chapter: a round button holding a chevron icon. */
.chap-arrow { display: inline-grid; place-items: center; padding: 0.34rem 0.5rem; }
.chap-chevron { width: 0.92rem; height: 0.92rem; display: block; color: var(--accent-ink); }
/* The pickers: a native select with our own chevron (appearance:none below) so it
   matches the chips and tints with the theme. */
.select-pill { position: relative; display: inline-flex; align-items: center; }
.chapnav select {
  appearance: none; -webkit-appearance: none;
  font: inherit;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding-block: 0.3rem;
  padding-inline: 0.9rem 1.85rem; /* room for the chevron at the end */
}
.chapnav select:hover { border-color: var(--accent); }
.select-arrow {
  position: absolute; inset-inline-end: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 0.78rem; height: 0.78rem; pointer-events: none; color: var(--accent-ink); opacity: 0.85;
}
/* Torah-portion picker (Chumash only): like the chapter select, but its names
   are long, so cap the width and let the native control truncate. */
.parashahnav select { max-width: 13rem; }

/* A weekly-portion (parashah) division inside the Torah text: a centred gold
   mark naming the portion where it opens. Spans all columns in the Parallel
   grid via an inline grid-column. */
.parashah-mark {
  display: flex; flex-direction: column; gap: 0.1rem;
  text-align: center;
  max-width: 34rem;
  margin: 1.4rem auto 1rem;
  padding: 0.45rem 0.5rem;
  border-block: 1px solid color-mix(in srgb, var(--foil-ink) 35%, transparent);
}
.parashah-mark .pm-he { font-family: var(--hebrew); color: var(--foil-ink); font-size: 1.3rem; line-height: 1.3; }
.parashah-mark .pm-name {
  font-family: var(--display); color: var(--accent-ink); opacity: 0.9;
  font-size: 0.98rem; font-weight: 600; letter-spacing: 0.02em;
}

/* Acrostic stanza letter (Ps 119, 145, 34; Prov 31:10–31; Lamentations) — the
   Hebrew letter that opens the stanza, set in gold like an illuminated initial,
   with its name tracked beside it. */
.acrostic-mark {
  display: flex; align-items: baseline; justify-content: center; gap: 0.55rem;
  margin: 1.15rem auto 0.45rem;
}
.acrostic-mark .ac-he {
  font-family: var(--hebrew); color: var(--foil-ink);
  font-size: 1.95rem; line-height: 1; text-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.2);
}
.acrostic-mark .ac-name {
  font-family: var(--display); color: var(--accent-ink); opacity: 0.5;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
}

/* The inverted nun (nun hafukha ׆) the sofer sets around Numbers 10:35–36. */
.scribal-mark { text-align: center; margin: 0.7rem auto; line-height: 1; }
.scribal-mark .sm-he { font-family: var(--hebrew); color: var(--foil-ink); font-size: 1.85rem; opacity: 0.85; }
/* Oversized / small letters (otiyot meshunot) — echo the scribe's own hand, in
   the same ink as the word, just larger or smaller. em-relative so they track the
   reading-text size; the large letters keep the line from stretching too far. */
.scribal-letter.large { font-size: 1.5em; line-height: 1; }
.scribal-letter.small { font-size: 0.62em; vertical-align: 0.12em; }
.scribal-letter.suspended { vertical-align: 0.45em; } /* raised above the line (otiyot teluyot) */

/* Book-closing colophon (Torah): חֲזַק חֲזַק וְנִתְחַזֵּק, said on finishing a Chumash
   book. A quiet gold flourish between the last verse and the tailpiece. */
.colophon { text-align: center; max-width: 34rem; margin: 1.9rem auto 0.2rem; }
.colophon .colophon-he {
  direction: rtl; font-family: var(--hebrew); color: var(--foil-ink);
  font-size: 1.55rem; line-height: 1.4; letter-spacing: 0.03em;
}
.colophon .colophon-gloss {
  font-family: var(--display); color: var(--accent-ink); opacity: 0.6;
  font-size: 0.86rem; font-style: italic; letter-spacing: 0.04em; margin-top: 0.3rem;
}

/* Manuscript headpiece above the chapter title (foil, like the divider that
   closes the pair below). Self-coloured via var(--foil) in the symbol. */
.headpiece { display: block; width: 7.5rem; height: auto; margin: 0.3rem auto -0.35rem; }
/* Tailpiece: the headpiece motif inverted, closing the chapter. */
.tailpiece { display: block; width: 6.5rem; height: auto; margin: 1.6rem auto 0.4rem; transform: scaleY(-1); }
.chapter-title { text-align: center; margin: 0.15rem 0 0; color: var(--accent-ink); font-size: 2rem; line-height: 1.1; }
.chapter-title .he { font-family: var(--hebrew); }
.chapter-title .grc { font-feature-settings: normal; }
/* English subtitle under the native chapter name: quiet, tracked small-caps feel */
.chapter-title .bne {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-top: 0.25rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.verses { font-size: var(--read-size, 1.25rem); }
/* A text host carries only the verse text (number + star sit in .vmeta beside
   it), so highlight offsets map cleanly. */
/* Per-language reading controls (set by Settings → applyText; defaults match
   TEXT_DEFAULTS in app.js). spacing slider 0..n maps to ~0.02em steps. */
.t.he {
  direction: rtl; text-align: right; font-family: var(--hebrew);
  font-size: calc(var(--read-size) * var(--he-scale, 1.1));
  font-weight: var(--he-weight, 400);
  letter-spacing: calc(var(--he-spacing, 0) * 0.02em);
  line-height: var(--he-leading, 1.8);
}
.t.grc {
  direction: ltr; text-align: left; font-family: var(--serif);
  font-size: calc(var(--read-size) * var(--grc-scale, 1));
  font-weight: var(--grc-weight, 400);
  letter-spacing: calc(var(--grc-spacing, 0) * 0.02em);
  line-height: var(--grc-leading, 1.7);
}
.t.en {
  direction: ltr; text-align: left;
  font-size: calc(var(--read-size) * var(--en-scale, 1));
  font-weight: var(--en-weight, 400);
  letter-spacing: calc(var(--en-spacing, 0) * 0.02em);
  line-height: var(--en-leading, 1.7);
}
/* Divine-Name reverence: the Tetragrammaton (Hebrew) and the all-caps LORD / GOD
   of the English (the Masoretic small-caps convention) are honoured in the
   setting, not by shouting — English to even small capitals, Hebrew to a hair of
   extra tracking so the dense qere pointing of the Name stays legible — and the
   Name is never broken across a line. No recolour. */
.divine-name { white-space: nowrap; }
.t.en .divine-name { font-variant-caps: all-small-caps; letter-spacing: 0.03em; }
.t.he .divine-name { letter-spacing: 0.02em; }
/* Greek nomina sacra: the divine names carried under a scribal titlo — the
   overline the earliest NT copyists drew over the contracted Name (θεός, κύριος-
   as-Adonai). A fine stroke above the word, clear of the polytonic accents; the
   Name is never broken across a line. No recolour, in kin with .divine-name. */
.nomen-sacrum { white-space: nowrap; }
.t.grc .nomen-sacrum {
  text-decoration: overline;
  text-decoration-thickness: 0.05em;
  letter-spacing: 0.02em;
}
/* Contracted mode (Settings → Divine Name): show the abbreviation the scribes
   actually wrote — first + last letter under the titlo (data-ns, e.g. ΚΣ / ΘΥ) —
   in place of the full word. The real word stays in the DOM (font-size:0, still
   selectable/copyable and unchanged as host.textContent) so highlights and ?v=
   still anchor; only the rendered glyphs change. The abbreviation is sized from
   the same reading vars (not em) since the word itself is collapsed to 0. */
:root[data-nomina="contracted"] .t.grc .nomen-sacrum {
  font-size: 0;
  letter-spacing: normal;
  text-decoration: none;
}
:root[data-nomina="contracted"] .t.grc .nomen-sacrum::before {
  content: attr(data-ns);
  font-size: calc(var(--read-size) * var(--grc-scale, 1));
  letter-spacing: 0.12em;
  text-decoration: overline;
  text-decoration-thickness: 0.05em;
}
.vmeta { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-end: 0.2rem; }
.vn {
  font-family: var(--serif);
  font-size: 0.9em;
  font-weight: 600;
  color: var(--accent-ink);
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}
.star {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem;
  border: none; background: transparent; color: var(--accent-ink);
  opacity: 0.72; border-radius: 0.3rem;
  padding: 0;
}
.star .icon { width: 1.05rem; height: 1.05rem; }
.star:hover { opacity: 1; background: var(--hover); }
.star.on { opacity: 1; }
/* copy-link: a deep link (?v=N) to this verse; quiet until hover, like the star. */
.linkcopy {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem;
  border: none; background: transparent; color: var(--accent-ink);
  opacity: 0.72; border-radius: 0.3rem;
  padding: 0;
}
.linkcopy .icon { width: 1rem; height: 1rem; }
.linkcopy:hover { opacity: 1; background: var(--hover); }

/* single (Original / English): flex row, number + star then the text. Hebrew
   runs RTL so its marginal column sits on the right. */
.verse { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.12rem 0; }
.verses.he .verse { direction: rtl; }
.verse .t { flex: 1; min-width: 0; }

/* Reader (prose): one lane flowed as paragraphs with inline superscript verse
   numbers. The per-verse .t host stays intact (display:inline) so highlight
   offsets and ?v= deep-links work just like the verse-row views. Measured in
   ch (not a fixed rem) so the line length grows and shrinks together with the
   reading-size slider, rather than staying visually fixed while the text
   inside it gets bigger — ch resolves against *this element's own* font-size,
   so each language variant below also sets that to the same scaled value
   .t.he/.t.grc/.t.en compute for the actual glyphs (its own font-size alone
   would otherwise stay pinned to the unscaled base, since a custom property's
   value doesn't flow back up from a scaled descendant to its ancestor). 75ch
   is a touch more generous than this measured out to at the old fixed 42rem
   (~68ch here, for Alegreya at the default size) — comfortably within the
   accepted range for justified, hyphenated text like this. */
.reader.single { font-size: var(--read-size, 1.25rem); max-width: calc(75ch * var(--measure, 1)); margin: 0 auto; }
.reader.single.he { font-size: calc(var(--read-size) * var(--he-scale, 1.1)); }
.reader.single.grc { font-size: calc(var(--read-size) * var(--grc-scale, 1)); }
.reader.single.en { font-size: calc(var(--read-size) * var(--en-scale, 1)); }
/* Reserve a slim margin on the leading (right) side for the Masoretic siman, so
   the siman hangs there and every paragraph still begins at the same edge. The
   trailing side gets the same, so the text block stays optically centred. */
.reader.single.he { direction: rtl; text-align: right; padding-inline: 1.6em; }
.reader-para { margin: 0 0 0.85em; text-align: justify; text-wrap: pretty; }
.reader.single.he .reader-para { line-height: var(--he-leading, 1.8); position: relative; }
.reader.single.grc .reader-para { line-height: var(--grc-leading, 1.7); }
.reader.single.en .reader-para { line-height: var(--en-leading, 1.7); }
/* Masoretic paragraphing (Hebrew reader): every paragraph starts flush at the same
   edge; the division is shown by the gap above — petuchah (open) gets an airy
   blank-line gap, setumah (closed) a smaller one — and by a faint gold פ / ס that
   hangs in the reserved margin like the siman a sofer leaves, the original division
   honoured beneath the (later) chapter numbers. */
.reader-para.para-open { margin-top: 1.2em; }
.reader-para.para-closed { margin-top: 0.4em; }
.para-siman {
  position: absolute; inset-inline-start: -1.5em; top: 0.15em;
  font-family: var(--hebrew); color: var(--foil-ink); opacity: 0.5;
  font-size: 0.7em; user-select: none;
}
.reader .t { display: inline; }
.vnum-inline {
  font-family: var(--serif);
  font-size: 0.8em; font-weight: 700;
  color: var(--accent-ink); opacity: 0.9;
  vertical-align: 0.35em; line-height: 0;
  margin-inline: 0.35em 0.2em; padding: 0.3em 0.25em; border-radius: 0.3em;
  cursor: pointer;
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
}
/* the chapter's opening number hangs outside the text column, on the first line, so the first letter sits flush at the column edge */
.reader-para { position: relative; }
.vnum-inline.vnum-hang { position: absolute; inset-inline-start: -1.35em; top: 0.3em; margin: 0; padding: 0; vertical-align: baseline; line-height: 1.2; font-size: 0.72em; min-width: 1.1em; text-align: end; }
.reader.single.en .vnum-hang, .reader.single.grc .vnum-hang { top: 0.55em; }
@media (max-width: 40rem) { .vnum-inline.vnum-hang { inset-inline-start: -1.1em; } }
.vnum-inline:hover { opacity: 1; color: var(--accent); text-decoration: underline; }
.reader-verse.vhit { background: color-mix(in srgb, var(--accent), transparent 78%); border-radius: 0.3rem; }

/* Songs (stichography) — the poems written stichographically in a Torah scroll
   (the Song of the Sea, Haazinu, Deborah, David), set in poetic lines. The
   translations carry the scribal brick/column shape (stich indents from the USFM
   \q levels); the Hebrew splits each verse at the atnaḥ into two hemistichs. Shown
   in every view: Reader frames them in a titled block, Parallel/Linear set each
   cell's text as stichs under a song banner. */
.song {
  margin: 1.5rem auto; padding: 0.3rem 0 0.7rem;
  border-block: 1px solid color-mix(in srgb, var(--foil-ink) 26%, transparent);
}
.song-head { text-align: center; margin: 0.2rem 0 1rem; }
.song-head .song-he { font-family: var(--hebrew); color: var(--foil-ink); font-size: 1.5rem; line-height: 1.3; }
.song-head .song-name {
  font-family: var(--display); color: var(--accent-ink); opacity: 0.7;
  font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.15rem;
}
/* Verse (Reader): the number hangs in the gutter (inline-start, so it flips for
   RTL); the host fills, each stich on its own line. */
.song-verse { position: relative; padding-inline-start: 2.5rem; margin: 0.1rem 0; }
.song-verse > .vnum-inline { position: absolute; inset-inline-start: 0; vertical-align: baseline; top: 0.1em; }
.song-verse > .t { display: block; }
.song-verse.vhit { background: color-mix(in srgb, var(--accent), transparent 78%); border-radius: 0.3rem; }
/* Each stich on its own line, indented one step per level — works wherever
   songField renders (Reader, Parallel, Linear). A wrapped stich balances its
   lines rather than leaving a lone trailing word. */
.stich { display: block; text-wrap: balance; }
.stich[data-lvl="2"] { padding-inline-start: 1.6rem; }
.stich[data-lvl="3"] { padding-inline-start: 3.1rem; }
/* Song title banner over the multi-column views (like the parashah/acrostic marks). */
.song-mark { text-align: center; margin: 1rem auto 0.6rem; }
.song-mark .song-mark-he { font-family: var(--hebrew); color: var(--foil-ink); font-size: 1.4rem; line-height: 1.3; display: block; }
.song-mark .song-mark-name {
  font-family: var(--display); color: var(--accent-ink); opacity: 0.7;
  font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Reading text: contextual ligatures + kerning; English prose hyphenates so the
   justified Reader column sets evenly instead of opening rivers of space. */
.t.en, .t.grc, .reader-para { font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1; }
.reader.single.en .reader-para { hyphens: auto; -webkit-hyphens: auto; }

/* Illuminated chapter opening — the first word (Hebrew) / initial (Latin, Greek)
   set large in gold like a manuscript incipit. Reader (prose) view only. */
.reader .illuminated { color: var(--foil-ink); text-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.2); }
.reader.single.en .illuminated,
.reader.single.grc .illuminated {
  float: left;
  font-family: var(--display);
  font-size: 3.2em;
  line-height: 0.78;
  font-weight: 600;
  padding: 0.06em 0.12em 0 0;
}
.reader.single.grc .illuminated { font-family: var(--serif); font-weight: 700; font-size: 3em; }
.reader.single.he .illuminated {
  font-family: var(--hebrew);
  font-size: 1.7em;
  font-weight: 600;
  line-height: 1;
  padding-inline-start: 0.04em;
}

/* parallel: two columns; for Hebrew the grid runs RTL so the original lands on
   the right. Collapses to one column (orig then eng per verse) when narrow.
   align-items:stretch (the grid default) so every cell in a row fills the same
   height — with :start, a shorter lane's border-bottom lands wherever its own
   (shorter) content ends, well above a longer neighbour's, so the row shows a
   staggered set of dotted lines instead of one clean rule under the whole row.
   Each cell's own content still sits flush at the top (.pv/.pv-gutter are
   single-item flex boxes, so baseline-aligning their one child is equivalent to
   flex-start) — stretching only extends the blank space *below* short content
   down to the row's real bottom, where the border now consistently falls. */
.parallel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
/* No column gap: the columns are separated by cell padding instead, so the rule over the columns and the rules between
   rows run 100% edge to edge, unbroken, like every other reading mode. */
.parallel > .par-head:not(.par-gutter), .parallel > .pv:not(.par-gutter) { padding-inline: 0.75rem; }
.parallel.he { direction: rtl; }
.parallel .pv { padding: 0.25rem 0; border-bottom: 1px dotted var(--rule); display: flex; gap: 0.4rem; align-items: baseline; }
.parallel .pv.he { direction: rtl; }
.parallel .pv .t { flex: 1; min-width: 0; }
/* multi-lane parallel (toggleable columns): a shared gutter (the verse number +
   star + copy-link, once per row) then one column per shown lane. The grid
   itself always stays LTR, so the gutter is always the leftmost column — a
   fixed position regardless of which lane leads; each cell still sets its own
   script direction for its own text (.par-head.he / .pv.he). */
.parallel.multi { grid-template-columns: auto repeat(var(--cols, 2), minmax(0, 1fr)); }
.par-head { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.2rem; }
.par-head.he { direction: rtl; text-align: right; }
.par-gutter { border-bottom: 1px solid var(--rule); } /* empty header over the gutter */
.pv-gutter {
  padding: 0.3rem 0.4rem; border-bottom: 1px dotted var(--rule);
  display: flex; align-items: baseline; justify-content: center; white-space: nowrap;
}
.parallel .empty { grid-column: 1 / -1; }
/* column toggles */
.par-toggles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.par-toggles-label { font-size: 0.8rem; color: var(--accent-ink); opacity: 0.8; }
.lane-chip { font-size: 0.82rem; padding: 0.25rem 0.7rem; }
.lane-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 34rem) {
  .parallel:not(.multi) { grid-template-columns: 1fr; gap: 0; }
  .parallel > .par-head:not(.par-gutter), .parallel > .pv:not(.par-gutter) { padding-inline: 0; }
  .parallel:not(.multi) .pv.en { opacity: 0.85; font-size: 0.95em; padding-top: 0; }
  /* stack lanes verse-by-verse on narrow screens; headers would be ambiguous. The
     shared gutter (number + star + link) becomes a thin row above each verse. */
  .parallel.multi { grid-template-columns: 1fr; gap: 0; }
  .parallel.multi .par-head { display: none; }
  .parallel.multi .pv-gutter { justify-content: flex-start; padding: 0.4rem 0 0.1rem; border-bottom: none; }
  .parallel.multi .pv.en { opacity: 0.85; font-size: 0.95em; }
}

/* linear: every verse stacks its scripts (Hebrew, Greek, English) top-to-bottom. */
.verses.linear { font-size: var(--read-size, 1.25rem); }
.lv { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.lv .vmeta { margin-bottom: 0.2rem; }
.lv .t { margin: 0.2rem 0; }
.lv .t.en { opacity: 0.85; }
.lv .t.companion { opacity: 0.95; }

/* ───────────────────────── settings ───────────────────────── */
.row { margin: 0.9rem 0; }
.row > span:first-child { display: block; font-size: 0.8rem; opacity: 0.82; margin-bottom: 0.4rem; }
.swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }

/* Fixed height + sticky: the preview never changes the page's layout while a size
   slider is dragged (overflow scrolls inside it), and it stays in view under the
   topbar so the sliders below can be watched working. */
.font-preview {
  position: sticky;
  top: calc(var(--topbar-h) + 0.9rem); /* a little air between the bar and the floating preview */
  z-index: 5;
  height: 11.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--card) 100%, var(--bg));
  box-shadow: 0 0 0 0.5rem var(--bg);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.font-preview .t { margin: 0.25rem 0; }
.slider-group { margin: 1rem 0; }
.slider-group h3 { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--accent-ink); font-weight: 600; }
.slider-row { display: flex; align-items: center; gap: 0.8rem; margin: 0.5rem 0; }
.slider-label { flex: none; width: 6.5rem; font-size: 0.85rem; opacity: 0.8; }
.slider-numwrap { flex: none; display: inline-flex; align-items: baseline; gap: 0.15rem; width: 4.6rem; justify-content: flex-end; }
.slider-unit { font-size: 0.75rem; opacity: 0.6; width: 0.9rem; }
.slider-num {
  width: 3.3rem; text-align: right; font: inherit; font-size: 0.85rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-ink); background: transparent;
  border: 1px solid transparent; border-radius: 0.3rem; padding: 0.1rem 0.2rem;
}
.slider-num:hover { border-color: var(--rule); }
.slider-num:focus { outline: none; border-color: var(--accent); background: var(--card); }
/* Custom range: an accent-filled track (driven by --val from JS for WebKit, by
   ::-moz-range-progress for Firefox) with a gold-ringed accent thumb. */
.slider {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 1.1rem; background: transparent; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 0.4rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--val, 50%), var(--rule) var(--val, 50%));
}
.slider::-moz-range-track { height: 0.4rem; border-radius: 999px; background: var(--rule); }
.slider::-moz-range-progress { height: 0.4rem; border-radius: 999px; background: var(--accent); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.05rem; height: 1.05rem; margin-top: -0.33rem;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--foil); box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.slider::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem; border: 2px solid var(--foil);
  border-radius: 50%; background: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A small foil flourish above each empty-state message, so a blank list reads as
   a quiet ornament rather than a barren note. Masked data-URI (the divider motif)
   so it tints with the theme via --foil-ink. */
.empty::before {
  content: "";
  display: block;
  width: 7rem;
  height: 0.9rem;
  margin: 0 auto 0.9rem;
  background-color: var(--foil-ink);
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
}
.empty { text-align: center; opacity: 0.6; padding: 3rem 1rem; }

/* ───────────────────────── search ───────────────────────── */
.search-bar { margin-bottom: 1rem; }
.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 0.6rem;
  padding: 0.4rem 0.7rem;
}
.search-field .icon { width: 1.2rem; height: 1.2rem; opacity: 0.6; flex: none; }
.search-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 0.3rem 0;
}
.case-toggle {
  flex: none;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: 0.4rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.6;
}
.case-toggle.on { opacity: 1; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.results-head { font-size: 0.85rem; font-weight: 600; opacity: 0.6; margin: 1.5rem 0 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.searching { opacity: 0.6; padding: 1rem 0; }
.result {
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
}
.result.navigable { cursor: pointer; }
.result.navigable:hover { border-color: var(--accent); }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.result-open { color: var(--accent-ink); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.result-open.ref { display: inline-block; }
.remove { border: none; background: transparent; color: var(--ink); opacity: 0.82; border-radius: 0.3rem; padding: 0 0.4rem; }
.remove:hover { opacity: 1; background: var(--hover); }
.snippet { margin-top: 0.35rem; line-height: 1.7; }
.snippet.he { direction: rtl; text-align: right; font-family: var(--hebrew); font-size: 1.15rem; }
.snippet.grc { direction: ltr; font-family: var(--serif); }
.snippet.en { direction: ltr; opacity: 0.9; }
.snippet mark { background: color-mix(in srgb, var(--accent), transparent 55%); color: inherit; border-radius: 0.2rem; padding: 0 0.05em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.chip:hover { border-color: var(--accent); }

/* a verse arrived at from search / a reference, briefly emphasised */
.vhit { background: color-mix(in srgb, var(--accent), transparent 78%); border-radius: 0.3rem; }
.parallel .pv.vhit, .parallel .pv-gutter.vhit, .lv.vhit { background: color-mix(in srgb, var(--accent), transparent 82%); }

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 1.5rem);
  z-index: 50;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────────────────────── highlights & notes ───────────────────────── */
/* Each colour exposes --hl; marks use a translucent fill, swatches/dots solid. */
[data-color="yellow"] { --hl: #ffd54a; }
[data-color="green"]  { --hl: #74cf8f; }
[data-color="pink"]   { --hl: #ff9ec4; }
[data-color="blue"]   { --hl: #6db3f2; }
[data-color="orange"] { --hl: #ffab5e; }
[data-color="purple"] { --hl: #c79bf0; }

.hl-mark, .snippet mark[data-color] {
  background: color-mix(in srgb, var(--hl) 48%, transparent);
  border-radius: 0.15em;
  color: inherit;
}

.hl-bar {
  position: fixed;
  z-index: 60;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.4rem 0.5rem;
  background: var(--chrome);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.hl-bar[hidden] { display: none; }
.hl-bar .swatch {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: var(--hl);
}
.hl-bar .swatch:hover { transform: scale(1.12); }
.hl-remove {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
}
.hl-remove[hidden] { display: none; }
.hl-dot {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  margin-inline-end: 0.45rem;
  vertical-align: middle;
  background: var(--hl);
}

.note-input {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  padding: 0.4rem 0.5rem;
  resize: none;
  overflow: hidden;
}
.note-input:focus { outline: none; border-color: var(--accent); }

/* ───────────────────────── export / import ───────────────────────── */
.data-page { max-width: 40rem; margin: 0 auto; }
.data-page section { margin-bottom: 1.6rem; }
.data-page h2 { font-size: 0.95rem; color: var(--accent-ink); margin: 0 0 0.6rem; }
.data-counts { opacity: 0.7; }
.data-status { margin-top: 0.6rem; color: var(--accent-ink); }
.link-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* Keyboard-shortcuts help page (#/shortcuts). .kbd mimics a physical key —
   same rounded/bordered family as .chip/.seg so it reads as "part of this
   app" rather than a generic <kbd> default. */
.shortcuts-list { display: flex; flex-direction: column; gap: 0.5rem; }
.shortcut-row { display: flex; align-items: center; gap: 0.7rem; }
.kbd {
  flex: none;
  min-width: 1.8rem;
  padding: 0.15rem 0.5rem;
  text-align: center;
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  background: var(--card);
  box-shadow: 0 1px 0 var(--rule);
}
.link-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: start;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  font-size: 0.95rem;
}
.link-row:hover { border-color: var(--accent); background: var(--hover); }
.link-row .icon { width: 1.2rem; height: 1.2rem; opacity: 0.8; flex: none; }
.link-row[disabled] { opacity: 0.5; pointer-events: none; }
.link-row.danger { color: #e06a63; border-color: color-mix(in srgb, #e06a63, transparent 62%); }
.link-row.danger:hover { background: color-mix(in srgb, #e06a63, transparent 86%); }

/* ───────────────────────── print report (#/print) ───────────────────────── */
.print-controls {
  position: sticky;
  top: 3.4rem;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg);
  padding: 0.6rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.print-toggles { display: flex; gap: 0.4rem; flex: 1; flex-wrap: wrap; }
.seg-toggle {
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}
.seg-toggle.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.print-go { width: auto; }

.print-doc {
  max-width: 44rem;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--card);
  padding: 1.6rem 1.8rem;
}
.print-head { text-align: center; margin-bottom: 1.4rem; }
.print-doc-title { font-family: var(--hebrew); font-size: 1.5rem; color: var(--accent-ink); }
.print-doc-sub { opacity: 0.8; }
.print-doc-date { opacity: 0.6; font-size: 0.85rem; margin-top: 0.2rem; }
.print-section { margin-bottom: 1.6rem; }
.print-section-head { font-size: 1rem; color: var(--accent-ink); border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
.print-item { margin: 0.9rem 0; }
.print-item-head { display: flex; align-items: center; gap: 0.4rem; }
.print-item-label { font-weight: 600; color: var(--accent-ink); font-size: 0.9rem; }
.print-note, blockquote.print-note {
  margin: 0.35rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rule);
  opacity: 0.85;
  font-size: 0.9rem;
}
.print-search { margin: 1rem 0; }
.print-search-head { font-size: 0.95rem; color: var(--accent-ink); }
.print-more { opacity: 0.6; font-size: 0.85rem; }

/* ───────────────────────── find in chapter ───────────────────────── */
/* Floating under the topbar; marks are CSS Custom Highlights so the DOM (and the
   highlighter's offsets) stay untouched. */
.find-bar {
  position: fixed;
  top: calc(var(--topbar-h) + 0.4rem);
  right: max(0.75rem, env(safe-area-inset-right));
  left: max(0.75rem, env(safe-area-inset-left));
  max-width: 28rem;
  margin-left: auto;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.find-bar[hidden] { display: none; }
.find-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 0.3rem 0.2rem;
}
.find-count { flex: none; font-size: 0.8rem; opacity: 0.65; font-variant-numeric: lining-nums tabular-nums; }
.find-bar .case-toggle.on { opacity: 1; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.find-step {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
}
.find-step:hover { background: var(--hover); }
.find-step .icon { width: 1.1rem; height: 1.1rem; }
::highlight(find-match) { background-color: color-mix(in srgb, var(--accent), transparent 65%); color: inherit; }
::highlight(find-current) { background-color: #f5c542; color: #1a1400; }
.ref-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.3rem; }

/* ───────────────────────── wide reading column ─────────────────────────
   The reader isn't held to #app's 58rem any more: that cap fixed the line length
   in rem, so growing the type just shortened lines (and pushed people to shrink
   the type and zoom the browser instead). Now the measure is set in ch —
   scaling with the type — and the page only keeps comfortable side margins. */
#app:has(> .reader-page) {
  max-width: none;
  padding-inline: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left));
}
.reader-page .verses { margin-inline: auto; }
/* Parallel: each column gets ~36ch of the *largest* language scale; Linear and
   Reader prose cap near 75ch. All clamp to the viewport, so small screens and
   huge sizes both just use the width there is. */
.reader-page .parallel {
  max-width: calc(var(--cols, 2) * 36ch * var(--text-max-scale, 1.1) * var(--measure, 1) + 4rem);
  margin-inline: auto;
}
.reader-page .verses.linear { max-width: calc(75ch * var(--text-max-scale, 1.1) * var(--measure, 1)); margin-inline: auto; }
/* Settings → Page width: every environment's column and page caps scale by --measure */
:root { --measure: 1; }
:root[data-measure="wide"] { --measure: 1.3; }
:root[data-measure="full"] { --measure: 1.75; }

/* search scope + paging */
.search-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.55rem; margin-top: 1rem; padding: 0.15rem 0.1rem; }
.scope-chip { font-size: 0.85rem; padding: 0.3rem 0.95rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; min-height: 2rem; box-sizing: border-box; }
.scope-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.scope-sep { width: 1px; height: 1.4rem; background: var(--rule); margin: 0 0.35rem; }
.show-more { display: block; margin: 1rem auto; }
.show-more[hidden] { display: none; }

/* ───────────────────────── a11y / touch polish ───────────────────────── */
/* Focus rings where the field itself is borderless. */
.search-field:focus-within, .find-bar:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-input:focus-visible, .slider-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.settings-note, .find-count { opacity: 0.8; }
/* Fingers: ≥44px hit areas on touch devices without changing the drawn size. */
@media (pointer: coarse) {
  .gear, #back { width: 2.75rem; height: 2.75rem; }
  .star, .linkcopy, .swatch, .hl-bar .swatch, .find-step { position: relative; }
  .star::after, .linkcopy::after, .swatch::after, .find-step::after { content: ""; position: absolute; inset: -0.55rem; }
  .chip, .lane-chip, .scope-chip { min-height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* continue reading + per-book progress */
.continue-reading {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  margin: 1.2rem auto 0; padding: 0.7rem 1.6rem; max-width: 22rem;
  border: 1px solid var(--rule); border-radius: 0.8rem; background: var(--card);
  color: var(--ink); text-decoration: none;
}
.continue-reading:hover { border-color: var(--accent); background: var(--hover); }
.continue-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.continue-ref { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }
.book-card { position: relative; overflow: hidden; }
.book-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--rule), transparent 40%); }
.book-progress span { display: block; height: 100%; background: var(--accent); }
.book-card.complete .book-progress span { background: var(--foil-ink); }

/* word study card */
.word-card {
  position: fixed; z-index: 30; width: min(19rem, calc(100vw - 1rem));
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0.7rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  padding: 0.7rem 0.85rem; font-size: 0.9rem;
}
.word-head { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin-bottom: 0.55rem; text-align: center; }
.word-eyebrow { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; color: var(--accent-ink); }
.word-translit { font-style: italic; font-size: 0.95rem; opacity: 0.85; }
.word-form { font-size: 1.5rem; line-height: 1.3; }
.word-form.he { font-family: var(--hebrew); direction: rtl; }
.word-form.grc { font-family: var(--serif); }
.word-id { font-variant-numeric: lining-nums tabular-nums; color: var(--accent-ink); font-weight: 600; font-size: 0.85rem; }
.word-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.3rem 0; border-top: 1px solid var(--rule); }
.word-row.stack { flex-direction: column; gap: 0.15rem; }
.word-row.stack .word-v { text-align: left; font-size: 0.88rem; line-height: 1.4; }
.word-k { opacity: 0.8; font-size: 0.78rem; letter-spacing: 0.02em; flex: none; }
.word-v { text-align: right; }
.word-v.he { font-family: var(--hebrew); direction: rtl; font-size: 1.05rem; }
.word-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.word-btn { text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0.8rem; color: var(--accent-ink); }
.word-all { display: block; margin-top: 0.55rem; color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.word-all:hover { text-decoration: underline; }
::highlight(word-pick) { background-color: color-mix(in srgb, var(--accent), transparent 60%); }

/* wide-screen book + chapter sidebar (reader) */
.side-nav, .side-show { display: none; }
@media (min-width: 70rem) {
  .side-nav {
    display: flex; flex-direction: column;
    position: fixed; z-index: 10;
    top: calc(var(--topbar-h) + 0.5rem); bottom: 0.5rem; left: max(0.75rem, env(safe-area-inset-left));
    transition: top var(--chrome-dur) var(--chrome-ease);
    width: 14.5rem; overflow: hidden;
    border: 1px solid var(--rule); border-radius: 0.7rem; background: var(--card);
    font-size: 0.88rem;
  }
  .reader-page:has(> .side-nav) { padding-left: 15.75rem; }
  :root[data-side-hidden] .side-nav { display: none; }
  :root[data-side-hidden] .reader-page:has(> .side-nav) { padding-left: 0; }
  .side-show { display: none; }
  :root[data-side-hidden] .side-show {
    display: block; position: fixed; z-index: 10; left: 0.75rem; top: calc(var(--topbar-h) + 0.6rem);
    border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 0.5rem; padding: 0.25rem 0.55rem;
  }
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); color: var(--accent-ink); font-weight: 600; }
.side-toggle { border: none; background: transparent; color: var(--ink); font-size: 1.1rem; padding: 0 0.3rem; }
.side-chapters { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); flex: 0 0 auto; max-height: min(45%, 20rem); overflow-y: auto; overscroll-behavior: contain; }
.side-chap { min-width: 1.9rem; text-align: center; padding: 0.15rem 0.2rem; border-radius: 0.35rem; color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.side-chap:hover { background: var(--hover); }
.side-chap.done { color: var(--foil-ink); }
.side-chap.current { background: var(--accent); color: var(--on-accent); }
.side-books { overflow-y: auto; padding: 0.3rem 0 0.6rem; }
.side-sec { padding: 0.5rem 0.8rem 0.15rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.side-book { display: block; padding: 0.25rem 0.8rem; color: var(--ink); text-decoration: none; }
.side-book:hover { background: var(--hover); }
.side-book.current { color: var(--accent-ink); font-weight: 700; background: color-mix(in srgb, var(--accent), transparent 85%); }
@media print { .side-nav, .side-show, .word-card, .find-bar { display: none !important; } }
.word-tr { font-family: var(--serif); font-size: 0.85rem; opacity: 0.8; font-style: italic; }
.word-def { padding: 0.35rem 0; border-top: 1px solid var(--rule); font-size: 0.85rem; line-height: 1.4; }
.word-card { max-height: min(24rem, 70vh); overflow-y: auto; }
.word-credit { margin-top: 0.4rem; font-size: 0.72rem; opacity: 0.75; }

/* search: scope panel, suggestions, tips, facets */
.where-panel { margin-top: 0.8rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--card); }
.where-panel[hidden], .suggest[hidden], .search-help[hidden] { display: none; }
.where-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }

.where-select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 0.4rem; padding: 0.25rem 0.4rem; max-width: 100%; }
.where-btn { font-weight: 600; }
.suggest { margin-top: 0.4rem; border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--card); overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.suggest-item {
  display: flex; align-items: baseline; gap: 0.6rem; width: 100%; text-align: left;
  padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover, .suggest-item:focus-visible { background: var(--hover); outline: none; }
.suggest-lemma { font-size: 1.15rem; min-width: 4.5rem; }
.suggest-lemma.he { font-family: var(--hebrew); direction: rtl; }
.suggest-main { font-weight: 600; }
.suggest-sub { flex: 1; min-width: 0; font-size: 0.8rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-count { flex: none; font-size: 0.8rem; color: var(--accent-ink); font-variant-numeric: lining-nums tabular-nums; }
.suggest-only .suggest-main { font-weight: 500; color: var(--accent-ink); }
.search-help { margin-top: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 0.6rem; background: var(--card); }
.help-ex { display: flex; gap: 0.7rem; align-items: baseline; width: 100%; text-align: left; padding: 0.3rem 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.help-ex code { font-family: var(--serif); font-weight: 700; color: var(--accent-ink); min-width: 11rem; }
.help-ex span { font-size: 0.85rem; opacity: 0.85; }
.help-ex:hover code { text-decoration: underline; }
.facets { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.35rem 0.15rem 0.9rem; margin-top: 0.3rem; scrollbar-width: thin; }
.facet { flex: none; display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.3rem 0.85rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 0.85rem; cursor: pointer; }
.facet:hover { border-color: var(--accent); }
.facet-n { color: var(--accent-ink); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* ───────────── round of legibility + layout fixes ───────────── */
/* .gear's display:grid beat the [hidden] attribute, so the find button showed
   everywhere; it should only exist inside a chapter. */
#find-btn[hidden], .gear[hidden] { display: none; }

/* Book-selection cards: the English name was small. */
.book-card .bne { font-size: 0.95rem; opacity: 0.9; }
.book-card .bn { font-size: 1.1rem; }
.book-card .he { font-size: 1.35rem; }
.section-head h2, .section-head h3 { font-size: 1.15rem; }

/* Settings: larger type, and controls that use the width. */
.settings-page { max-width: 64rem; }
.data-page h2 { font-size: 1.15rem; }
.data-page .settings-note { font-size: 0.92rem; opacity: 0.85; }
.settings-page .row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.2rem; flex-wrap: wrap; margin: 0.7rem 0; }
.settings-page .row > span:first-child { margin: 0; font-size: 1rem; opacity: 0.95; }
.settings-page .seg button { font-size: 1rem; padding: 0.5rem 1.05rem; }
.settings-page .swatch { width: 2.4rem; height: 2.4rem; }
.slider-label { width: 8rem; font-size: 1rem; opacity: 0.92; }
.slider-group h3 { font-size: 1.1rem; }
.slider-num { font-size: 1rem; }
.link-row { font-size: 1rem; }
@media (min-width: 52rem) {
  .settings-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; align-items: start; }
  .settings-page > section { margin-bottom: 1.6rem; }
  .settings-page > section.reading-text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
  .settings-page > section.reading-text > h2,
  .settings-page > section.reading-text > .font-preview,
  .settings-page > section.reading-text > .row { grid-column: 1 / -1; }
  .settings-page .slider-row { gap: 0.5rem; }
  .settings-page .slider-label { width: 6.2rem; }
}
@media (min-width: 52rem) and (max-width: 66rem) {
  .settings-page > section.reading-text { grid-template-columns: 1fr; }
}

/* Sidebar: now on the right, with a quiet re-open tab. */
@media (min-width: 70rem) {
  .side-nav { left: auto; right: max(0.75rem, env(safe-area-inset-right)); }
  .reader-page:has(> .side-nav) { padding-left: 0; padding-right: 15.75rem; }
  :root[data-side-hidden] .reader-page:has(> .side-nav) { padding-right: 0; }
  :root[data-side-hidden] .side-show {
    display: block; left: auto; right: 0; top: 50%; transform: translateY(-50%);
    padding: 0.9rem 0.25rem; border-radius: 0.5rem 0 0 0.5rem; border-right: 0;
    opacity: 0.35; font-size: 1.2rem; line-height: 1;
  }
  :root[data-side-hidden] .side-show:hover, :root[data-side-hidden] .side-show:focus-visible { opacity: 1; }
}
.side-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side-book-name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-spine { font-size: 0.72rem; font-weight: 500; opacity: 0.75; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.side-chap { padding: 0.25rem 0.3rem; min-width: 2.1rem; }
.side-chap.current { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 55%); }

/* Re-open tab (sidebar hidden): a visible-but-quiet handle on the right edge. */
@media (min-width: 70rem) {
  :root[data-side-hidden] .side-show {
    width: 1.9rem; height: 4.2rem; padding: 0; display: grid; place-items: center;
    font-size: 1.5rem; opacity: 0.6; background: var(--card); color: var(--accent-ink);
    border: 1px solid var(--rule); border-right: 0; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.25);
  }
}
.side-toggle { font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.45rem; border-radius: 0.4rem; }
.side-toggle:hover { background: var(--hover); }

/* ───────────── reader controls: calmer on narrow screens ─────────────
   The sticky frosted bar wrapped to 2–3 rows and slid over the text. Below 48rem it
   is now a plain, compact block that scrolls away with the page (swipe / edge tap /
   the chapter picker stay one gesture away), the column chips fold behind one
   button, and the topbar only returns after a deliberate upward scroll. */
.lanes-toggle { display: none; }
@media (max-width: 48rem) {
  .reader-controls {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    margin: 0 0 0.7rem; padding: 0.15rem 0;
    gap: 0.5rem;
    justify-content: space-between;
  }
  .reader-controls .seg, .reader-controls .chip,
  .reader-controls .chapnav button, .reader-controls .chapnav select { box-shadow: none; }
  .reader-controls .seg { order: 0; flex: 1 1 100%; }
  .reader-controls .seg button { flex: 1; padding: 0.5rem 0.4rem; font-size: 0.95rem; }
  .reader-controls .lanes-toggle { display: inline-flex; order: 1; font-size: 0.9rem; padding: 0.35rem 0.8rem; }
  .reader-controls .chapnav { order: 1; margin-left: auto; }
  .reader-controls .par-toggles { order: 2; display: none; flex: 1 1 100%; justify-content: flex-start; }
  .reader-controls .par-toggles.open { display: flex; }
  .reader-controls .par-toggles-label { display: none; }
  .reader-controls > :not(.seg):not(.lanes-toggle):not(.chapnav):not(.par-toggles) { order: 3; }
}

/* Chapter heading: less ornament-heavy on phones so text starts higher. */
@media (max-width: 48rem) {
  /* these <svg><use/></svg> ornaments default to a 150px-tall box (300×150), which is
     where the big empty bands came from; give them a height that matches the art. */
  .headpiece { width: 7rem; height: 2.4rem; margin: 0.2rem auto 0; }
  .chapter-title { font-size: 1.7rem; margin-top: 0.2rem; }
  .divider, .chapter-title + .divider { width: 8rem; height: 1.5rem; margin: 0.3rem auto 0.8rem; }
  .tailpiece { width: 6rem; height: 2.2rem; margin: 1rem auto 0.4rem; }
}

.saved-tools { margin-bottom: 0.9rem; }
.saved-list .results-head { margin-top: 0.4rem; }
.word-approx { margin-top: 0.4rem; font-size: 0.8rem; font-style: italic; opacity: 0.85; }

/* cross-references */
.xref-btn {
  display: inline-grid; place-items: center;
  width: 1.45rem; height: 1.45rem; padding: 0;
  border: none; background: transparent; color: var(--accent-ink);
  opacity: 0.72; border-radius: 0.3rem; cursor: pointer;
}
.xref-btn .icon { width: 1rem; height: 1rem; }
.xref-btn:hover, .xref-btn:focus-visible { opacity: 1; background: var(--hover); }
.xref-btn[aria-expanded="true"] { opacity: 1; }
.xref-card {
  position: fixed; z-index: 30; width: min(26rem, calc(100vw - 1rem)); max-height: min(28rem, 70vh); overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 0.7rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); padding: 0.4rem 0;
}
.xref-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem 0.5rem; font-weight: 600; color: var(--accent-ink); border-bottom: 1px solid var(--rule); }
.xref-close { border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; }
.xref-row { display: block; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.xref-row:last-child { border-bottom: 0; }
.xref-row:hover, .xref-row:focus-visible { background: var(--hover); outline: none; }
.xref-ref { display: block; font-weight: 700; font-size: 0.9rem; color: var(--accent-ink); }
.xref-text { display: block; font-size: 0.88rem; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Floating cards shouldn't trap or chain page scrolling, or start a text selection. */
.word-card, .xref-card { overscroll-behavior: contain; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hl-bar { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ───────────── Interlinear view ───────────── */
.verses.interlinear { max-width: 70rem; margin: 0 auto; }
.il-verse { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.il-verse > .vmeta { flex: none; flex-direction: column; align-items: center; gap: 0.2rem; padding-top: 0.2rem; min-width: 1.6rem; }
.il-words { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.il-words.he { direction: rtl; }
.il-word { display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; cursor: pointer; padding: 0.1rem 0.25rem; border-radius: 0.35rem; }
.il-word:hover { background: color-mix(in srgb, var(--accent), transparent 85%); }
.il-orig { font-size: calc(var(--read-size) * 1.35 * var(--il-orig-scale, 1)); line-height: 1.5; color: var(--ink); direction: rtl; }
.il-orig.he { font-family: var(--hebrew); font-size: calc(var(--read-size) * var(--he-scale, 1.1) * 1.4 * var(--il-orig-scale, 1)); direction: rtl; }
.il-orig.grc { font-family: var(--serif); font-size: calc(var(--read-size) * var(--grc-scale, 1) * 1.25 * var(--il-orig-scale, 1)); direction: ltr; }
.il-tr { font-size: calc(var(--read-size) * var(--en-scale, 1) * 0.92 * var(--il-tr-scale, 1)); font-style: italic; color: var(--accent-ink); opacity: 0.95; white-space: nowrap; direction: ltr; }
.il-en { font-size: calc(var(--read-size) * var(--en-scale, 1) * 0.95 * var(--il-en-scale, 1)); line-height: 1.25; max-width: 9rem; direction: ltr; }
@media (max-width: 40rem) { .il-verse { flex-direction: column; gap: 0.2rem; } .il-verse > .vmeta { flex-direction: row; } }

/* ───────────── word pages (#/word/H430) and the word browser (#/words) ───────────── */
.lex-page { max-width: 52rem; margin: 0 auto; }
.lex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: 0.5rem 0 0.8rem; }
.lex-lemma.he { font-family: var(--hebrew); direction: rtl; }
.lex-lemma.grc { font-family: var(--serif); }
.lex-lemma-big { display: block; font-size: 3.2rem; line-height: 1.25; color: var(--ink); }
.lex-translit { font-style: italic; color: var(--accent-ink); font-size: 1.1rem; }
.lex-meta { margin-top: 0.2rem; font-size: 0.9rem; opacity: 0.85; font-variant-numeric: lining-nums tabular-nums; }
.lex-tools { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.lex-def { font-size: 1.1rem; line-height: 1.55; margin: 0.4rem 0; }
.lex-kjv { opacity: 0.9; margin: 0.3rem 0 1rem; }
.lex-k { color: var(--accent-ink); font-weight: 600; }
.lex-chart { display: flex; flex-direction: column; gap: 0.15rem; max-height: 22rem; overflow-y: auto; padding-right: 0.4rem; }
.lex-bar { display: grid; grid-template-columns: 9.5rem 1fr 3rem; align-items: center; gap: 0.6rem; padding: 0.15rem 0.3rem; border-radius: 0.35rem; color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.lex-bar:hover, .lex-bar.on { background: color-mix(in srgb, var(--accent), transparent 85%); }
.lex-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lex-bar-track { height: 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--rule), transparent 40%); overflow: hidden; }
.lex-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.lex-bar.on .lex-bar-fill { background: var(--foil-ink); }
.lex-bar-n { text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--accent-ink); }
.lex-related { margin: 0.2rem 0 0.6rem; }
.lex-chip .lex-lemma { font-size: 1.1rem; }
.lex-pager { display: flex; justify-content: space-between; margin: 1rem 0 0.4rem; }
.lex-center { text-align: center; }
.lex-browse { margin: 0.8rem 0 0; }
.lex-browse .chip { display: inline-block; text-decoration: none; }
.lex-browse .chip:hover { text-decoration: none; }
.lex-list { display: flex; flex-direction: column; }
.lex-row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.8rem; align-items: baseline; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.lex-row:hover { background: var(--hover); }
.lex-row .lex-lemma { font-size: 1.5rem; line-height: 1.3; }
.lex-row-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lex-row-top { display: flex; gap: 0.7rem; align-items: baseline; }
.lex-id { font-size: 0.8rem; color: var(--accent-ink); font-weight: 600; }
.lex-n { margin-left: auto; font-size: 0.8rem; opacity: 0.8; font-variant-numeric: lining-nums tabular-nums; }
.lex-row-def { font-size: 0.9rem; opacity: 0.88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.word-all-2 { font-weight: 500; margin-top: 0.2rem; }
@media (max-width: 34rem) { .lex-bar { grid-template-columns: 7rem 1fr 2.4rem; } .lex-lemma-big { font-size: 2.6rem; } }
/* ── word page ── */
.lexw { max-width: 60rem; }
.lexw-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; align-items: center; padding: 1.4rem 1.6rem; margin: 0.4rem 0 1.2rem; border: 1px solid var(--rule); border-radius: 1rem; background: color-mix(in srgb, var(--accent), var(--card) 90%); }
.lexw-word { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; }
.lexw .lex-lemma-big { font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1.2; }
.lexw-translit { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--accent-ink); }
.lexw-facts { display: grid; grid-auto-flow: column; gap: 0.4rem 1.6rem; margin: 0; }
.lexw-facts > div { text-align: center; }
.lexw-facts dt { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.15rem; }
.lexw-facts dd { margin: 0; font-size: 1.35rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.lexw-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.lexw-card { padding: 1.2rem 1.4rem 1.3rem; margin: 0 0 1.2rem; border: 1px solid var(--rule); border-radius: 0.9rem; background: var(--card); min-width: 0; }
.lexw-h { margin: 0 0 0.8rem; font-family: var(--ui-sans, inherit); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.lexw-def { margin: 0 0 1rem; font-size: 1.2rem; line-height: 1.6; max-width: 44rem; }
.lexw-kjv-label { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.45rem; }
.lexw-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.lexw-tags li { padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--hover); font-size: 0.95rem; }
.lexw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.2rem; align-items: start; }
.lexw .lex-chart { max-height: 26rem; }
.lexw-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lexw-related a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.lexw-related li:last-child a { border-bottom: 0; }
.lexw-related a:hover { background: var(--hover); border-radius: 0.4rem; }
.lexw-related .lex-lemma { font-size: 1.4rem; }
.lexw-rel-id { font-size: 0.85rem; font-weight: 600; color: var(--accent-ink); font-variant-numeric: lining-nums tabular-nums; }
.lexw-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.6rem; }
.lexw-pager a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 1rem; border: 1px solid var(--rule); border-radius: 0.8rem; color: var(--ink); text-decoration: none; background: var(--card); }
.lexw-pager a.next { text-align: right; align-items: flex-end; grid-column: 2; }
.lexw-pager a:hover { background: var(--hover); }
.lexw-pager small { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.lexw-pager .lex-lemma { font-size: 1.2rem; }
.lexw-verses { margin-top: 0.4rem; }
@media (max-width: 40rem) { .lexw-hero { grid-template-columns: 1fr; padding: 1.1rem; } .lexw-facts { justify-content: space-between; } .lexw-grid { grid-template-columns: 1fr; } }
.lex-page a.chip, .lex-page a.chip:hover { text-decoration: none; }
.lex-page .result-open { text-decoration: none; }

/* collection + cross-reference pages */
.collection-block { margin: 1.6rem 0 0.4rem; text-align: center; }
.collection-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.5rem; }
.collection-strip { margin: 0 0 0.6rem; justify-content: center; }
.collection-strip .chip { font-size: 0.85rem; }
.collection-strip .chip { text-decoration: none; }
.coll-title { font-family: var(--display); font-size: 2rem; margin: 0; color: var(--accent-ink); }
.coll-progress { position: static; margin: 0.2rem 0 1rem; border-radius: 999px; overflow: hidden; }
.coll-search { margin-bottom: 1rem; }
.coll-grid { margin-top: 0.5rem; }
.refs-verse { margin: 0.4rem 0 1rem; padding: 0.8rem 1rem; border-left: 3px solid var(--foil-ink); background: var(--card); border-radius: 0.4rem; }
.refs-orig { font-size: 1.4rem; margin-bottom: 0.4rem; }
.refs-orig.he { direction: rtl; text-align: right; }
.refs-en { opacity: 0.92; }
.refs-list { display: flex; flex-direction: column; }
.refs-row { display: block; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.refs-row:hover { background: var(--hover); }
.refs-text { display: block; font-size: 0.95rem; opacity: 0.9; margin-top: 0.15rem; }
.refs-more { display: block; margin-top: 0.3rem; }
.refs-more .chip { font-size: 0.8rem; padding: 0.1rem 0.6rem; text-decoration: none; }
.xref-all { display: block; padding: 0.4rem 0.8rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.refs-main { display: block; padding: 0; border: 0; }
.refs-main:hover { background: transparent; }
.il-note { margin: 0 0 0.6rem; font-style: italic; }

/* reading plans (#/plans) */
.plan-bar { height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; margin: 0.4rem 0 1.2rem; }
.plan-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--foil-ink)); }
.plan-today { justify-content: flex-start; }
.plan-today .chip { text-decoration: none; }
.chip.done { opacity: 0.6; }
.plan-actions { margin-top: 1rem; }

.credits-page .credit-row { margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.92rem; }
.credits-page .credit-row a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.credits-page .credit-row a:hover { text-decoration-color: var(--accent); }
.credits-page .credit-lic { font-size: 0.75rem; opacity: 0.7; }

/* ───────────── reader bar v2: one calm row ─────────────
   view segment · texts menu · chapter arrows · portion. It lives in the reading column
   (the sidebar is outside it), and adapts to the column's own width via a container
   query on .rc-row, so a narrow window, a phone, and a wide window with the sidebar
   open all get the right density without separate window-size breakpoints. */
/* The bar is a second header: flush under the topbar (cancels #app's 1rem top padding), bleeding
   out to the window's side padding so it reads as one piece with it, with the controls inset by that
   same padding so they line up with the text column, and room above/below them. */
.reader-controls { --rc-pad: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left));
  margin: -1rem calc(-1 * var(--rc-pad)) 1rem; padding: 0.75rem var(--rc-pad); gap: 0; justify-content: stretch;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--chrome); border-bottom: 1px solid var(--rule); }
/* beside the open sidebar the bar stops at the column (it must not run under the sidebar) */
@media (min-width: 70rem) {
  :root:not([data-side-hidden]) .reader-page:has(> .side-nav) .reader-controls { margin-right: 0; padding-right: 1rem; border-radius: 0 0 0.7rem 0.7rem; }
}
.reader-controls .seg, .reader-controls .chip,
.reader-controls .chapnav button, .reader-controls .chapnav select { box-shadow: none; }
.rc-row { container-type: inline-size; display: flex; align-items: center; gap: 0.5rem 0.7rem; width: 100%; flex-wrap: nowrap; }
.rc-row > * { flex: 0 0 auto; }
.rc-texts-wrap { position: relative; flex: 1 1 0; min-width: 0; }
.rc-texts { max-width: 100%; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; padding: 0.3rem 0.75rem; }
.rc-texts-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-caret { opacity: 0.7; font-size: 0.8em; }
.rc-pop { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 30; min-width: 13rem;
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 0.7rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.rc-pop[hidden] { display: none; }
.rc-pop-title { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; padding: 0 0.25rem; }
.rc-pop .chip { text-align: left; }
.rc-short { display: none; }
.chapnav { margin-left: auto; }
.parashahnav { margin-left: 0; }
/* The chapter picker stays in the bar at every width (the sidebar's chapter grid is a second way in, not a replacement). */
/* narrow column: shorten the view labels, then drop the portion picker's width */
@container (max-width: 34rem) {
  .rc-long { display: none; }
  .rc-short { display: inline; }
  .rc-view button { padding: 0.35rem 0.6rem; }
}
@container (max-width: 24rem) {
  .rc-texts-label { display: none; }
  .rc-texts::before { content: "Texts"; }
  .parashahnav { display: none; }
}
/* phones: the bar scrolls away (as before) but stays one row; arrows are the touch targets */
@media (max-width: 48rem) {
  .reader-controls { margin-bottom: 0.75rem; padding-block: 0.95rem 0.7rem; } /* air under the header bar, also while docked beneath it */
  .rc-row { flex-wrap: wrap; }
  .reader-controls .rc-row .seg { flex: 1 1 100%; order: 0; }
  .reader-controls .rc-row .seg button { flex: 1; padding: 0.5rem 0.4rem; font-size: 0.95rem; }
  .rc-long { display: inline !important; }
  .rc-short { display: none !important; }
  .rc-texts-wrap { order: 1; flex: 1 1 0; }
  .reader-controls .rc-row .chapnav { order: 2; margin-left: auto; }
  .rc-pop { min-width: min(18rem, 86vw); }
  .reader-controls .rc-row .chap-arrow { min-width: 2.75rem; min-height: 2.75rem; }
}
/* very narrow (small phones, split-screen): short view labels and a tighter second row, so nothing clips */
@media (max-width: 22rem) {
  .rc-long { display: none !important; }
  .rc-short { display: inline !important; }
  .reader-controls .rc-row .seg button { padding: 0.5rem 0.2rem; font-size: 0.9rem; }
  .reader-controls .rc-row { gap: 0.4rem; }
  .reader-controls .rc-row .chapnav { gap: 0.25rem; }
  .reader-controls .rc-row .chap-arrow { min-width: 2.4rem; }
}

.word-id { text-decoration: none; border-bottom: 1px dotted currentColor; }
.word-id:hover, .word-id:focus-visible { text-decoration: none; border-bottom-style: solid; }


/* ───────────── settings polish ───────────── */
/* air under section headings, around the floating preview, and above the env reset button */
.settings-page > section.reading-text > h2 { margin-bottom: 1.2rem; }
.font-preview { margin-top: 0.4rem; margin-bottom: 1.4rem; }
.env-actions { margin-top: 1.1rem; }
/* sliders: two rows of two at wide sizes, one stack when narrow (was 3 + 1) */
@media (min-width: 52rem) {
  .settings-page > section.reading-text { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
}
@media (min-width: 52rem) and (max-width: 60rem) {
  .settings-page > section.reading-text { grid-template-columns: 1fr; }
}
/* the list buttons at the foot of Settings (and the data pages): round, like every other button */
.link-row { border-radius: 999px; padding: 0.65rem 1.15rem; }
.link-row .icon { margin-inline-end: 0.1rem; }

/* ───────────── one height for every control in the reader bar ─────────────
   segment, texts menu, chapter arrows, chapter + portion pickers all share --rc-h, so they line
   up at every width (arrows are round buttons of exactly that height). */
.reader-controls { --rc-h: 2.4rem; }
.reader-controls .rc-view { height: var(--rc-h); }
.reader-controls .rc-view button { height: 100%; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; }
.reader-controls .rc-texts { height: var(--rc-h); padding-block: 0; }
.reader-controls .chapnav { align-items: center; }
.reader-controls .chapnav .chap-arrow { height: var(--rc-h); width: var(--rc-h); min-width: 0; min-height: 0; padding: 0; }
.reader-controls .chapnav select { height: var(--rc-h); padding-block: 0; }
@media (max-width: 48rem) {
  .reader-controls { --rc-h: 2.6rem; }
  .reader-controls .rc-row .chap-arrow { min-width: 0; min-height: 0; }
  .reader-controls .rc-row .seg button { padding-block: 0; }
}

/* ───────────── settings v2: one focused column + a section index ─────────────
   Grouped by purpose (Appearance · Reading text · Reading · Sync · Help and data) instead of a two-column
   grid that paired unrelated sections and left dead space beside the tall ones. */
.settings-layout { max-width: 50rem; margin: 0 auto; }
.settings-nav { display: none; }
.settings-layout > .settings-page { max-width: none; display: block; margin: 0; }
.settings-page > section.set-group { margin-bottom: 2.8rem; scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.settings-page .set-group > h2 { font-size: 1.35rem; margin-bottom: 0.9rem; }
.set-sub { margin: 1.5rem 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; opacity: 0.9; }
.settings-card { border: 1px solid var(--rule); border-radius: 0.9rem; background: var(--card); padding: 0.15rem 1.15rem; }
.settings-card > .row { margin: 0; padding: 0.9rem 0; }
.settings-card > .row + .row { border-top: 1px solid var(--rule); }
.set-text-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1.2rem; margin: 0 0 1.4rem; }
.set-text-tools > .row { margin: 0; flex: 1 1 16rem; }
/* the reset button is the same height as the Separate / Linked segment beside it */
.set-text-tools > .chip { box-sizing: border-box; min-height: 2.6rem; padding: 0 1.2rem; font-size: 0.95rem; display: inline-flex; align-items: center; }
.slider-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } /* always one column: Hebrew, Greek, English, Interlinear */
.slider-grid .slider { min-width: 8rem; }
.slider-grid .slider-group:first-child { margin-top: 0; }
@media (min-width: 66rem) {
  .settings-layout { display: grid; grid-template-columns: 11rem minmax(0, 46rem); gap: 3.5rem; max-width: none; justify-content: center; align-items: start; }
  .settings-nav { display: flex; flex-direction: column; gap: 0.2rem; position: sticky; top: calc(var(--topbar-h) + 1.6rem); }
  .settings-nav-link { text-align: left; border: 0; background: transparent; color: var(--ink); padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 1rem; opacity: 0.72; }
  .settings-nav-link:hover { background: var(--hover); opacity: 1; }
  .settings-nav-link[aria-current="true"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-ink); font-weight: 600; opacity: 1; }
}
/* the four environment cards: a clean row of four when there is room, otherwise 2 × 2 */
.settings-page .env-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
@media (min-width: 40rem) { .settings-page .env-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.slider-grid .slider-group { margin: 0 0 1.5rem; }

/* search: clear (×) button inside the field — round like the other controls, only while there is text */
.search-clear {
  flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0;
  border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink); font-size: 1.1rem; line-height: 1; opacity: 0.75;
}
.search-clear:hover, .search-clear:focus-visible { opacity: 1; border-color: var(--accent); background: var(--hover); }
.search-clear[hidden] { display: none; }
@media (pointer: coarse) { .search-clear { width: 2.2rem; height: 2.2rem; } }
/* the native cancel button would double it up */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* the books sidebar follows the topbar out and back, so it never hangs below an empty strip */
:root[data-chrome="hidden"] .side-nav { top: calc(var(--topbar-h) + 0.5rem + var(--topbar-shift)); }
@media (prefers-reduced-motion: reduce) { .side-nav { transition: none; } }

/* ───────────── Home: Today's readings ─────────────
   The four time-based readings as leather cards (the widget's colours — sapphire Torah, oxblood Besorah,
   aubergine Psalms, emerald Mel's), with your reading plan beneath. The cards are the .parashah-band chrome
   (leather, grain, gold frame, checkable rows) opened up to fill a grid. */
.today { width: 100%; max-width: 58rem; margin: -0.4rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0 0.3rem; }
.today-head h2 { margin: 0; font-family: var(--display); font-size: 1.55rem; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.01em; }
.today-date { font-size: 0.95rem; opacity: 0.7; }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 46rem) { .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.today-grid .parashah-band { max-width: none; min-width: 0; margin: 0; padding: 1.6rem 1.7rem 2.1rem; height: 100%; }
.today-grid { margin-bottom: 1.4rem; }
.today-grid .pb-readings { max-width: none; min-width: 0; }
.band-torah { --pb-leather: linear-gradient(165deg, #22397e 0%, #0c1838 100%); }    /* sapphire */
.band-besorah { --pb-leather: linear-gradient(165deg, #6f2018 0%, #2c0c08 100%); }  /* oxblood — fixed, so the four stay distinct under every accent and match the widgets */
.band-psalms { --pb-leather: linear-gradient(165deg, #48265f 0%, #190a26 100%); }
.band-mel { --pb-leather: linear-gradient(165deg, #1d4a33 0%, #08200f 100%); }
.today-plan {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem 0.8rem; flex-wrap: wrap; text-align: center;
  padding: 0.75rem 1.3rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
  color: var(--ink); text-decoration: none;
}
.today-plan:hover, .today-plan:focus-visible { border-color: var(--accent); background: var(--hover); }
.today-plan-kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
.today-plan-name { font-size: 1rem; }

/* ── home: reading plans ── */
.home-plans { width: 100%; max-width: 58rem; margin: 2.4rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
/* Four plans lay out 4 up, 2 up or 1 up by the width of their own box — never 3 in a row with 1 stranded below. */
.home-plans, .plans-page { container-type: inline-size; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
@container (min-width: 30rem) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* three cards (a plan is active, the others remain): 1 up, or 3 up once there is room — never 2 + 1 */
.plan-grid[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 40rem) { .plan-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.plan-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 0.9rem; border: 1px solid var(--rule); border-radius: 0.9rem; background: var(--card); color: var(--ink); text-decoration: none; }
.plan-card:hover { border-color: var(--accent); background: var(--hover); }
.plan-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent), var(--card) 88%); }
.plan-card-name { text-align: left; font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.plan-card-blurb { font-size: 0.92rem; opacity: 0.8; line-height: 1.4; flex: 1; }
.plan-card-bar { height: 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--rule), transparent 40%); overflow: hidden; }
.plan-card-bar span { display: block; height: 100%; background: var(--accent); }
.plan-card-meta { font-size: 0.8rem; opacity: 0.65; font-variant-numeric: lining-nums tabular-nums; }
.plan-card-go { margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--accent-ink); }
.home-plans .today-date { text-decoration: none; color: var(--accent-ink); }

/* ── command palette (src/palette.js) ── */
.pal-back { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 1rem 1rem; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: pal-fade 0.12s ease-out; }
.pal { width: min(50rem, 100%); max-height: min(34rem, 78vh); display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 1rem; background: var(--card); color: var(--ink); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5); overflow: hidden; animation: pal-rise 0.14s ease-out; }
@keyframes pal-fade { from { opacity: 0; } }
@keyframes pal-rise { from { transform: translateY(-6px) scale(0.985); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pal-back, .pal { animation: none; } }
.pal-top { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.1rem; border-bottom: 1px solid var(--rule); }
.pal-top .icon { width: 1.15rem; height: 1.15rem; opacity: 0.6; flex: none; }
.pal-input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 1rem 0; border: 0; background: transparent; color: inherit; outline: none; }
.pal-modes { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--rule); }
.pal-mode { font: inherit; font-size: 0.78rem; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 999px; padding: 0.15rem 0.6rem; cursor: pointer; opacity: 0.8; }
.pal-mode kbd { font: 0.78rem var(--ui-sans, sans-serif); color: var(--accent-ink); font-weight: 700; }
.pal-mode:hover { border-color: var(--accent); opacity: 1; }
.pal-mode.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); opacity: 1; }
.pal-mode.on kbd { color: inherit; }
.pal-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; flex: 1; }
.pal-list { list-style: none; margin: 0; padding: 0.3rem; overflow-y: auto; min-height: 12rem; }
.pal-group { padding: 0.6rem 0.8rem 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.pal-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 0.5rem; cursor: pointer; }
.pal-item.on { background: var(--accent); color: var(--on-accent); }
.pal-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label mark { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pal-item:not(.on) .pal-label mark { color: var(--accent-ink); }
.pal-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; opacity: 0.65; }
.pal-item .pal-hint { margin-left: auto; }
.pal-hint, .pal-n { font: 0.76rem var(--ui-sans, sans-serif); opacity: 0.75; border: 1px solid currentColor; border-radius: 0.3rem; padding: 0 0.4rem; flex: none; white-space: nowrap; }
.pal-n { opacity: 0.4; border-color: transparent; padding: 0; order: 9; }
.pal-item.on .pal-n { opacity: 0.7; }
.pal-empty { padding: 1.4rem; text-align: center; opacity: 0.6; }
.pal-preview { border-left: 1px solid var(--rule); padding: 0.9rem 1.1rem; overflow-y: auto; font-size: 0.95rem; background: color-mix(in srgb, var(--card), var(--bg) 40%); }
.pal-preview:empty::before { content: "Preview"; opacity: 0.3; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pal-pv-title { font-family: var(--display); font-size: 1.25rem; color: var(--accent-ink); margin-bottom: 0.4rem; }
.pal-pv-orig { font-size: 1.35rem; line-height: 1.6; margin-bottom: 0.2rem; }
.pal-pv-orig.he { direction: rtl; text-align: right; font-family: var(--hebrew); }
.pal-pv-orig.grc { font-family: var(--serif); }
.pal-pv-orig.big { font-size: 2.4rem; line-height: 1.3; }
.pal-pv-en { line-height: 1.5; margin-bottom: 0.5rem; }
.pal-pv-en sup { font-size: 0.7em; color: var(--accent-ink); }
.pal-pv-meta, .pal-pv-hint { font-size: 0.82rem; opacity: 0.7; margin-top: 0.3rem; }
.pal-foot { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 1rem; font-size: 0.76rem; opacity: 0.65; border-top: 1px solid var(--rule); }
@media (max-width: 44rem) {
  .pal-body { grid-template-columns: minmax(0, 1fr); }
  .pal-preview { display: none; }
  .pal-foot span:first-child { display: none; }
}

/* the brand name, set in the wordmark face (Fraunces, subset) wherever it stands as the page title */
#title.wordmark { font-family: "Besorah Wordmark", var(--display); font-weight: 600; letter-spacing: .01em; font-size: 1.5em; margin-bottom: .1em; }

/* ── reading-plans page: aligned controls, one card shape ── */
.plans-page .plan-today, .plans-page .plan-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin: 0.6rem 0 1.2rem; }
.plans-page .plan-today .chip, .plans-page .plan-actions .chip { display: inline-flex; align-items: center; justify-content: center; margin: 0; min-height: 2.5rem; padding: 0 1rem; font: inherit; line-height: 1; box-sizing: border-box; }
.plans-page .plan-actions .chip.danger { color: var(--accent-ink); }
.plans-page .plan-grid { margin: 0.4rem 0 1.5rem; align-items: stretch; }
.plans-page .plan-card { cursor: default; }
.plans-page .plan-card:hover { border-color: var(--rule); background: var(--card); }
.plan-card.plan-pick { gap: 0.45rem; }
.plan-card.plan-pick .plan-card-blurb { flex: 1; }
.plan-start { margin-top: 0.5rem; width: 100%; min-height: 2.6rem; border: 1px solid var(--accent); border-radius: 0.6rem; background: transparent; color: var(--accent-ink);
  font: 600 0.95rem var(--ui-font, inherit); cursor: pointer; }
.plan-start:hover, .plan-start:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }

/* ── custom chapter picker (reader bar): a pill that opens the sidebar-style numbered grid ── */
.chap-pick { position: relative; display: inline-flex; }
.chap-pick-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 4.4rem; justify-content: space-between; font-variant-numeric: lining-nums tabular-nums; border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.95rem; }
.chap-pick-btn .select-arrow { width: 0.8rem; height: 0.8rem; opacity: 0.85; position: static; inset: auto; transform: none; pointer-events: none; flex: none; }
.chap-pick-btn[aria-expanded="true"] { border-color: var(--accent); }
.chap-pop { left: auto; right: -2.5rem; transform: none; max-width: calc(100vw - 1.5rem); width: min(21rem, 90vw); min-width: 0; padding: 0.55rem 0.4rem 0.4rem; gap: 0.35rem; }
.chap-pop .rc-pop-title { padding: 0 0.6rem; }
.chap-pop .chap-grid { border: 0; padding: 0.2rem 0.3rem; max-height: min(18rem, 50vh); gap: 0.25rem; }
.chap-pop .side-chap { min-width: 2.4rem; padding: 0.4rem 0.3rem; font-size: 0.95rem; border: 1px solid transparent; }
.chap-pop .side-chap:hover, .chap-pop .side-chap:focus-visible { border-color: var(--accent); outline: none; }

/* a gloss supplied for a word the alignment leaves blank: quieter and italic, so it reads as an editorial note */
.il-en.supplied { font-style: italic; opacity: 0.66; }

/* ── plan invitation banner + daily reminder (Reading plans) ── */
.plan-join { margin: 0.4rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--accent); border-radius: 0.8rem; background: color-mix(in srgb, var(--accent), var(--card) 90%); }
.plan-join-title { margin: 0 0 0.3rem; font-size: 1.25rem; font-family: var(--display); }
.plan-join .plan-actions { margin-bottom: 0; }
.plan-join-go { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.plan-reminder { margin-top: 1.4rem; }
.plan-reminder-row { align-items: center; }
.plan-reminder .chip[aria-pressed="true"] { border-color: var(--accent); }
.plan-time { font: inherit; min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); }
.plan-time:disabled { opacity: 0.5; }
.settings-note a { color: var(--accent-ink); }

/* ── word pages: how the Septuagint renders a Hebrew word / what a Greek word translates ── */
.lxx-lead { margin: 0 0 0.5rem; opacity: 0.85; }
.lxx-list, .lxx-early { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lxx-list li { display: grid; grid-template-columns: minmax(7rem, 1.2fr) minmax(3rem, 1fr) auto; align-items: center; gap: 0.2rem 0.7rem; }
.lxx-word { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; color: inherit; }
.lxx-word:hover .lex-lemma { color: var(--accent-ink); }
.lxx-word .lex-lemma { font-size: 1.25rem; }
.lxx-bar { height: 0.35rem; border-radius: 99px; background: var(--rule); overflow: hidden; }
.lxx-bar > span { display: block; height: 100%; background: var(--accent); }
.lxx-n { font-variant-numeric: lining-nums tabular-nums; opacity: 0.75; font-size: 0.9rem; }
.lxx-first { grid-column: 1 / -1; font-size: 0.85rem; opacity: 0.8; }
.lxx-ref { color: var(--accent-ink); text-decoration: none; border-bottom: 1px dotted currentColor; font-variant-numeric: lining-nums tabular-nums; }
.lxx-early li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.lxx-arrow, .lxx-none { opacity: 0.6; }
.lxx-none { font-style: italic; font-size: 0.9rem; }
.lxx-note { margin: 0.8rem 0 0; font-size: 0.8rem; opacity: 0.65; }

/* ── Torah-portion picker (reader bar): the chapter picker's pill, opening a list of the book's portions ── */
.portion-pick-btn { min-width: 0; max-width: 13rem; height: var(--rc-h); }
.portion-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.portion-pop { left: auto; right: 0; transform: none; width: min(22rem, 90vw); max-width: calc(100vw - 1.5rem); min-width: 0; padding: 0.55rem 0.4rem 0.4rem; gap: 0.35rem; }
.portion-pop .rc-pop-title { padding: 0 0.6rem; }
.portion-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: min(18rem, 50vh); overflow-y: auto; padding: 0.2rem 0.3rem; }
.portion-item { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr auto; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.6rem;
  border: 1px solid transparent; border-radius: 0.5rem; color: inherit; text-decoration: none; }
.portion-item:hover, .portion-item:focus-visible { border-color: var(--accent); outline: none; }
.portion-item.current { background: var(--accent); color: var(--on-accent); }
.portion-he { font-family: var(--hebrew); font-size: 1.05rem; }
.portion-at { font-size: 0.8rem; opacity: 0.7; font-variant-numeric: lining-nums tabular-nums; }

/* a paragraph of explanation, then its buttons: room between them */
.settings-note + .link-list { margin-top: 1.3rem; }
.settings-note + .settings-note { margin-top: 0.6rem; }

/* ── search "In:" panel: one line of top-level scopes, then headed sections ── */
.where-panel { padding: 1.1rem 1.2rem 1.2rem; }
.where-top { margin-top: 0; }
.where-section { margin-top: 1.1rem; }
.where-heading { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
.where-section .where-group { margin: 0; gap: 0.5rem; }
.where-one { gap: 0.6rem 0.7rem; }
.where-select-wrap { position: relative; display: inline-flex; align-items: center; }
.where-select { -webkit-appearance: none; appearance: none; height: 2rem; min-width: 13rem; padding: 0 2.1rem 0 0.95rem; border-radius: 999px; font-size: 0.85rem; background: var(--bg); cursor: pointer; }
.where-select:hover, .where-select:focus-visible { border-color: var(--accent); outline: none; }
.where-select-wrap .select-arrow { width: 0.8rem; height: 0.8rem; inset-inline-end: 0.8rem; }
.where-current { border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); }

/* ── verse page (src/verse.js) ── */
.verse-page { max-width: 62rem; }
.vp-steps { display: flex; justify-content: space-between; gap: 0.6rem; margin: 0 0 1rem; }
.vp-step { text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.vp-card { margin-bottom: 1.2rem; }
.vp-texts { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 1.4rem; }
.vp-text { min-width: 0; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 2px solid var(--rule); }
.vp-text:not(.en) { border-left-color: var(--foil-ink); }
.vp-text.he .vp-line { direction: rtl; text-align: right; }
.vp-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 0.3rem; }
.vp-line { font-size: calc(var(--read-size) * 1.05); line-height: 1.7; }
.vp-w { color: inherit; text-decoration: none; border-radius: 0.25rem; }
.vp-w[href]:hover, .vp-w[href]:focus-visible { background: color-mix(in srgb, var(--accent), transparent 82%); outline: none; }
.vp-il + .vp-il { margin-top: 1.2rem; }
.vp-il .il-word { text-decoration: none; color: inherit; }
.vp-table-wrap { overflow-x: auto; }
.vp-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.vp-table th { text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); padding: 0 0.7rem 0.4rem 0; white-space: nowrap; }
.vp-table td { padding: 0.5rem 0.7rem 0.5rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.vp-c-word .lex-lemma { font-size: 1.3rem; text-decoration: none; color: inherit; }
.vp-c-word a:hover { color: var(--accent-ink); }
.vp-sub { font-size: 0.8rem; opacity: 0.7; font-style: italic; }
.vp-c-id { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.vp-cp { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; }
.vp-cp .lex-lemma { font-size: 1.2rem; }
.vp-cp small { font-size: 0.72rem; opacity: 0.65; }
.vp-cp.usual { opacity: 0.7; }
.vp-none { opacity: 0.4; }
.vp-note { margin: 0 0 0.6rem; }
.vp-xref { display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; color: inherit; }
.vp-more { margin: 0.8rem 0 0; }
.vp-note-box { margin: 1.4rem 0 2rem; }
@media (max-width: 40rem) { .vp-table th:nth-child(2), .vp-table td:nth-child(2) { display: none; } }

/* ───────────── headings: the wordmark's face (Fraunces) everywhere a page names itself ───────────── */
.section-head h2, .section-subhead h3, .coll-title, .today-head h2, .plan-card-name, .plan-join-title, .data-page h2,
.settings-page .set-group > h2, .continue-ref, .pal-pv-title, .lex-head .coll-title {
  font-family: "Besorah Wordmark", var(--display); font-weight: 600; letter-spacing: 0.005em;
}
.today-head h2 { font-size: 1.7rem; }
.coll-title { font-size: 2.2rem; }

/* ───────────── dropdowns (src/dropdown.js): the chapter picker's look ───────────── */
.dd-btn { min-width: 12rem; height: 2rem; padding-block: 0; font-size: 0.85rem; }
.dd-pop { left: 0; right: auto; width: min(18rem, 86vw); max-height: min(20rem, 55vh); overflow-y: auto; padding: 0.45rem 0.35rem; gap: 0.1rem; transform-origin: top left; }
.dd-pop .rc-pop-title { padding: 0.5rem 0.6rem 0.15rem; color: var(--accent-ink); font-weight: 700; opacity: 1; }
.dd-item { text-align: left; font: inherit; font-size: 0.92rem; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 0.45rem; padding: 0.35rem 0.6rem; cursor: pointer; }
.dd-item:hover, .dd-item:focus-visible { background: var(--hover); border-color: var(--accent); outline: none; }

/* ───────────── hover: every button gets the accent background with its bright border ───────────── */
.chip:not([aria-pressed="true"]):hover, .lane-chip:not([aria-pressed="true"]):hover, .recent-chip:hover, .case-toggle:not(.on):hover,
.seg button:not([aria-pressed="true"]):not(.on):hover, .chapnav button:not(:disabled):hover, .link-row:hover, .pal-mode:not(.on):hover,
.chap-pick-btn:hover, .reader-controls .rc-texts:hover {
  background: var(--hover); border-color: var(--accent);
}
.gear:hover, #back:hover { background: var(--hover); color: var(--accent); }
.gear:active, #back:active, .chip:active, .seg button:active, .chap-arrow:active, .link-row:active, .recent-chip:active { transform: scale(0.96); }
.chap-arrow .chap-chevron { transition: transform 0.18s ease; }
.chap-arrow:not(:disabled):hover .chap-chevron { color: var(--accent); }
.chap-arrow:not(:disabled):hover svg { transform: translateX(2px); }
.chap-arrow:first-child:not(:disabled):hover svg { transform: translateX(-2px); }
.chap-arrow { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.12s ease; }
.gear, #back, .chip, .seg button, .link-row, .recent-chip, .env-card, .book-card, .plan-card { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.14s ease; }
.env-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); }
.book-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.55); }

/* ───────────── motion: the sidebar glides, popups unfold, cards rise ───────────── */
@property --gutter { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root { --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1); }
@media (min-width: 70rem) {
  .reader-page { transition: padding 0.4s var(--ease-io); }
  :is([data-env="parchment"], [data-env="early-print"]) .reader-page { transition: --gutter 0.4s var(--ease-io); }
  .side-nav { transition: top var(--chrome-dur) var(--chrome-ease), transform 0.4s var(--ease-io), opacity 0.3s ease, visibility 0s linear 0s; }
  :root[data-side-hidden] .side-nav {
    display: flex; transform: translateX(calc(100% + 1.5rem)); opacity: 0; visibility: hidden; pointer-events: none;
    transition: top var(--chrome-dur) var(--chrome-ease), transform 0.4s var(--ease-io), opacity 0.3s ease, visibility 0s linear 0.4s;
  }
  .side-show {
    display: grid; place-items: center; position: fixed; z-index: 10; right: 0; left: auto; top: 50%;
    width: 1.9rem; height: 4.2rem; padding: 0; font-size: 1.5rem; line-height: 1;
    background: var(--card); color: var(--accent-ink); border: 1px solid var(--rule); border-right: 0; border-radius: 0.5rem 0 0 0.5rem;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(100%, -50%);
    transition: transform 0.4s var(--ease-io), opacity 0.3s ease 0.1s, visibility 0s linear 0.4s;
  }
  :root[data-side-hidden] .side-show { opacity: 0.6; visibility: visible; pointer-events: auto; transform: translate(0, -50%); transition-delay: 0.15s, 0.2s, 0s; }
  :root[data-side-hidden] .side-show:hover, :root[data-side-hidden] .side-show:focus-visible { opacity: 1; }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.rc-pop:not([hidden]), .xref-card, .word-card, .suggest:not([hidden]), .where-panel:not([hidden]) { animation: pop-in 0.16s var(--ease-out); }
.rc-pop { transform-origin: top right; }
.book-card, .parashah-band, .plan-card, .lexw-card, .vp-card, .result, .env-card, .settings-card { animation: rise 0.42s var(--ease-out) backwards; }
.book-card:nth-child(2), .parashah-band:nth-child(2), .plan-card:nth-child(2) { animation-delay: 0.04s; }
.book-card:nth-child(3), .parashah-band:nth-child(3), .plan-card:nth-child(3) { animation-delay: 0.08s; }
.book-card:nth-child(4), .parashah-band:nth-child(4), .plan-card:nth-child(4) { animation-delay: 0.12s; }
.book-card:nth-child(n+5) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .rc-pop, .xref-card, .word-card, .suggest, .where-panel, .book-card, .parashah-band, .plan-card, .lexw-card, .vp-card, .result, .env-card, .settings-card { animation: none !important; }
  .reader-page, .side-nav, .side-show { transition: none !important; }
}

/* ───────────── one control, one look: every control in the reader bar ─────────────
   view segment · texts · chapter arrows · chapter picker · portion picker share one height, radius, border,
   fill, type size and hover (accent border + accent-tinted fill), and nothing but the selected view is accent-filled. */
.reader-controls .rc-row { align-items: center; }
.reader-controls .rc-row :is(.rc-view, .rc-texts, .chap-arrow, .chap-pick-btn, .portion-pick-btn) {
  box-sizing: border-box; height: var(--rc-h); min-height: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 0.9rem; line-height: 1; box-shadow: none;
}
.reader-controls .rc-row :is(.rc-texts, .chap-pick-btn, .portion-pick-btn) { display: inline-flex; align-items: center; padding: 0 0.95rem; gap: 0.5rem; }
.reader-controls .rc-row .chap-arrow { width: var(--rc-h); padding: 0; display: inline-grid; place-items: center; }
.reader-controls .rc-row .rc-view { padding: 0; overflow: hidden; }
.reader-controls .rc-row .rc-view button { border: 0; height: 100%; padding: 0 0.95rem; font: inherit; font-size: 0.9rem; background: transparent; display: inline-flex; align-items: center; }
.reader-controls .rc-row .rc-view button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.reader-controls .rc-row .rc-view button:not([aria-pressed="true"]):hover { background: var(--hover); }
.reader-controls .rc-row :is(.rc-texts, .chap-arrow:not(:disabled), .chap-pick-btn, .portion-pick-btn):hover { background: var(--hover); border-color: var(--accent); }
.reader-controls .rc-row .rc-view:hover { border-color: var(--accent); }
.reader-controls .rc-row .chap-arrow:disabled { opacity: 0.4; }
.reader-controls .rc-row :is(.chap-pick-btn, .portion-pick-btn)[aria-expanded="true"], .reader-controls .rc-row .rc-texts[aria-expanded="true"] { border-color: var(--accent); background: var(--hover); }
.reader-controls .rc-row .chap-pick-btn { min-width: 4.6rem; justify-content: space-between; }
@media (max-width: 48rem) { .reader-controls .rc-row .rc-view button { padding: 0 0.4rem; font-size: 0.95rem; } }
/* the top bar's icons share that height */
.gear, #back { width: 2.4rem; height: 2.4rem; }
@media (pointer: coarse) { .gear, #back { width: 2.75rem; height: 2.75rem; } }
.rc-texts .select-arrow { position: static; inset: auto; transform: none; width: 0.8rem; height: 0.8rem; flex: none; opacity: 0.85; }

/* ───────────── every heading in the wordmark's face ───────────── */
h1, h2, h3, h4, .results-head, .lexw-h, .set-sub, .where-heading, .rc-pop-title, .pal-group, .pal-pv-title, .par-head, .home-hint,
.settings-nav-link, .side-book-name, .side-sec, .xref-head, .lex-meta-title, .today-plan-kicker, .hp-label {
  font-family: "Besorah Wordmark", var(--display);
}
.results-head, .lexw-h, .set-sub, .where-heading { font-weight: 600; }

/* Verse-number menu (Reader + Interlinear) and the "similar wording" section of the cross-reference card */
.verse-menu { width: min(15rem, calc(100vw - 1rem)); padding: 0.25rem 0; }
.vm-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.8rem; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.92rem; text-align: start; cursor: pointer; }
.vm-item .icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--accent-ink); }
.vm-item:hover, .vm-item:focus-visible { background: var(--hover); outline: none; }
.vn-menu { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 0.3em; }
.vn-menu:hover, .vn-menu[data-vmenu-open] { color: var(--accent); background: var(--hover); }
.vnum-inline[data-vmenu-open] { color: var(--accent); background: var(--hover); }
.xref-sub { padding: 0.45rem 0.8rem 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; border-top: 1px solid var(--rule); }
.xref-kind { margin-inline-start: 0.5rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; }
.xref-pass { border-top: 1px solid var(--rule); }
.xref-pass:first-of-type { border-top: 0; }
.xref-pass-title { padding: 0 0.8rem; font-weight: 700; color: var(--accent-ink); }
.xref-pass-note { margin: 0.2rem 0; padding: 0 0.8rem; font-size: 0.85rem; opacity: 0.85; }
.xref-pass-here { padding: 0 0.8rem 0.35rem; font-size: 0.8rem; font-style: italic; opacity: 0.7; }

/* Hebrew reader: the verse number is a LTR-isolated sup, so its own `inset-inline-start` resolved to the LEFT; hang it on the right */
.reader.single.he .vnum-inline.vnum-hang { inset-inline-start: auto; right: -1.35em; left: auto; }
.reader.single.he .song-verse > .vnum-inline { inset-inline-start: auto; right: 0; left: auto; }
@media (max-width: 40rem) { .reader.single.he .vnum-inline.vnum-hang { right: -1.1em; } }

/* Verse page: breathing room between the texts, and larger working text in its cards */
.vp-texts { gap: 2.2rem 1.8rem; }
.vp-text { padding-block: 0.5rem; }
.vp-line { line-height: 1.85; }
.vp-card .lexw-h { font-size: 0.95rem; margin-bottom: 1rem; }
.vp-table { font-size: 1.08rem; }
.vp-table th { font-size: 0.85rem; }
.vp-table td { padding-block: 0.65rem; }
.vp-sub { font-size: 0.92rem; }
.vp-cp small { font-size: 0.82rem; }
.vp-note { font-size: 1rem; }
.vp-card .xref-ref { font-size: 1.05rem; }
.vp-card .refs-text { font-size: 1.02rem; }
.vp-card .chip { font-size: 0.95rem; }
.vp-facts { margin-bottom: 0; }
.vp-card .lexw-facts dt { font-size: 0.82rem; }
.vp-card .lexw-tools { margin-top: 1.4rem; }
.scope-label { align-self: center; font-size: 0.85rem; opacity: 0.7; margin-inline-end: 0.2rem; }