/* "Read the chapter" without losing one's place (js/side-reader.js): on a wide screen, the panel that slides out from
   the right edge over the study with the chapter in it; on a phone, the trail back to the study at the top of the Bible
   reader; and the glow of a citation come back to. The chapter in the panel wears the reader's own classes (.bb-text,
   .bb-t, .bb-step, .bb-ver, .bb-more, .bb-foot: css/manuscript.css and css/reader.css), so it is set as the reader sets
   it. Square corners and thin rules, as everywhere; every colour is a theme token, so the dark theme and the light are
   both served. --tk-h is the height of the bar at the foot of the screen, above which the panel stops (0px where there
   is no such bar). */

/* ---- the panel ----
   Fixed to the right edge and slid out past it when closed; shown, it lies over the page and does not push it aside.
   It sets its own type and colours, since it may sit inside a dialog that sets others (the blueprint). */
.sr {
  --sr-w: clamp(340px, 38vw, 560px);
  position: fixed;
  z-index: 480;
  top: 0;
  right: 0;
  bottom: var(--tk-h, 0px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--sr-w);
  min-width: 320px;
  max-width: 70vw;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--press);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  box-shadow: none;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), box-shadow 0.3s ease, visibility 0s linear 0.3s;
}
.sr.is-open {
  transform: none;
  visibility: visible;
  box-shadow: -14px 0 36px var(--shadow), -2px 0 8px var(--lift);
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.25, 1), box-shadow 0.3s ease, visibility 0s;
}
.sr.is-sizing { transition: none; -webkit-user-select: none; user-select: none; }
/* inside a full-window dialog (the blueprint) the bar at the foot of the screen lies beneath the dialog, out of sight: the
   panel goes down to the edge; it begins below the dialog's own bar (js/side-reader.js sets its top) */
dialog > .sr { bottom: 0; }

/* the head: ‹ the chapter › and ×, then the version and "New tab", over a thick-and-thin rule */
.sr-head { flex: none; padding: 8px 10px 9px 12px; background: var(--panel); border-bottom: 3px double var(--press); }
.sr-nav { display: flex; align-items: center; gap: 8px; }
.sr .bb-step { flex: none; }
.sr-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-family: var(--display); font-size: 1.55rem; font-weight: 400; font-style: normal; line-height: 1.25; letter-spacing: 0.02em; color: var(--ink); }
.sr-title:focus { outline: none; }
.sr-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-x { flex: none; width: 2.6rem; height: 2.5rem; margin: 0 0 0 6px; padding: 0 0 3px 6px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 1.75rem; line-height: 1; color: var(--muted); cursor: pointer; }
.sr-x:hover { color: var(--rubric); }
.sr-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sr-ver-l { display: inline-flex; }
.sr .bb-ver { height: 2.3rem; }
.sr-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 2.3rem; padding: 0 12px; border: 1px solid var(--rule); border-radius: 0; background: none; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.06em; line-height: 1; color: var(--ink); text-decoration: none; }
.sr-tab svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; color: var(--rubric); }
.sr-tab:hover { border-color: var(--rubric); color: var(--rubric); }
.sr-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the verses cited, to bring back into view; away from their chapter, the way back to it */
.sr-cited { flex: none; margin: 0; padding: 7px 12px; background: var(--bg); border-bottom: 1px solid var(--rule); line-height: 1; }
.sr-cited[hidden] { display: none; }
.sr-cite { display: inline-block; max-width: 100%; padding: 4px 10px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; border: 1px solid var(--rubric); border-radius: 0; background: color-mix(in srgb, var(--rubric) 12%, transparent); box-shadow: none; font: inherit; font-family: var(--caps); font-size: 0.95rem; letter-spacing: 0.05em; line-height: 1.25; color: var(--rubric); cursor: pointer; }
.sr-cite:hover { background: color-mix(in srgb, var(--rubric) 22%, transparent); }
.sr-cite.is-away { border-color: var(--rule); background: none; color: var(--muted); }
.sr-cite.is-away:hover { border-color: var(--rubric); color: var(--rubric); }
.sr-cite:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the chapter, which scrolls on its own and never hands its scrolling on to the page */
.sr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 24px; }
.sr-scroll:focus { outline: none; }
.sr-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sr .bb-text { padding: 16px 0 4px; font-size: calc(1.14rem * var(--bb-scale, 1)); line-height: 1.72; scroll-margin-top: 0; }
.sr .bb-t.is-cite { background: color-mix(in srgb, var(--rubric) 18%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sr .bb-foot { margin-top: 16px; }
.sr .bb-more { font-size: 1rem; line-height: 1.3; }
.sr-src { margin: 14px 0 0; text-align: center; font-size: 0.86rem; font-style: italic; line-height: 1.4; color: var(--muted); }

/* the reader's own choices for the text (its Display), as the panel takes them from it */
.sr.no-nums .bb-n { display: none; }
.sr.lh-compact .bb-text { line-height: 1.5; }
.sr.lh-compact .bb-s { line-height: 1.42; }
.sr.lh-loose .bb-text { line-height: 2.05; }
.sr.lh-loose .bb-s { line-height: 1.9; }
.sr.bb-sans .bb-text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: calc(1.02rem * var(--bb-scale, 1)); }
.sr.bb-sans .bb-n { font-family: inherit; }
.sr.no-heads .bb-head { display: none; }

/* the left edge, to pull wider or narrower: two thin rules show where to take hold */
.sr-grip { position: absolute; z-index: 1; top: 0; bottom: 0; left: -6px; width: 11px; cursor: col-resize; touch-action: none; }
.sr-grip::after { content: ""; position: absolute; top: 50%; left: 3px; width: 5px; height: 48px; margin-top: -24px; border-left: 1px solid var(--press); border-right: 1px solid var(--press); background: var(--bg); opacity: 0; transition: opacity 0.2s ease; }
.sr-grip:hover::after, .sr-grip:focus-visible::after, .sr.is-sizing .sr-grip::after { opacity: 1; }
.sr-grip:focus { outline: none; }
.sr-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }

