/* ══════════════════════════════════════════════════════
   NAV ENGINE — Unified Navigation for Standard Works
   ══════════════════════════════════════════════════════ */

/* ── Overlay ── */
#nav-overlay {
  display: none; position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}
#nav-overlay.open { display: block; opacity: 1; }

/* ── Sidebar Panel (palette matches right #xref-panel / Study drawer) ── */

#nav-sidebar.open { transform: translateX(0); }

/* ── Drawer contract (2026-09-02) ─────────────────────────────────────────
   Every side drawer — this sidebar (left), the glossary (left), the Study
   panel (right), the annotations panel (right) — CLOSES BY TRANSFORM and
   opens to translateX(0). Where a drawer sits is decided here and nowhere
   else; the pages say only what a drawer looks like. A drawer's width may
   change at any time (the phone rule in nav_engine.js makes them
   full-screen) without moving it, because the closed position never
   depends on the width. And no drawer animates before the shell has
   painted (html.sw-shell-pending), so a rule that lands after first paint
   cannot slide a closed drawer across the screen — which is exactly what
   a numeric right:-55% → right:-102vw change did on every phone load: the
   Study panel stood 170px inside the screen and slid out. */
#xref-panel, #annotations-panel {
  right: 0 !important; left: auto !important;
  transform: translateX(100%) !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#xref-panel.open, #annotations-panel.open, #glossary-panel.open { transform: translateX(0) !important; }
html.sw-shell-pending #nav-sidebar, html.sw-shell-pending #xref-panel,
html.sw-shell-pending #annotations-panel, html.sw-shell-pending #glossary-panel { transition: none !important; }

/* ── Search Bar ── */


