@import url('sw_theme.css?v=56');


/* Hide body until chrome + footer are wired (prevents legacy bar flash) */
html.sw-shell-pending body {
  visibility: hidden;
}
html.sw-shell-ready body {
  visibility: visible;
}

/* Anti-FOUC: final chrome only (no legacy top bar / floating mode bar flash) */
.controls-top {
  display: none !important;
}
body:not(.sw-footer-ready) > .controls-bottom {
  visibility: hidden !important;
  pointer-events: none !important;
}
body:not(.sw-footer-ready) #sw-reader-footer {
  visibility: hidden !important;
  pointer-events: none !important;
}
html:has(link[href*="site_chrome.css"]) .page,
html:has(link[href*="site_chrome.css"]) #main-content {
  padding-top: calc(var(--sw-chrome-h, 58px) + env(safe-area-inset-top, 0px));
}

/* Shared site header — menu · home · כתבי הקודש / The Holy Scriptures · size · dark */


/* Skip link: out of sight until it has keyboard focus, then a chrome-coloured
   tab at the top-left, above the bar.

   It used to hide at left:-999px. That is the ordinary trick and it is safe on
   an LTR page, where overflow to the left is not scrollable — but every reader
   here is direction:rtl, and in RTL that axis is mirrored, so those 999px
   became real scrollable width. The whole reading surface could be dragged
   sideways under a thumb, the text sliding off the screen while the fixed bars
   stayed put. Clipping to a 1px box keeps the link in the tab order and off
   the screen without adding a single pixel of scroll, in either direction. */
.sw-skip { position: absolute; left: auto; top: auto; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  z-index: 1000; border-radius: 6px;
  background: var(--chrome); color: var(--on-chrome); font-family: 'David Libre', serif; font-size: 0.95em; text-decoration: none; }
.sw-skip:focus, .sw-skip:focus-visible { left: 8px; top: 8px; width: auto; height: auto; margin: 0;
  padding: 8px 14px; overflow: visible; clip: auto; clip-path: none;
  outline: 2px solid var(--here-chrome); outline-offset: 2px; }

.sw-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-chrome);
  min-height: var(--sw-chrome-h);
  background: var(--header-bg);
  border-bottom: 2px solid var(--sw-gold, var(--here-chrome));
  box-sizing: border-box;
  direction: ltr;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  padding-bottom: 6px;
}
/* The bar was repainted to a hardcoded #0a0a0a in dark mode, which is why the
   header went black there while light and sepia kept the green. The design
   rule is that the book is bound the same in every theme and only the paper
   changes, so the bar keeps --header-bg (the brand green) in all three. The
   status-bar meta colour in site_chrome.js followed this black and has been
   corrected with it. */

/* Single row: menu · home · title · size · dark */
.sw-top-bar-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 6px 10px;
  min-height: 48px;
  direction: ltr;
}

/* True viewport center (not centered in the gap between uneven side controls) */
.sw-top-bar-brand {
  /* 112x38 measured — the one control in the top bar under the 44px
     minimum. It is a real link (it goes home), so it gets a real target. */
  min-height: 44px;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: var(--z-chrome);
  pointer-events: auto;
  text-decoration: none;
  color: var(--sw-gold, var(--here-chrome));
  line-height: 1.1;
  font-family: 'David Libre', 'Georgia', serif;
  min-width: 0;
  max-width: min(62vw, 320px);
  padding: 2px 6px 0;
  gap: 1px;
  direction: ltr;
  unicode-bidi: isolate;
}
.sw-top-bar-brand-he,
.sw-top-bar-brand-en {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  line-height: 1.12;
}
.sw-top-bar-brand-he {
  font-size: 1.22em;
  font-weight: 700;
  letter-spacing: 0.02em;
  direction: rtl;
  unicode-bidi: plaintext;
}
.sw-top-bar-brand-en {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  margin-top: 2px;
  opacity: 0.95;
  font-family: 'David Libre', Georgia, serif;
}

.sw-top-bar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  z-index: var(--z-chrome);
}

.sw-top-bar-tools label,
.sw-top-bar-tools .sw-size-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sw-gold, var(--here-chrome));
  font-size: 0.82em;
  margin: 0;
  font-family: 'David Libre', 'Georgia', serif;
  white-space: nowrap;
}

.sw-top-bar-tools input[type="range"] {
  width: 72px;
  max-width: 20vw;
  accent-color: var(--sw-gold, var(--here-chrome));
  margin: 0;
  vertical-align: middle;
}

#sw-chrome-dark {
  grid-column: 5;
  grid-row: 1;
  justify-self: end;
  z-index: var(--z-raised);
}