/* a window narrowed while the panel is open: it takes the whole width */
@media (max-width: 767.98px) {
  .sr { width: 100%; min-width: 0; max-width: none; border-left: 0; }
  .sr-grip { display: none; }
  .sr-scroll { padding: 0 14px 20px; }
}

/* ---- the trail back, at the top of the Bible reader ----
   "‹ The Jubilee", then Bible › Leviticus › 25 › 10. It keeps to the top of the screen, and the reader's own bar keeps
   to the top just beneath it: js/side-reader.js measures it into --bb-crumb-h on the reader's panel. */
.bb-crumbbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 3px 0; background: var(--bg); border-bottom: 1px solid var(--rule); font-size: 0.95rem; line-height: 1.2; }
.bb-crumbbar[hidden] { display: none; }
.bb-cb-back { flex: 0 1 auto; min-width: 0; max-width: 48%; display: inline-flex; align-items: center; gap: 6px; min-height: 1.95rem; padding: 2px 10px 3px 7px; border: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; font: inherit; font-family: var(--display); font-size: 1rem; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bb-cb-arr { flex: none; font-size: 1.35em; line-height: 0.7; color: var(--rubric); }
.bb-cb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-cb-back:hover { border-color: var(--rubric); color: var(--rubric); }
.bb-cb-trail { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.bb-cb-trail[hidden] { display: none; }
.bb-cb-trail li { flex: none; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; }
.bb-cb-trail li.bb-cb-bk { flex: 0 1 auto; }
.bb-cb-trail li + li::before { content: "›"; content: "›" / ""; flex: none; padding: 0 2px; color: var(--muted); }
.bb-cb { min-width: 0; max-width: 100%; min-height: 1.95rem; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-feature-settings: "lnum"; color: var(--ink); text-decoration: underline dotted var(--muted); text-underline-offset: 0.22em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bb-cb-root { font-family: var(--caps); letter-spacing: 0.06em; color: var(--muted); text-decoration: none; }
.bb-cb.is-empty { font-style: italic; color: var(--muted); }
.bb-cb[aria-current] { color: var(--rubric); }
.bb-cb:hover { color: var(--rubric); text-decoration-color: var(--rubric); }
.bb-cb-back:focus-visible, .bb-cb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* where the name of the book would be cut short, the trail begins with the book instead, and the way back gives up a
   little room (js/side-reader.js) */
.bb-crumbbar.is-tight .bb-cb-back { max-width: 42%; }
.bb-crumbbar.is-tight .bb-cb-trail li:first-child { display: none; }
.bb-crumbbar.is-tight .bb-cb-trail li:nth-child(2)::before { content: none; }

/* while the trail shows, the reader's own bar keeps to the top of the screen beneath it, and whatever the reader brings
   into view stops below both (its panes too, which fill the screen above the bar at the foot) */
#panel-bible .bb:not(.multi) .bb-bar { top: var(--bb-crumb-h, 0px); }
#panel-bible .bb-text { scroll-margin-top: calc(4.2rem + var(--bb-crumb-h, 0px)); }
#panel-bible .bb-t { scroll-margin-top: calc(5rem + var(--bb-crumb-h, 0px)); }
#panel-bible .bb-work { scroll-margin-top: var(--bb-crumb-h, 0px); }
#panel-bible .bb.multi .bb-work { height: calc(100vh - var(--tk-h, 0px) - var(--bb-crumb-h, 0px)); height: calc(100svh - var(--tk-h, 0px) - var(--bb-crumb-h, 0px)); }

/* ---- a citation come back to: it glows for a moment (js/side-reader.js adds the class, and takes it away) ---- */
.ref-flash { animation: ref-flash 1.6s ease-out; }
@keyframes ref-flash {
  0%, 30% { background-color: color-mix(in srgb, var(--rubric) 26%, transparent); outline: 2px solid var(--rubric); outline-offset: 3px; }
  100% { background-color: transparent; outline: 2px solid transparent; outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .sr, .sr.is-open { transition: none; }
  .ref-flash { outline: 2px solid var(--rubric); outline-offset: 3px; }     /* still: a ring, while the class is there */
}
@media print { .sr, .bb-crumbbar { display: none !important; } }