/* ═══════════════════════════════════════════════════════════════
   /the-faith-received/scripture/ and /the-faith-received/scripture/desk/ — reader + Verse Desk.

   The chapter itself is styled by the old /bible/ rules that still ship
   in screen.css (.bible-controls, .bible-chapter-content, .bible-verse),
   so the text reads exactly as that page did. This file adds only what
   is new: the two-column layout, the verse sidebar, the commentary
   strip, the source rows and previews, and the Desk.

   Everything is prefixed sd- so nothing here can collide with the
   ported surfaces' class names or be caught by the no-scroll-box
   release block at the end of faith-received.css.

   SCROLLING. Two things scroll on their own, both by Ian's call
   (2026-09-22): the sidebar, a column beside the text (the recorded
   sidebar exception), and the commentary strip, sideways. Nothing else
   caps its height; previews take the room they need.

   No display face on working surfaces: the sidebar and the Desk are
   set in the body face. The chapter heading keeps the old page's
   display italic, because that page is what is being matched.
   ═══════════════════════════════════════════════════════════════ */

/* --sd-accent: the dark terracotta pulled toward ink so 11px labels and
   14px links pass AA on the page ground (~5.4:1; #b45f3d was ~4.1:1).
   --sd-top: where sticky things park. The site header is fixed and
   hides on scroll-down (header-behaviors.js adds .is-hidden); the script
   measures its height into --sd-nav-h, and the rule further down drops
   the offset to zero while it is hidden. */