/* Reader header: dark toggle sits WITH the logo on the left, and the size
   stepper takes the right edge on its own. The two controls used to share
   the right side (A- A+ then the moon), which read as one undifferentiated
   cluster and pushed the stepper in toward the centred title. Split across
   the two ends, each side carries one idea: identity + appearance on the
   left, the reading control on the right. The hub keeps the moon on the
   right — it has no size stepper, and the shopping bag holds that corner. */
/* ── The READER header, 2026-09-04: the Spanish/Samoan shape ─────────────
     home · [ next · chapter · prev ] · Aa · theme
   One row. The chapter group is the way into the books (the pill opens the
   drawer at this volume) and says where you are. Search is not here: it is
   the top of the left slide-out, where the drawer already has it. */
body.sw-chrome-reader .sw-top-bar-inner {
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
}
body.sw-chrome-reader .sw-chrome-home     { grid-column: 1; }
body.sw-chrome-reader #sw-chrome-nav      { grid-column: 2; }
body.sw-chrome-reader .sw-top-bar-tools   { grid-column: 3; justify-self: end; }
body.sw-chrome-reader #sw-chrome-dark     { grid-column: 4; justify-self: end; }

/* next · chapter · previous, one group, the pill taking the slack */
.sw-chrome-nav {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.sw-chrome-nav .sw-chrome-pill { flex: 1 1 auto; }
.sw-chrome-nav .nqd-nav-btn {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--sw-gold-border, var(--here-chrome));
  border-radius: 6px;
  background: transparent;
  color: var(--sw-gold, var(--here-chrome));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-chrome-nav .nqd-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--here-chrome) 14%, transparent); }
.sw-chrome-nav .nqd-nav-btn:disabled { opacity: 0.55; cursor: default; }

.sw-chrome-pill {
  min-width: 0;
  min-height: 44px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--sw-gold-border, var(--here-chrome));
  border-radius: 6px;
  color: var(--sw-gold, var(--here-chrome));
  font-family: 'David Libre', serif;
  font-size: 0.95em;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.sw-chrome-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sw-chrome-pill-caret { flex: 0 0 auto; opacity: 0.8; font-size: 0.85em; }
.sw-chrome-pill:hover { background: color-mix(in srgb, var(--here-chrome) 14%, transparent); }
.sw-chrome-pill:focus-visible { outline: 2px solid var(--sw-gold, var(--here-chrome)); outline-offset: 2px; }

.sw-chrome-size { font-family: 'David Libre', serif; font-weight: 700; font-size: 1.05em; letter-spacing: 0.01em; }