.nav-icon-btn {
  background: none; border: none;
  color: var(--sw-gold, var(--here-chrome));
  font-size: 1.35em;
  font-weight: 600;
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
/* Hover is the accent, not --sw-gold-bright. That token is pinned to
   --on-chrome (it also carries the search input's text and the library
   cards' Hebrew, which must stay neutral), and --sw-gold resolves to
   --on-chrome too — so hovering these buttons used to repaint #ecfdf5
   with #ecfdf5 and nothing moved. One token was doing two jobs: text on
   chrome, and interactive highlight. The highlight job belongs to the
   accent that is always bright on chrome. */
.nav-icon-btn:hover { color: var(--here-chrome); }
.nav-home-btn { font-size: 1.5em; }
.nav-close-btn {
  background: none; border: none;
  color: var(--sw-gold, var(--here-chrome));
  font-size: 1.6em;
  font-weight: 600;
  cursor: pointer; padding: 4px 8px; line-height: 1;
}
.nav-close-btn:hover { color: var(--here-chrome); }

/* ── Footer: bookmarks ── */
.nf-bm {
  border: 1px solid var(--rule, var(--rule));
  border-radius: 8px;
  padding: 10px 10px;
  margin-top: 8px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}
.nf-bm:hover { border-color: var(--accent, var(--here-chrome)); background: color-mix(in srgb, var(--here-chrome) 8%, transparent); }
.nf-bm-title { font-size: 0.95em; color: var(--ink, #1a1a1a); }
.nf-bm-heb { font-family: 'David Libre',serif; font-size: 1.05em; color: var(--accent, var(--here-chrome)); margin-top: 2px; }

/* ── Search Results ── */

.nav-search-results.open { display: block; }


.nav-search-result .sr-vol { font-size: 0.75em; color: var(--ink-light, #888); margin-left: 8px; }

/* ── Volume Tabs ── */
/* ── Direction: the chrome reads LTR, only its Hebrew is RTL ──────────
   The drawer inherits direction:rtl from the page, because the page is a
   Hebrew reader. That is right for the text and wrong for every control
   around it, and it failed in two ways that both looked like width bugs:

     · `text-overflow: ellipsis` truncates at the INLINE END, which under
       rtl is the LEFT. "Old Testament" rendered as "…AMENT" — the half
       that identifies it, cut off.
     · An overflowing input scrolls to its inline start, so the English
       placeholder showed its tail: "r jump to a verse… — / or Ctrl+K".

   Neither is fixed by more room. Set direction where the language changes,
   and isolate the Hebrew inside so it still runs right-to-left. */
.nav-search-wrap, .nav-vol-tabs { direction: ltr; }


.nav-vol-tab {
  flex: 1; text-align: center; padding: 10px 4px 8px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background 0.15s, border-color 0.2s;
  min-width: 0;
}


.nav-vol-tab.active .vt-heb { color: var(--chrome); }


/* ── Library view ── */


/* ══════════════════════════════════════════════════════════════════════
   THE HUB LIBRARY PANEL — ONE HOME.

   .nl-* is created only by renderLibrary(): it is the hub drawer's Continue /
   Volumes / Study cards and it appears nowhere else. The reader's drawer is a
   different thing built from .nav-vol-tab and .nav-book-row.

   Its look used to be stated in SIX places across three files — three times
   here, twice in sw_theme.css, four times in reader.css — several of them in
   !important, and several through --sw-navy-hover / --sw-gold / --surface-2,
   tokens the Indigo & Gold port redefined out from under them. What you saw
   was whichever layer happened to win, which is how the panel ended up with
   no card surface at all and gold text on beige. All of that is deleted. This
   is the only block that describes these cards; nothing else may restate it.
   ══════════════════════════════════════════════════════════════════════ */
.nl-sec-title {
  padding: 20px 16px 4px; margin: 16px 0 8px;
  font-size: var(--t-micro, 0.72em); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.nl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nl-bm-list { display: grid; gap: 8px; }

.nl-card, .nl-tile, .nl-bm {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 44px;
  cursor: pointer;
}
.nl-card, .nl-bm { margin-bottom: 8px; }
/* the edge marks the hover; the fill never moves, so the card does not flash */
.nl-card:hover, .nl-tile:hover, .nl-bm:hover { border-color: var(--here); }

/* STACKED, NOT SIDE BY SIDE. .nl-top used to be a flex row with the Hebrew
   capped at 46%, so "Pearl of Great Price" and פנינת המחיר הגדול each broke
   over three lines and interleaved. A name gets its own line. */
.nl-top { display: block; }
.nl-name, .nl-card-text, .nl-bm-title {
  display: block; color: var(--ink);
  font-size: var(--t-body, 0.95em); font-weight: 600; line-height: 1.25;
}
.nl-heb, .nl-card-heb, .nl-bm-heb {
  display: block; color: var(--ink-2);
  font-family: 'David Libre', serif;
  font-size: var(--t-large, 1.2em); font-weight: 600; line-height: 1.25;
}
.nl-name    { margin-bottom: 3px; }
.nl-heb     { text-align: right; }
.nl-card-text { margin-top: 6px; }
.nl-card-heb  { margin-top: 4px; }
.nl-bm-heb    { margin-top: 2px; }
.nl-card-title {
  color: var(--ink-3); font-size: var(--t-micro, 0.8em);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.nl-sub { margin-top: 6px; font-size: var(--t-micro, 0.8em); color: var(--ink-3); }

/* ── Book List (scrollable area) ── */
.nav-book-list {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rule, var(--rule)) var(--bg-deep, var(--paper-2));
}
.nav-book-list::-webkit-scrollbar { width: 6px; }
.nav-book-list::-webkit-scrollbar-track { background: var(--bg-deep, var(--paper-2)); }
.nav-book-list::-webkit-scrollbar-thumb { background: var(--rule, var(--rule)); border-radius: 3px; }

/* ── Footer tools (Export/Import) ── */

.nav-footer .nf-details {
  border-bottom: 1px solid var(--rule-light, var(--rule-light));
}
.nav-footer .nf-details:last-child { border-bottom: none; }
.nav-footer summary.nf-sum {
  list-style: none;
  cursor: pointer;
  font-size: 0.7em;
  color: var(--ink-light, #888);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 10px 4px 8px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-footer summary.nf-sum::-webkit-details-marker { display: none; }
.nav-footer summary.nf-sum::after {
  content: '\25BE';
  font-size: 0.85em;
  color: var(--ink-light, #888);
  transition: transform 0.2s;
}
.nav-footer .nf-details[open] summary.nf-sum::after {
  transform: rotate(-180deg);
}
.nav-footer .nf-details-inner {
  padding: 0 0 10px;
}
.nav-footer .nf-title {
  font-size: 0.7em;
  color: var(--ink-light, #888);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 8px;
}
.nav-footer .nf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-footer button {
  flex: 1;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--rule, var(--rule));
  background: var(--bg, var(--paper));
  color: var(--ink, #1a1a1a);
  cursor: pointer;
  font-family: 'David Libre', serif;
  font-size: 0.9em;
}
.nav-footer button:hover { border-color: var(--accent, var(--here-chrome)); background: color-mix(in srgb, var(--here-chrome) 12%, transparent); }
.nav-footer .nf-hint { margin-top: 8px; font-size: 0.75em; color: var(--ink-light, #888); line-height: 1.35; }

/* ── Division Headers ── */

.nav-division:first-child { border-top: none; margin-top: 0; }

/* ── Book Row ── */
.nav-book-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; cursor: pointer;
  transition: background 0.15s;
}
.nav-book-row:hover { background: color-mix(in srgb, var(--here-chrome) 8%, transparent); }
.nav-book-row.expanded { background: color-mix(in srgb, var(--here-chrome) 6%, transparent); }
.nav-book-row.nav-focus-row {
  background: color-mix(in srgb, var(--here-chrome) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--here-chrome) 20%, transparent);
}
.nav-book-row.nav-focus-row:hover { background: color-mix(in srgb, var(--here-chrome) 16%, transparent); }
.nav-book-row .nb-heb {
  font-family: 'David Libre',serif; font-size: 1em;
  color: var(--chrome); direction: rtl; font-weight: 600;
}
.nav-book-row .nb-en { font-size: 0.88em; color: var(--chrome); font-weight: 600; }
.nav-book-row .nb-ch {
  font-size: 0.78em; color: var(--chrome); margin-left: 6px; white-space: nowrap;
  font-weight: 500;
}
.nav-book-row .nb-arrow {
  font-size: 0.7em; color: var(--chrome); transition: transform 0.2s; margin-right: 4px;
}
.nav-book-row.expanded .nb-arrow { transform: rotate(90deg); }
.nav-book-row.single-ch { cursor: pointer; }

/* ── Chapter Grid — a contents page, not a dashboard ──
   Bare numerals. A chapter number is already a distinct, scannable object;
   it does not need a container to be tappable. The container cost roughly
   three times the space and carried all the visual weight on a surface
   whose entire job is to be scanned, so 50 chapters now fit where 9 did.
   Position is marked the way print marks it — the numeral takes the accent
   with a rule under it — never by filling a box.

   THIS IS THE ONE HOME. It used to declare bubbles here, which reader.css
   then stripped and rebuilt with ~20 !important overrides; reading this
   file told you the opposite of what rendered, and that cost real time
   twice. If the grid needs to change, it changes here. */
.nav-ch-grid {
  display: none; grid-template-columns: repeat(7, 1fr); gap: 0;
  padding: 4px 12px 14px;
  direction: rtl;
}
.nav-ch-grid.open { display: grid; }
.nav-ch-cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 31px; height: 30px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.2s, background 0.15s;
}
/* the Hebrew chapter name is redundant beside its own numeral at this density */
.nav-ch-cell .ch-heb { display: none; }
/* One face, David Libre, here too: the grid was the only place a second
   typeface (SF Mono) showed. Tabular figures keep the columns aligned, which
   is what the monospace was for (design pass, 2026-09-26). */
.nav-ch-cell .ch-num {
  font-size: var(--t-body);
  color: var(--ink-2);
  font-family: 'David Libre', Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.nav-ch-cell:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.nav-ch-cell.current { border-bottom-color: var(--here); }
.nav-ch-cell.current .ch-num { color: var(--here); }

/* ── Dark mode: left panel matches right #xref-panel / Study drawer ──
   These were neutral greys (#252525 #2a2a2a #333333 #383838 #444444) left
   over from a grey dark mode two schemes ago, so in dark mode the drawer went
   grey while every other surface in the app followed the theme.
   Mapped BY ROLE — surface, recessed control, hairline — not
   by matching one hex to one token, which is how a palette change turns
   into a hunt through five files a second time. */

body.dark-mode .nav-search-wrap {
  background: var(--chrome);
  border-bottom-color: var(--chrome-line);
}

body.dark-mode .nav-search-results {
  background: var(--chrome);
  border-bottom-color: var(--chrome-line);
}
body.dark-mode .nav-search-result {
  border-bottom-color: var(--chrome-line);
}
body.dark-mode .nav-search-result .sr-name { color: var(--ink, var(--on-chrome)); }
body.dark-mode .nav-vol-tabs {
  background: var(--chrome);
  border-bottom-color: var(--chrome-line);
}
body.dark-mode .nav-book-list::-webkit-scrollbar-track { background: var(--panel); }
body.dark-mode .nav-book-list::-webkit-scrollbar-thumb { background: var(--chrome-line); }
body.dark-mode .nav-book-list { scrollbar-color: var(--chrome-line) var(--panel); }
body.dark-mode .nav-footer {
  background: var(--chrome);
  border-top-color: var(--chrome-line);
}
body.dark-mode .nav-footer .nf-details { border-bottom-color: var(--chrome-line); }
body.dark-mode .nav-footer button {
  background: var(--chrome-2);
  border-color: var(--chrome-line);
  color: var(--ink, var(--on-chrome));
}
/* dark needs nothing of its own: --card, --rule, --ink and --ink-2 are all
   theme-scoped, so the one block below is already correct in every theme. */
body.dark-mode .nf-bm {
  border-color: color-mix(in srgb, var(--here-chrome) 35%, transparent);
  background: var(--chrome);
}
/* the grid keeps the panel's own ground in both themes; the cells' dark
   fill is set once, below, with the book rows it sits among */
body.dark-mode .nav-division { border-top-color: var(--chrome-line); }

/* ── Breadcrumb ── */
#nav-breadcrumb {
  position: fixed; top: var(--sw-chrome-h, 52px); left: 0; right: 0; z-index: var(--z-chrome);
  font-family: 'David Libre', serif; font-size: 0.78em;
  color: color-mix(in srgb, var(--chrome) 75%, transparent);
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--here-chrome) 18%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(250, 248, 242, 0.92);
  backdrop-filter: blur(6px);
  display: none;
  direction: ltr;
}
#nav-breadcrumb.visible { display: block; }
/* Page padding is set dynamically by nav_engine.js when breadcrumb is visible */
#nav-breadcrumb span { cursor: pointer; transition: color 0.15s; }
#nav-breadcrumb span:hover { color: var(--here-chrome); }
#nav-breadcrumb .bc-sep { color: #bbb; margin: 0 6px; cursor: default; }
body.dark-mode #nav-breadcrumb {
  background: rgba(18, 20, 28, 0.92);
  color: rgba(232, 226, 212, 0.82);
}
body.dark-mode #nav-breadcrumb .bc-sep { color: rgba(232, 226, 212, 0.35); }

/* ── Continue Reading Card (index.html) ── */
.continue-reading {
  background: var(--here-chrome);
  border: 2px solid var(--chrome);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px auto;
  max-width: 600px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'David Libre', serif;
  text-align: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chrome) 18%, transparent);
}
.continue-reading:hover { background: var(--here-chrome); }
.continue-reading .cr-label { font-size: 0.8em; color: var(--chrome); text-transform: uppercase; letter-spacing: 0.1em; }
.continue-reading .cr-ref { font-size: 1.15em; color: var(--chrome); margin-top: 4px; font-weight: 700; }
.continue-reading .cr-heb { font-family: 'David Libre',serif; font-size: 1.1em; color: var(--chrome); font-weight: 700; }
body.dark-mode .continue-reading {
  background: var(--here-chrome);
  border-color: var(--chrome);
}
body.dark-mode .continue-reading .cr-ref,
body.dark-mode .continue-reading .cr-heb { color: var(--chrome); }

/* ── Mobile ── */
@media (max-width: 600px) {
  #nav-sidebar { width: 90vw; }
  .nav-footer { max-height: 38vh; }
  /* 44px is the touch minimum. This rule existed before and never took
     effect — the override pile in reader.css forced min-height:0 and a
     fixed 30px height on every width, so phones got 30px targets. Gap
     stays 0: the numerals are still the design, just bigger. */
  .nav-ch-grid { grid-template-columns: repeat(5, 1fr); }
  .nav-ch-cell { height: 44px; }
  .nav-book-row { padding: 10px 16px; }
  .nav-vol-tab { padding: 8px 2px 6px; }
  .nav-vol-tab .vt-heb { font-size: 0.8em; }
  .nav-vol-tab .vt-en { font-size: 0.55em; display: none; }
  #nav-breadcrumb { font-size: 0.72em; padding: 3px 12px; }
}

/* ── Mobile nav bar padding fix ── */
/* On small screens the controls-top wraps to 2+ rows (~100px). No !important — NavEngine may raise padding for breadcrumb. */
@media (max-width: 600px) {
  .page {
    padding-top: 118px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* ── Swipe hint (first visit) ── */
.nav-swipe-hint {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60px; background: color-mix(in srgb, var(--here-chrome) 30%, transparent);
  border-radius: 0 4px 4px 0; z-index: var(--z-chrome);
  animation: swipeHintPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes swipeHintPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; width: 6px; }
}

/* ── The reader footer, 2026-09-04: one row, the Spanish/Samoan shape ──
     Interlinear · Hebrew · Dual · Translit · Nikkud
   The whole chapter control — next · chapter · previous — is in the HEADER
   now (site_chrome.css); the footer carries the five modes and nothing
   else. */
#sw-reader-footer {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-chrome);
  box-sizing: border-box;
  width: 100%;
  background: var(--chrome);
  border-top: 2px solid color-mix(in srgb, var(--here-chrome) 35%, transparent);
  font-family: 'David Libre', serif;
  direction: ltr;              /* the arrows are placed by hand, Hebrew order */
}
#sw-reader-footer .nqd-dock {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 6px max(8px, env(safe-area-inset-right, 0px))
           max(6px, env(safe-area-inset-bottom, 0px))
           max(8px, env(safe-area-inset-left, 0px));
  -webkit-user-select: none;
  user-select: none;
}
#sw-reader-footer .nqd-nav-btn {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--here-chrome) 50%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--sw-gold, var(--here-chrome));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#sw-reader-footer .nqd-nav-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--here-chrome) 12%, transparent);
}
#sw-reader-footer .nqd-nav-btn:disabled {
  /* 0.65 keeps a dead arrow clearly de-emphasised but legible (5.02:1) */
  opacity: 0.65;
  cursor: default;
}
/* the page's mode bar, moved inside the row: it is a flex child now, not a
   fixed bar. Every !important here beats reader.css's fixed-position rule. */
#sw-reader-footer .controls-bottom {
  position: static !important;
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  z-index: auto !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  justify-content: center;
  align-items: stretch;
}
#sw-reader-footer .controls-bottom button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Under 430px the five labels cannot all fit beside two arrows; the short
   form on data-short takes over. The full name stays as the accessible
   name and the tooltip. */
@media (max-width: 360px) {
  #sw-reader-footer .nqd-dock { gap: 4px; }
  #sw-reader-footer .controls-bottom { gap: 4px !important; }
  #sw-reader-footer .controls-bottom button.nqd-mode { font-size: 0; }
  #sw-reader-footer .controls-bottom button.nqd-mode::after {
    content: attr(data-short);
    font-size: 12px;
    line-height: 1.2;
  }
}
@media (pointer: coarse) {
  #sw-reader-footer .nqd-nav-btn,
  #sw-reader-footer .controls-bottom button { min-height: 48px; }
}
body.dark-mode #sw-reader-footer {
  border-top-color: color-mix(in srgb, var(--here-chrome) 28%, transparent);
}
@media (max-width: 900px) {
  #sw-reader-footer,
  #sw-top-bar,
  .controls-bottom,
  .controls-top {
    touch-action: manipulation;
  }
  #page .word-flow,
  #page .word-unit .hw,
  .page .word-flow,
  .page .word-unit .hw {
    touch-action: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Drawer theme: navy + gold, matching the site chrome (.sw-top-bar,
   landing cards, reader footer). Overrides the beige base above —
   the drawer used to fall back to the cream --bg while the rest of
   the app wears var(--chrome)/var(--here-chrome).
   ══════════════════════════════════════════════════════════════════ */

/* .nl-sec-title was in here too — the seventh place this panel was described,
   and the one that actually won. --sw-gold resolves to #F3EDE2, a near-white,
   so LIBRARY / VOLUMES / STUDY were painted invisible on the beige panel. The
   library's labels are stated once, above, with the rest of it. */
#nav-sidebar .nav-division {
  color: var(--sw-gold, var(--here-chrome)) !important;
  border-top-color: color-mix(in srgb, var(--here-chrome) 25%, transparent) !important;
}

#nav-sidebar .nav-book-row.nav-focus-row {
  border-bottom-color: color-mix(in srgb, var(--here-chrome) 30%, transparent) !important;
}