.sd {
  --sd-accent: color-mix(in srgb, var(--color-secondary, #c1593c) 75%, var(--color-dark, #2d2927));
  --sd-gap: 40px;
  /* Plus the TFR rail, which now sticks under the header on these pages. */
  --sd-top: calc(var(--sd-nav-h, 0px) + var(--tfr-rail-h, 0px));
}
.site-header.is-hidden ~ main.sd,
.site-header.is-hidden ~ * main.sd { --sd-top: var(--tfr-rail-h, 0px); }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden ~ main.sd,
  .site-header.is-hidden ~ * main.sd { --sd-top: calc(var(--sd-nav-h, 0px) + var(--tfr-rail-h, 0px)); }
}
/* Ian, 2026-09-22: the bar does not follow the reader on any screen; it
   sits at the top of the page. (screen.css makes .bible-controls sticky.) */
.sd .bible-controls { position: static; }
.sd .bible-control-label { color: var(--sd-accent); }
/* The bar's selects: 16px so iOS does not zoom on focus, 44px to tap. */
.sd .bible-control select { font-size: 16px; min-height: 44px; }
.sd .bible-nav-btn { width: 44px; height: 44px; }
.sd-hint { text-align: center; font-size: 14px; margin: -8px 0 24px; }
.sd-chapter-h1 { margin: 0; font-weight: 400; }
.sd-chapter-h1 .bible-chapter-eyebrow { display: block; margin: 0 0 12px; }
/* Ian, 2026-09-22: no IM Fell italic on the chapter. Body face, upright,
   the same voice as the rest of the working surface. */
.sd-chapter-h1 .bible-chapter-heading {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -0.005em;
}
.sd-muted { color: var(--color-muted); }

/* ── The bar under the rail ─────────────────────────────────── */
.sd .sd-bar-inner { justify-content: flex-start; }

/* ── The three divisions ────────────────────────────────────── */
/* Old Testament / New Testament / Apocrypha, above the controls
   (Ian, 2026-09-22). The markup is the house tab strip
   (.faith-view-toggle, shared with the Heidelberg reader and the
   search page's modes), so this block says only what differs here:
   no hairlines of its own, because the control bar already draws one
   under the whole thing, and the active mark on the tab's own bottom
   edge rather than 13px below it, which the overflow container would
   clip. Body face, upright: this is a working surface.

   Scoped `.sd .sd-canon-tabs .faith-view-toggle-tab` (three classes)
   on purpose. scripture-dev.css is linked from the template's moHead
   and so loads BEFORE built/faith-received.min.css; at equal
   specificity that file would win, and one class deeper these do. */
.sd .sd-canon { padding: 12px 28px 0; }
.sd .sd-canon-tabs {
  margin: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  gap: 26px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sd .sd-canon-tabs::-webkit-scrollbar { display: none; }
.sd .sd-canon-tabs .faith-view-toggle-tab {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  padding: 11px 0 13px;
}
/* Darkest is current, the ordinary tab signal, with the accent kept
   for the underline: --color-primary on this ground is under AA. The
   selector reads the ARIA rather than a second class, so the mark and
   the announced state cannot disagree. */
.sd .sd-canon-tabs .faith-view-toggle-tab[aria-selected="true"] { color: var(--color-dark); }
.sd .sd-canon-tabs .faith-view-toggle-tab[aria-selected="true"]::after {
  bottom: 0;
  height: 2px;
  background: var(--sd-accent);
}

/* The Book control is a div now, not a label, because the tabs point
   aria-controls at it and a label is not a tabpanel. */
.sd .sd-book-panel { min-width: 0; }

/* [hidden] is display:none in the UA sheet, and that loses to
   .bible-control's display:inline-flex. Without this rule the control
   the page hides stays on screen beside the one that replaced it. */
.sd .bible-control[hidden] { display: none; }
/* The deuterocanon's text, where the translation picker sits on every
   other book: a fact in the same place and the same size as the value
   it replaces, not a dropdown that refuses to open. */
.sd .sd-fixed-text { margin: 0; }
.sd .sd-fixed-text-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-dark);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
/* THE TFR BUTTON (faith-received.css, "THE TFR BUTTON", Ian 2026-09-18):
   quiet at rest (off-black outline and ink, 3px), filled on hover, and
   filled when pressed or the one CTA. Restated here for these sd- classes
   rather than appended to that block, so this dev page changes nothing
   that live pages load. */
.sd-comm-toggle,
.sd-btn,
.sd-more,
.sd-preview-btn,
.sd-close {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tfr-btn, var(--color-dark));
  background: transparent;
  border: 1px solid var(--tfr-btn, var(--color-dark));
  border-radius: 3px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sd-comm-toggle:hover, .sd-comm-toggle:focus-visible,
.sd-btn:hover, .sd-btn:focus-visible,
.sd-more:hover, .sd-more:focus-visible,
.sd-preview-btn:hover, .sd-preview-btn:focus-visible,
.sd-close:hover, .sd-close:focus-visible,
.sd-comm-toggle[aria-expanded="true"],
.sd-preview-btn[aria-expanded="true"],
.sd-btn {
  background: var(--tfr-btn, var(--color-dark));
  color: var(--tfr-btn-ink, var(--color-white, #fff));
  border-color: var(--tfr-btn, var(--color-dark));
}
.sd-btn:hover, .sd-btn:focus-visible { background: var(--sd-accent); border-color: var(--sd-accent); }
.sd-comm-toggle { align-self: flex-end; margin-left: auto; }
.sd-comm-toggle span { font-weight: 400; letter-spacing: 0.04em; }

/* ── Commentaries: filters, then one line that scrolls sideways ── */
.sd-comm-panel { border-bottom: 1px solid var(--color-rule); background: var(--color-page); padding: 18px 0 20px; }
.sd-comm-status { margin: 10px 0 0; font-size: 14px; }
/* The dropdown's two folds, closed and previewable (corpus owner, 2026-09-25):
   side by side on a wide page, stacked on a narrow one. The sideways strip
   rules below are kept for commentaryStrip, which this page no longer calls. */
.sd-comm-folds { display: grid; gap: 0 36px; margin-top: 6px; }
@media (min-width: 900px) {
  .sd-comm-folds { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sd-comm-fold[open] { grid-column: 1 / -1; }
}
.sd-comm-fold-n { letter-spacing: 0.04em; }
.sd-comm-fold[open] .sd-panel-commentaries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-bottom: 12px;
}
.sd-comm-fold[open] .sd-commentary {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-rule);
  background: var(--color-white, #fff);
}
.sd-comm-fold[open] .sd-commentary.is-previewing {
  grid-column: 1 / -1;
  padding: 18px 20px 20px;
  border-top: 3px solid var(--color-primary);
}
.sd-commentary-more {
  width: 100%;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 10px 4px;
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark);
  background: transparent;
  border: 0;
  border-block: 1px solid var(--color-rule);
  cursor: pointer;
}
.sd-commentary-more:hover,
.sd-commentary-more:focus-visible { color: var(--sd-accent); }
.sd-commentary-more:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
@media (max-width: 960px) {
  .sd-comm-fold[open] .sd-panel-commentaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sd-comm-fold[open] .sd-panel-commentaries { grid-template-columns: 1fr; }
  .sd-comm-fold[open] .sd-commentary.is-previewing { padding-inline: 14px; }
}
.sd-comm-strip {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 10px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.sd-comm { flex: 0 0 auto; width: 240px; scroll-snap-align: start; }
.sd-comm-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-rule);
  background: var(--color-white, #fff);
  color: var(--color-dark);
  text-decoration: none;
  transition: border-color 0.14s;
}
a.sd-comm-card:hover, a.sd-comm-card:focus-visible { border-color: var(--tfr-btn, var(--color-dark)); }
.sd-comm-title { font-size: 15px; line-height: 1.3; font-style: italic; }
.sd-comm-author { font-size: 13px; }
.sd-comm-meta { font-size: 12px; color: var(--color-muted); margin-top: auto; }

/* ── Filters ─────────────────────────────────────────────────── */
.sd-filters { display: grid; gap: 12px; }
.sd-filters[hidden] { display: none; }
.sd-filter-row { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.sd-filter, .sd-search { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-filter { flex: 1 1 140px; }
.sd-filter-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sd-accent);
  font-weight: 600;
}
.sd-filter select,
.sd-filter input,
.sd-search input,
.sd-ask textarea {
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  color: var(--color-dark);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  padding: 8px 10px;
  min-height: 44px;
  width: 100%;
  max-width: 100%;
}
.sd-filter select:focus, .sd-filter input:focus, .sd-search input:focus, .sd-ask textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
  border-color: var(--color-primary);
}
.sd-filter select:disabled { color: var(--color-muted); }
.sd-clear {
  justify-self: start;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--sd-accent);
  background: none;
  border: 0;
  padding: 4px 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Two columns: the text, and the verse sidebar ───────────── */
/* Scoped under .sd: these elements also carry .container, and
   screen.min.css (loaded AFTER this file) sets .container { padding: 0 28px;
   max-width: 1180px }, which silently zeroed the top padding and the
   Desk's width at equal specificity. */
.sd .sd-layout { display: block; padding-top: 88px; padding-bottom: 72px; }
.sd-text { max-width: 720px; margin: 0 auto; min-width: 0; }
@media (min-width: 900px) {
  .sd-layout.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: var(--sd-gap);
    align-items: start;
    max-width: 1240px;
  }
  .sd-layout.has-side .sd-text { margin: 0; justify-self: center; width: 100%; }
  /* The sidebar exception: a column that scrolls on its own, held
     under the site header (the bar above it scrolls away). */
  .sd-side {
    position: sticky;
    top: calc(var(--sd-top) + 16px);
    max-height: calc(100vh - var(--sd-top) - 32px);
    transition: top 0.25s ease, max-height 0.25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 1px solid var(--color-rule);
    padding: 4px 4px 24px 28px;
  }
  /* 400px is too narrow for three filters abreast; stack them. */
  .sd-side .sd-filter { flex-basis: 100%; }
}
.sd .sd-attribution { text-align: center; padding-bottom: 48px; }