/* the Aa popover: the two-step control, under the button, on chrome */
.sw-size-pop {
  position: fixed;
  top: calc(var(--sw-chrome-h, 58px) + env(safe-area-inset-top, 0px) + 4px);
  right: max(10px, env(safe-area-inset-right, 0px));
  z-index: calc(var(--z-chrome) + 1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  background: var(--header-bg);
  border: 1px solid var(--sw-gold-border, var(--here-chrome));
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.sw-size-pop[hidden] { display: none; }
.sw-size-pop .sw-pop-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* a display layer's on/off switch, under the size control (site_chrome.js) */
.sw-size-pop .sw-pop-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 8px 0 10px;
  background: transparent;
  border: 1px solid var(--sw-gold-border, var(--here-chrome));
  border-radius: 6px;
  color: var(--sw-gold, var(--here-chrome));
  font-family: 'David Libre', serif; font-size: 0.95em; cursor: pointer;
}
.sw-size-pop .sw-pop-switch:hover { background: color-mix(in srgb, var(--here-chrome) 14%, transparent); }
.sw-size-pop .sw-pop-track {
  position: relative; flex: none; width: 34px; height: 20px;
  border: 1px solid currentColor; border-radius: 10px;
}
.sw-size-pop .sw-pop-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: currentColor; opacity: 0.5; transition: transform 0.15s ease;
}
.sw-size-pop .sw-pop-switch[aria-pressed="true"] .sw-pop-track { background: color-mix(in srgb, var(--here-chrome) 30%, transparent); }
.sw-size-pop .sw-pop-switch[aria-pressed="true"] .sw-pop-track::after { transform: translateX(14px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sw-size-pop .sw-pop-track::after { transition: none; } }
.sw-size-pop .sw-size-pct { min-width: 3.2em; text-align: center; color: var(--sw-gold, var(--here-chrome)); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.sw-size-pop .sw-size-btn {
  min-width: 44px; min-height: 44px;
  background: transparent;
  border: 1px solid var(--sw-gold-border, var(--here-chrome));
  border-radius: 6px;
  color: var(--sw-gold, var(--here-chrome));
  font-family: 'David Libre', serif; font-size: 1em; cursor: pointer;
}
.sw-size-pop .sw-size-btn:hover { background: color-mix(in srgb, var(--here-chrome) 14%, transparent); }
.sw-size-pop .sw-pop-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.sw-size-pop .sw-pop-mode { min-height: 44px; padding: 4px 6px; border: 1px solid var(--sw-gold-border, var(--here-chrome)); border-radius: 6px; background: transparent; color: var(--sw-gold, var(--here-chrome)); font: inherit; cursor: pointer; }
.sw-size-pop .sw-pop-mode.active { background: var(--here-chrome); color: var(--chrome); }
.sw-size-pop .sw-pop-switch-label { text-align: left; }
.sw-size-pop .sw-pop-switch.active .sw-pop-track { background: color-mix(in srgb, var(--here-chrome) 30%, transparent); }
.sw-size-pop .sw-pop-switch.active .sw-pop-track::after { transform: translateX(14px); opacity: 1; }
.sw-size-pop .sw-pop-switch[role="switch"] { width: 100%; }
.sw-size-pop .sw-pop-switch[role="switch"] span[lang="he"] { direction: rtl; }
/* Reader display settings use the approved pale controls on the navy panel. */
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) :is(.sw-size-btn, .sw-pop-mode, .sw-pop-switch) {
  background: #F7F7F7; color: #000745; border: 1px solid #F7F7F7;
}
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) :is(.sw-size-btn, .sw-pop-mode, .sw-pop-switch):hover,
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) :is(.sw-size-btn, .sw-pop-mode, .sw-pop-switch):active {
  background: #F7F7F7; color: #000745;
}
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) .sw-pop-mode.active,
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) .sw-pop-switch.active {
  background: #F7F7F7; color: #000745; font-weight: 700;
  box-shadow: inset 0 0 0 2px #000745;
}
html.bible-toolbar-ready :is(#sw-size-pop, .reader-control-example) .sw-pop-switch.active .sw-pop-track {
  background: #000745; color: #F7F7F7; border-color: #F7F7F7;
}
html.bible-toolbar-ready #sw-size-pop .sw-pop-size { gap: 10px; }
html.bible-toolbar-ready #sw-size-pop .sw-size-btn { min-width: 58px; min-height: 52px; font-size: 30px; }
html.bible-toolbar-ready #sw-size-pop .sw-size-btn-up { font-size: 36px; }
html.bible-toolbar-ready :is(#sw-size-pop, .sw-size-stepper) .sw-size-btn:disabled { opacity: .45; cursor: default; }
html.bible-toolbar-ready #sw-size-pop .sw-size-pct { min-width: 3.2em; font-size: 1.6em; color: #F7F7F7; }
.sw-audio-unavailable { position: fixed; z-index: 2147483500; display: none; padding: 7px 12px; border-radius: 6px; background: var(--chrome); color: var(--on-chrome); box-shadow: 0 4px 14px #0004; font: 14px/1.2 'David Libre', Georgia, serif; direction: ltr; }
.sw-audio-unavailable.visible { display: block; }
.audio-unavailable { color: #9AA0AA !important; opacity: .78; cursor: not-allowed !important; }

#sw-chrome-menu {
  grid-column: 1;
  grid-row: 1;
}

.sw-chrome-home {
  grid-column: 2;
  grid-row: 1;
}

/* Hub has no font slider — four items: menu · home · (spacer) · dark */
body:not(.sw-chrome-reader) .sw-top-bar-inner {
  grid-template-columns: auto auto 1fr auto auto;
}
body:not(.sw-chrome-reader) .sw-top-bar-tools {
  display: none;
}
body:not(.sw-chrome-reader) .sw-chrome-print {
  grid-column: 4;
}
body:not(.sw-chrome-reader) #sw-chrome-dark {
  grid-column: 5;
}

.sw-chrome-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 2px;
  border: none;
  border-radius: 9px;
  color: var(--sw-gold, var(--here-chrome));
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.sw-chrome-home:hover {
  background: var(--surface-2);
}

.sw-chrome-nav-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sw-chrome-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}
.sw-chrome-menu-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.sw-chrome-btn {
  background: none;
  border: none;
  color: var(--sw-gold, var(--here-chrome));
  cursor: pointer;
  padding: 8px 10px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.2em;
  -webkit-tap-highlight-color: transparent;
}
.sw-chrome-btn:hover {
  background: color-mix(in srgb, var(--here) 15%, transparent);
}

/* Never show legacy reader toolbar — merged into chrome */
body.has-sw-chrome .controls-top {
  display: none !important;
}

