/* ============================================================================
   scripture.living — app chrome + reader styling.
   Structural/layout styling for the mods' light-DOM regions. All values come
   from the token cascade (scripture.css over @byre/brocade); literals appear
   only as var() fallbacks. (Camber components style their own shadow DOM.)
   ============================================================================ */

@layer scripture.app {
  /* vellum mod wrappers are transparent to layout; layout mod owns the shell */
  scripture-host, scripture-mod { display: contents; }

  /* app shell: fill the viewport; the reading scrolls WITHIN its frame, not the page */
  html, body { height: 100%; }
  body { overflow: hidden; }

  .sl-shell {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: var(--scripture-shell-max, 69rem);
    margin-inline: auto;
    padding-inline: var(--brocade-size-padding-lg, 1.5rem);
    overflow: hidden;
  }

  .sl-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--brocade-size-gap-md, 1rem);
    padding-block: var(--brocade-size-padding-lg, 1.25rem);
    border-bottom: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
  }
  .sl-wordmark {
    font-family: var(--scripture-font-display, Georgia, serif);
    font-size: var(--brocade-font-size-lg, 1.2rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--scripture-ink, #1a1815);
    text-decoration: none;
  }
  /* Brand cluster: wordmark + Beta indicator on one line, tagline beneath. */
  .sl-brand { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
  .sl-brand-line { display: flex; align-items: center; gap: var(--brocade-size-gap-sm, .5rem); }
  .sl-beta {
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-xxs, .62rem);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    padding: .2em .5em;
    border-radius: 999px;
    background: var(--scripture-accent, #7c5cff);
    color: var(--scripture-cat-ink, #fff);
  }
  .sl-tagline {
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-xs, .8rem);
    color: var(--scripture-muted, #6b645a);
    line-height: 1.1;
  }
  /* Right-side controls cluster — ONE flex child of the masthead holding the
     reader's mode toggle + the Settings trigger. margin-inline-start:auto hugs
     it to the right; when the row is too narrow it wraps as a single unit below
     the brand (still right-aligned), so Settings never lands on its own row. */
  .sl-controls {
    display: flex;
    align-items: center;
    gap: var(--brocade-size-gap-sm, .5rem);
    margin-inline-start: auto;
  }
  /* Narrow phones: keep the masthead to a single tight row — Settings collapses
     to its gear icon (aria-label retains the name) and the toggle compacts, so
     Settings no longer wraps onto its own row. */
  @media (max-width: 34rem) {
    /* On phones Settings collapses to its gear icon (aria-label keeps the name),
       so the controls group is compact. Layout robustness comes from the flex
       controls group below — not from per-element shrinking. */
    .set-trigger-label { display: none; }
  }

  .sl-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: clamp(var(--brocade-size-gap-lg, 1.5rem), 3vw, 2.5rem);
    justify-content: center;
    /* panes stretch to full height (so their % heights resolve); the reading card is
       capped to legal-pad height and TOP-anchored inside .sl-main below. */
    padding-block: clamp(var(--brocade-size-padding-lg, 1.5rem), 4vh, 3rem);
    overflow: hidden;
  }
  .sl-main {
    flex: 1 1 var(--scripture-reading-col, 48rem); max-width: var(--scripture-reading-col, 48rem);
    min-width: 0; height: 100%;
    display: flex; flex-direction: column;   /* top-anchor the capped reading card (empty space falls below) */
  }
  .sl-aside { position: relative; flex: 0 0 var(--scripture-aside-col, 20rem); min-width: 0; height: 100%; overflow: hidden; }

  /* ---- compact / mobile: full-bleed reading that scrolls WITHIN (a real scroll
     container — page-flow mis-scrolled + clipped). Apparatus → bottom sheet (next). ---- */
  @media (max-width: 62rem) {
    .sl-shell { padding-inline: 0; }
    /* Tighten the header vertically on tablet/mobile — reclaim screen for reading. */
    .sl-masthead {
      padding-inline: var(--brocade-size-padding-md, 1rem);
      padding-block: var(--brocade-size-padding-sm, .5rem);
      gap: var(--brocade-size-gap-sm, .5rem);
    }
    .sl-wordmark { font-size: var(--brocade-font-size-md, 1.05rem); }
    .sl-brand { gap: 0; }
    .sl-tagline { font-size: var(--brocade-font-size-xxs, .68rem); }
    .sl-body { padding: 0; gap: 0; overflow: hidden; }
    .sl-main { max-width: none; }
    .sl-aside { display: none; }   /* apparatus moves to a bottom sheet; hidden until that lands */
    .reader-card {
      border: 0; border-radius: 0; box-shadow: none;   /* full bleed */
      --scripture-card-pad: var(--brocade-size-padding-lg, 1.35rem);
    }
    .book-scroll { overflow-y: auto; overscroll-behavior: contain; }
  }

  /* ---- Settings control (masthead): ONE button ("Settings") opens a panel that
     OVERLAYS the Notes & Apparatus rail (reading stays visible — no full-screen
     scrim, so appearance/behaviour previews live). A settings-shell mod owns the
     container + this trigger; the theme mod contributes a Visuals section and the
     reader a Controls section into the panel's region. ---- */
  .settings-shell { display: inline-flex; align-items: center; }
  .set-trigger {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-sm, .84rem); font-weight: 600;
    color: var(--scripture-muted, #6b645a);
    padding: .35rem .55rem; border-radius: var(--brocade-border-radius-small, 7px);
    transition: background var(--brocade-transition-duration-fast, 100ms) ease, color .15s ease;
  }
  .set-trigger:hover, .set-trigger[aria-expanded="true"] {
    background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815);
  }
  .set-trigger:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .set-icon, .set-icon svg { display: block; }

  /* the panel fills the aside column (position: relative on .sl-aside), covering
     the apparatus while open; reading (in .sl-main) stays visible alongside. */
  .set-panel {
    position: absolute; inset: 0; z-index: 40;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    padding: var(--brocade-size-padding-md, 1rem);
    background: var(--scripture-card-bg, #fff);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    border-radius: var(--brocade-border-radius-large, 14px);
    box-shadow: var(--scripture-card-shadow, 0 14px 30px rgba(30,25,20,.16));
    overflow-y: auto;
  }
  .set-panel.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .set-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--brocade-size-gap-md, .9rem);
  }
  .set-panel-title {
    font-family: var(--scripture-font-display, Georgia, serif);
    font-size: var(--brocade-font-size-lg, 1.2rem); font-weight: 600; color: var(--scripture-ink, #1a1815);
  }
  .set-close {
    border: 0; background: transparent; cursor: pointer; line-height: 1; font-size: 1.35rem;
    color: var(--scripture-muted, #6b645a); padding: .1rem .4rem;
    border-radius: var(--brocade-border-radius-small, 7px);
  }
  .set-close:hover { background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815); }
  .set-close:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }

  /* ---- word-info panel: the tapped-word detail surface. WIDE = a sticky drawer
     pinned to the TOP of the aside, overlaying the apparatus (absolute, so the
     Y-tracked apparatus does not reflow on open/close). NARROW = the shared
     bottom sheet (the .wi-content is borrowed there; the drawer stays hidden with
     the aside). ---- */
  .wi-drawer {
    position: absolute; top: 0; left: 0; right: 0; z-index: 45;
    max-height: 100%; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    padding: var(--brocade-size-padding-md, 1rem);
    background: var(--scripture-card-bg, #fff);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    border-top: 3px solid var(--wi-accent, var(--scripture-accent, #7c5cff));
    border-radius: var(--brocade-border-radius-large, 14px);
    box-shadow: var(--scripture-card-shadow, 0 14px 30px rgba(30,25,20,.16));
  }
  .wi-drawer.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .wi-content { display: flex; flex-direction: column; gap: var(--brocade-size-gap-sm, .5rem); }
  .wi-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
  .wi-title {
    font-family: var(--scripture-font-display, Georgia, serif);
    font-size: var(--brocade-font-size-lg, 1.2rem); font-weight: 600;
    color: var(--wi-accent, var(--scripture-ink, #1a1815)); min-width: 0; overflow-wrap: anywhere;
  }
  .wi-close {
    border: 0; background: transparent; cursor: pointer; line-height: 1; font-size: 1.35rem;
    color: var(--scripture-muted, #6b645a); padding: .1rem .4rem; flex: none;
    border-radius: var(--brocade-border-radius-small, 7px);
  }
  .wi-close:hover { background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815); }
  .wi-close:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .wi-word { display: flex; align-items: baseline; gap: var(--brocade-size-gap-sm, .5rem); flex-wrap: wrap; }
  .wi-surface {
    font-family: var(--scripture-font-display, Georgia, serif);
    font-size: var(--brocade-font-size-xl, 1.5rem); color: var(--wi-accent, var(--scripture-ink, #1a1815));
  }
  .wi-translit { font-style: italic; color: var(--scripture-muted, #6b645a); font-size: var(--brocade-font-size-sm, .9rem); }
  .wi-fields {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--brocade-size-gap-xs, .25rem) var(--brocade-size-gap-md, .9rem);
    margin: var(--brocade-size-gap-sm, .5rem) 0 0;
  }
  .wi-fields dt {
    color: var(--scripture-muted, #6b645a); font-size: var(--brocade-font-size-xs, .78rem);
    font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  }
  .wi-fields dd { margin: 0; color: var(--scripture-ink, #1a1815); font-size: var(--brocade-font-size-sm, .95rem); overflow-wrap: anywhere; }
  .wi-msg { color: var(--scripture-muted, #6b645a); font-size: var(--brocade-font-size-sm, .9rem); padding: var(--brocade-size-gap-sm, .5rem) 0; }
  .wi-error { color: var(--scripture-danger, #b4432f); }
  /* borrowed into the shared bottom sheet on narrow: fill the sheet body padding */
  scripture-bottom-sheet .wi-content { padding: var(--scripture-sheet-content-pad, 1rem); }
  scripture-bottom-sheet .wi-close { display: none; }   /* the sheet owns dismissal on narrow */
  .set-sections { display: flex; flex-direction: column; gap: var(--brocade-size-gap-lg, 1.4rem); }
  .set-sections camber-section { --camber-font-family: var(--scripture-font-ui, sans-serif); }
  .set-field { display: flex; flex-direction: column; gap: var(--brocade-size-gap-sm, .5rem); }
  .set-field-label {
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-xs, .75rem);
    font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--scripture-muted, #6b645a);
  }
  /* the resistance slider — a native range styled off the token cascade (camber
     has no slider); accent-color themes the track/thumb to the scripture accent. */
  .set-range-row { display: flex; align-items: center; gap: var(--brocade-size-gap-sm, .6rem); }
  .set-range-end {
    flex: 0 0 auto; font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-xs, .72rem); color: var(--scripture-muted, #6b645a);
  }
  .set-range { flex: 1 1 auto; min-width: 0; cursor: pointer; accent-color: var(--scripture-accent, #7c5cff); }
  .set-range:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 3px; }
  /* palette swatches — a compact visual picker; each previews its palette
     (paper + accent split). Preview hexes are intentionally fixed literals. */
  .pal-swatches { display: inline-flex; align-items: center; gap: .4rem; margin-left: .3rem; }
  .pal-swatch {
    width: 20px; height: 20px; border-radius: var(--brocade-border-radius-full, 50%); padding: 0; cursor: pointer;
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    transition: box-shadow var(--brocade-transition-duration-fast, 100ms) ease, transform .1s ease;
  }
  .pal-swatch:hover { transform: scale(1.12); }
  .pal-swatch.on { box-shadow: 0 0 0 2px var(--scripture-bg, #faf9f7), 0 0 0 3.5px var(--scripture-accent, #7c5cff); }
  .pal-swatch[data-pal="paper"] { background: var(--scripture-swatch-paper); }
  .pal-swatch[data-pal="sepia"] { background: var(--scripture-swatch-sepia); }
  .pal-swatch[data-pal="slate"] { background: var(--scripture-swatch-slate); }
  .pal-swatch[data-pal="night"] { background: var(--scripture-swatch-night); }

  /* ---- book/chapter selector: sticky-heading trigger + drawers + margin arrows ---- */
  .sl-masthead .sl-brand       { order: 0; }
  .sl-masthead .mode-toggle    { order: 1; }
  .sl-masthead .settings-shell { order: 2; }

  /* masthead Read/Interlinear toggle — a quick switch outside Settings */
  .mode-toggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--scripture-faint, #e9e5df); }
  .mode-seg {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-xs, .8rem); font-weight: 500;
    padding: .28rem .9rem; border-radius: 999px;
    background: transparent; color: var(--scripture-muted, #6b645a);
    transition: background var(--brocade-transition-duration-fast, 100ms) ease, color .15s ease;
  }
  .mode-seg[aria-pressed="true"] { background: var(--scripture-card-bg, #fff); color: var(--scripture-ink, #1a1815); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  .mode-seg:hover:not([aria-pressed="true"]) { color: var(--scripture-ink, #1a1815); }
  .mode-seg:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }

  /* page-turn arrows — faint, brighten on hover — anchored in the reader's margins */
  .sl-main { position: relative; }
  .reader-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 3.2rem; border: 0; border-radius: var(--brocade-border-radius-full, 999px);
    background: transparent; color: var(--scripture-muted, #6b645a); font-size: 1.6rem; line-height: 1; cursor: pointer;
    opacity: .26; transition: opacity var(--brocade-transition-duration-fast, 100ms) ease,
      background .15s ease, color .15s ease, transform .15s ease;
  }
  .reader-arrow.prev { left: -.3rem; }
  .reader-arrow.next { right: -.3rem; }
  .reader-arrow:hover:not(:disabled) {
    opacity: 1; color: var(--scripture-ink, #1a1815); background: var(--scripture-card-bg, #fff);
    box-shadow: var(--scripture-card-shadow, 0 4px 14px rgba(30,25,20,.12));
  }
  .reader-arrow.prev:hover:not(:disabled) { transform: translateY(-50%) translateX(-2px); }
  .reader-arrow.next:hover:not(:disabled) { transform: translateY(-50%) translateX(2px); }
  .reader-arrow:disabled { opacity: 0; pointer-events: none; }

  /* drawer sheet — slides down below the header, over the reading; backdrop dismisses */
  /* the drawer lives INSIDE the reader's .book-frame (position:relative): it drops
     from the reader header, spans the reader width, and covers the reading. */
  .bn-backdrop {
    position: absolute; top: var(--bn-head-h, 0); left: 0; right: 0; bottom: 0; z-index: 20;
    background: color-mix(in srgb, var(--scripture-ink, #1a1815) 20%, transparent);
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
  }
  .bn-layer.open .bn-backdrop { opacity: 1; visibility: visible; }
  .bn-drawer {
    position: absolute; top: var(--bn-head-h, 0); left: 0; right: 0; z-index: 21; max-height: calc(100% - var(--bn-head-h, 0px));
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .bn-drawer.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .bn-drawer-inner {
    width: 100%; box-sizing: border-box; max-height: 100%; overflow-y: auto;
    padding: 1.1rem var(--scripture-card-pad, 2.75rem) 1.4rem;
    border-radius: 0 0 var(--brocade-border-radius-large, 14px) var(--brocade-border-radius-large, 14px);
    background: var(--scripture-card-bg, #fff);
    border-bottom: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    box-shadow: var(--scripture-card-shadow, 0 14px 30px rgba(30,25,20,.16));
  }
  .bn-filter {
    width: 100%; box-sizing: border-box; margin: 0 0 .85rem;
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-sm, .9rem);
    padding: .5rem .7rem; border-radius: var(--brocade-border-radius-small, 7px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: var(--scripture-bg, #faf9f7); color: var(--scripture-ink, #1a1815);
  }
  .bn-filter:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; border-color: transparent; }
  .bn-group-head {
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-xs, .75rem); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--scripture-muted, #6b645a); margin: .5rem 0 .4rem;
  }
  .bn-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .1rem .3rem; margin-bottom: .5rem; }
  .bn-book-item {
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-sm, .84rem); text-align: left;
    padding: .3rem .5rem; border: 0; border-radius: var(--brocade-border-radius-small, 5px); white-space: nowrap;
    background: transparent; color: var(--scripture-ink-soft, #4a453e); cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .bn-book-item:hover:not(:disabled) { background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815); }
  .bn-book-item.on { color: var(--scripture-accent, #7c5cff); font-weight: 600; }
  .bn-book-item.unavailable { opacity: .32; cursor: default; }
  .bn-empty { color: var(--scripture-muted, #6b645a); font-family: var(--scripture-font-ui, sans-serif); padding: .5rem; }

  /* translation drawer — one row per translation: code chip + full name */
  .bn-trans-grid { grid-template-columns: 1fr; gap: .12rem; }
  .bn-trans-item { display: flex; align-items: baseline; gap: .7rem; white-space: normal; padding: .45rem .6rem; }
  .bn-trans-code {
    font-weight: 700; letter-spacing: .05em; font-variant-numeric: tabular-nums;
    min-width: 3.2ch; color: inherit;
  }
  .bn-trans-name { color: var(--scripture-muted, #6b645a); font-size: var(--brocade-font-size-sm, .84rem); }
  .bn-trans-item.on .bn-trans-name { color: var(--scripture-ink-soft, #4a453e); }

  .bn-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.7rem, 1fr)); gap: .35rem; }
  .bn-chapter-item {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-sm, .9rem);
    font-variant-numeric: tabular-nums; border-radius: var(--brocade-border-radius-small, 7px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: transparent; color: var(--scripture-ink-soft, #4a453e); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
  }
  .bn-chapter-item:hover { background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815); border-color: var(--scripture-muted, #6b645a); }
  .bn-chapter-item.on { background: var(--scripture-accent, #7c5cff); color: var(--scripture-raw-accent-ink, #fff); border-color: transparent; font-weight: 600; }
  .bn-chapter-item:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }

  @media (prefers-reduced-motion: reduce) {
    .bn-backdrop, .bn-drawer, .reader-arrow { transition-duration: .01ms; }
  }
  @media (max-width: 48rem) {
    .reader-arrow { display: none; }   /* narrow: swipe handles book motion */
  }

  /* ---- the book-page card: a fixed-height frame; chapters scroll inside it.
     Height caps at ~legal-pad proportion (token) and is top-anchored by .sl-main's
     flex column; on a short/mobile viewport the min() yields full height. ---- */
  .reader-card {
    width: 100%; height: min(var(--scripture-reading-max-h, 95rem), 100%);
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--scripture-card-bg, #fff);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    border-radius: var(--scripture-card-radius, 14px);
    box-shadow: var(--scripture-card-shadow, 0 1px 3px rgba(30,25,20,.06), 0 10px 34px rgba(30,25,20,.05));
  }
  /* the scroll pane lives in a positioned frame so the gate lines can pin to its
     top/bottom edges without scrolling with the content */
  .book-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }

  /* discrete-volume book-turn: a vertical ceremonial interstitial replaces the old
     horizontal slide. Each front-matter PAGE is its own sliding layer inside .book-turn;
     a page slides in to cover the reading, the volume swaps behind it, then it clears.
     Crossing the OT<->NT hinge inserts a full-bleed accent testament page before the book head. */
  .book-turn {
    position: absolute; inset: 0; z-index: var(--scripture-z-bookturn, 30);
    overflow: hidden;                 /* pages slide within; nothing spills past the frame */
    visibility: hidden; pointer-events: none;
  }
  /* the ceremony owns the viewport for its whole duration — capture pointer/scroll while
     active (not only at rest) so scrolling to proceed never leaks through to the reading */
  .book-turn.active { visibility: visible; pointer-events: auto; }
  .bt-page {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--scripture-card-bg, #fff);
    transform: translateY(var(--bt-enter, 100%));
    transition: transform var(--scripture-bookturn-cover-dur, .42s) var(--scripture-bookturn-ease, ease);
  }
  /* travel matches the chapter scroll: scroll-down (fwd) enters from the BOTTOM and exits to
     the TOP; scroll-up (back) enters from the TOP and exits to the BOTTOM */
  .book-turn[data-dir="fwd"]  .bt-page { --bt-enter: 100%;  --bt-exit: -100%; }
  .book-turn[data-dir="back"] .bt-page { --bt-enter: -100%; --bt-exit: 100%; }
  .bt-page.cover { transform: translateY(0); }
  .bt-page.exit  { transform: translateY(var(--bt-exit, -100%)); transition-duration: var(--scripture-bookturn-reveal-dur, .5s); }
  .bt-inner {
    display: flex; flex-direction: column; align-items: center; gap: var(--brocade-size-gap-sm, .5rem);
    text-align: center; padding: var(--brocade-size-padding-xl, 2rem);
  }
  .bt-kicker {
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-sm, .84rem);
    font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--scripture-muted, #6b645a);
  }
  .bt-title {
    font-family: var(--scripture-font-display, Georgia, serif); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(2rem, 6vw, 3.4rem); color: var(--scripture-ink, #1a1815);
  }
  .bt-hero {
    font-family: var(--scripture-font-display, Georgia, serif); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(2.4rem, 8vw, 4.4rem); line-height: 1.05; color: var(--scripture-ink, #1a1815);
  }
  /* proceed affordance */
  .bt-continue {
    margin-top: var(--brocade-size-gap-lg, 1.5rem);
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-sm, .84rem);
    font-weight: 600; letter-spacing: .03em;
    color: var(--scripture-muted, #6b645a);
    background: transparent; border: 0; cursor: pointer;
    padding: .5rem .85rem; border-radius: var(--brocade-border-radius-full, 999px);
    transition: color .15s ease, background .15s ease, opacity .15s ease;
  }
  .bt-continue:hover { color: var(--scripture-ink, #1a1815); background: var(--scripture-faint, #e9e5df); }
  .bt-continue:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 2px; }
  .bt-continue-caret { font-size: 1.15em; line-height: 1; }
  /* testament hinge: full-bleed accent page, contrast ink (standalone "The New Testament") */
  .bt-page[data-scale="testament"] { background: var(--scripture-accent, #7c5cff); }
  .bt-page[data-scale="testament"] .bt-hero { color: var(--scripture-raw-accent-ink, #fff); }
  .bt-page[data-scale="testament"] .bt-continue { color: var(--scripture-raw-accent-ink, #fff); opacity: .8; }
  .bt-page[data-scale="testament"] .bt-continue:hover { opacity: 1; background: transparent; }
  @media (prefers-reduced-motion: reduce) { .bt-page { transition-duration: .01ms; } }
  .book-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--scripture-card-pad, 2.75rem) var(--scripture-card-pad, 2.75rem);
  }

  /* ---- chapter-boundary gate line: fills L→R as you push against the window edge,
     bleeds out if you pause (JS-driven via --fill) ---- */
  .gate-line {
    position: absolute; left: 0; right: 0; height: 3px; z-index: 3;
    pointer-events: none; opacity: 0;
    transition: opacity var(--brocade-transition-duration-fast, 100ms) ease-out;
  }
  .gate-line.on { opacity: 1; }
  .gate-top { top: 0; }
  .gate-bottom { bottom: 0; }
  .gate-fill {
    display: block; height: 100%; width: 100%;
    /* grows outward from the center and shrinks back into it */
    transform-origin: center; transform: scaleX(var(--fill, 0));
    /* smooth the discrete scroll steps / decay frames into continuous motion */
    transition: transform var(--gate-ease, .14s) ease-out;
    background: var(--scripture-accent, #7c5cff);
    border-radius: 2px;
  }

  /* ---- thin, subtle, themed scrollbars for the inner-scroll panes ---- */
  .book-scroll, .sl-aside {
    scrollbar-width: thin;                                    /* Firefox / standard */
    scrollbar-color: color-mix(in srgb, var(--scripture-muted, #6b645a) 40%, transparent) transparent;
  }
  .book-scroll::-webkit-scrollbar, .sl-aside::-webkit-scrollbar { width: 11px; height: 11px; }
  .book-scroll::-webkit-scrollbar-track, .sl-aside::-webkit-scrollbar-track { background: transparent; }
  .book-scroll::-webkit-scrollbar-thumb, .sl-aside::-webkit-scrollbar-thumb {
    /* border + padding-box clip insets the thumb so it reads as a slim floating pill */
    background-color: color-mix(in srgb, var(--scripture-muted, #6b645a) 30%, transparent);
    border-radius: 999px;
    border: 3.5px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--brocade-transition-duration-fast, 100ms);
  }
  .book-scroll:hover::-webkit-scrollbar-thumb, .sl-aside:hover::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--scripture-muted, #6b645a) 52%, transparent);
  }
  .book-scroll::-webkit-scrollbar-thumb:active, .sl-aside::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--scripture-muted, #6b645a) 65%, transparent);
  }
  /* sticky per-chapter header — "Ephesians N". Each chapter's header is
     position: sticky, so as its section reaches the top it swaps in and the
     title always names the chapter you're reading. Pure platform. */
  .chapter-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: baseline; justify-content: flex-start; gap: .5rem;
    padding: var(--brocade-size-padding-md, 1rem) 0 var(--brocade-size-padding-sm, .6rem);
    margin-bottom: var(--brocade-size-margin-sm, .55rem);
    background: var(--scripture-card-bg, #fff);
    border-bottom: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
  }
  /* the sticky heading parts are the drawer triggers. Book + chapter read as
     the page's LOCATION HEADER (operator, 2026-07-28): heading scale, both at
     full ink — "Ephesians 1" is one place-name, not a title and an aside. */
  .ch-book, .ch-num {
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--scripture-font-display, serif); font-weight: 600; font-size: var(--brocade-font-size-heading-4, 1.5rem);
    padding: .06rem .35rem; border-radius: var(--brocade-border-radius-small, 6px);
    transition: background var(--brocade-transition-duration-fast, 100ms) ease, color .15s ease;
  }
  .ch-book { letter-spacing: -.015em; color: var(--scripture-ink, #1a1815); margin-left: -.35rem; }
  .ch-num  { color: var(--scripture-ink, #1a1815); font-feature-settings: "tnum" 1; }
  .ch-book:hover, .ch-num:hover, .ch-book[aria-expanded="true"], .ch-num[aria-expanded="true"] {
    background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815);
  }
  .ch-book:focus-visible, .ch-num:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  /* translation sits at the far right of the textual bar — a small UI-font chip,
     visually subordinate to the serif book/chapter it shares the header with */
  .ch-trans {
    margin-left: auto; align-self: center;
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--scripture-font-ui, system-ui, sans-serif);
    font-weight: 600; font-size: var(--brocade-font-size-xs, .75rem);
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--scripture-muted, #6b645a);
    padding: .28rem .5rem; border-radius: var(--brocade-border-radius-small, 6px);
    transition: background var(--brocade-transition-duration-fast, 100ms) ease, color .15s ease;
  }
  .ch-trans:hover, .ch-trans[aria-expanded="true"] {
    background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815);
  }
  .ch-trans:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .seg { display: inline-flex; flex-wrap: wrap; gap: var(--brocade-size-gap-xs, .3rem); }
  /* claim-goto landing: a scrolled-to verse/word clears the sticky chapter
     head and parks on the second-to-top line (token holds the derivation) */
  .rv, .rv-word { scroll-margin-block-start: var(--scripture-goto-margin, 5.4rem); }

  /* ---- reading typography ---- */
  .reading {
    font-family: var(--scripture-font-reading, Georgia, serif);
    font-optical-sizing: auto;
    font-size: var(--scripture-reading-size, 1.15rem);
    line-height: var(--scripture-reading-leading, 1.72);
    color: var(--scripture-ink-soft, #4a453e);
    font-feature-settings: "onum" 1;
  }
  .reader-para { margin: 0 0 var(--scripture-space-para, 1.05rem); }
  .first-para { color: var(--scripture-ink, #1a1815); }  /* renderer-marked: voices may precede the first paragraph */

  /* ---- poetry lines (bt-q1/bt-q2) — hanging indent from ONE token pair so
     padding >= hang always holds (brocade consult); levels are property
     overrides on a single rule; logical properties (RTL-ready). Line rhythm
     comes from the uniform reading line-height; indent + stanza gap carry ALL
     poetry structure. ---- */
  .reader-line {
    margin: 0;
    padding-inline-start: calc(var(--scripture-poetry-indent, 0em) + var(--scripture-poetry-hang, 1.5em));
    text-indent: calc(-1 * var(--scripture-poetry-hang, 1.5em));
  }
  .reader-line.bt-q1 { --scripture-poetry-indent: var(--scripture-poetry-indent-1, 0em); }
  .reader-line.bt-q2 { --scripture-poetry-indent: var(--scripture-poetry-indent-2, 1em); }
  .reader-line:not(:has(+ .reader-line)) { margin-block-end: var(--scripture-space-para, 1.05rem); } /* close a poetry run */
  .stanza-start { margin-block-start: var(--scripture-stanza-gap, 1.5em); }

  /* inset paragraph variants (embedded letters, rosters) */
  .reader-para.bt-pi, .reader-para.bt-mi, .reader-para.bt-li { padding-inline-start: var(--scripture-inset-indent, 1.5em); }

  /* ---- editorial voices — one treatment per voice, token-mediated.
     d = received text (italic); sp/ms = apparatus registers. ---- */
  .reader-voice { text-indent: 0; }
  .reader-super {
    font-style: var(--scripture-voice-super-style, italic);
    color: var(--scripture-ink-soft, #4a453e);
    margin: 0 0 var(--scripture-space-para, 1.05rem);
  }
  .reader-speaker {
    font-variant-caps: var(--scripture-voice-label-variant, small-caps);
    letter-spacing: var(--scripture-voice-label-tracking, 0.05em);
    color: var(--scripture-muted, #6b645a);
    font-size: 0.92em;
    margin: var(--scripture-space-para, 1.05rem) 0 0.35rem;
  }
  .reader-division {
    font-family: var(--scripture-font-display, Georgia, serif);
    font-size: var(--scripture-voice-division-size, 1.08em);  /* reading-relative: scales with the fluid text */
    font-weight: var(--brocade-font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: var(--scripture-voice-division-tracking, 0.1em);
    text-align: center;
    color: var(--scripture-muted, #6b645a);
    margin-block: var(--brocade-size-margin-2xl, 3rem) var(--scripture-space-para, 1.05rem);
  }
  .rv-word { border-radius: var(--brocade-border-radius-small, 3px); transition: background var(--brocade-transition-duration-fast, 100ms); }
  .rv-word.word-hl {
    background: color-mix(in srgb, var(--hl-color, var(--scripture-accent, #7c5cff)) 22%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl-color, var(--scripture-accent, #7c5cff)) 28%, transparent);
    color: var(--scripture-ink, #1a1815);
  }
  /* word-picker: the composer's live selection (stronger than the hover highlight) +
     the picking affordance while a claim is being composed */
  .rv-word.rv-picked {
    background: color-mix(in srgb, var(--pick-color, var(--scripture-accent, #7c5cff)) 30%, transparent);
    box-shadow: 0 0 0 1.5px var(--pick-color, var(--scripture-accent, #7c5cff));
    color: var(--scripture-ink, #1a1815);
  }
  .book-scroll.picking .rv-word, .book-scroll.picking .vn { cursor: pointer; }
  .book-scroll.picking .rv-word:hover {
    background: color-mix(in srgb, var(--scripture-accent, #7c5cff) 14%, transparent);
  }

  /* ---- interlinear (design/interlinear.draft): alternating versions per verse.
     Two left gutters — verse number (once) then a fixed per-line version-code
     gutter — so every version's TEXT starts at the same x (a variable-width inline
     label would offset each line raggedly). Colour tokens live in the theme
     cascade (tokens/scripture.css). Editions of one verse sit tight; verses are
     spaced apart. */
  .book-scroll.interlinear .ch-trans { display: none; }   /* single-surface picker is meaningless when versions are stacked */
  .il-verse { margin: 0 0 var(--scripture-il-verse-gap, 1.5rem); }
  .il-line {
    display: grid;
    grid-template-columns: 1.85rem 1.4rem 1fr;   /* version rail | verse # | text */
    column-gap: .3rem;
    align-items: baseline;
    color: var(--il-color, var(--scripture-ink, #1a1815));
    line-height: 1.5;
    margin: 0 0 var(--scripture-il-line-gap, .1rem);
  }
  .il-line:last-child { margin-bottom: 0; }
  .il-rail {
    grid-column: 1;
    justify-self: end;
    color: var(--il-color, var(--scripture-muted, #6b645a));
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-2xs, .62rem);
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .82;
    padding-top: .3rem;
    user-select: none;
    white-space: nowrap;
  }
  .il-vn {
    grid-column: 2;
    justify-self: end;
    font-family: var(--scripture-font-ui, sans-serif);
    font-weight: 500;
    font-size: var(--brocade-font-size-xs, .72rem);
    color: var(--scripture-muted, #6b645a);
    font-variant-numeric: tabular-nums;
    padding-top: .2rem;
  }
  .il-text { grid-column: 3; color: inherit; }
  .il-text[dir="rtl"] { text-align: right; }   /* Hebrew reads + aligns RTL within its column */
  .il-line.il-WLC .il-text { font-size: 1.18em; line-height: 1.7; }   /* Hebrew legibility */
  .il-line.il-TR .il-text, .il-line.il-Byz .il-text { font-size: 1.05em; }
  .il-word { border-radius: var(--brocade-border-radius-small, 3px); }
  /* a tagged edition's words carry parsing → tappable to open the word-info panel */
  .il-word.il-tappable { cursor: pointer; transition: background var(--brocade-transition-duration-fast, 100ms) ease; }
  .il-word.il-tappable:hover { background: var(--scripture-faint, #e9e5df); }
  .il-word.il-tappable:focus-visible { outline: 2px solid var(--wi-accent, var(--scripture-accent, #7c5cff)); outline-offset: 1px; }

  /* segmented toggle in the Controls section (Read / Interlinear) */
  .set-seg-row { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--brocade-border-radius-medium, 8px); background: var(--scripture-faint, #e9e5df); }
  .set-seg {
    appearance: none; border: 0; cursor: pointer; font: inherit;
    font-size: var(--brocade-font-size-xs, .78rem); font-weight: 500;
    padding: .3rem .8rem; border-radius: var(--brocade-border-radius-small, 6px);
    background: transparent; color: var(--scripture-muted, #6b645a);
    transition: background var(--brocade-transition-duration-fast, 100ms) ease, color .15s ease;
  }
  .set-seg[aria-pressed="true"] { background: var(--scripture-card-bg, #fff); color: var(--scripture-ink, #1a1815); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  .set-seg:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .set-field-note { display: block; margin-top: .35rem; font-size: var(--brocade-font-size-2xs, .68rem); color: var(--scripture-muted, #6b645a); line-height: 1.35; }

  /* ---- version-stack editor (versions mod) ---- */
  .vs-list { display: flex; flex-direction: column; gap: 2px; margin: .5rem 0 .2rem; }
  .vs-item {
    display: grid;
    grid-template-columns: 3.4rem 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem;
    border-radius: var(--brocade-border-radius-small, 6px);
    background: var(--scripture-faint, #e9e5df);
  }
  .vs-code { font-family: var(--scripture-font-ui, sans-serif); font-weight: 700; font-size: var(--brocade-font-size-xs, .78rem); }
  .vs-name { font-size: var(--brocade-font-size-xs, .78rem); color: var(--scripture-ink-soft, #5a544b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vs-ctrls { display: inline-flex; gap: 1px; }
  .vs-btn {
    appearance: none; border: 0; cursor: pointer; font: inherit; line-height: 1;
    width: 1.55rem; height: 1.55rem; border-radius: var(--brocade-border-radius-small, 5px);
    background: var(--scripture-card-bg, #fff); color: var(--scripture-ink, #1a1815);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--brocade-transition-duration-fast, 100ms) ease;
  }
  .vs-btn:hover:not(:disabled) { background: var(--scripture-line, #d8d2c8); }
  .vs-btn:disabled { opacity: .3; cursor: default; }
  .vs-btn:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .vs-remove { color: var(--scripture-muted, #6b645a); font-size: 1.15em; }
  .vs-add-wrap { display: flex; align-items: baseline; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
  .vs-add-label { font-size: var(--brocade-font-size-2xs, .62rem); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--scripture-muted, #6b645a); }
  .vs-add { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
  .vs-chip {
    appearance: none; cursor: pointer; font: inherit; font-weight: 600;
    font-size: var(--brocade-font-size-xs, .74rem);
    padding: .18rem .55rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--il-color, var(--scripture-line, #d8d2c8)) 45%, transparent);
    background: transparent; color: var(--il-color, var(--scripture-ink, #1a1815));
    transition: background var(--brocade-transition-duration-fast, 100ms) ease;
  }
  .vs-chip::before { content: "+ "; opacity: .55; }
  .vs-chip:hover { background: color-mix(in srgb, var(--il-color, var(--scripture-accent, #7c5cff)) 12%, transparent); }
  .vs-chip:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .vs-add-empty { font-size: var(--brocade-font-size-2xs, .68rem); color: var(--scripture-muted, #6b645a); font-style: italic; }

  /* ---- continuous book scroll (chapter separation comes from the sticky head) ---- */
  .chapter { scroll-margin-top: 0; }
  .chapter + .chapter { margin-top: var(--scripture-space-rule, 1.2rem); }
  .book-end { padding: 2rem 0 1rem; text-align: center; color: var(--scripture-muted, #6b645a); font-family: var(--scripture-font-ui, sans-serif); font-size: var(--brocade-font-size-xs, .75rem); }
  .vn {
    font-family: var(--scripture-font-ui, sans-serif);
    font-weight: 500;
    font-size: .62em;
    vertical-align: .35em;
    color: var(--scripture-muted, #6b645a);
    margin-right: .1em;
    font-feature-settings: "tnum" 1;
  }

  .reader-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--brocade-size-gap-sm, .5rem);
    margin-top: var(--scripture-space-rule, 1.2rem);
    padding-top: var(--scripture-space-rule, 1.2rem);
    border-top: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-xs, .75rem);
    color: var(--scripture-muted, #6b645a);
    font-feature-settings: "tnum" 1;
  }
  .reader-meta .dot {
    width: var(--scripture-dot-size, 3px);
    height: var(--scripture-dot-size, 3px);
    border-radius: var(--brocade-border-radius-full, 50%);
    background: currentColor;
    opacity: .6;
  }

  .reader-loading, .reader-error {
    font-family: var(--scripture-font-ui, sans-serif);
    color: var(--scripture-muted, #6b645a);
  }
  .reader-error { color: var(--scripture-req-must-not, #cf222e); }

  /* ---- narrow screens: shrink the page padding. (The masthead stays ONE row —
     wordmark left, Visuals right; the column stack was a relic of the old
     three-cluster masthead and it wrapped Visuals under the wordmark AND
     anchored the popover off-screen-left. Two-bar chrome model holds.) ---- */
  @media (max-width: 34rem) {
    .reader-card { --scripture-card-pad: var(--brocade-size-padding-lg, 1.5rem); }
  }

  /* ---- mobile notes: the pill trigger + the sheet-slotted apparatus ---- */
  .notes-pill {
    position: fixed; z-index: var(--scripture-z-overlay, 50);
    inset-block-end: calc(var(--brocade-size-padding-md, 1rem) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--brocade-size-padding-md, 1rem);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    border-radius: var(--brocade-border-radius-full, 999px);
    padding: .55rem 1rem;
    background: var(--scripture-card-bg, #fff);
    color: var(--scripture-ink, #1a1815);
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-sm, .84rem); font-weight: 600;
    box-shadow: var(--scripture-card-shadow, 0 1px 3px rgba(30,25,20,.08));
    cursor: pointer;
  }
  .notes-pill[hidden] { display: none; }
  .notes-pill:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 2px; }
  /* in the sheet the panel sizes to its CONTENT (height:100% would absorb the
     scroller's off-screen-compensating end padding and defeat reachability);
     min-height floors it at the visible region so a short panel still parks
     its footer at the visible bottom (the padding equals the off-screen part) */
  scripture-bottom-sheet .apparatus { height: auto; min-height: 100%; }
  /* while the settings panel borrows the sheet, the apparatus yields (stays
     mounted in the sheet, just hidden) so Notes restores intact on return. */
  .apparatus.sheet-borrowed { display: none; }
  scripture-bottom-sheet .set-sections { padding-block: var(--brocade-size-padding-sm, .5rem); }
  /* wide regime: the sheet stays ALIVE (attributes carry the round-trip resume)
     but hidden — an open sheet must never overlay the desktop UI */
  @media (width > 62rem) { .sheet-region, .notes-pill { display: none; } }
  .no-trans, .no-trans * { transition: none !important; }  /* re-parent guard: no replayed transitions */

  /* ---- apparatus (claims aside) ---- */
  .apparatus { font-family: var(--scripture-font-ui, sans-serif); display: flex; flex-direction: column; height: 100%; }
  /* the tracked area: claim cards are absolutely positioned to follow their verses' y */
  .claim-track { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .apparatus-head, .cat-chips, .apparatus-foot { flex: 0 0 auto; }
  .apparatus-foot { margin-top: auto; padding-top: var(--brocade-size-padding-md, 1rem); }
  .apparatus-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin: 0 0 var(--brocade-size-margin-md, 1rem);
  }
  .apparatus-title {
    font-size: var(--brocade-font-size-xs, .72rem); letter-spacing: .12em; text-transform: uppercase;
    color: var(--scripture-muted, #6b645a); margin: 0; flex: 0 1 auto; min-width: 0;
  }
  /* the VIEW/EDIT segmented toggle (reuses .set-seg-row/.set-seg), a touch tighter in the header */
  .apparatus-seg { flex: 0 0 auto; }
  .apparatus-seg .set-seg { padding: .22rem .6rem; }

  .cat-chips { display: flex; flex-wrap: wrap; gap: var(--brocade-size-gap-xs, .35rem); margin: 0 0 var(--brocade-size-margin-md, 1.1rem); }
  .chip {
    font-family: inherit; font-size: var(--brocade-font-size-xs, .75rem); font-weight: 500; cursor: pointer;
    padding: .28rem .65rem; border-radius: var(--brocade-border-radius-full, 999px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: transparent; color: var(--scripture-ink-soft, #4a453e);
  }
  /* label ink flips with the theme via --scripture-cat-ink (aliases accent-ink) */
  .chip[aria-pressed="true"] { color: var(--scripture-cat-ink, #fff); border-color: transparent; }
  .chip[data-cat="faith"][aria-pressed="true"]       { background: var(--scripture-cat-faith, #7c5cff); }
  .chip[data-cat="instruction"][aria-pressed="true"] { background: var(--scripture-cat-instruction, #0a53a8); }
  .chip[data-cat="wisdom"][aria-pressed="true"]      { background: var(--scripture-cat-wisdom, #1f8a5b); }
  .chip[data-cat="all"][aria-pressed="true"]         { background: var(--scripture-ink, #1a1815); }

  /* subtle annotations — no card chrome (bg/border/radius); compact so they sit
     close to their verses. The verse you're reading comes to full ink; the rest
     rest quietly dimmed (that's the verse-tracking emphasis, sans fill). */
  .claim-card {
    position: absolute; top: 0; left: 0; right: 0; will-change: transform;   /* y-tracked to its verse */
    display: flow-root;                                     /* contain the floated edit actions (keeps offsetHeight right) */
    padding: .06rem 0; margin: 0; opacity: .78;
    transition: opacity var(--brocade-transition-duration-fast, .2s) ease;
  }
  .claim-card.active { opacity: 1; }
  /* the empty-state message isn't a tracked card */
  .claim-track .apparatus-empty { position: static; }
  /* stacked/narrow layout: the aside is page-flow, so the y-track can't have a
     definite height — render claims as a normal flowing list instead */
  @media (max-width: 62rem) {
    .apparatus { height: auto; }
    .claim-track { overflow: visible; flex: 0 0 auto; }
    .claim-card { position: static; transform: none !important; margin: 0 0 var(--brocade-size-margin-md, 1.15rem); }
    .apparatus-foot { margin-top: var(--brocade-size-margin-lg, 1.5rem); }
  }
  /* the verse number rides INLINE at the start of the statement (a small
     category-coloured badge); edit-mode actions float top-right, text wraps beside. */
  .claim-card .claim-badge {
    display: inline-block; vertical-align: baseline;
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-2xs, .66rem); font-weight: 700; line-height: 1;
    font-feature-settings: "tnum" 1; letter-spacing: .02em;
    color: var(--claim-color, var(--scripture-cat-faith, #7c5cff));
    padding: .1rem .34rem; border-radius: var(--brocade-border-radius-full, 999px);
    background: color-mix(in srgb, var(--claim-color, #7c5cff) 12%, transparent);
    margin-right: .35rem;
  }
  .claim-card .claim-statement { font-size: var(--brocade-font-size-sm, .86rem); line-height: 1.42; color: var(--scripture-ink, #1a1815); margin: 0; font-weight: 400; }
  .claim-card .claim-sub { font-size: var(--brocade-font-size-xs, .76rem); color: var(--scripture-muted, #6b645a); margin: .16rem 0 0; }

  /* unapproved (contributed, not-yet-curated) claims read as a draft: the
     statement goes italic + slightly softened, and a redundant, non-italic
     status tag rides at its end (never rely on italic as the only channel). */
  .claim-card.claim-unapproved .claim-statement {
    font-style: italic;
    color: color-mix(in srgb, var(--scripture-ink, #1a1815) 74%, var(--scripture-muted, #6b645a));
  }
  .claim-card .claim-flag {
    font-style: normal; display: inline-block; vertical-align: baseline; white-space: nowrap;
    margin-left: .4rem; padding: .04rem .36rem;
    font-family: var(--scripture-font-ui, sans-serif);
    font-size: var(--brocade-font-size-2xs, .64rem); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.25;
    color: var(--scripture-muted, #6b645a);
    background: var(--scripture-faint, #e9e5df);
    border-radius: var(--brocade-border-radius-full, 999px);
  }

  /* per-card actions (edit mode only): compact icon buttons + inline delete confirm */
  .claim-card .claim-actions { float: right; margin: 0 0 .1rem .5rem; display: flex; align-items: center; gap: .1rem; }
  .claim-icon-btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0; border-radius: var(--brocade-border-radius-small, 6px);
    color: var(--scripture-muted, #6b645a);
    transition: background var(--brocade-transition-duration-fast, .12s) ease, color .12s ease;
  }
  .claim-icon-btn:hover { background: var(--scripture-faint, #e9e5df); color: var(--scripture-ink, #1a1815); }
  .claim-icon-delete:hover { color: var(--scripture-req-must-not, #cf222e); }
  /* approve is the affirmative action in the row — it carries the approve color at rest */
  .claim-icon-approve { color: var(--scripture-approve, #157347); }
  .claim-icon-approve:hover { color: var(--scripture-approve, #157347); background: color-mix(in srgb, var(--scripture-approve, #157347) 14%, transparent); }
  .claim-icon-btn:focus-visible { outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 1px; }
  .claim-confirm { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--brocade-font-size-2xs, .7rem); }
  .claim-confirm-q { color: var(--scripture-muted, #6b645a); }
  .claim-confirm-yes, .claim-confirm-no {
    appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600;
    font-size: var(--brocade-font-size-2xs, .7rem);
    padding: .12rem .4rem; border-radius: var(--brocade-border-radius-small, 6px); background: transparent;
  }
  .claim-confirm-yes { color: var(--scripture-req-must-not, #cf222e); }
  .claim-confirm-yes:hover { background: color-mix(in srgb, var(--scripture-req-must-not, #cf222e) 12%, transparent); }
  .claim-confirm-no { color: var(--scripture-muted, #6b645a); }
  .claim-confirm-no:hover { background: var(--scripture-faint, #e9e5df); }
  .apparatus-empty { color: var(--scripture-muted, #6b645a); font-size: var(--brocade-font-size-sm, .9rem); }

  /* ---- editor key + composer ---- */
  .editor-key { display: flex; gap: .4rem; align-items: center; margin: var(--brocade-size-margin-md, 1.1rem) 0 0; }
  .editor-key input {
    flex: 1; min-width: 0; font: inherit; font-size: var(--brocade-font-size-sm, .85rem);
    padding: .4rem .6rem; border-radius: var(--brocade-border-radius-input, 8px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: var(--scripture-card-bg, #fff); color: var(--scripture-ink, #1a1815);
  }

  /* the composer presents as a distinct surface, not a bare stack */
  .composer {
    margin-top: var(--brocade-size-margin-md, 1.2rem);
    padding: var(--brocade-size-padding-md, 1rem);
    border-radius: var(--brocade-border-radius-medium, 10px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: var(--scripture-faint, #f4f1ec);
    display: flex; flex-direction: column; gap: var(--brocade-size-gap-sm, .7rem);
  }
  .composer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .composer-title { margin: 0; font-size: var(--brocade-font-size-sm, .9rem); font-weight: 600; letter-spacing: .01em; color: var(--scripture-ink, #1a1815); }
  .composer-close {
    appearance: none; border: 0; background: transparent; cursor: pointer; line-height: 1; font-size: 1.15rem;
    color: var(--scripture-muted, #6b645a); width: 1.6rem; height: 1.6rem;
    border-radius: var(--brocade-border-radius-small, 6px); display: inline-flex; align-items: center; justify-content: center;
  }
  .composer-close:hover { background: var(--scripture-line, #ece8e2); color: var(--scripture-ink, #1a1815); }
  .composer-field { display: flex; flex-direction: column; gap: .28rem; }
  .composer label { font-size: var(--brocade-font-size-xs, .7rem); letter-spacing: .05em; text-transform: uppercase; color: var(--scripture-muted, #6b645a); }
  .composer input, .composer textarea, .composer select {
    font: inherit; font-size: var(--brocade-font-size-sm, .9rem);
    padding: .45rem .6rem; border-radius: var(--brocade-border-radius-input, 8px);
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-line, #ece8e2);
    background: var(--scripture-card-bg, #fff); color: var(--scripture-ink, #1a1815); width: 100%;
  }
  .composer input:focus, .composer textarea:focus, .composer select:focus {
    outline: 2px solid var(--scripture-accent, #7c5cff); outline-offset: 0; border-color: transparent;
  }
  .composer textarea { min-height: 3.4rem; resize: vertical; font-family: inherit; line-height: 1.4; }
  .composer-inline { display: flex; gap: .5rem; align-items: center; }
  .composer-inline > select { flex: 1; }
  .composer-check { display: flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
  .composer-check input { width: auto; }
  /* the anchor control — a boxed field with the live count + a pick hint */
  .composer-anchor {
    border: var(--brocade-border-width-thin, 1px) dashed var(--scripture-line, #d9d3c9);
    border-radius: var(--brocade-border-radius-input, 8px);
    background: var(--scripture-card-bg, #fff); padding: .5rem .6rem;
    display: flex; flex-direction: column; gap: .3rem;
  }
  .composer-anchor-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .composer-anchor .pick-note { font-size: var(--brocade-font-size-sm, .84rem); color: var(--scripture-ink-soft, #4a453e); }
  .composer-anchor .pick-count { font-weight: 700; color: var(--scripture-accent, #7c5cff); }
  .composer-anchor-hint { margin: 0; font-size: var(--brocade-font-size-2xs, .7rem); color: var(--scripture-muted, #6b645a); line-height: 1.35; }
  .composer-actions { display: flex; gap: .5rem; margin-top: .15rem; }
  .composer-error { color: var(--scripture-req-must-not, #cf222e); font-size: var(--brocade-font-size-sm, .85rem); }
  /* narrow: the reader is behind the sheet — an explicit pick affordance */
  .composer-pick {
    appearance: none; cursor: pointer; font: inherit; font-size: var(--brocade-font-size-sm, .84rem); font-weight: 600;
    padding: .5rem .7rem; border-radius: var(--brocade-border-radius-input, 8px); width: 100%; text-align: center;
    border: var(--brocade-border-width-thin, 1px) solid var(--scripture-accent, #7c5cff);
    background: color-mix(in srgb, var(--scripture-accent, #7c5cff) 10%, transparent);
    color: var(--scripture-accent, #7c5cff);
  }
  .composer-pick:hover { background: color-mix(in srgb, var(--scripture-accent, #7c5cff) 18%, transparent); }
  /* the floating pick bar shown while picking on narrow (reader revealed below it) */
  .pickbar {
    position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + .7rem);
    z-index: 1000; display: flex; align-items: center; gap: .8rem;
    padding: .4rem .5rem .4rem .95rem; border-radius: var(--brocade-border-radius-full, 999px);
    background: var(--scripture-ink, #1a1815); color: var(--scripture-card-bg, #fff);
    box-shadow: 0 6px 22px rgba(0,0,0,.3); font-size: var(--brocade-font-size-sm, .85rem);
    max-width: calc(100vw - 2rem);
  }
  .pickbar[hidden] { display: none; }
  .pickbar-count { font-weight: 500; white-space: nowrap; }
  .pickbar-done {
    appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: var(--brocade-font-size-sm, .85rem);
    padding: .3rem .85rem; border-radius: var(--brocade-border-radius-full, 999px);
    background: var(--scripture-accent, #7c5cff); color: var(--scripture-cat-ink, #fff);
  }
}