/* The old page's .bible-verse wash, kept; the open verse is marked a
   little more firmly so the reader can see what the sidebar describes. */
.sd-chapter-content .bible-verse.is-active { background: rgba(238, 125, 81, 0.18); box-shadow: 0 2px 0 var(--color-primary); }

/* ── The verse panel (sidebar on wide screens, inline on narrow) ── */
.sd-panel {
  font-family: var(--font-body);
  color: var(--color-dark);
  scroll-margin-top: calc(var(--sd-top) + 12px);
}
.sd-panel-ref:focus { outline: none; }
.sd-panel-ref:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-panel-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; margin-bottom: 14px; }
.sd-eyebrow {
  grid-column: 1;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sd-accent);
  font-weight: 600;
  margin: 0;
}
.sd-panel-ref { grid-column: 1; font-family: var(--font-body); font-size: 26px; line-height: 1.2; font-weight: 600; margin: 2px 0 0; }
.sd-desk-link {
  grid-column: 1;
  font-size: 15px;
  color: var(--sd-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
  justify-self: start;
  padding: 6px 0;
}
.sd-desk-link::after { content: " \2192"; }
.sd-close { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.sd-count { font-size: 16px; margin: 0 0 16px; }
.sd-count strong { font-size: 22px; font-weight: 600; }
.sd-h3 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-rule);
}
.sd-panel-foot { margin: 22px 0 0; font-size: 15px; }
.sd-panel-foot a { color: var(--sd-accent); }
.sd-panel-fold {
  border-top: 1px solid var(--color-rule);
  padding: 0;
}
.sd-count + [data-sd-panel-commentaries] { margin-top: 6px; }
.sd-panel-fold > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.sd-panel-fold > summary::-webkit-details-marker { display: none; }
.sd-panel-fold > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--sd-accent);
  font-size: 16px;
  line-height: 1;
}
.sd-panel-fold[open] > summary::after { content: "-"; }
.sd-panel-fold > summary:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}
.sd-panel-fold-body { padding: 0 0 12px; }
.sd-panel-fold .sd-h3:first-child { margin-top: 0; }
.sd-panel-commentaries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-panel-commentary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--color-dark);
  text-decoration: none;
}
a.sd-panel-commentary:hover .sd-source-title,
a.sd-panel-commentary:focus-visible .sd-source-title {
  color: var(--sd-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Narrow: the panel sits in the text, under the verse's paragraph. It
   must not inherit the chapter's reading type or the verse's pointer. */
.sd-chapter-content .sd-panel {
  display: block;
  font-size: 16px;
  line-height: 1.55;
  text-indent: 0;
  margin: 8px 0 28px;
  padding: 18px 16px 20px;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-primary);
  cursor: auto;
}

/* ── Source rows and previews ────────────────────────────────── */
.sd-sources { list-style: none; margin: 0; padding: 0; }
.sd-source { padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.sd-source:last-child { border-bottom: 0; }
.sd-source-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.sd-source-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sd-source-title { font-size: 16px; font-style: italic; line-height: 1.3; overflow-wrap: anywhere; }
/* the volume of a set, after its title: upright, so it reads as the catalogue's label and not as part of the title */
.sd-source-vol { font-style: normal; font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.sd-source-meta { font-size: 13px; color: var(--color-muted); line-height: 1.4; }
.sd-source-gist { font-size: 14px; color: var(--color-muted); line-height: 1.5; margin: 6px 0 0; }
.sd-preview-btn { flex: 0 0 auto; padding: 8px 12px; }
.sd-preview { margin-top: 10px; }
.sd-quote {
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--color-primary);
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.sd-preview-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--color-muted); margin: 8px 0 0; }
.sd-read-link { color: var(--sd-accent); font-weight: 600; }
.sd-read-link::after { content: " \2192"; }
/* Keep reading here: the reader itself under a preview, English, scrolling
   inside its frame while the page stays put (corpus owner, 2026-09-25). */
.sd-keep-reading { font: inherit; font-weight: 600; color: var(--sd-accent); background: none; border: 0; padding: 0; cursor: pointer; }
.sd-keep-reading:hover, .sd-keep-reading:focus-visible { text-decoration: underline; }
.sd-reader-frame { display: block; width: 100%; height: min(62vh, 640px); margin-top: 12px; border: 1px solid var(--color-rule); border-radius: 3px; background: var(--color-white, #fff); }
.sd-reader-frame[hidden] { display: none; }
/* Kinds on the Verse Desk are one mode control, not a row of pills. */
.sd-kinds { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 10px 0 12px; overflow-x: auto; scrollbar-width: thin; font-size: 14px; }
.sd-kinds .sd-filter-label { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0 12px 0 0; }
.sd-kind { flex: 0 0 auto; min-height: 36px; margin-left: -1px; font: inherit; padding: 4px 10px; border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-white, #fff); color: var(--color-dark); cursor: pointer; white-space: nowrap; }
.sd-kinds .sd-filter-label + .sd-kind { margin-left: 0; border-radius: 3px 0 0 3px; }
.sd-kinds .sd-kind:last-of-type { border-radius: 0 3px 3px 0; }
.sd-kind:hover { border-color: var(--sd-accent); }
.sd-kind:focus-visible { border-color: var(--sd-accent); outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-kind[aria-pressed="true"] { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-white, #fff); }
.sd-kinds-note { font-size: 13px; }
.sd-source[hidden], .sd-work[hidden], .sd-group[hidden] { display: none; }
@media (max-width: 640px) { .sd-kind { min-height: 44px; } }
.sd-more { margin-top: 14px; width: 100%; }
.sd-more:disabled { opacity: 0.5; cursor: progress; }

/* ── The Verse Desk ──────────────────────────────────────────── */
.sd .sd-desk { max-width: 880px; padding-top: 48px; padding-bottom: 96px; font-family: var(--font-body); color: var(--color-dark); }
.sd-desk-head { border-bottom: 1px solid var(--color-rule); padding-bottom: 28px; }
.sd-desk-title { font-family: var(--font-body); font-size: clamp(32px, 5vw, 44px); font-weight: 600; line-height: 1.1; margin: 6px 0 18px; }
.sd-desk-verse { margin: 0; font-size: 21px; line-height: 1.7; max-width: 720px; }
.sd-desk-trans { font-size: 13px; margin: 8px 0 0; }
.sd-desk-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 15px; }
.sd-desk-nav a { color: var(--sd-accent); padding: 6px 0; }
.sd-desk-sec { padding-top: 36px; }
.sd-h2 { font-family: var(--font-body); font-size: 22px; font-weight: 600; margin: 0 0 14px; }

.sd-parallel { margin: 0; display: grid; gap: 0; }
.sd-parallel-row { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
.sd-parallel-row:last-child { border-bottom: 0; }
.sd-parallel dt { font-size: 12px; letter-spacing: 0.14em; font-weight: 600; color: var(--sd-accent); padding-top: 4px; }
.sd-parallel dd { margin: 0; font-size: 17px; line-height: 1.6; }

.sd-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 32px; margin: 4px 0 22px; }
.sd-chart { margin: 0; }
.sd-chart figcaption { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin-bottom: 8px; }
.sd-chart ul { list-style: none; margin: 0; padding: 0; }
.sd-cbar {
  display: grid;
  grid-template-columns: minmax(90px, 38%) 1fr 52px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 4px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark);
  text-align: left;
  cursor: pointer;
}
.sd-cbar:hover, .sd-cbar:focus-visible { background: rgba(238, 125, 81, 0.08); }
.sd-cbar.is-on { background: rgba(238, 125, 81, 0.16); }
.sd-cbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-cbar-track { height: 10px; background: rgba(45, 41, 39, 0.06); }
.sd-cbar-fill { display: block; height: 100%; background: var(--color-primary); }
.sd-cbar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-muted); }

.sd-desk .sd-comm-strip { padding-bottom: 10px; }
.sd-jump { font-size: 15px; margin: 16px 0 0; }
.sd-jump a, .sd-panel-foot a { color: var(--sd-accent); }
.sd-ask { display: grid; gap: 8px; max-width: 720px; }
.sd-ask textarea { resize: vertical; line-height: 1.5; }
.sd-ask-note { font-size: 13px; margin: 0; }
.sd-ask .sd-btn { justify-self: start; }
.sd-chooser { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-top: 24px; }
.sd-chooser .sd-filter { flex: 0 1 180px; }

/* Tablets: keep the bar on one row. */
@media (min-width: 641px) and (max-width: 899px) {
  .sd-bar .bible-control:nth-child(3) select { max-width: 200px; }
}

/* ── Phones ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* screen.css sets html, body { overflow-x: hidden } at this width,
     which makes body a scroll container that never scrolls, so the
     sticky bar stuck to nothing and scrolled away. clip hides overflow
     without creating the container (iOS 16+). */
  body:has(.sd) { overflow-x: clip; }
  /* Ian, 2026-09-22: on a phone the bar does not need to follow the
     reader; it sits at the top of the page and scrolls away. The panel
     then only needs to clear the fixed site header, not the bar. */

  .sd-cbar { min-height: 44px; }
  /* The bar is sticky, so on a phone it must stay two rows: book,
     chapter and the arrows; then translation and Commentaries. Four
     wrapped rows took a quarter of the screen.

     Scoped `.sd .sd-bar-inner` (2026-09-22). Written as `.sd-bar-inner`
     these rules never once applied: screen.css sets
     `.bible-controls-inner { display: flex }` at the same specificity
     and loads after this file, so the phone bar has been falling back
     to five wrapped rows the whole time. Checked in the browser with
     getComputedStyle, which is the only way this shows up. */
  .sd .sd-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px 12px;
    padding: 10px 16px;
  }
  /* Placed by class, not by position: the translation control and the
     one that replaces it on an apocryphal book share row 2, and only
     one of the two is ever in the flow. */
  .sd .sd-bar-inner > .sd-book-panel { grid-column: 1; grid-row: 1; }
  .sd .sd-bar-inner > .bible-control--chapter { grid-column: 2; grid-row: 1; }
  .sd .sd-bar-inner > .bible-controls-nav { grid-column: 3; grid-row: 1; }
  .sd .sd-bar-inner > [data-sd-translation-control],
  .sd .sd-bar-inner > .sd-fixed-text { grid-column: 1; grid-row: 2; }
  .sd .sd-canon { padding: 8px 16px 0; }
  .sd .sd-canon-tabs { gap: 20px; }
  .sd .sd-canon-tabs .faith-view-toggle-tab { padding: 12px 0 14px; }
  .sd .sd-bar-inner > .sd-comm-toggle { grid-column: 2 / span 2; grid-row: 2; margin-left: 0; padding: 8px 10px; }
  .sd .sd-bar-inner .bible-control select { width: 100%; }
  .sd .sd-bar-inner .bible-control--chapter select { min-width: 56px; }
  .sd-comm { width: 78vw; max-width: 280px; }
  .sd .sd-layout { padding-top: 56px; }
  .sd .sd-desk { padding-top: 32px; }
  .sd-desk-verse { font-size: 19px; }
  .sd-parallel-row { grid-template-columns: 1fr; gap: 2px; }
  .sd-cbar { grid-template-columns: minmax(80px, 34%) 1fr 44px; }
  .sd-source-head { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════
   THIN-LINE BOXES, THE WHOLE WIDTH (Ian, 2026-09-23, after the author
   room: "do the same for the Scripture and Topics pages")
   ══════════════════════════════════════════════════════════════════
   On a wide screen the chapter is a page in a thin-line card, and the
   sidebar beside it is always there: the chapter overview when no verse
   is open (scripture-dev.js, showOverview), the verse panel when one is.
   Before this the right of the page was empty until a verse was clicked,
   and the layout jumped when it was. */
@media (min-width: 900px) {
  .sd .sd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--sd-gap); align-items: start; max-width: 1240px; }
  .sd .sd-layout:not(.has-side) { grid-template-columns: minmax(0, 1fr); }
  .sd .sd-text {
    max-width: none;
    margin: 0;
    width: 100%;
    background: #fffdf9;
    border: 1px solid var(--color-rule);
    border-radius: 3px;
    padding: 34px 44px 40px;
  }
  .sd .sd-layout:not(.has-side) .sd-text { max-width: 820px; margin: 0 auto; }
  /* The chapter keeps its reading measure inside the wider card. */
  .sd .sd-text .sd-chapter-content { max-width: 680px; margin: 0 auto; }
  .sd .sd-side {
    border: 1px solid var(--color-rule);
    border-radius: 3px;
    background: #fbf8f3;
    padding: 18px 20px 24px;
  }
}