body.has-sw-chrome #dark-mode-toggle {
  display: none;
}

/* Breadcrumb slot kept for NavEngine but not shown in the header bar */
.sw-chrome-location,
#sw-chrome-location {
  display: none !important;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body.has-sw-chrome .page {
  padding-top: calc(var(--sw-chrome-h) + 8px + env(safe-area-inset-top, 0px));
}

body.has-sw-chrome.sw-chrome-reader .page,
body.has-sw-chrome.sw-chrome-reader #main-content {
  padding-top: calc(var(--sw-chrome-h) + 12px + env(safe-area-inset-top, 0px));
}

/* #main-content nested inside .page must not repeat the chrome offset — the
   page already reserves it. Doubling it opened a 68px void between the
   ornament and every chapter heading, corpus-wide. */
html:has(link[href*="site_chrome.css"]) .page #main-content,
body.has-sw-chrome .page #main-content,
body.has-sw-chrome.sw-chrome-reader .page #main-content {
  padding-top: 0;
}

body.has-sw-chrome #reading-progress {
  top: calc(var(--sw-chrome-h) + env(safe-area-inset-top, 0px));
}

body.has-sw-chrome .dict-legacy-topbar {
  display: none !important;
}
body.has-sw-chrome .dict-wrap {
  padding-top: calc(var(--sw-chrome-h) + 12px + env(safe-area-inset-top, 0px));
}

/* ── Phone in landscape ───────────────────────────────────────────────
   A phone on its side has ~375px of height, and the chrome was taking 150
   of it — header 56 plus footer 94 — leaving 60% for the text. Every
   pixel here is one the reader does not get.

   The chapter Next/Prev buttons keep their full 44px: they are the most
   used controls on the page and the first thing a cramped layout must not
   compromise. The savings come from the header's own height and from
   padding, which cost nothing to give up. */
@media (orientation: landscape) and (max-height: 460px) {
  body.has-sw-chrome { --sw-chrome-h: 46px; }
  .sw-top-bar { padding-bottom: 3px; }
  .sw-top-bar-inner { min-height: 40px; }
  #sw-reader-footer .nqd-dock { padding-top: 3px; padding-bottom: max(3px, env(safe-area-inset-bottom, 0px)); }
}

@media print {
  #sw-top-bar {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .sw-top-bar-inner {
    gap: 4px 6px;
  }
  .sw-top-bar-brand {
    max-width: min(58vw, 240px);
    padding-top: 1px;
  }
  .sw-top-bar-brand-he {
    font-size: 1.05em;
  }
  .sw-top-bar-brand-en {
    font-size: 0.5em;
    letter-spacing: 0.02em;
    margin-top: 1px;
  }
  .sw-top-bar-tools label .label-text {
    display: none;
  }
  .sw-top-bar-tools input[type="range"] {
    width: 56px;
  }
  .sw-chrome-btn {
    min-width: 44px;
    padding: 6px 6px;
  }
  .sw-chrome-pill { padding: 6px 8px; font-size: 0.88em; }
  .sw-chrome-home {
    min-width: 44px;
    min-height: 44px;
    padding: 1px;
  }
}


/* The print-editions bag — an <a> dressed as a chrome button */
a.sw-chrome-print {
  text-decoration: none;
}
a.sw-chrome-print svg { display: block; }

/* iPhone: keep text at its set size after rotation */


/* Rights line — subtle, at the end of every page's content */
#sw-rights {
  text-align: center;
  font-size: calc(11px + 1pt);
  color: var(--ink-3);
  direction: ltr;
  padding: 26px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  font-family: 'David Libre', Georgia, serif;
}
/* 116x11 measured. A mailto people are meant to hit needs a real target;
   inline-block plus padding gives it 44px without moving the line. */
/* min-height, not padding arithmetic: padding alone gave 44px at the desktop
   font size and 39px on a phone, where the type is smaller. */
#sw-rights a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand-accent); display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
#sw-rights a:hover { text-decoration: underline; }
body.dark-mode #sw-rights { color: var(--ink-3); }
body.dark-mode #sw-rights a { color: var(--on-chrome); text-decoration-color: var(--brand-accent); }


/* ── Immersive reading. NOTHING COLLAPSES ANY MORE (user ruling 2026-09-08:
   "you can pin the footer now no need to hide it").

   This gesture went in two stages and came out in two. The 2026-08-29 build
   had a double-tap sweep the header, the breadcrumb and the footer together;
   2026-09-03 gave the header back, because it is the only thing on screen
   naming the volume and holding A+/A-/dark and a stray double-tap while
   reading cost more than the strip of pixels it saved. The footer is the
   same argument one row further down — it is the five reading modes, the
   control a reader reaches for most — so it is pinned and the gesture is
   gone entirely.

   The rules below stay. touch-action: manipulation still keeps iOS from
   turning a double-tap into a zoom, which would land on a word and fight
   the tap that opens its card; the transitions still animate the header,
   which other states move. */