#nav-sidebar .nav-book-row .nb-ch { color: var(--sw-gold-muted, color-mix(in srgb, var(--here-chrome) 92%, transparent)) !important; }
#nav-sidebar .nav-book-row .nb-arrow { color: var(--sw-gold-muted, color-mix(in srgb, var(--here-chrome) 92%, transparent)) !important; }


#nav-sidebar .nav-search-result:hover,
#nav-sidebar .nav-search-result.active { background: var(--sw-navy-hover, var(--surface-2)) !important; }


/* Dark mode: follow the chrome's near-black variant */

body.dark-mode #nav-sidebar .nav-book-row:hover,
body.dark-mode #nav-sidebar .nav-book-row.expanded,
body.dark-mode #nav-sidebar .nav-book-row.nav-focus-row,
body.dark-mode #nav-sidebar .nav-ch-cell { background: var(--surface-1) !important; }
body.dark-mode #nav-sidebar .nav-search-results,
body.dark-mode #nav-sidebar .nav-footer { background: var(--chrome-2) !important; }

#nav-sidebar .nav-book-list {
  scrollbar-color: color-mix(in srgb, var(--here-chrome) 40%, transparent) var(--sw-navy, var(--chrome)) !important;
}
#nav-sidebar .nav-book-list::-webkit-scrollbar-track { background: var(--sw-navy, var(--chrome)) !important; }
#nav-sidebar .nav-book-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--here-chrome) 40%, transparent) !important; }

/* iPhone: drawer/panel scrolling must not chain to the page behind it */
#nav-sidebar, #glossary-panel, #xref-panel, #annotations-panel,
.nav-library, .rsc-panel-card { overscroll-behavior: contain; }

/* (the modes drawer, its grip and its collapse rules were removed 2026-09-04
   with the one-row footer) */



/* Reduced motion: the drawer, the side panels, the tabs and the dock snap
   instead of sliding, matching reader.css's own reduced-motion rules. */
@media (prefers-reduced-motion: reduce) {
  #nav-overlay, #nav-sidebar, #xref-panel, #annotations-panel, #glossary-panel,
  .nav-vol-tab, .nl-card, [class^="nqd-"], [class*=" nqd-"], #sw-reader-footer {
    transition: none !important; animation: none !important;
  }
}