/* The overview: two stat boxes, then the most-cited verses as a list of
   meters, each a button into its verse. */
.sd-ov-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.sd-ov-stat {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--color-rule); border-radius: 3px; background: #fff;
  padding: 12px 14px 10px;
}
.sd-ov-stat b { font-size: 24px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.sd-ov-stat span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sd-ov-whole { font-size: 13px; margin: 0 0 14px; }
.sd-ov-top { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--color-rule); }
.sd-ov-top li { border-bottom: 1px solid var(--color-rule); }
.sd-ov-verse {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  grid-template-areas: "ref meter n" "snip snip snip";
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sd-ov-verse:hover .sd-ov-ref, .sd-ov-verse:focus-visible .sd-ov-ref { color: var(--sd-accent); }
.sd-ov-verse:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-ov-ref { grid-area: ref; font-weight: 600; font-size: 14px; white-space: nowrap; }
.sd-ov-meter { grid-area: meter; height: 6px; background: rgba(45, 41, 39, 0.07); border-radius: 3px; overflow: hidden; }
.sd-ov-meter i { display: block; height: 100%; width: 0; background: var(--sd-accent); border-radius: 3px; }
.sd-ov-n { grid-area: n; font-size: 13px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sd-ov-snip { grid-area: snip; font-size: 13px; line-height: 1.45; color: var(--color-muted); font-style: italic; }
.sd-ov-snip:empty { display: none; }
.sd-ov-hint { font-size: 13px; margin: 0; }

/* The reader's sidebar stays where it is (Ian, 2026-09-23: "the side
   panel doesn't need to be sticky. It can stay where it is."). It scrolls
   with the page, and so is no longer a box that scrolls on its own
   either: the sidebar exception to "no in-page scroll boxes" is not
   needed once it is not held in place. Topics keeps its own sticky
   author panel; this is the Scripture reader only. */
@media (min-width: 900px) {
  .sd-reader .sd-side {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   THE VERSE DESK: THIN-LINE BOXES, THE WHOLE WIDTH (Ian, 2026-09-23)
   ══════════════════════════════════════════════════════════════════
   The Desk was one 880px column on a wide page. It now uses up to
   1,320px: the verse in a panel, the four translations as cards side by
   side, the count and the two charts in boxes, the filters in a box, the
   citations as cards two across, and Ask in a box. Every rule is under
   .sd-desk: the reader's sidebar uses the same .sd-source lists and
   keeps them compact. */
@media (min-width: 1100px) {
  .sd .sd-desk { max-width: 1320px; }
}
.sd-desk .sd-desk-head {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fbf8f3;
  padding: 26px 30px 20px;
}
.sd-desk .sd-desk-verse { max-width: 860px; }
.sd-desk .sd-desk-sec { margin-top: 36px; }

/* The translations: a card each, side by side. */
.sd-desk .sd-parallel { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sd-desk .sd-parallel-row,
.sd-desk .sd-parallel-row:last-child {
  display: block;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fff;
  padding: 14px 18px 16px;
}
.sd-desk .sd-parallel dt { padding: 0 0 6px; }

/* The count, boxed. */
.sd-desk .sd-count {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fff;
  padding: 12px 18px;
}
.sd-desk .sd-count strong { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* The charts, each in a box. */
.sd-desk .sd-charts { gap: 14px; margin-top: 14px; }
.sd-desk .sd-chart {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fff;
  padding: 16px 18px 12px;
}

/* The filters, in a box. */
.sd-desk .sd-filters {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fbf8f3;
  padding: 16px 20px;
  margin: 0 0 18px;
}

/* Citations as cards, two across where there is room. A preview opens
   inside its own card, and cards align to their tops so an open one
   does not stretch its neighbour. */
.sd-desk .sd-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
  align-items: start;
  border: 0;
}
.sd-desk .sd-sources > .sd-source,
.sd-desk .sd-sources > .sd-source:last-child {
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fff;
  padding: 14px 18px;
  margin: 0;
}

/* Ask, in a box. */
.sd-desk .sd-ask {
  max-width: none;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: #fbf8f3;
  padding: 18px 20px;
}
.sd-desk .sd-ask textarea { max-width: 860px; }

@media (max-width: 640px) {
  .sd-desk .sd-desk-head { padding: 18px 16px 14px; }
  .sd-desk .sd-parallel,
  .sd-desk .sd-sources { grid-template-columns: minmax(0, 1fr); }
  .sd-desk .sd-filters, .sd-desk .sd-ask { padding: 14px 16px; }
  .sd-desk .sd-sources > .sd-source, .sd-desk .sd-sources > .sd-source:last-child { padding: 12px 14px; }
}

/* The charts fold (Ian, 2026-09-23). The caption is the summary, with a
   chevron at its right; closed, a chart is its caption alone, and the
   pair align to their tops so an open one does not stretch its
   neighbour. */
.sd-charts { align-items: start; }
.sd-chart > summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}
.sd-chart > summary::-webkit-details-marker { display: none; }
.sd-chart > summary::after {
  content: "";
  margin-left: auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.sd-chart:not([open]) > summary::after { transform: rotate(-45deg); }
.sd-chart[open] > summary { margin-bottom: 8px; }
.sd-chart > summary:hover { color: var(--color-dark); }
.sd-chart > summary:focus-visible { outline: 2px solid var(--color-secondary, #c1593c); outline-offset: 3px; }
.sd-desk .sd-chart:not([open]) { padding-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .sd-chart > summary::after { transition: none; } }

/* Verse Desk, the corpus owner's order (2026-09-25): folds that open in place. */
.sd-desk-fold > summary { list-style: none; cursor: pointer; }
.sd-desk-fold > summary::-webkit-details-marker { display: none; }
.sd-desk-fold > summary .sd-h2::before { content: "▾ "; font-size: .7em; color: var(--color-muted, #777); }
.sd-desk-fold:not([open]) > summary .sd-h2::before { content: "▸ "; }
.sd-desk-fold > summary .sd-h2 { display: inline; }
.sd-groups { margin: .5rem 0 1rem; }
.sd-group { border-top: 1px solid var(--color-rule, #ddd); padding: .35rem 0; }
.sd-group > summary, .sd-work > summary { cursor: pointer; padding: .35rem 0; }
.sd-group-name { font-weight: 600; }
.sd-group-body { padding-left: 1rem; }
.sd-work { border-left: 2px solid var(--color-rule, #ddd); padding-left: .75rem; margin: .25rem 0; }
.sd-companions { list-style: none; padding: 0; margin: .25rem 0 1rem; }

/* Verse Desk, 2026-09-27: use the work-page reading-table pattern. A
   compact five-up index opens one full-width panel beneath its own row;
   the material being read remains ruled, quiet, and full width. */
.sd-desk {
  --sd-card: #fffdf9;
  --sd-panel: #fbf8f3;
  --sd-ink: var(--color-dark, #2d2927);
  --sd-muted: var(--color-muted, #6b6660);
  --font-body: "Source Serif Pro", Georgia, serif;
  --font-display: "EB Garamond", Georgia, serif;
}
.sd .sd-desk { padding-top: 34px; }
.sd-desk .sd-desk-head {
  padding: 26px 30px 20px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: var(--sd-panel);
}
.sd-desk .sd-desk-title {
  margin-bottom: 14px;
  font-family: "IM Fell Great Primer", "Source Serif Pro", Georgia, serif;
  font-weight: 500;
}
.sd-desk .sd-desk-verse { max-width: 900px; font-size: 22px; line-height: 1.62; }
.sd-desk .sd-desk-nav { padding-top: 4px; border-top: 0; }
.sd-desk .sd-desk-sec {
  margin-top: 0;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--color-rule);
}
.sd-desk .sd-desk-sec:last-child { border-bottom: 0; }
.sd-desk .sd-h2 {
  margin-bottom: 5px;
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
  font-size: 29px;
  font-weight: 500;
}
.sd-section-intro { max-width: 680px; margin: 0 0 16px; color: var(--sd-muted); font-size: 14px; }

/* Translation cards are the first quick comparison, one per version. */
.sd-desk .sd-parallel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sd-desk .sd-parallel-row,
.sd-desk .sd-parallel-row:last-child {
  min-width: 0;
  padding: 13px 14px 15px;
  background: var(--sd-card);
}
.sd-desk .sd-parallel dd { font-size: 15px; line-height: 1.5; }

/* Shared card-and-panel grammar, matched to the Institutes work page. */
.sd-collection-index,
.sd-index-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.sd-collection-index { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.sd-index-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding: 13px 14px 11px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: var(--sd-card);
  color: var(--sd-ink);
  text-align: left;
  cursor: pointer;
}
.sd-index-card > span { overflow-wrap: anywhere; font: 600 16px/1.25 var(--font-body, Georgia, serif); }
.sd-index-card > small { color: var(--sd-muted); font: 12px/1.3 var(--font-body, Georgia, serif); font-variant-numeric: tabular-nums; }
.sd-index-card:hover { border-color: var(--sd-muted); }
.sd-index-card[aria-expanded="true"] {
  border-color: var(--sd-accent);
  box-shadow: inset 0 3px 0 var(--sd-accent);
  color: var(--sd-accent);
}
.sd-index-card:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.sd-expand-group { margin: 0 0 10px; }
.sd-expand-panel {
  margin: 9px 0 22px;
  padding: 0 18px 18px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: var(--sd-card);
}
.sd-expand-panel[hidden] { display: none; }
.sd-expand-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  border-bottom: 1px solid var(--color-rule);
}
.sd-expand-panel > header :is(h3, h4) {
  margin: 0;
  color: var(--sd-ink);
  font: 500 23px/1.2 var(--font-display, "EB Garamond", Georgia, serif);
}
.sd-expand-panel > header p { margin: 3px 0 0; color: var(--sd-muted); font-size: 12px; }
.sd-panel-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sd-muted);
  font: 24px/1 var(--font-body, Georgia, serif);
  cursor: pointer;
}
.sd-panel-close:hover { color: var(--sd-accent); }
.sd-panel-close:focus-visible { outline: 2px solid var(--sd-accent); }

/* Commentary choices and the most-cited shelf use compact cards. Their
   selected preview takes the whole row, as it does on work pages. */
.sd-commentary-panel { margin-top: 10px; }
.sd-commentary-panel .sd-panel-commentaries,
.sd-desk .sd-top,
.sd-desk .sd-companions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.sd-commentary-panel .sd-panel-commentaries > .sd-source,
.sd-desk .sd-top > .sd-source,
.sd-desk .sd-companions > .sd-source {
  min-width: 0;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  background: var(--sd-card);
}
.sd-commentary-panel .sd-panel-commentaries > .sd-source.is-previewing,
.sd-desk .sd-top > .sd-source.is-previewing { grid-column: 1 / -1; min-height: 0; }
.sd-commentary-panel .sd-source-head,
.sd-desk .sd-top .sd-source-head { height: 100%; flex-direction: column; }
.sd-commentary-panel .sd-preview-btn,
.sd-desk .sd-top .sd-preview-btn { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--sd-accent); }
.sd-commentary-panel .sd-preview-btn:hover,
.sd-desk .sd-top .sd-preview-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Citation navigation first, citation reading second. */
.sd-groups { margin: 14px 0 8px; }
.sd-author-panel { background: var(--sd-panel); }
.sd-author-panel-body { padding-top: 14px; }
.sd-work-card { min-height: 68px; background: var(--sd-card); }
.sd-work-panel { margin-bottom: 8px; background: var(--sd-card); }
.sd-desk .sd-citation-rows {
  display: block;
  margin: 0;
}
.sd-desk .sd-citation-rows > .sd-source,
.sd-desk .sd-citation-rows > .sd-source:last-child {
  min-height: 58px;
  margin: 0;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  background: transparent;
}
.sd-desk .sd-citation-rows > .sd-source:last-child { border-bottom: 0; }
.sd-citation-rows .sd-preview-btn {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sd-accent);
}
.sd-citation-rows .sd-preview-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Supporting research remains available, without turning into another
   vertical accordion. */
.sd-desk .sd-count {
  padding: 0;
  border: 0;
  background: transparent;
}
.sd-desk .sd-count strong { font-family: var(--font-display, Georgia, serif); font-size: 30px; }
.sd-desk .sd-filters { padding: 14px 0; border: 0; border-block: 1px solid var(--color-rule); background: transparent; }
.sd-desk .sd-chart { background: var(--sd-card); }
.sd-similar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sd-similar-block { min-width: 0; }
.sd-similar-block .sd-h3 { margin-top: 14px; }
.sd-desk .sd-companions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-desk .sd-companions > .sd-source { min-height: 64px; }
.sd-desk .sd-ask { padding: 18px 0 0; border: 0; border-top: 1px solid var(--color-rule); background: transparent; }

@media (min-width: 641px) and (max-width: 980px) {
  .sd-desk .sd-parallel,
  .sd-index-grid,
  .sd-commentary-panel .sd-panel-commentaries,
  .sd-desk .sd-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* four translations since the NIV left (#118): two by two, not three and one */
  .sd-desk .sd-parallel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sd .sd-desk { padding-top: 22px; padding-bottom: 72px; }
  .sd-desk .sd-desk-head { padding: 18px 16px 14px; }
  .sd-desk .sd-desk-title { font-size: 34px; }
  .sd-desk .sd-desk-verse { font-size: 18px; line-height: 1.58; }
  .sd-desk .sd-desk-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .sd-desk .sd-desk-nav a:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .sd-desk .sd-desk-sec { padding: 28px 0 30px; }
  .sd-desk .sd-h2 { font-size: 26px; }
  .sd-desk .sd-parallel,
  .sd-index-grid,
  .sd-collection-index,
  .sd-commentary-panel .sd-panel-commentaries,
  .sd-desk .sd-top,
  .sd-desk .sd-companions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-desk .sd-parallel { grid-template-columns: 1fr; }
  .sd-desk .sd-parallel-row,
  .sd-desk .sd-parallel-row:last-child { padding: 12px; }
  .sd-desk .sd-parallel dd { font-size: 14px; line-height: 1.45; }
  .sd-index-card { min-height: 72px; padding: 12px; }
  .sd-index-card > span { font-size: 15px; }
  .sd-expand-panel { margin-top: 8px; padding: 0 14px 14px; }
  .sd-author-panel > header,
  .sd-work-panel > header { min-height: 58px; }
  .sd-similar-grid { grid-template-columns: 1fr; gap: 8px; }
  .sd-commentary-panel .sd-panel-commentaries > .sd-source.is-previewing,
  .sd-desk .sd-top > .sd-source.is-previewing { grid-column: 1 / -1; }
  .sd-desk .sd-citation-rows .sd-source-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .sd-desk .sd-citation-rows .sd-preview-btn { min-width: 64px; min-height: 44px; }
  .sd-desk .sd-charts { grid-template-columns: 1fr; }
  .sd-desk .sd-filters { padding-inline: 0; }
  .sd-desk .sd-ask { padding-inline: 0; }
  body:has(.sd-desk-page) .fr-survey-tab {
    top: 62%;
    right: 0;
    bottom: auto;
    width: 30px;
    max-width: 30px;
    padding: 10px 6px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    writing-mode: vertical-rl;
  }
  body:has(.sd-desk-page) .fr-survey-tab::after { content: "Feedback"; font-size: 12px; }
}