.sw-chrome-reader .page { touch-action: manipulation; }
#sw-top-bar { transition: transform 0.28s ease; }
body.has-sw-chrome .page, body.has-sw-chrome.sw-chrome-reader .page,
body.has-sw-chrome.sw-chrome-reader #main-content { transition: padding-top 0.28s ease; }
/* ── UX audit 2026-08-30 ─────────────────────────────────────────────── */
/* Respect the OS reduced-motion setting: page turns become instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 44px touch minimums on coarse pointers only — desktop keeps its density. */
@media (pointer: coarse) {
  .controls-bottom button { min-height: 44px; }
  .sel-color, .sel-eraser { width: 32px !important; height: 32px !important; margin: 5px !important; }
}

/* Font-size stepper (replaces the range slider; 44 px targets) */
.sw-size-stepper { display: inline-flex; align-items: center; gap: 2px; }
.sw-size-stepper .label-text { display: none; }
.sw-size-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--sw-gold, var(--here-chrome));
  font-family: 'David Libre', 'Georgia', serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-size-btn-up { font-size: 20px; }
.sw-size-btn:hover { background: var(--surface-2); }
.sw-size-btn:active { background: color-mix(in srgb, var(--here-chrome) 18%, transparent); }
.sw-size-stepper input[hidden] { display: none; }

/* Word units are keyboard-focusable (Enter / Space opens the word) */
.word-unit:focus-visible { outline: 2px solid var(--sw-gold, var(--here-chrome)); outline-offset: 2px; border-radius: 4px; }


/* ── Icons ────────────────────────────────────────────────────────────
   Every UI icon is an inline SVG stroked with currentColor, so it takes
   the colour of the text around it. Colour emoji cannot: they paint their
   own hue and ignore `color:` completely, which is how the 🏠 in the bar
   sat at 1.86:1 against paper while every rule claimed to have coloured it.
   34 emoji were replaced. ✦ stays — it is a typographic ornament in the
   chapter head, not an icon. */
.sw-i {
  width: 17px; height: 17px;
  flex: 0 0 auto;
  vertical-align: -3px;
  display: inline-block;
}
.sw-i * { vector-effect: non-scaling-stroke; }

/* The six-item Bible dock is a compact centered group, not a full-width row. */
html.bible-toolbar-ready #sw-app-row { justify-content: center; gap: clamp(2px, 1.2vw, 10px); }
html.bible-toolbar-ready #sw-app-row button { flex: 0 1 68px; width: 68px; max-width: 68px; }
html.bible-toolbar-ready #sw-app-row [data-id="audio"] { color: #9AA0AA; }
html.bible-toolbar-ready #sw-app-row button[aria-current="page"] { color: var(--brand-accent, #8E6215); }


/* The Hebrew Bible keeps its chapter selector and arrows centered as one group. */
html.sw-bible-navigation body.sw-chrome-reader .sw-top-bar-inner { display: block; min-height: 48px; }
html.sw-bible-navigation body.sw-chrome-reader #sw-chrome-nav {
  position: fixed; left: 50vw; top: calc(var(--sw-chrome-h, 58px) / 2); transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 140px)); max-width: calc(100vw - 140px);
  justify-content: center; align-items: center; gap: 4px; z-index: calc(var(--z-chrome) + 1);
}
html.sw-bible-navigation body.sw-chrome-reader #sw-chrome-nav .sw-chrome-pill { flex: 1 1 auto; }
html.sw-bible-navigation body.sw-chrome-reader #sw-chrome-nav .sw-chrome-pill { font-size: 1.235em; }
@media (max-width: 520px) {
  html.sw-bible-navigation body.sw-chrome-reader #sw-chrome-nav { width: min(440px, calc(100vw - 132px)); max-width: calc(100vw - 132px); }
}

/* Public transliteration source shares the existing Aa settings popover. */
.sw-pop-source { display: grid; gap: 6px; padding-top: 10px; text-align: left; color: var(--sw-gold, var(--here-chrome)); max-width: min(280px, calc(100vw - 36px)); }
.sw-pop-source select { width: 100%; min-width: 0; font: inherit; color: #000745; background: #F7F7F7; border: 1px solid #F7F7F7; border-radius: 4px; padding: 6px; }
.sw-pop-source p { margin: 0; font-size: .9em; }