/* Generated by the verified runtime partition on 2026-08-29. Keep selectors scoped to this surface. */
.is-scripture-passage {
  --street-hub-col: 44rem;
  --street-hub-dock-clearance: calc(5rem + env(safe-area-inset-bottom));
  background: var(--paper);
}
.is-scripture-passage .shell {
  padding-bottom: var(--street-hub-dock-clearance);
}
.scripture-seo-page {
  width: min(44rem, calc(100% - 2rem));
  margin: max(5.5rem, calc(env(safe-area-inset-top) + 5rem)) auto var(--space-7);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.scripture-seo-head,
.scripture-seo-about,
.scripture-seo-foot {
  text-align: center;
}
.scripture-seo-kicker {
  margin: 0 0 var(--space-2);
  color: var(--gold-deep);
  font-size: var(--type-min);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.scripture-seo-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 4rem);
  line-height: 1;
}
.scripture-seo-head > p:last-child {
  color: var(--muted);
}
.scripture-seo-reading,
.scripture-seo-about {
  margin-top: var(--space-7);
}
.scripture-seo-reading h2,
.scripture-seo-about h2 {
  font-family: var(--font-display);
}
.scripture-seo-reading .scripture-verse {
  max-width: 34rem;
  margin-inline: auto;
}
.scripture-seo-foot {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.scripture-chapter-grid {
  margin-top: var(--space-7);
  text-align: center;
}
.scripture-chapter-grid h2 {
  font-family: var(--font-display);
}
.scripture-chapter-order {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.scripture-chapter-order a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--type-min);
  font-weight: 700;
  text-decoration: none;
}
.scripture-chapter-order a[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 .2rem .8rem rgba(32, 26, 16, .08);
}
.scripture-chapter-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.scripture-chapter-grid a {
  display: grid;
  place-items: center;
  min-height: 4rem;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 650;
  text-decoration: none;
}
.scripture-chapter-grid a strong {
  font: inherit;
}
.scripture-chapter-grid a small {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.2;
}
.scripture-verse-link {
  color: inherit;
  text-decoration: none;
}
.scripture-seo-neighbors {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.scripture-seo-neighbors a {
  color: var(--ink);
  font-size: var(--type-min);
  font-weight: 700;
}
.street-shot-actions .quiz-scripture {
  flex: 1 1 auto;
  width: auto;
  display: inline-flex;
  min-width: 0;
}
.street-shot-actions .quiz-scripture {
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.4rem 0.85rem;
  gap: 0.4em;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(26, 39, 68, 0.28);
}
.street-shot-actions .quiz-cite {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
html.is-scripture-open,
html.is-scripture-open body {
  overflow: hidden;
}
html.is-scripture-open .chrome-tools,
html.is-scripture-open .home-menu {
  visibility: hidden;
  pointer-events: none;
}
.scripture-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-content: center;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--temple-ivory, var(--paper)) 88%, white) 0%, transparent 52%),
    var(--paper);
}
.scripture-veil[hidden] {
  display: none;
}
.scripture-veil.is-loading {
  place-items: center;
}
.scripture-sheet {
  width: min(24rem, 100%);
  height: 100dvh;
  overflow: auto;
  padding: var(--space-5);
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--temple-ivory, var(--paper)) 0%, var(--temple-marble, var(--surface)) 100%);
  box-shadow: var(--shadow);
}
.scripture-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: start;
  gap: var(--space-3);
  margin: 0 calc(var(--space-5) * -1);
  padding: var(--space-2) var(--space-5) var(--space-4);
  background: linear-gradient(180deg, var(--temple-ivory, var(--paper)) 72%, transparent);
}
.scripture-close {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
  border-color: var(--temple-gold-hairline, var(--line));
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.scripture-head h1 {
  margin: 0;
  padding-top: 0.45rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--ink);
}
.scripture-loading,
.scripture-error {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
}
.scripture-error { margin-bottom: var(--space-5); }
.scripture-summary {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--parchment);
}
.scripture-verse {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.scripture-verse.is-focus {
  margin-inline: 0;
}
.scripture-verse.is-focus [data-scripture-verse-text] {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 .12em 0 color-mix(in srgb, var(--gold-deep) 58%, transparent);
}
.scripture-body ::selection {
  background: color-mix(in srgb, var(--gold) 48%, white);
  color: var(--ink);
}
::highlight(scripture-deep-link) {
  background: color-mix(in srgb, var(--gold) 38%, white);
  color: var(--ink);
}
::highlight(scripture-profile-highlights) {
  background: color-mix(in srgb, var(--gold) 32%, white);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold-deep) 58%, transparent);
  text-decoration-thickness: .1em;
  text-underline-offset: .12em;
}
.scripture-verse-n {
  font-family: var(--font-ui);
  font-size: var(--type-min);
  font-weight: 700;
  color: var(--parchment);
  margin-inline-end: 0.4rem;
  vertical-align: super;
  user-select: none;
  -webkit-user-select: none;
}
.scripture-share-trigger {
  position: fixed;
  z-index: 100;
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  min-height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--temple-gold-border, var(--gold-deep));
  border-radius: 50%;
  background: var(--temple-gold-leaf, linear-gradient(145deg, #c9a23a, #f2d98a 42%, #a37a12));
  color: var(--navy);
  box-shadow: 0 .55rem 1.4rem rgba(32, 26, 16, .24);
  cursor: pointer;
  touch-action: manipulation;
}
.scripture-share-trigger[hidden] { display: none; }
.scripture-share-trigger .picto { width: 1.55rem; height: 1.55rem; }
.scripture-share-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-deep) 55%, white);
  outline-offset: 3px;
}
.scripture-share-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(calc(100vw - 2rem), 30rem);
  max-width: none;
  max-height: min(80dvh, 34rem);
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--temple-gold-border, var(--line));
  border-radius: var(--radius-l);
  background: var(--temple-ivory, var(--surface));
  color: var(--ink);
  outline: none;
  box-shadow: 0 1.4rem 4rem rgba(10, 17, 28, .34), 0 0 0 1px rgba(255,255,255,.46) inset;
  opacity: 0;
  transform: translate(-50%, -46%) scale(.96);
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease-out),
    display 260ms allow-discrete,
    overlay 260ms allow-discrete;
}
.scripture-share-dialog[open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.scripture-share-dialog::backdrop {
  background: rgba(12, 20, 33, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition:
    opacity 220ms ease,
    display 260ms allow-discrete,
    overlay 260ms allow-discrete;
}
.scripture-share-dialog[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .scripture-share-dialog[open] {
    opacity: 0;
    transform: translate(-50%, -46%) scale(.96);
  }
  .scripture-share-dialog[open]::backdrop { opacity: 0; }
}
.scripture-share-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}
.scripture-share-panel > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: var(--space-3);
}
.scripture-share-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.25;
}
.scripture-share-close {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color 160ms ease;
}
.scripture-share-close .picto { width: 1.15rem; height: 1.15rem; }
.scripture-share-close .picto-close circle { display: none; }
.scripture-share-close .picto-close path {
  stroke: currentColor;
  stroke-width: 5;
}
.scripture-share-close:hover {
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
}
.scripture-share-close:active { transform: scale(.92); }
.scripture-share-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-deep) 55%, white);
  outline-offset: 2px;
}
.scripture-share-options {
  display: grid;
  gap: var(--space-2);
}
.scripture-share-option {
  appearance: none;
  width: 100%;
  min-height: 3.75rem;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--temple-gold-hairline, var(--line));
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  font: 700 var(--type-ui) / 1.2 var(--font-ui);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.scripture-share-option[hidden] { display: none; }
.scripture-share-option:active { transform: scale(.985); }
.scripture-share-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold-deep) 55%, white);
  outline-offset: 2px;
}
.scripture-share-option-mark {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 18%, var(--paper));
  color: var(--navy);
}
.scripture-share-option-mark .picto { width: 1.45rem; height: 1.45rem; }
.scripture-share-x-mark {
  font: 800 1.1rem / 1 var(--font-ui);
}
.scripture-share-remove {
  color: color-mix(in srgb, var(--fire) 74%, var(--ink));
}
.scripture-share-remove-mark {
  color: color-mix(in srgb, var(--fire) 78%, var(--ink));
  font: 800 1.45rem / 1 var(--font-ui);
}
.scripture-share-status {
  margin: 0;
  color: var(--gold-deep);
  font-size: var(--type-min);
  font-weight: 700;
  text-align: center;
}
.scripture-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--temple-gold-hairline, var(--line));
  text-align: center;
}
.scripture-source {
  margin: 0 0 var(--space-2);
  font-size: var(--type-min);
  color: var(--parchment);
}
.scripture-foot .quiet-link {
  display: inline;
  width: auto;
  color: var(--parchment);
}
body.is-street-play #street_quiz.is-overlay .quiz-scripture {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--quiz-border);
  background: var(--quiz-glass);
  color: var(--quiz-text);
  text-decoration: none;
  font-size: max(0.82rem, var(--type-min));
  font-weight: 700;
  backdrop-filter: blur(10px);
}
body.is-street-play #street_quiz.is-overlay .quiz-scripture .picto { width: 0.95rem; height: 0.95rem; }
body.is-street-play #street_quiz.is-overlay.is-settled .street-shot-actions .quiz-scripture {
  animation: quiz-action-from-left 360ms var(--ease-out) both;
}
@media (max-width: 360px) {
body.is-street-play #street_quiz.is-overlay:not(.is-ceremony) .quiz-scripture {
    min-width: 0;
    padding-inline: 0.55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
body.is-street-play #street_quiz.is-overlay .quiz-scripture { animation: none; }
}
.scripture-veil { animation: scripture-veil-in .2s ease-out both; }
.scripture-sheet { animation: scripture-reader-in .38s var(--ease-out) both; }
@keyframes scripture-veil-in { from { opacity: 0; } }
@keyframes scripture-reader-in { from { opacity: 0; transform: translateY(1.5rem); } }
.scripture-veil { background: radial-gradient(90% 55% at 50% 0, rgba(247,220,151,.28), transparent 62%), rgba(4,18,34,.72); backdrop-filter: blur(12px); }
.scripture-sheet { width: min(32rem, 100%); padding-inline: clamp(1.25rem, 5vw, 2.5rem); background: radial-gradient(circle at 50% -5%, rgba(255,255,255,.96), transparent 25%), linear-gradient(180deg, #fffdf7 0%, #f5eedf 100%); border-inline: 1px solid rgba(196,154,64,.28); box-shadow: 0 0 4rem rgba(0,0,0,.42); }
.scripture-head { margin-inline: clamp(-2.5rem, -5vw, -1.25rem); padding-inline: clamp(1.25rem, 5vw, 2.5rem); padding-bottom: 1.1rem; background: linear-gradient(180deg, rgba(255,253,247,.98) 76%, transparent); }
.scripture-head::after { content: "✦"; grid-column: 2; justify-self: center; margin-top: .35rem; color: var(--gold-deep); font-size: .75rem; }
.scripture-head h1 { font-size: clamp(1.45rem, 5vw, 1.85rem); line-height: 1.08; }
.scripture-head-copy { grid-column: 2; min-width: 0; text-align: center; }
.scripture-read-count { margin: .35rem 0 0; color: var(--muted); font-size: var(--type-min); font-weight: 650; line-height: 1.25; }
.scripture-close {
  position: relative;
  border: 1px solid rgba(173,132,49,.52);
  border-radius: 50%;
  background: rgba(255,253,247,.96);
  box-shadow: 0 .35rem 1rem rgba(32,26,16,.1), inset 0 0 0 3px rgba(255,255,255,.72);
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) ease, box-shadow var(--dur-press) ease, background-color var(--dur-press) ease;
}
.scripture-close .picto { width: 1.5rem; height: 1.5rem; }
.scripture-close .picto-close circle { fill: transparent; }
.scripture-close .picto-close path { stroke: currentColor; stroke-width: 5; }
.scripture-close:hover { border-color: var(--gold-deep); background: #fff; box-shadow: 0 .45rem 1.2rem rgba(32,26,16,.14), inset 0 0 0 3px rgba(255,255,255,.8); }
.scripture-close:active,
.scripture-close.is-pressed { transform: scale(.94); }
.scripture-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold-deep) 48%, transparent); outline-offset: 3px; }
.scripture-summary { margin: .5rem 0 1.75rem; padding: 1rem 1.1rem; color: #5f625f; border-block: 1px solid rgba(173,132,49,.28); text-align: center; font-size: 1rem; line-height: 1.5; }
.scripture-verse { margin-bottom: .9rem; padding: .45rem .55rem; font-size: clamp(1.12rem, 4.5vw, 1.3rem); line-height: 1.68; }
.scripture-verse.is-focus { margin-inline: -.35rem; padding: .75rem .9rem; border: 1px solid rgba(184,139,44,.38); border-inline-start: 4px solid var(--gold-deep); border-radius: .2rem .85rem .85rem .2rem; background: linear-gradient(90deg, rgba(226,194,118,.24), rgba(255,255,255,.54)); box-shadow: 0 .4rem 1.2rem rgba(84,65,29,.08); }
.scripture-verse-n { color: var(--gold-deep); font-size: .72rem; }
.scripture-foot { margin-top: 2rem; padding: 1.25rem 0 2rem; }
.scripture-illustration {
  position: relative;
  margin-block: var(--space-6);
  break-inside: avoid;
}
.scripture-illustration-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-block: 1px solid var(--temple-gold-hairline, var(--line));
  background: var(--temple-marble, var(--surface));
}
.scripture-illustration-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--temple-gold-hairline, var(--line));
}
.scripture-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.scripture-illustration figcaption {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) 0;
  color: var(--ink);
  text-align: center;
}
.scripture-illustration-cite {
  color: var(--gold-deep);
  font-family: var(--font-ui);
  font-size: var(--type-min);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scripture-illustration-caption {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.45;
}
.scripture-sheet .scripture-illustration {
  margin-inline: clamp(-2.5rem, -5vw, -1.25rem);
}
.scripture-sheet .scripture-illustration figcaption {
  margin-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.scripture-seo-reading .scripture-illustration {
  width: min(28rem, 100%);
  margin-inline: auto;
}
.scripture-seo-reading .scripture-illustration-frame {
  border: 1px solid var(--temple-gold-hairline, var(--line));
  border-radius: var(--radius-l);
}
@media (prefers-reduced-motion: reduce) {
.scripture-veil,
.scripture-sheet { animation: none; }
.scripture-share-dialog,
.scripture-share-dialog::backdrop { transition: none; }
}
.belief-passage { display:flex; align-items:center; gap:.75rem; width:calc(100% - 2rem); max-width:44rem; margin:0 auto; padding-top:1.2rem; color:#e8bf4f; }
.belief-passage span { height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(232,191,79,.7)); }
.belief-passage span:last-child { transform:scaleX(-1); }
.belief-passage .picto { width:1.1rem; height:1.1rem; filter:drop-shadow(0 0 8px rgba(232,191,79,.45)); }

/* Liseuse 3.0 — a quiet ivory reading room, deliberately outside the game HUD. */
html.is-scripture-open .chrome-tools,
html.is-scripture-open .home-menu,
html.is-scripture-open .quiz-hud,
html.is-scripture-open .quiz-dock,
html.is-scripture-open .street-dock,
html.is-scripture-open [data-hud] {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.is-scripture-open .skip { color: #202831; }
html.is-scripture-open .skip:focus {
  border: 1px solid rgba(172, 124, 41, .35);
  background: #fffaf0;
  color: #202831;
  box-shadow: 0 .45rem 1.5rem rgba(85, 58, 20, .16);
}

.scripture-reader-room {
  --reader-ivory: #fffaf0;
  --reader-cream: #f8f0df;
  --reader-paper: #fffdf7;
  --reader-ink: #202831;
  --reader-muted: #777166;
  --reader-gold: #b77a13;
  --reader-gold-soft: #e6c989;
  --reader-line: rgba(172, 124, 41, .25);
  --reader-font-scale: 1;
  --reader-leading: 1.72;
  --reader-measure: 40rem;
  display: block;
  overflow: hidden;
  color: var(--reader-ink);
  background: var(--reader-ivory);
  backdrop-filter: none;
  isolation: isolate;
  animation: reader-room-in 180ms ease-out both;
}
.scripture-reader-room input { accent-color: var(--reader-gold); }

.scripture-reader-room[data-reader-line-height="compact"] { --reader-leading: 1.5; }
.scripture-reader-room[data-reader-line-height="ample"] { --reader-leading: 1.92; }
.scripture-reader-room[data-reader-measure="focused"] { --reader-measure: 34rem; }
.scripture-reader-room[data-reader-measure="wide"] { --reader-measure: 46rem; }
.scripture-reader-room[data-reader-font="accessible"] .reader-verses { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; }
.scripture-reader-room[data-reader-background="soft"] .scripture-sheet { background: #f8f0df; }
.scripture-reader-room[data-reader-background="contrast"] .scripture-sheet { background: #fffef9; }
.scripture-reader-room[data-reader-illustrations="false"] .reader-verses .scripture-illustration { display: none; }

.scripture-reader-room .scripture-sheet {
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgba(177, 121, 25, .035) 1px, transparent 1px) 0 0 / 8rem 100%,
    var(--reader-ivory);
  box-shadow: none;
  scroll-behavior: smooth;
  animation: none;
}

.reader-room-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 4.8rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  grid-template-rows: 2.75rem 1rem;
  align-items: center;
  gap: .18rem .35rem;
  padding: max(.45rem, env(safe-area-inset-top)) clamp(.65rem, 2vw, 1.25rem) .42rem;
  border-bottom: 0;
  background: rgba(255, 250, 240, .94);
  backdrop-filter: blur(18px) saturate(.8);
  animation: reader-chrome-in 190ms cubic-bezier(.2,.8,.2,1) both;
}

.reader-close,
.reader-aa-button,
.reader-panel-trigger,
.reader-chapter-bookmark,
.reader-resume,
.reader-text-action,
.reader-selection-bar button,
.reader-primary-action,
.circle-message-menu button,
.circle-reply-heading,
.circle-composer-secondary,
.circle-submit,
.circle-vote-actions button,
.reader-settings-dialog button,
.reader-note-dialog button {
  font-family: var(--font-ui);
}

.reader-close,
.reader-aa-button {
  appearance: none;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--reader-ink);
  cursor: pointer;
}

.reader-close {
  justify-self: start;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .3rem;
  border: 1px solid var(--reader-line);
  border-radius: 50%;
  background: rgba(255, 253, 247, .66);
  color: var(--reader-ink);
  font-size: .76rem;
  font-weight: 750;
  text-align: start;
}
.reader-close .picto { width: 1.12rem; height: 1.12rem; }
.reader-close .picto-cross { color: var(--reader-gold); }
.reader-close:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--reader-gold) 58%, var(--reader-line)); background: var(--reader-paper); }
.reader-close:active { transform: scale(.97); }
.reader-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 48%, transparent); outline-offset: 3px; }
.reader-topbar-context { min-width: 0; text-align: center; }
.reader-mobile-readers { display: none; }
.reader-topbar-actions { justify-self: end; display: flex; align-items: center; gap: .15rem; }
.reader-topbar-audio { display: grid; }
.reader-topbar-actions > :is(.reader-topbar-audio, .reader-panel-trigger, .reader-aa-button) {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .38rem;
  border: 1px solid var(--reader-line);
  border-radius: 50%;
  background: rgba(255, 253, 247, .6);
  color: var(--reader-gold);
}
.reader-language-switch { position: relative; }
.reader-language-switch > summary {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .38rem;
  border: 1px solid var(--reader-line);
  border-radius: 50%;
  background: rgba(255, 253, 247, .6);
  cursor: pointer;
  list-style: none;
}
.reader-language-switch > summary::-webkit-details-marker { display: none; }
.reader-language-switch > summary:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--reader-gold) 42%, var(--reader-line)); background: rgba(255, 253, 247, .82); }
.reader-language-switch > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 48%, transparent); outline-offset: 3px; }
.reader-language-switch > summary:active { transform: scale(.95); }
.reader-language-switch > summary .lang-flag { width: 1.35rem; height: 1.35rem; }
.reader-language-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 40;
  min-width: 11rem;
  display: grid;
  gap: .2rem;
  padding: .45rem;
  border: 1px solid var(--reader-line);
  border-radius: .9rem;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 .8rem 2rem rgba(81, 57, 20, .16);
}
.reader-language-form { margin: 0; }
.reader-language-option {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .65rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  color: var(--reader-ink);
  font: 700 .82rem/1.2 var(--font-ui);
  text-align: start;
  cursor: pointer;
}
.reader-language-option:is(:hover, :focus-visible),
.reader-language-option.is-current { background: color-mix(in srgb, var(--reader-gold-soft) 28%, transparent); }
.reader-language-option:focus-visible { outline: 2px solid color-mix(in srgb, var(--reader-gold) 58%, transparent); outline-offset: -2px; }
.reader-topbar-actions > :is(.reader-topbar-audio, .reader-panel-trigger, .reader-aa-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--reader-gold) 42%, var(--reader-line));
  background: rgba(255, 253, 247, .82);
}
.reader-topbar-audio .picto { width: 1.15rem; height: 1.15rem; }
.reader-topbar-actions > .reader-aa-button { font-size: 1.25rem; }
.reader-topbar-status {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding-inline: .18rem;
  color: var(--reader-muted);
  font: 700 .62rem/1 var(--font-ui);
}
.reader-topbar-title {
  min-width: 0;
  overflow: hidden;
  color: var(--reader-ink);
  font-family: var(--font-display);
  font-size: calc(.76rem * var(--reader-font-scale));
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.15rem);
  transition: opacity 140ms ease, transform 140ms ease;
}
.scripture-reader-room[data-reader-chapter-context="visible"] .reader-topbar-title { opacity: 1; transform: none; }
.reader-topbar-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--reader-line) 72%, transparent);
}
.reader-topbar-progress b { min-width: .42rem; display: block; height: 100%; background: var(--reader-gold); }
.reader-aa-button { min-width: 2.75rem; padding: .25rem; color: var(--reader-gold); font: 500 1.45rem/1 var(--font-display); }
.reader-panel-trigger {
  appearance: none;
  width: 2.75rem;
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .42rem;
  border: 1px solid var(--reader-line);
  border-radius: 50%;
  background: rgba(255, 253, 247, .6);
  color: var(--reader-muted);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}
.reader-panel-trigger .picto { width: 1.25rem; height: 1.25rem; color: var(--reader-gold); }
.reader-panel-trigger:hover { border-color: color-mix(in srgb, var(--reader-gold) 42%, var(--reader-line)); background: rgba(255, 253, 247, .82); color: var(--reader-ink); }
.reader-panel-trigger[aria-expanded="true"] {
  border-color: var(--reader-gold);
  background: color-mix(in srgb, var(--reader-gold-soft) 22%, var(--reader-paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--reader-gold) 30%, transparent);
  color: var(--reader-ink);
}
.reader-panel-trigger:active { transform: scale(.95); }
.reader-panel-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 48%, transparent); outline-offset: 3px; }
.reader-circle-trigger { text-decoration: none; }
.reader-chapter-bookmark { appearance: none; border: 0; color: var(--reader-muted); cursor: pointer; }
.reader-chapter-bookmark .picto { width: 1.3rem; height: 1.3rem; }
.reader-chapter-bookmark.is-active { color: var(--reader-gold); }

.scripture-reader-layout {
  width: min(100%, 92rem);
  min-height: calc(100dvh - 4.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  margin-inline: auto;
  border-inline: 1px solid var(--reader-line);
}
.scripture-reader-layout[data-active-panel="marks"] { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }

.reader-reading-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 253, 248, .58);
}

.reader-chapter-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(11rem, 19vw, 17rem);
  overflow: hidden;
  opacity: .96;
  pointer-events: none;
  mask-image: linear-gradient(#000 0%, #000 56%, transparent 100%);
  animation: reader-art-in 240ms ease-out both;
}
.reader-chapter-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--reader-ivory) 100%); }
.reader-chapter-art picture,
.reader-chapter-art img { width: 100%; height: 100%; display: block; }
.reader-chapter-art img { object-fit: cover; object-position: 50% 73%; filter: contrast(1.12) saturate(1.06); mix-blend-mode: multiply; }

.reader-chapter {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(3rem, 9vw, 8rem)), var(--reader-measure));
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6.5rem) 0 5rem;
}

.reader-chapter-heading { position: relative; margin-bottom: 2rem; text-align: center; animation: reader-content-in 220ms 30ms cubic-bezier(.2,.8,.2,1) both; }
.reader-chapter-readers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  margin: 0 0 .58rem;
  color: var(--reader-muted);
  font: 700 .71rem/1.25 var(--font-ui);
  letter-spacing: .025em;
}
.reader-chapter-readers .picto { width: 1.08rem; height: 1.08rem; }
.reader-chapter-readers.is-exact > span { color: var(--reader-gold); }
.reader-chapter-heading h1 { margin: 0; font: 650 clamp(2.1rem, 4vw, 3.25rem)/1.05 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.reader-mobile-progress { display: none; }

.reader-resume {
  min-height: 2.75rem;
  display: block;
  margin: 0 auto 1.25rem;
  padding: .6rem 1rem;
  border: 1px solid var(--reader-line);
  border-radius: 999px;
  background: var(--reader-paper);
  color: var(--reader-gold);
  cursor: pointer;
}

.reader-welcome-card {
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  border: 1px solid var(--reader-line);
  border-radius: .65rem;
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 .75rem 2rem rgba(112, 76, 20, .045);
  animation: reader-content-in 220ms 55ms cubic-bezier(.2,.8,.2,1) both;
}
.reader-welcome-card summary { min-height: 6.75rem; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; list-style: none; cursor: pointer; }
.reader-welcome-card summary::-webkit-details-marker { display: none; }
.reader-welcome-star { color: var(--reader-gold); }
.reader-welcome-star .picto { width: 2.1rem; height: 2.1rem; }
.reader-welcome-card summary > span:nth-child(2) { display: grid; gap: .26rem; }
.reader-welcome-card small { color: var(--reader-gold); font: 700 .65rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reader-welcome-card strong { font: 650 1.18rem/1.25 var(--font-display); }
.reader-welcome-card em { color: var(--reader-muted); font: 500 .96rem/1.45 var(--font-display); }
.reader-welcome-card .scripture-summary { margin: 0; padding: 0; border: 0; color: var(--reader-muted); text-align: start; }
.reader-historical-context { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid var(--reader-line); color: var(--reader-muted); font: 500 .78rem/1.45 var(--font-ui); }
.reader-welcome-card summary > i { color: var(--reader-gold); font-style: normal; transition: transform .2s ease; }
.reader-welcome-card:not([open]) summary > i { transform: rotate(180deg); }
.reader-welcome-card:not([open]) em { display: none; }
.reader-welcome-card:not([open]) .reader-historical-context { display: none; }

.scripture-reader-room .reader-verses .scripture-verse {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .75rem;
  margin: 0 0 calc(1.05rem * var(--reader-font-scale));
  padding: .36rem .5rem .42rem 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--reader-ink);
  font-family: var(--font-display);
  font-size: calc(clamp(1.18rem, 1.5vw, 1.34rem) * var(--reader-font-scale));
  font-weight: 500;
  line-height: var(--reader-leading);
  box-shadow: none;
}
.scripture-reader-room .reader-verses { animation: reader-text-in 180ms 80ms ease-out both; }
.scripture-reader-room .reader-verses .scripture-verse-line { display: block; }
.scripture-reader-room .reader-verses .scripture-verse-line--continuation { padding-inline-start: 1.25em; }
.is-reader-panel-entering { animation: reader-panel-in 160ms cubic-bezier(.2,.8,.2,1) both !important; }
.is-reader-feedback-entering { animation: reader-feedback-in 180ms ease-out both !important; }
.scripture-reader-room .reader-verses .scripture-verse-n { padding-top: .48em; color: #918a7d; font: 500 .72em/1 var(--font-display); text-align: right; vertical-align: baseline; }
.scripture-reader-room .reader-verses .scripture-verse::before {
  content: "";
  position: absolute;
  inset-inline-start: -.52rem;
  top: .63em;
  width: .13rem;
  height: 1.35em;
  border-radius: 999px;
  background: var(--reader-gold);
  box-shadow: 0 .12rem .45rem rgba(128, 83, 12, .16);
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.scripture-reader-room .reader-verses .scripture-verse:is(.is-reading-anchor, .is-speaking)::before { opacity: .76; }
.scripture-reader-room .reader-verses .scripture-verse:is(.is-reading-anchor, .is-speaking) .scripture-verse-n { color: var(--reader-gold); }
.scripture-reader-room .reader-verses .scripture-verse.is-speaking::before { height: calc(100% - 1.1em); opacity: 1; }
.scripture-reader-room .reader-verses .scripture-verse.is-focus { margin-inline: -.6rem; padding: .72rem .75rem .78rem .6rem; background: linear-gradient(90deg, rgba(232, 203, 142, .22), rgba(246, 222, 170, .1)); }
.scripture-reader-room .reader-verses .scripture-verse.is-focus [data-scripture-verse-text] { background: none; box-shadow: none; }
.scripture-reader-room .scripture-body ::selection { background: rgba(222, 174, 76, .34); color: var(--reader-ink); }
.scripture-reader-room ::highlight(scripture-profile-highlights) { background: rgba(229, 190, 111, .32); color: var(--reader-ink); text-decoration-color: var(--reader-gold); }

.reader-chapter-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 2.25rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--reader-line);
}
.reader-chapter-navigation-link {
  min-width: 0;
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .75rem .9rem;
  border: 1px solid var(--reader-line);
  border-radius: .75rem;
  background: rgba(255, 253, 247, .72);
  color: var(--reader-ink);
  text-decoration: none;
  box-shadow: 0 .35rem 1rem rgba(112, 76, 20, .04);
}
.reader-chapter-navigation-link.is-next { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.reader-chapter-navigation-link > span:first-child,
.reader-chapter-navigation-link.is-next > span:last-child { color: var(--reader-gold); font-size: 1.2rem; }
.reader-chapter-navigation-link > span:not([aria-hidden]) { min-width: 0; display: grid; gap: .18rem; }
.reader-chapter-navigation-link small { color: var(--reader-muted); font: 750 .66rem/1.2 var(--font-ui); }
.reader-chapter-navigation-link strong { overflow-wrap: anywhere; font: 650 calc(1rem * var(--reader-font-scale))/1.2 var(--font-display); }
.reader-chapter-navigation-link:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--reader-gold) 52%, var(--reader-line)); background: var(--reader-paper); }
.reader-chapter-navigation-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 42%, transparent); outline-offset: 3px; }

.scripture-reader-room .reader-source-card {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--reader-line);
  border-radius: .65rem;
  background: rgba(255, 253, 248, .7);
  text-align: start;
}
.reader-source-card p { margin: 0; color: var(--reader-gold); font: 700 .65rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reader-source-card > strong { font: 650 1.12rem/1.2 var(--font-display); }
.reader-source-card a { min-height: 2.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; color: var(--reader-ink); font-size: .88rem; line-height: 1.4; text-decoration-color: var(--reader-gold-soft); text-underline-offset: .22em; }
.reader-source-card a b { color: var(--reader-gold); }

.reader-chapter-quiz {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 34%, var(--reader-line));
  border-radius: .85rem;
  background:
    radial-gradient(circle at 7% 12%, color-mix(in srgb, var(--reader-gold-soft) 18%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--reader-cream) 48%, var(--reader-paper)), color-mix(in srgb, var(--reader-paper) 92%, transparent));
  box-shadow: inset 0 1px rgba(255, 255, 255, .58), 0 .65rem 1.8rem color-mix(in srgb, var(--reader-ink) 6%, transparent);
}
.reader-chapter-quiz::after { content: ""; position: absolute; inset: .42rem; border: 1px solid color-mix(in srgb, var(--reader-gold-soft) 16%, transparent); border-radius: .62rem; pointer-events: none; }
.reader-chapter-quiz-emblem { width: 3.1rem; height: 3.1rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--reader-gold) 44%, var(--reader-line)); border-radius: 50%; background: color-mix(in srgb, var(--reader-paper) 78%, var(--reader-gold-soft)); color: var(--reader-gold); box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--reader-gold) 12%, transparent); }
.reader-chapter-quiz-emblem .picto { width: 1.55rem; height: 1.55rem; }
.reader-chapter-quiz-copy { min-width: 0; display: grid; gap: .28rem; }
.reader-chapter-quiz-copy > p { margin: 0; color: var(--reader-gold); font: 800 .64rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reader-chapter-quiz-copy h2 { margin: 0; color: var(--reader-ink); font: 650 calc(clamp(1.18rem, 1.7vw, 1.42rem) * var(--reader-font-scale))/1.18 var(--font-display); letter-spacing: -.012em; }
.reader-chapter-quiz-copy > span { color: var(--reader-muted); font: 500 calc(.82rem * var(--reader-font-scale))/1.48 var(--font-ui); }
.reader-chapter-quiz-copy > small { color: var(--reader-gold); font: 700 .66rem/1.35 var(--font-ui); }
.reader-chapter-quiz-action { position: relative; z-index: 1; min-width: 10.5rem; display: grid; justify-items: stretch; gap: .48rem; }
.reader-chapter-quiz-form { margin: 0; }
.reader-chapter-quiz-button { width: 100%; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .82rem; border: 1px solid color-mix(in srgb, var(--reader-gold) 56%, transparent); border-radius: .62rem; background: linear-gradient(135deg, color-mix(in srgb, var(--reader-gold) 88%, #f4c76f), var(--reader-gold)); color: var(--reader-paper); box-shadow: 0 .38rem .9rem color-mix(in srgb, var(--reader-gold) 18%, transparent); font: 800 .74rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer; transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out; }
.reader-chapter-quiz-button b { font-size: 1rem; font-weight: 500; }
.reader-chapter-quiz-button:is(:hover, :focus-visible) { filter: saturate(1.06) brightness(1.03); box-shadow: 0 .5rem 1rem color-mix(in srgb, var(--reader-gold) 24%, transparent); transform: translateY(-1px); }
.reader-chapter-quiz-button:active { transform: translateY(0); }
.reader-chapter-quiz-button:focus-visible { outline: 2px solid var(--reader-ink); outline-offset: 3px; }
.reader-chapter-quiz-button.is-secondary { border-color: var(--reader-line); background: color-mix(in srgb, var(--reader-paper) 80%, transparent); color: var(--reader-ink); box-shadow: none; }
.reader-chapter-quiz-lock { display: flex; align-items: center; gap: .35rem; color: var(--reader-muted); font: 650 .65rem/1.35 var(--font-ui); }
.reader-chapter-quiz-lock .picto { flex: 0 0 auto; width: .9rem; height: .9rem; }
.reader-chapter-quiz.is-locked .reader-chapter-quiz-emblem { color: var(--reader-muted); box-shadow: none; }

.reader-video-links { display: grid; gap: .75rem; margin-top: 1.5rem; }
.reader-video-links > header { display: grid; gap: .25rem; padding: .25rem .1rem; }
.reader-video-links > header p { margin: 0; color: var(--reader-gold); font: 800 .65rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reader-video-links > header h2 { margin: 0; font: 650 1.35rem/1.2 var(--font-display); }
.reader-video-links > header span { color: var(--reader-muted); font-size: .78rem; line-height: 1.45; }
.reader-video-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .6rem; border: 1px solid var(--reader-line); border-radius: .65rem; background: var(--reader-paper); }
.reader-video-card > button { min-width: 0; min-height: 3.5rem; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .75rem; padding: .25rem; border: 0; background: transparent; color: var(--reader-ink); text-align: left; cursor: pointer; }
.reader-video-card > button > span:first-child { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgba(183, 122, 19, .12); color: var(--reader-gold); }
.reader-video-card .picto { width: 1.2rem; height: 1.2rem; }
.reader-video-card > button > span:last-child { min-width: 0; display: grid; gap: .2rem; }
.reader-video-card strong { overflow-wrap: anywhere; font: 650 .95rem/1.35 var(--font-display); }
.reader-video-card small { color: var(--reader-gold); font-size: .68rem; }
.reader-video-card > a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .3rem .5rem; color: var(--reader-muted); font-size: .7rem; text-underline-offset: .2em; }

.reader-audio-toggle {
  --picto-accent: var(--reader-gold);
  appearance: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .42rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--reader-ink) 72%, var(--reader-gold));
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transition: color 150ms ease, filter 150ms ease, transform 150ms ease;
}
.reader-audio-toggle > span { width: 100%; height: 100%; display: grid; place-items: center; }
.reader-audio-toggle > span[hidden] { display: none; }
.reader-audio-toggle .picto { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(255, 252, 241, .72)); }
.reader-audio-toggle:is(:hover, :focus-visible) { color: color-mix(in srgb, var(--reader-gold) 78%, var(--reader-ink)); filter: drop-shadow(0 .2rem .45rem rgba(119, 78, 12, .18)); }
.scripture-reader-room .reader-audio-toggle:focus-visible { outline: none; }
.scripture-reader-room .reader-audio-toggle:focus-visible::after { content: ""; position: absolute; right: .62rem; bottom: .18rem; left: .62rem; height: 2px; border-radius: 999px; background: color-mix(in srgb, var(--reader-gold) 62%, transparent); }
.reader-audio-toggle:active { transform: scale(.94); }
.reader-audio-toggle:disabled { opacity: .38; cursor: not-allowed; filter: none; }
.scripture-reader-room[data-scripture-audio-state="playing"] .reader-audio-toggle { color: color-mix(in srgb, var(--reader-gold) 78%, var(--reader-ink)); filter: drop-shadow(0 0 .55rem rgba(190, 131, 29, .34)); }
.reader-companion {
  position: sticky;
  top: 4.8rem;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-height: calc(100dvh - 4.8rem);
  max-height: calc(100dvh - 4.8rem);
  overflow: auto;
  padding: clamp(1.4rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.5rem) 3rem;
  border-left: 1px solid var(--reader-line);
  background: var(--reader-paper);
  scrollbar-width: thin;
  scrollbar-color: var(--reader-gold-soft) transparent;
}
.reader-companion[hidden] { display: none; }
.reader-companion-section[hidden] { display: none; }
.reader-companion-heading { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--reader-line); }
.reader-companion-heading-copy { min-width: 0; }
.reader-companion-heading-copy > p { margin: 0 0 .35rem; color: var(--reader-gold); font: 700 .66rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reader-companion-heading h2 { margin: 0; font: 650 1.55rem/1.1 var(--font-display); }
.reader-companion-heading-copy > span { display: block; margin-top: .55rem; color: var(--reader-muted); font-size: .85rem; line-height: 1.45; }
.reader-companion-heading-copy > small { display: block; margin-top: .75rem; color: var(--reader-gold); font-size: .72rem; line-height: 1.35; }
.reader-marks-chapter-bookmark {
  width: 100%;
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  padding: .58rem .72rem;
  border: 1px solid var(--reader-line);
  border-radius: .58rem;
  background: transparent;
  color: var(--reader-muted);
  font-size: .75rem;
  font-weight: 750;
  text-align: start;
}
.reader-marks-chapter-bookmark:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--reader-gold) 58%, var(--reader-line)); background: rgba(227, 194, 128, .08); }
.reader-marks-chapter-bookmark.is-active { border-color: rgba(183, 122, 19, .42); background: rgba(227, 194, 128, .11); }

.reader-marks-list { display: grid; gap: .9rem; margin-top: 1rem; }
.reader-chapter-history { display: grid; gap: .75rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--reader-line); border-radius: .65rem; background: linear-gradient(145deg, rgba(249, 238, 216, .7), rgba(255, 253, 248, .78)); }
.reader-chapter-history header { display: grid; gap: .2rem; }
.reader-chapter-history header p { margin: 0; color: var(--reader-gold); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reader-chapter-history h3 { margin: 0; font: 650 1.08rem/1.2 var(--font-display); }
.reader-chapter-history dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.reader-chapter-history dl div { min-width: 0; display: grid; gap: .15rem; padding: .55rem; border: 1px solid rgba(172, 124, 41, .16); border-radius: .45rem; background: rgba(255, 253, 248, .65); }
.reader-chapter-history dt { color: var(--reader-muted); font-size: .59rem; line-height: 1.25; }
.reader-chapter-history dd { margin: 0; color: var(--reader-gold); font: 700 .92rem/1.2 var(--font-display); }
.reader-chapter-history > p { display: grid; gap: .15rem; margin: 0; color: var(--reader-muted); font-size: .68rem; line-height: 1.4; }
.reader-history-memory,
.reader-mark-taxonomy { display: flex; flex-wrap: wrap; gap: .3rem; }
.reader-history-memory span,
.reader-mark-taxonomy span { max-width: 100%; padding: .24rem .42rem; overflow-wrap: anywhere; border-radius: 999px; background: rgba(183, 122, 19, .09); color: var(--reader-gold); font-size: .62rem; font-weight: 700; }
.reader-mark-filters { display: flex; gap: .35rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; }
.reader-mark-filters button { min-height: 2.75rem; padding: .35rem .65rem; border: 1px solid var(--reader-line); border-radius: 999px; background: var(--reader-paper); color: var(--reader-muted); font-size: .68rem; white-space: nowrap; cursor: pointer; }
.reader-mark-filters button[aria-pressed="true"] { border-color: var(--reader-gold); background: rgba(183, 122, 19, .1); color: var(--reader-gold); font-weight: 800; }
.reader-mark-card { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--reader-line); border-radius: .65rem; background: rgba(255, 253, 248, .8); }
.reader-mark-card.is-new { animation: reader-mark-in .32s ease both; }
.reader-mark-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--reader-gold); font-size: .72rem; }
.reader-mark-card blockquote { margin: 0; color: var(--reader-ink); font: 600 .92rem/1.45 var(--font-display); }
.reader-mark-card > p { margin: 0; color: var(--reader-muted); font-size: .84rem; line-height: 1.45; }
.reader-mark-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.reader-text-action { appearance: none; width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; padding: .35rem 0; border: 0; background: transparent; color: var(--reader-gold); font-size: .76rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.reader-empty-state { display: grid; justify-items: center; gap: .8rem; padding: 2rem 1rem; color: var(--reader-muted); text-align: center; }
.reader-empty-state > span { width: 2.5rem; height: 2.5rem; color: var(--reader-gold); }
.reader-empty-state .picto { width: 100%; height: 100%; }
.reader-empty-state p { margin: 0; font: 500 .92rem/1.55 var(--font-display); }

.circle-mode-notice { padding: .85rem 1rem; border: 1px solid var(--reader-line); border-radius: .55rem; background: rgba(232, 204, 146, .14); color: var(--reader-muted); font-size: .82rem; line-height: 1.4; }
.circle-compose-status { margin: 0; padding: .65rem .75rem; border: 1px solid rgba(183, 122, 19, .24); border-radius: .5rem; background: rgba(239, 216, 166, .22); color: var(--reader-gold); font-size: .73rem; font-weight: 700; line-height: 1.4; }
.circle-compose-status[hidden] { display: none; }
.circle-compose-status.is-success { margin-bottom: .65rem; }
.circle-reply-form,
.circle-edit-form { display: grid; gap: .72rem; }
.circle-kind-options { min-width: 0; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; border: 0; }
.circle-kind-options label { cursor: pointer; }
.circle-kind-options input { position: absolute; opacity: 0; }
.circle-kind-options span { min-height: 2.5rem; display: flex; align-items: center; padding: .4rem .7rem; border: 1px solid var(--reader-line); border-radius: 999px; background: var(--reader-paper); color: var(--reader-muted); font-size: .72rem; }
.circle-kind-options input:checked + span { border-color: var(--reader-gold); color: var(--reader-gold); background: rgba(227, 194, 128, .18); font-weight: 750; }
.circle-kind-options input:focus-visible + span { outline: 3px solid rgba(183, 122, 19, .42); outline-offset: 2px; }
.is-circle-selection-context-entering { animation: circle-selection-context-in 140ms ease-out both; }
.circle-message-field { display: grid; gap: .36rem; }
.circle-message-field > span { color: var(--reader-ink); font-size: .72rem; font-weight: 750; }
.circle-inline-editor textarea,
.circle-inline-editor input,
.circle-inline-editor select,
.circle-reply-composer textarea { width: 100%; min-height: 3rem; padding: .78rem .82rem; border: 1px solid var(--reader-line); border-radius: .58rem; background: rgba(255, 254, 249, .92); color: var(--reader-ink); font: 500 .94rem/1.52 var(--font-ui); resize: vertical; transition: border-color 120ms ease, box-shadow 120ms ease; }
.circle-message-field textarea { min-height: 6.2rem; max-height: 13rem; overflow-y: hidden; }
.circle-inline-editor .circle-message-field textarea { min-height: 5.35rem; }
.circle-inline-editor textarea:focus,
.circle-inline-editor input:focus,
.circle-inline-editor select:focus,
.circle-reply-composer textarea:focus { border-color: rgba(183, 122, 19, .72); box-shadow: 0 0 0 3px rgba(227, 194, 128, .18); }
.circle-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.circle-compose-foot > span { color: var(--reader-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.circle-compose-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.circle-composer-secondary,
.circle-submit { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .5rem .82rem; border-radius: .5rem; font: 750 .73rem/1.1 var(--font-ui); cursor: pointer; }
.circle-composer-secondary { border: 1px solid transparent; background: transparent; color: var(--reader-gold); }
.circle-composer-secondary:hover { border-color: rgba(183, 122, 19, .22); background: rgba(227, 194, 128, .09); }
.circle-submit { border: 1px solid var(--reader-gold); background: var(--reader-gold); color: #fffaf0; }
.circle-submit:disabled { border-color: rgba(119, 113, 102, .2); background: rgba(119, 113, 102, .16); color: rgba(70, 63, 52, .58); cursor: not-allowed; }
[data-circle-composer][aria-busy="true"] .circle-submit,
[data-circle-composer][aria-busy="true"] .reader-circle-submit { opacity: .82; }
.is-over-limit [data-message-counter] { color: #9a3e2d; font-weight: 800; }
textarea[aria-invalid="true"] { border-color: #9a3e2d !important; outline: 2px solid rgba(154, 62, 45, .16); }
.circle-compose-error { margin: -.2rem 0 0; color: #9a3e2d; font-size: .75rem; line-height: 1.42; }
.circle-compose-error[hidden] { display: none; }

.circle-message { position: relative; display: grid; gap: .7rem; padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--reader-line); }
.circle-message.is-circle-message-new,
.circle-message.is-circle-message-updated { margin-inline: -.45rem; padding-inline: .45rem; border-radius: .65rem; animation: circle-message-confirm 280ms ease-out both; }
.circle-message.is-circle-message-new { --circle-message-flash: rgba(232, 203, 142, .28); }
.circle-message.is-circle-message-updated { --circle-message-flash: rgba(223, 207, 172, .28); }
.circle-message.is-reply { margin-left: 1.5rem; padding-left: .9rem; border-left: 2px solid rgba(188, 136, 48, .22); }
.circle-message.is-reply.is-circle-message-new,
.circle-message.is-reply.is-circle-message-updated { margin-left: 1.05rem; }
.circle-message-author { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.circle-avatar { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--reader-line); border-radius: 50%; background: var(--reader-cream); color: var(--reader-gold); }
.circle-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.72) saturate(.78) contrast(.96); }
.circle-avatar .picto { width: 1.35rem; height: 1.35rem; }
.circle-message-author > span:nth-child(2) { display: grid; gap: .12rem; }
.circle-message-author strong { font: 700 .84rem/1.2 var(--font-ui); }
.circle-message-author small { color: var(--reader-muted); font-size: .68rem; }
.circle-message-body { margin: 0; overflow-wrap: anywhere; font: 500 .96rem/1.55 var(--font-display); }
.circle-message-anchor { width: fit-content; margin: 0; padding: .25rem .5rem; border-radius: 999px; background: rgba(224, 187, 110, .16); color: var(--reader-gold); font-size: .7rem; }
.circle-message-passage { display: grid; gap: .24rem; margin: 0; padding: .62rem .72rem; border-left: 2px solid rgba(183, 122, 19, .62); border-radius: 0 .45rem .45rem 0; background: rgba(237, 215, 168, .13); }
.circle-message-passage > p { max-height: 8.3rem; margin: 0; overflow: auto; overflow-wrap: anywhere; color: var(--reader-ink); font: italic 500 .86rem/1.48 var(--font-display); scrollbar-color: var(--reader-gold-soft) transparent; }
.circle-message-menu { position: relative; }
.circle-message-menu summary { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; list-style: none; color: var(--reader-muted); cursor: pointer; }
.circle-message-menu summary::-webkit-details-marker { display: none; }
.circle-message-menu:not([open]) > div { display: none; }
.circle-message-menu > div { position: absolute; top: 2.6rem; right: 0; z-index: 5; min-width: 10rem; display: grid; padding: .35rem; border: 1px solid var(--reader-line); border-radius: .55rem; background: var(--reader-paper); box-shadow: 0 .75rem 2rem rgba(72, 51, 19, .12); }
.circle-message-menu button,
.circle-message-menu form { margin: 0; }
.circle-message-menu button { width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 0; background: transparent; color: var(--reader-ink); text-align: left; cursor: pointer; }
.circle-inline-editor { padding-top: .25rem; }
.circle-inline-editor.is-circle-editor-open { animation: circle-composer-open 180ms ease-out both; }
.circle-moderation-form form { display: grid; gap: .45rem; }
.circle-moderation-form label { color: var(--reader-muted); font-size: .72rem; font-weight: 700; }
.circle-moderation-form input[type="submit"] { min-height: 2.75rem; border: 0; border-radius: .45rem; background: var(--reader-gold); color: #fffaf0; font-weight: 750; }
.circle-reply-composer { display: grid; gap: .55rem; margin-top: .2rem; padding-top: .8rem; border-top: 1px solid rgba(172, 124, 41, .15); }
.circle-reply-heading { width: fit-content; min-height: 2.25rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--reader-gold); }
.circle-reply-heading .picto { width: 1rem; height: 1rem; }
.circle-reply-heading h3 { margin: 0; font: 700 .76rem/1.2 var(--font-ui); }
.circle-reply-body { display: grid; gap: .62rem; padding: .65rem .75rem .75rem; border: 1px solid rgba(172, 124, 41, .18); border-radius: .58rem; background: rgba(250, 242, 225, .48); }
.circle-reply-body { animation: circle-composer-open 160ms ease-out both; }

.circle-vote-card { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(180, 121, 22, .45); border-radius: .7rem; background: linear-gradient(145deg, rgba(250, 239, 215, .92), rgba(255, 252, 245, .95)); box-shadow: inset 3px 0 var(--reader-gold); }
.circle-vote-kicker { margin: 0; color: var(--reader-gold); font: 800 .65rem/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.circle-vote-card h3 { margin: 0; font: 650 1.08rem/1.25 var(--font-display); }
.circle-vote-card > p { margin: 0; color: var(--reader-muted); font-size: .78rem; line-height: 1.45; }
.circle-vote-card .circle-vote-reason { width: fit-content; padding: .35rem .55rem; border-radius: 999px; background: rgba(183, 122, 19, .1); color: var(--reader-gold); font-weight: 750; }
.circle-vote-message { display: grid; gap: .38rem; padding: .82rem .88rem; border: 1px solid rgba(172, 124, 41, .24); border-radius: .58rem; background: rgba(255, 253, 248, .72); }
.circle-vote-message-label { margin: 0; color: var(--reader-gold); font: 800 .62rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.circle-vote-message blockquote { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--reader-ink); font: 500 .95rem/1.55 var(--font-display); }
.circle-vote-message .circle-message-passage { margin-top: .18rem; white-space: normal; }
.circle-vote-message .circle-message-passage > p { white-space: normal; font-size: .84rem; }
.circle-vote-card .circle-own-vote { color: var(--reader-ink); font-weight: 750; }
.circle-vote-delete { min-height: 2.75rem; padding: .4rem 0; border: 0; background: transparent; color: #8a4839; font-size: .72rem; font-weight: 750; cursor: pointer; }
.circle-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.circle-vote-actions button { min-height: 3rem; padding: .55rem; border: 1px solid var(--reader-line); border-radius: .5rem; background: var(--reader-paper); color: var(--reader-ink); font-size: .72rem; font-weight: 750; cursor: pointer; }
.circle-vote-actions button.is-selected { border-color: var(--reader-gold); background: var(--reader-gold); color: #fffaf0; }
.circle-live-results { display: grid; gap: .42rem; padding-top: .15rem; }
.circle-live-heading,
.circle-result-row { display: flex; justify-content: space-between; gap: .75rem; font-size: .69rem; }
.circle-live-heading span,
.circle-result-row { color: var(--reader-muted); }
.circle-result-track { height: .35rem; overflow: hidden; border-radius: 999px; background: rgba(131, 112, 78, .14); }
.circle-result-track i { display: block; height: 100%; border-radius: inherit; background: var(--reader-gold); transition: width .3s ease; }
.circle-result-track:nth-of-type(2) i { background: #827763; }
.circle-tombstone { margin: 0; padding: .85rem 1rem; border: 1px dashed var(--reader-line); border-radius: .55rem; color: var(--reader-muted); font: italic 500 .84rem/1.4 var(--font-display); }

.scripture-reader-room .scripture-selection-bar {
  position: fixed;
  z-index: 100;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 3.35rem;
  display: flex;
  align-items: stretch;
  padding: .3rem;
  border: 1px solid rgba(171, 114, 18, .42);
  border-radius: .65rem;
  background: rgba(255, 251, 241, .98);
  color: var(--reader-ink);
  box-shadow: 0 1rem 2.4rem rgba(69, 48, 16, .2);
}
.scripture-reader-room .scripture-selection-bar[hidden] { display: none; }
.scripture-reader-room .scripture-selection-bar:not([hidden]) { animation: reader-toolbar-in 180ms cubic-bezier(.2,.8,.2,1) both; }
.scripture-selection-bar button { min-width: 4.7rem; min-height: 2.75rem; display: grid; grid-template-columns: 1.1rem auto; align-items: center; justify-content: center; gap: .35rem; padding: .4rem .55rem; border: 0; border-right: 1px solid var(--reader-line); background: transparent; color: var(--reader-ink); font-size: calc(.875rem * var(--reader-font-scale)); line-height: 1.2; cursor: pointer; }
.scripture-selection-bar button:last-child { border-right: 0; }
.scripture-selection-bar .picto { width: 1.05rem; height: 1.05rem; color: var(--reader-gold); }
.reader-selection-status { position: fixed; left: 50%; bottom: 1.25rem; z-index: 120; margin: 0; padding: .7rem 1rem; border: 1px solid var(--reader-line); border-radius: 999px; background: var(--reader-paper); color: var(--reader-gold); box-shadow: 0 .7rem 2rem rgba(75, 51, 14, .15); font: 700 .78rem/1.2 var(--font-ui); transform: translateX(-50%); }
.reader-selection-status.is-error { color: #9a3e2d; }
.reader-undo-banner { position: fixed; left: 50%; bottom: 1.25rem; z-index: 121; display: flex; align-items: center; gap: .8rem; max-width: calc(100vw - 2rem); padding: .55rem .65rem .55rem 1rem; border: 1px solid var(--reader-line); border-radius: 999px; background: var(--reader-paper); color: var(--reader-ink); box-shadow: 0 .7rem 2rem rgba(75, 51, 14, .16); font-size: .76rem; transform: translateX(-50%); }
.reader-undo-banner[hidden] { display: none; }
.reader-undo-banner button { min-height: 2.75rem; padding: .35rem .7rem; border: 0; border-radius: 999px; background: rgba(183, 122, 19, .12); color: var(--reader-gold); font-weight: 800; cursor: pointer; }

.reader-note-dialog,
.reader-settings-dialog,
.reader-video-dialog,
.reader-tools-dialog { width: min(calc(100vw - 2rem), 46rem); max-height: min(88dvh, 44rem); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--reader-line); border-radius: .8rem; background: var(--reader-paper); color: var(--reader-ink); box-shadow: 0 1.5rem 5rem rgba(71, 49, 18, .24); }
.reader-note-dialog { width: min(calc(100vw - 2rem), 39rem); }
.reader-settings-dialog { width: min(calc(100vw - 2rem), 31rem); }
.reader-note-dialog::backdrop,
.reader-settings-dialog::backdrop,
.reader-video-dialog::backdrop,
.reader-tools-dialog::backdrop,
.scripture-reader-room .scripture-share-dialog::backdrop { background: rgba(66, 50, 26, .34); backdrop-filter: blur(4px); }
.reader-note-dialog[open],
.reader-settings-dialog[open],
.reader-video-dialog[open],
.reader-tools-dialog[open],
.scripture-reader-room .scripture-share-dialog[open] { animation: reader-dialog-in 210ms cubic-bezier(.2,.8,.2,1) both; }
.reader-note-dialog[open]::backdrop,
.reader-settings-dialog[open]::backdrop,
.reader-video-dialog[open]::backdrop,
.reader-tools-dialog[open]::backdrop,
.scripture-reader-room .scripture-share-dialog[open]::backdrop { animation: reader-backdrop-in 170ms ease-out both; }
.reader-note-dialog.is-reader-dialog-closing,
.reader-settings-dialog.is-reader-dialog-closing,
.reader-video-dialog.is-reader-dialog-closing,
.reader-tools-dialog.is-reader-dialog-closing,
.scripture-reader-room .scripture-share-dialog.is-reader-dialog-closing { animation: reader-dialog-out 150ms ease-in both !important; }
.reader-note-dialog.is-reader-dialog-closing::backdrop,
.reader-settings-dialog.is-reader-dialog-closing::backdrop,
.reader-video-dialog.is-reader-dialog-closing::backdrop,
.reader-tools-dialog.is-reader-dialog-closing::backdrop,
.scripture-reader-room .scripture-share-dialog.is-reader-dialog-closing::backdrop { animation: reader-backdrop-out 150ms ease-in both !important; }
.reader-note-dialog > section,
.reader-settings-dialog > section,
.reader-tools-dialog > section { display: grid; gap: 1rem; padding: 1.25rem; }
.reader-note-dialog header,
.reader-settings-dialog header,
.reader-tools-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reader-note-dialog header p,
.reader-tools-dialog header p { margin: 0 0 .2rem; color: var(--reader-gold); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reader-note-dialog h2,
.reader-settings-dialog h2,
.reader-tools-dialog h2 { margin: 0; font: 650 1.45rem/1.15 var(--font-display); }
.reader-note-dialog header > button,
.reader-settings-dialog header > button,
.reader-tools-dialog header > button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--reader-cream); color: var(--reader-ink); font-size: 1.4rem; cursor: pointer; }
.reader-note-dialog blockquote { margin: 0; padding: .8rem 1rem; border-left: 2px solid var(--reader-gold); background: rgba(234, 207, 152, .12); color: var(--reader-muted); font: italic 500 .9rem/1.45 var(--font-display); }
.reader-note-dialog textarea,
.reader-note-dialog input[type="text"],
.reader-note-dialog select { width: 100%; min-height: 2.75rem; padding: .72rem .8rem; border: 1px solid var(--reader-line); border-radius: .55rem; background: #fffef9; color: var(--reader-ink); font: 500 .9rem/1.45 var(--font-ui); }
.reader-note-dialog textarea { font: 500 1rem/1.5 var(--font-display); resize: vertical; }
.reader-note-dialog > section > p { margin: 0; color: var(--reader-muted); font-size: .75rem; line-height: 1.4; }
.reader-note-dialog fieldset { min-width: 0; display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; }
.reader-note-dialog legend,
.reader-editor-field > span { margin-bottom: .35rem; color: var(--reader-ink); font-size: .72rem; font-weight: 800; }
.reader-editor-field { min-width: 0; display: grid; }
.reader-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.reader-mark-colors > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.reader-mark-colors label { position: relative; cursor: pointer; }
.reader-mark-colors input { position: absolute; opacity: 0; }
.reader-mark-colors label > span { width: 2.75rem; height: 2.75rem; display: block; border: 2px solid var(--reader-paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--reader-line); }
.reader-mark-colors label > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reader-mark-colors input:checked + span { box-shadow: 0 0 0 2px var(--reader-gold), inset 0 0 0 3px var(--reader-paper); }
.reader-mark-colors .is-gold { background: #e6c989; }
.reader-mark-colors .is-clay { background: #d5a78b; }
.reader-mark-colors .is-sage { background: #c8c2a0; }
.reader-mark-colors .is-rose { background: #d7aaa1; }
.reader-bookmark-toggle { min-height: 2.75rem; display: flex; align-items: center; gap: .65rem; color: var(--reader-ink); font-size: .76rem; font-weight: 750; }
.reader-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.reader-tool-actions > button { min-height: 4.5rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .7rem; border: 1px solid var(--reader-line); border-radius: .6rem; background: rgba(255, 253, 248, .78); color: var(--reader-ink); text-align: start; cursor: pointer; }
.reader-tool-actions .picto { width: 1.6rem; height: 1.6rem; color: var(--reader-gold); }
.reader-tool-actions > button > span { display: grid; gap: .15rem; }
.reader-tool-actions strong { font-size: .78rem; }
.reader-tool-actions small { color: var(--reader-muted); font-size: .65rem; line-height: 1.35; }
.reader-tool-result { margin: 0; padding: .75rem; border: 1px solid var(--reader-line); border-radius: .5rem; background: var(--reader-cream); color: var(--reader-muted); font-size: .76rem; line-height: 1.45; }
.reader-tool-result[hidden] { display: none; }
.reader-primary-action { min-height: 3rem; border: 0; border-radius: .55rem; background: var(--reader-gold); color: #fffaf0; font-weight: 800; cursor: pointer; }
.reader-settings-dialog fieldset { min-width: 0; display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; }
.reader-settings-dialog legend { margin-bottom: .55rem; font-size: .75rem; font-weight: 800; }
.reader-setting-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.reader-setting-options label { cursor: pointer; }
.reader-setting-options input { position: absolute; opacity: 0; }
.reader-setting-options span { min-height: 2.75rem; display: flex; align-items: center; padding: .45rem .7rem; border: 1px solid var(--reader-line); border-radius: .45rem; background: var(--reader-paper); color: var(--reader-muted); font-size: .72rem; }
.reader-setting-options input:checked + span { border-color: var(--reader-gold); background: rgba(229, 199, 139, .17); color: var(--reader-gold); font-weight: 800; }
.reader-settings-status { min-height: 1rem; margin: 0; color: var(--reader-gold); font-size: .72rem; text-align: center; }
.reader-settings-status[data-state="error"] { color: #9a3e2d; }
.scripture-reader-room :where(button, a, summary, input, textarea, select):focus-visible { outline: 3px solid rgba(183, 122, 19, .58); outline-offset: 3px; }
.reader-video-dialog > section { position: relative; min-height: 23rem; display: grid; place-items: center; padding: 1.2rem; }
.reader-video-dialog > section > form { position: absolute; top: .7rem; right: .7rem; z-index: 2; margin: 0; }
.reader-video-dialog > section > form button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--reader-line); border-radius: 50%; background: var(--reader-paper); color: var(--reader-ink); font-size: 1.4rem; cursor: pointer; }
.reader-video-consent { width: min(31rem, 100%); display: grid; justify-items: center; gap: .85rem; padding: 2.5rem 1rem 1rem; text-align: center; }
.reader-video-consent[hidden],
.reader-video-player[hidden] { display: none; }
.reader-video-consent > span { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: rgba(183, 122, 19, .12); color: var(--reader-gold); }
.reader-video-consent > p:first-of-type { margin: 0; color: var(--reader-gold); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.reader-video-consent h2 { margin: 0; font: 650 1.6rem/1.2 var(--font-display); }
.reader-video-consent h2 + p { margin: 0; color: var(--reader-muted); line-height: 1.55; }
.reader-video-consent .reader-primary-action { min-width: min(19rem, 100%); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; }
.reader-video-player { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .55rem; background: #211d16; }
.reader-video-player iframe { width: 100%; height: 100%; border: 0; }

.scripture-reader-room .scripture-share-dialog { border-color: var(--reader-line); background: var(--reader-paper); color: var(--reader-ink); }
.scripture-reader-room .scripture-share-option { border-color: var(--reader-line); background: var(--reader-paper); color: var(--reader-ink); }
.scripture-reader-room .scripture-share-option-mark { background: var(--reader-cream); color: var(--reader-gold); }

.reader-error-state { min-height: 100dvh; display: grid; place-content: center; gap: 1rem; padding: 2rem; background: var(--reader-ivory); }

/* Circle reader — the chapter stays quiet; its conversations take their own full-width place below it. */
.reader-thread-return {
  justify-self: start;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .42rem .72rem .42rem .5rem;
  border: 1px solid var(--reader-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--reader-paper) 72%, transparent);
  color: var(--reader-ink);
  font: 750 .76rem/1.2 var(--font-ui);
  text-decoration: none;
}
.reader-thread-return .picto { width: 1.12rem; height: 1.12rem; color: var(--reader-gold); transform: scaleX(-1); }
.reader-thread-return:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--reader-gold) 58%, var(--reader-line)); background: var(--reader-paper); }

.reader-circle-panel {
  position: relative;
  z-index: 1;
  width: min(calc(100% - clamp(2rem, 7vw, 7rem)), 70rem);
  margin: clamp(3rem, 7vw, 5.5rem) auto 5rem;
  scroll-margin-top: 5.5rem;
}
.reader-circle-state-note {
  margin: 0 0 1rem;
  padding: .82rem 1rem;
  border: 1px solid var(--reader-line);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--reader-cream) 55%, transparent);
  color: var(--reader-muted);
  font: 600 .82rem/1.45 var(--font-ui);
}

.reader-circle-compose-region { margin: 0 0 1.35rem; }
.reader-circle-compose-status {
  margin: 0 0 .65rem;
  padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 28%, var(--reader-line));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--reader-cream) 58%, transparent);
  color: var(--reader-gold);
  font: 700 .76rem/1.4 var(--font-ui);
}
.reader-circle-compose-status[hidden] { display: none; }
.reader-circle-compose-card {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  gap: .9rem;
  padding: 1.1rem 1.2rem .9rem;
  border: 1px solid var(--reader-line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--reader-paper) 82%, transparent);
  box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--reader-ink) 6%, transparent), inset 0 1px color-mix(in srgb, var(--reader-paper) 75%, transparent);
}
.reader-circle-compose-card[data-has-draft="true"] { border-color: color-mix(in srgb, var(--reader-gold) 55%, var(--reader-line)); }
.reader-circle-compose-avatar {
  width: 3.15rem;
  height: 3.15rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 44%, var(--reader-line));
  border-radius: 50%;
  color: var(--reader-gold);
  background: var(--reader-cream);
}
.reader-circle-compose-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reader-circle-compose-avatar .picto { width: 1.4rem; height: 1.4rem; }
.reader-circle-compose-form { min-width: 0; display: grid; gap: .65rem; }
.reader-circle-compose-form > textarea {
  width: 100%;
  min-height: 4rem;
  box-sizing: border-box;
  padding: .18rem 0 .55rem;
  border: 0;
  border-bottom: 1px solid var(--reader-line);
  border-radius: 0;
  outline: 0;
  color: var(--reader-ink);
  background: transparent;
  font: 500 1rem/1.52 var(--font-ui);
  resize: none;
}
.reader-circle-compose-form > textarea::placeholder { color: color-mix(in srgb, var(--reader-muted) 82%, var(--reader-paper)); }
.reader-circle-compose-form > textarea:focus { border-bottom-color: var(--reader-gold); box-shadow: 0 2px 0 color-mix(in srgb, var(--reader-gold) 24%, transparent); }
.reader-circle-compose-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem 1rem;
}
.reader-circle-compose-contexts,
.reader-circle-compose-actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.reader-circle-compose-actions { justify-content: flex-end; }
.reader-circle-verse-context {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  box-sizing: border-box;
  padding: .38rem .68rem;
  border: 1px solid var(--reader-line);
  border-radius: .65rem;
  color: var(--reader-muted);
  background: color-mix(in srgb, var(--reader-paper) 78%, transparent);
  font: 700 .72rem/1.15 var(--font-ui);
  white-space: nowrap;
}
.reader-circle-verse-picker-trigger { cursor: pointer; }
.reader-circle-verse-picker-trigger:hover { border-color: color-mix(in srgb, var(--reader-gold) 58%, var(--reader-line)); color: var(--reader-gold); }
.reader-circle-verse-picker-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 42%, transparent); outline-offset: 2px; }
.reader-circle-verse-context .picto { width: 1rem; height: 1rem; color: var(--reader-gold); }
.reader-circle-audience { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.reader-circle-audience-trigger {
  width: min(12.8rem, 100%);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  box-sizing: border-box;
  padding: .38rem .5rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 72%, var(--reader-line));
  border-radius: .65rem;
  color: var(--reader-gold);
  background: color-mix(in srgb, var(--reader-gold-soft) 20%, var(--reader-paper));
  font: 700 .875rem/1.2 var(--font-ui);
  cursor: pointer;
  list-style: none;
}
.reader-circle-audience-trigger > span { min-width: 0; white-space: nowrap; }
.reader-circle-audience-trigger::-webkit-details-marker { display: none; }
.reader-circle-audience-trigger i {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.14rem) rotate(45deg);
  transition: transform 160ms ease;
}
.reader-circle-audience[open] .reader-circle-audience-trigger i { transform: translateY(.14rem) rotate(225deg); }
.reader-circle-audience-trigger:hover { background: color-mix(in srgb, var(--reader-gold-soft) 34%, var(--reader-paper)); }
.reader-circle-audience-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--reader-gold) 42%, transparent); outline-offset: 2px; }
.reader-circle-audience-menu {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: calc(100% + .45rem);
  width: max(13.5rem, 100%);
  display: grid;
  gap: .22rem;
  box-sizing: border-box;
  padding: .38rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 48%, var(--reader-line));
  border-radius: .8rem;
  color: var(--reader-ink);
  background: color-mix(in srgb, var(--reader-paper) 94%, transparent);
  box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--reader-ink) 14%, transparent), inset 0 1px color-mix(in srgb, var(--reader-paper) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.reader-circle-audience:not([open]) .reader-circle-audience-menu { display: none; }
.reader-circle-audience-menu button {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .6rem;
  border: 0;
  border-radius: .55rem;
  color: var(--reader-ink);
  background: transparent;
  font: 700 .875rem/1.25 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.reader-circle-audience-menu button:hover,
.reader-circle-audience-menu button:focus-visible { background: color-mix(in srgb, var(--reader-gold-soft) 34%, transparent); }
.reader-circle-audience-menu button:focus-visible { outline: 2px solid color-mix(in srgb, var(--reader-gold) 58%, transparent); outline-offset: -2px; }
.reader-circle-audience-check { color: transparent; font-size: 1rem; }
.reader-circle-audience-menu button[aria-selected="true"] { color: var(--reader-gold); }
.reader-circle-audience-menu button[aria-selected="true"] .reader-circle-audience-check { color: currentColor; }
.reader-circle-submit {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .46rem .88rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 70%, var(--reader-line));
  border-radius: .65rem;
  color: var(--reader-paper);
  background: var(--reader-gold);
  box-shadow: 0 .35rem .85rem color-mix(in srgb, var(--reader-gold) 20%, transparent);
  font: 800 .76rem/1.1 var(--font-ui);
  cursor: pointer;
}
.reader-circle-submit .picto { width: 1rem; height: 1rem; }
.reader-circle-submit:disabled { border-color: var(--reader-line); color: var(--reader-muted); background: color-mix(in srgb, var(--reader-muted) 14%, var(--reader-paper)); box-shadow: none; cursor: not-allowed; }
.reader-circle-counter { grid-column: 1 / -1; color: var(--reader-muted); font: 650 .66rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.reader-circle-compose-error { grid-column: 1 / -1; margin: 0; color: var(--fire); font: 700 .72rem/1.4 var(--font-ui); }
.reader-circle-compose-error[hidden] { display: none; }
.reader-circle-selection-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem .7rem;
  padding: .72rem .8rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 36%, var(--reader-line));
  border-inline-start: 3px solid var(--reader-gold);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--reader-cream) 58%, transparent);
}
.reader-circle-selection-context[hidden] { display: none; }
.reader-circle-selection-context > p { min-width: 0; display: grid; gap: .12rem; margin: 0; }
.reader-circle-selection-context > p > span { color: var(--reader-gold); font: 800 .62rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.reader-circle-selection-context > p > strong { overflow: hidden; color: var(--reader-muted); font: 700 .72rem/1.3 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.reader-circle-selection-context > button { min-height: 2.75rem; padding: .2rem .1rem; border: 0; background: transparent; color: var(--reader-gold); font: 750 .7rem/1.2 var(--font-ui); cursor: pointer; }
.reader-circle-selection-context > blockquote { grid-column: 1 / -1; max-height: 8rem; margin: 0; overflow: auto; color: var(--reader-ink); font: italic 500 .86rem/1.5 var(--font-display); }
.reader-circle-manual-verse-picker {
  display: grid;
  gap: .38rem;
  padding: .78rem .82rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 36%, var(--reader-line));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--reader-cream) 54%, var(--reader-paper));
}
.reader-circle-manual-verse-picker[hidden] { display: none; }
.reader-circle-manual-verse-picker > label { color: var(--reader-ink); font: 800 .75rem/1.25 var(--font-ui); }
.reader-circle-manual-verse-input-row { display: flex; gap: .45rem; }
.reader-circle-manual-verse-input-row input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: .45rem .65rem;
  border: 1px solid var(--reader-line);
  border-radius: .58rem;
  color: var(--reader-ink);
  background: var(--reader-paper);
  font: 650 .82rem/1.2 var(--font-ui);
}
.reader-circle-manual-verse-input-row input:focus { outline: 3px solid color-mix(in srgb, var(--reader-gold) 32%, transparent); border-color: var(--reader-gold); }
.reader-circle-manual-verse-input-row button {
  min-height: 2.75rem;
  flex: 0 0 auto;
  padding: .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--reader-gold) 64%, var(--reader-line));
  border-radius: .58rem;
  color: var(--reader-gold);
  background: var(--reader-paper);
  font: 800 .74rem/1.1 var(--font-ui);
  cursor: pointer;
}
.reader-circle-manual-verse-input-row button:hover { background: color-mix(in srgb, var(--reader-gold-soft) 24%, var(--reader-paper)); }
.reader-circle-manual-verse-picker > p { margin: 0; color: var(--reader-muted); font: 650 .68rem/1.35 var(--font-ui); }
.reader-circle-manual-verse-picker > p[role="alert"] { color: var(--fire); font-weight: 750; }

.reader-circle-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.reader-circle-feed { min-width: 0; }
.reader-circle-tabs { display: flex; align-items: end; gap: clamp(.65rem, 2.3vw, 2.15rem); min-height: 3rem; margin: 0 0 .45rem; border-bottom: 1px solid var(--reader-line); }
.reader-circle-tab {
  position: relative;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .45rem 0;
  color: var(--reader-muted);
  font: 750 .82rem/1.15 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
}
.reader-circle-tab::after { position: absolute; right: 0; bottom: -1px; left: 0; height: .18rem; border-radius: 999px 999px 0 0; content: ""; background: transparent; }
.reader-circle-tab.is-active { color: var(--reader-gold); }
.reader-circle-tab.is-active::after { background: var(--reader-gold); }
.reader-circle-tab b { min-width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 50%; color: var(--reader-muted); background: color-mix(in srgb, var(--reader-muted) 13%, var(--reader-paper)); font-size: .65rem; }
.reader-circle-conversations { display: grid; gap: .9rem; }
.reader-circle-conversation {
  position: relative;
  min-width: 0;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--reader-ink) 11%, var(--reader-line));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--reader-paper) 82%, transparent);
  box-shadow: 0 .55rem 1.55rem color-mix(in srgb, var(--reader-ink) 4%, transparent);
}
.reader-circle-conversation.is-focused { border-color: color-mix(in srgb, var(--reader-gold) 46%, var(--reader-line)); }
.reader-circle-message {
  position: relative;
  min-width: 0;
  display: grid;
  gap: .52rem;
  padding: 0;
  border-bottom: 0;
}
.reader-circle-message:focus { outline: none; }
.reader-circle-message:focus-visible {
  outline: 2px solid var(--reader-gold);
  outline-offset: -2px;
}
.reader-circle-message.is-root { padding: 1.15rem 1.3rem 1rem 4.55rem; }
.reader-circle-message.is-reply { min-height: 7rem; margin-left: 0; padding: .85rem .2rem .85rem 2.85rem; border-top: 1px solid color-mix(in srgb, var(--reader-line) 78%, transparent); border-left: 0; }
.reader-circle-message.is-reply.is-nested { margin-left: 2.55rem; padding-left: 2.4rem; }
.reader-circle-message.is-reply.is-reply-context { background: color-mix(in srgb, var(--reader-gold-soft) 8%, transparent); }
.reader-circle-message.is-circle-message-new,
.reader-circle-message.is-circle-message-updated { animation: reader-circle-message-confirm 280ms ease-out both; }
.reader-circle-message.is-reply.is-circle-message-new,
.reader-circle-message.is-reply.is-circle-message-updated { margin-left: 0; }
.reader-circle-message-author { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; }
.reader-circle-message.is-root .reader-circle-message-author { grid-template-columns: 2.45rem minmax(0, 1fr) auto; gap: .65rem; }
.circle-avatar { width: 2rem; height: 2rem; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--reader-gold) 28%, var(--reader-line)); border-radius: 50%; color: var(--reader-gold); background: var(--reader-cream); }
.reader-circle-message.is-root .circle-avatar { width: 2.45rem; height: 2.45rem; }
.reader-circle-message .circle-avatar img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.circle-avatar .picto { width: 1.2rem; height: 1.2rem; }
.reader-circle-message-meta { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .18rem .45rem; }
.reader-circle-message-author strong { overflow: hidden; font: 750 .78rem/1.18 var(--font-ui); text-overflow: ellipsis; white-space: nowrap; }
.reader-circle-message-author small { color: var(--reader-muted); font: 600 .66rem/1.2 var(--font-ui); }
.reader-circle-message.is-root .reader-circle-message-author strong { font-size: .83rem; }
.reader-circle-message.is-root .circle-message-body { margin: .12rem 0 0; color: var(--reader-ink); font-family: var(--font-display); font-size: calc(clamp(1.28rem, 2vw, 1.58rem) * var(--reader-font-scale)); font-weight: 650; line-height: 1.3; letter-spacing: -.016em; }
.reader-circle-message.is-reply .circle-message-body { margin: 0; color: var(--reader-ink); font-family: var(--font-ui); font-size: calc(.94rem * var(--reader-font-scale)); font-weight: 500; line-height: 1.55; }
.reader-circle-message.is-own .circle-message-body { font-weight: 400; }
.reader-circle-message.is-root > :is(.circle-message-body, .circle-message-anchor, .circle-message-passage, .reader-circle-thread-stats) { margin-left: 3.1rem; }
.reader-circle-message.is-reply > :is(.circle-message-body, .circle-message-anchor, .circle-message-passage) { margin-left: 2.55rem; }
.circle-message-anchor { width: fit-content; margin: 0; padding: .22rem .46rem; border-radius: 999px; color: var(--reader-gold); background: color-mix(in srgb, var(--reader-gold-soft) 16%, var(--reader-paper)); font: 750 .63rem/1.1 var(--font-ui); }
.circle-message-passage { display: grid; gap: .22rem; margin: .1rem 0 0; padding: .6rem .7rem; border-inline-start: 2px solid var(--reader-gold); border-radius: 0 .5rem .5rem 0; background: color-mix(in srgb, var(--reader-cream) 48%, transparent); }
.circle-message-passage > span { color: var(--reader-gold); font: 800 .61rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.circle-message-passage > p { max-height: 7rem; margin: 0; overflow: auto; color: var(--reader-ink); font: italic 500 .84rem/1.45 var(--font-display); }
.circle-message-menu { position: relative; }
.circle-message-menu summary { width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; list-style: none; color: var(--reader-muted); cursor: pointer; }
.circle-message-menu summary::-webkit-details-marker { display: none; }
.circle-message-menu:not([open]) > div { display: none; }
.circle-message-menu > div { position: absolute; top: 2.5rem; right: 0; z-index: 6; min-width: 11rem; display: grid; padding: .35rem; border: 1px solid var(--reader-line); border-radius: .65rem; background: var(--reader-paper); box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--reader-ink) 15%, transparent); }
.circle-message-menu button,
.circle-message-menu form { margin: 0; }
.circle-message-menu button { width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 0; background: transparent; color: var(--reader-ink); font: 700 .75rem/1.25 var(--font-ui); text-align: start; cursor: pointer; }
.circle-message-menu button:hover { color: var(--reader-gold); background: color-mix(in srgb, var(--reader-cream) 66%, transparent); }

.reader-circle-conversation .circle-conversation-vote { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 3.35rem; display: grid; align-content: start; justify-items: center; padding-top: .68rem; border-inline-end: 1px solid var(--reader-line); }
.reader-circle-conversation .circle-conversation-vote-form { display: grid; justify-items: center; gap: .05rem; margin: 0; }
.reader-circle-conversation .circle-conversation-vote-form button { width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--reader-gold); background: transparent; font: 800 1.55rem/1 var(--font-ui); cursor: pointer; }
.reader-circle-conversation .circle-conversation-vote-form button:hover,
.reader-circle-conversation .circle-conversation-vote-form button:focus-visible,
.reader-circle-conversation .circle-conversation-vote-form button.is-selected { background: color-mix(in srgb, var(--reader-gold-soft) 26%, transparent); }
.reader-circle-conversation .circle-conversation-vote-score { min-width: 2.75rem; color: color-mix(in srgb, var(--reader-gold) 68%, var(--reader-muted)); font: 750 .76rem/1.2 var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.reader-circle-conversation .circle-conversation-vote > .circle-conversation-vote-score { padding-top: .65rem; }

.reader-circle-thread-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: .22rem 0 0; color: var(--reader-muted); font: 700 .7rem/1.3 var(--font-ui); }
.reader-circle-thread-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.reader-circle-thread-stats .picto { width: .95rem; height: .95rem; }

.reader-circle-replies { position: relative; display: grid; margin-left: 4.55rem; padding: 0 1.1rem 0 1.25rem; border-top: 1px solid var(--reader-line); }
.reader-circle-replies::before { position: absolute; top: 1rem; bottom: 1rem; left: 1.15rem; width: 1px; content: ""; background: color-mix(in srgb, var(--reader-gold) 34%, var(--reader-line)); }
.reader-circle-history-messages { display: grid; }
.reader-circle-history-messages[hidden] { display: none; }
.reader-circle-history-toggle { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .4rem; margin-left: 2.85rem; padding: .25rem .2rem; border: 0; color: var(--reader-gold); background: transparent; font: 800 .73rem/1.25 var(--font-ui); cursor: pointer; }
.reader-circle-history-toggle [hidden] { display: none; }
.reader-circle-latest-replies { display: grid; }

.circle-post-vote { position: absolute; top: .55rem; left: 0; width: 2.75rem; display: grid; justify-items: center; }
.circle-post-vote-form { display: grid; justify-items: center; gap: 0; margin: 0; }
.circle-post-vote button { width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--reader-muted); background: transparent; font: 800 1rem/1 var(--font-ui); cursor: pointer; }
.circle-post-vote button:is(:hover, :focus-visible),
.circle-post-vote button.is-selected { color: var(--reader-gold); background: color-mix(in srgb, var(--reader-gold-soft) 22%, transparent); }
.circle-post-vote output { min-width: 1.4rem; color: color-mix(in srgb, var(--reader-gold) 66%, var(--reader-muted)); font: 750 .68rem/1 var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.circle-post-reply-action { position: absolute; bottom: .2rem; left: 2.35rem; width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; color: var(--reader-muted); background: transparent; font: 700 1rem/1 var(--font-ui); opacity: .52; cursor: pointer; }
.circle-post-reply-action:is(:hover, :focus-visible),
.reader-circle-message.is-reply-context .circle-post-reply-action { color: var(--reader-gold); background: color-mix(in srgb, var(--reader-gold-soft) 18%, transparent); opacity: 1; }
.reader-circle-privacy { display: flex; align-items: flex-start; justify-content: center; gap: .45rem; margin: 1.3rem 0 0; color: var(--reader-muted); font: 600 .7rem/1.45 var(--font-ui); text-align: center; }
.reader-circle-privacy .picto { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--reader-muted); }
.reader-circle-moderation-summary { display: grid; gap: .35rem; padding: 1rem 1.2rem 1.1rem 5.35rem; border-top: 1px solid var(--reader-line); background: color-mix(in srgb, var(--reader-cream) 46%, transparent); }
.reader-circle-moderation-summary > p { margin: 0; color: var(--reader-muted); font: 650 .74rem/1.4 var(--font-ui); }
.reader-circle-moderation-summary > strong { color: var(--reader-ink); font: 800 .78rem/1.25 var(--font-ui); }
.reader-circle-moderation-summary > a { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--reader-gold); font: 800 .74rem/1.2 var(--font-ui); text-decoration: none; }

.circle-inline-editor { display: grid; gap: .6rem; padding: .8rem 1.2rem 1rem; border-top: 1px solid var(--reader-line); }
.circle-inline-editor[hidden] { display: none; }
.circle-inline-editor.is-circle-editor-open { animation: circle-composer-open 180ms ease-out both; }
.circle-edit-form,
.circle-reply-form { display: grid; gap: .65rem; }
.circle-message-field { display: grid; gap: .35rem; }
.circle-message-field > span { color: var(--reader-ink); font: 750 .72rem/1.2 var(--font-ui); }
.circle-inline-editor textarea,
.circle-inline-editor input,
.circle-inline-editor select,
.reader-circle-reply-composer textarea { width: 100%; min-height: 3.1rem; box-sizing: border-box; padding: .74rem .8rem; border: 1px solid var(--reader-line); border-radius: .65rem; color: var(--reader-ink); background: var(--reader-paper); font: 500 .94rem/1.5 var(--font-ui); }
.circle-inline-editor textarea,
.reader-circle-reply-composer textarea { min-height: 3.25rem; resize: vertical; }
.circle-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.circle-compose-foot > span { color: var(--reader-muted); font: 650 .68rem/1.1 var(--font-ui); }
.circle-compose-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.circle-composer-secondary,
.circle-submit { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .75rem; border-radius: .6rem; font: 800 .73rem/1.1 var(--font-ui); cursor: pointer; }
.circle-composer-secondary { border: 0; color: var(--reader-gold); background: transparent; }
.circle-submit { border: 1px solid var(--reader-gold); color: var(--reader-paper); background: var(--reader-gold); }
.circle-compose-error { margin: 0; color: var(--fire); font: 700 .72rem/1.4 var(--font-ui); }
.circle-compose-error[hidden] { display: none; }
.circle-moderation-form form { display: grid; gap: .55rem; }
.circle-moderation-form label { color: var(--reader-muted); font: 700 .72rem/1.25 var(--font-ui); }
.circle-moderation-form input[type="submit"] { min-height: 2.65rem; border: 1px solid var(--reader-gold); border-radius: .6rem; color: var(--reader-paper); background: var(--reader-gold); font: 800 .73rem/1.1 var(--font-ui); }
.is-over-limit [data-message-counter] { color: var(--fire); font-weight: 800; }
textarea[aria-invalid="true"] { border-color: var(--fire) !important; outline: 2px solid color-mix(in srgb, var(--fire) 17%, transparent); }

.reader-circle-reply-composer { display: grid; gap: .55rem; margin: .75rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--reader-ink) 10%, var(--reader-line)); border-radius: .8rem; background: color-mix(in srgb, var(--reader-paper) 92%, transparent); box-shadow: 0 .45rem 1.25rem color-mix(in srgb, var(--reader-ink) 5%, transparent); }
.reader-circle-reply-heading { min-height: 2rem; display: flex; align-items: center; gap: .45rem; color: var(--reader-muted); }
.reader-circle-reply-heading > span { color: var(--reader-muted); }
.reader-circle-reply-heading h3 { flex: 1 1 auto; margin: 0; font: 700 .72rem/1.25 var(--font-ui); }
.reader-circle-reply-heading button { width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--reader-muted); background: transparent; font-size: 1.25rem; cursor: pointer; }
.reader-circle-reply-heading button[hidden] { display: none; }
.reader-circle-reply-quote { margin: -.2rem 0 .15rem; padding: .55rem .7rem; border-inline-start: 2px solid color-mix(in srgb, var(--reader-gold) 58%, var(--reader-line)); color: var(--reader-muted); background: color-mix(in srgb, var(--reader-cream) 32%, transparent); font: 500 .72rem/1.45 var(--font-ui); }
.reader-circle-reply-quote[hidden] { display: none; }
.circle-reply-body { display: grid; gap: .55rem; }
.reader-circle-reply-composer .circle-reply-body { padding: 0; border: 0; background: transparent; }
.reader-circle-reply-composer .circle-compose-foot { align-items: center; }
.reader-circle-reply-composer .circle-compose-actions { margin-left: auto; }
.reader-circle-reply-composer .circle-submit { width: 2.75rem; padding: 0; color: var(--reader-gold); background: color-mix(in srgb, var(--reader-gold-soft) 25%, var(--reader-paper)); }
.reader-circle-reply-composer .circle-submit .picto { width: 1rem; height: 1rem; }
.circle-reply-verse-trigger { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border: 1px solid var(--reader-line); border-radius: .6rem; color: var(--reader-muted); background: var(--reader-paper); font: 700 .7rem/1.2 var(--font-ui); cursor: pointer; }
.circle-reply-verse-trigger .picto { width: 1rem; height: 1rem; }
.circle-reply-verse-picker { display: grid; gap: .4rem; padding: .65rem; border: 1px solid var(--reader-line); border-radius: .6rem; background: var(--reader-cream); }
.circle-reply-verse-picker[hidden] { display: none; }
.circle-reply-verse-picker > label { color: var(--reader-ink); font: 750 .7rem/1.25 var(--font-ui); }
.circle-reply-verse-picker > div { display: flex; gap: .4rem; }
.circle-reply-verse-picker input { min-width: 0; min-height: 2.75rem; flex: 1 1 auto; padding: .4rem .6rem; border: 1px solid var(--reader-line); border-radius: .5rem; color: var(--reader-ink); background: var(--reader-paper); }
.circle-reply-verse-picker button { min-height: 2.75rem; padding: .4rem .65rem; border: 1px solid var(--reader-gold); border-radius: .5rem; color: var(--reader-gold); background: var(--reader-paper); font: 750 .7rem/1.2 var(--font-ui); }
.circle-reply-verse-picker p { margin: 0; color: var(--fire); font: 700 .68rem/1.35 var(--font-ui); }

.circle-vote-card { display: grid; gap: .75rem; margin: .2rem 1.2rem 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--reader-gold) 42%, var(--reader-line)); border-radius: .8rem; background: color-mix(in srgb, var(--reader-cream) 64%, var(--reader-paper)); box-shadow: inset 3px 0 var(--reader-gold); }
.circle-vote-kicker { margin: 0; color: var(--reader-gold); font: 800 .65rem/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.circle-vote-card h3 { margin: 0; font: 650 1.08rem/1.25 var(--font-display); }
.circle-vote-card > p { margin: 0; color: var(--reader-muted); font: 500 .78rem/1.45 var(--font-ui); }
.circle-vote-card .circle-vote-reason { width: fit-content; padding: .35rem .55rem; border-radius: 999px; color: var(--reader-gold); background: color-mix(in srgb, var(--reader-gold-soft) 21%, var(--reader-paper)); font-weight: 750; }
.circle-vote-message { display: grid; gap: .38rem; padding: .82rem .88rem; border: 1px solid var(--reader-line); border-radius: .6rem; background: var(--reader-paper); }
.circle-vote-message-label { margin: 0; color: var(--reader-gold); font: 800 .62rem/1.2 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.circle-vote-message blockquote { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--reader-ink); font: 500 .95rem/1.55 var(--font-display); }
.circle-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.circle-vote-actions button { min-height: 3rem; padding: .55rem; border: 1px solid var(--reader-line); border-radius: .6rem; color: var(--reader-ink); background: var(--reader-paper); font: 750 .72rem/1.2 var(--font-ui); cursor: pointer; }
.circle-vote-actions button.is-selected { border-color: var(--reader-gold); color: var(--reader-paper); background: var(--reader-gold); }
.circle-live-results { display: grid; gap: .42rem; }
.circle-live-heading,
.circle-result-row { display: flex; justify-content: space-between; gap: .75rem; color: var(--reader-muted); font: 650 .69rem/1.3 var(--font-ui); }
.circle-result-track { height: .35rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--reader-muted) 15%, var(--reader-paper)); }
.circle-result-track i { display: block; height: 100%; border-radius: inherit; background: var(--reader-gold); transition: width .3s ease; }
.circle-tombstone { margin: 0; padding: .85rem 1rem; border: 1px dashed var(--reader-line); border-radius: .6rem; color: var(--reader-muted); font: italic 500 .84rem/1.4 var(--font-display); }
.circle-masked-message { margin: .5rem 1rem 0; color: var(--reader-muted); font: 600 .8rem/1.4 var(--font-ui); }
.circle-masked-message summary { width: fit-content; color: var(--reader-gold); cursor: pointer; }
.circle-masked-message p { margin: .55rem 0 0; padding: .7rem .8rem; border-left: 2px solid var(--reader-line); color: var(--reader-ink); font: 500 .9rem/1.5 var(--font-ui); }
.circle-menu-status { display: block; padding: .55rem .7rem; color: var(--reader-muted); font: 600 .78rem/1.2 var(--font-ui); white-space: nowrap; }

.reader-circle-thread-detail { display: none; }
.reader-circle-thread-detail .reader-circle-conversation { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

@media (min-width: 768px) {
  .reader-circle-panel { padding-bottom: 2rem; }
}

@media (max-width: 767px) {
  .reader-thread-return { width: 2.75rem; min-width: 2.75rem; justify-content: center; padding: .3rem; border-radius: 50%; }
  .reader-thread-return > span { display: none; }
  .scripture-reader-room.is-circle-thread-detail .reader-mobile-progress,
  .scripture-reader-room.is-circle-thread-detail .scripture-reader-layout { display: none; }
  .scripture-reader-room.is-circle-in-view .reader-mobile-progress { display: none; }
  .scripture-reader-room.is-circle-thread-detail .reader-circle-trigger { display: none; }
  .reader-circle-thread-detail { display: grid; gap: 0; min-height: calc(100dvh - 4.4rem); padding: .4rem 0 max(1.4rem, env(safe-area-inset-bottom)); background: var(--reader-paper); }
  .reader-circle-thread-detail-messages { display: grid; }
  .reader-circle-thread-detail .reader-circle-message.is-root { padding-top: 1rem; }
  .reader-circle-thread-detail .reader-circle-replies { margin-left: 3.9rem; padding-right: .75rem; }
  .reader-circle-thread-detail .reader-circle-message.is-reply { padding-right: 0; }
  .reader-circle-thread-detail .reader-circle-reply-composer { margin-top: .35rem; }
  .reader-circle-thread-detail .reader-circle-privacy { margin: 1rem 1rem 0; }

  .reader-circle-panel { width: calc(100% - 1.5rem); margin: 2.75rem auto 3.4rem; scroll-margin-top: 5rem; }
  .reader-circle-compose-card { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .7rem; padding: .9rem .8rem .75rem; border-radius: .9rem; }
  .reader-circle-compose-avatar { width: 2.65rem; height: 2.65rem; }
  .reader-circle-compose-form > textarea { min-height: 4.7rem; font-size: .95rem; }
  .reader-circle-compose-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .reader-circle-compose-contexts { grid-column: 1 / -1; gap: .32rem; }
  .reader-circle-compose-actions { grid-column: 1 / -1; width: 100%; flex-wrap: nowrap; justify-content: space-between; }
  .reader-circle-audience { min-width: 0; flex: 1 1 auto; }
  .reader-circle-audience-trigger { width: 100%; }
  .reader-circle-audience-menu { right: auto; left: 0; width: min(17rem, calc(100vw - 3.5rem)); }
  .reader-circle-submit { flex: 0 0 auto; min-width: 6.35rem; }
  .reader-circle-manual-verse-input-row { align-items: stretch; }
  .reader-circle-tabs { gap: 1.15rem; margin-bottom: .7rem; overflow-x: auto; scrollbar-width: none; }
  .reader-circle-tab { min-height: 2.9rem; font-size: .78rem; }
  .reader-circle-conversations { gap: .7rem; }
  .reader-circle-conversation { border-radius: .9rem; }
  .reader-circle-message.is-root { padding: .95rem .8rem .85rem 3.85rem; }
  .reader-circle-message.is-root .circle-message-body { font-size: calc(1.16rem * var(--reader-font-scale)); line-height: 1.35; }
  .reader-circle-message.is-root > :is(.circle-message-body, .circle-message-anchor, .circle-message-passage, .reader-circle-thread-stats) { margin-left: 2.65rem; }
  .reader-circle-replies { margin-left: 3.85rem; padding: 0 .75rem 0 .85rem; }
  .reader-circle-replies::before { left: .72rem; }
  .reader-circle-message.is-reply { padding: .9rem 0 .9rem 2.6rem; }
  .reader-circle-message.is-reply.is-nested { margin-left: 1rem; padding-left: 2.25rem; }
  .reader-circle-message.is-reply .circle-message-body { font-size: calc(.92rem * var(--reader-font-scale)); }
  .reader-circle-message-author { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .5rem; }
  .circle-avatar { width: 2rem; height: 2rem; }
  .reader-circle-conversation .circle-conversation-vote { width: 3.15rem; padding-top: .68rem; }
  .reader-circle-conversation .circle-conversation-vote-form button { width: 2.75rem; min-height: 2.75rem; }
  .reader-circle-workspace { grid-template-columns: minmax(0, 1fr); }
  .reader-circle-moderation-summary { padding: .9rem .85rem 1rem 4.35rem; }
  .reader-circle-privacy { margin-top: 1.15rem; padding-inline: 1rem; }
  .circle-inline-editor { padding-inline: .85rem; }
  .reader-circle-conversation .reader-circle-reply-composer { display: none; }
  .reader-circle-conversation.is-active-circle-composer { padding-bottom: 9.2rem; }
  .reader-circle-conversation.is-active-circle-composer .reader-circle-reply-composer {
    position: fixed;
    right: .6rem;
    bottom: max(.45rem, env(safe-area-inset-bottom));
    left: .6rem;
    z-index: 14;
    display: grid;
    max-height: min(15rem, calc(100dvh - 5rem));
    margin: 0;
    padding: .65rem .7rem;
    overflow: auto;
    border-color: color-mix(in srgb, var(--reader-gold) 24%, var(--reader-line));
    background: color-mix(in srgb, var(--reader-paper) 97%, transparent);
    box-shadow: 0 -.5rem 1.6rem color-mix(in srgb, var(--reader-ink) 10%, transparent);
  }
  .circle-vote-card { margin-inline: .85rem; }
}

@keyframes reader-room-in { from { opacity: 0; } }
@keyframes reader-room-out { to { opacity: 0; } }
@keyframes reader-chrome-in { from { opacity: 0; transform: translateY(-.45rem); } }
@keyframes reader-art-in { from { opacity: 0; } }
@keyframes reader-content-in { from { opacity: 0; transform: translateY(.55rem); } }
@keyframes reader-text-in { from { opacity: 0; } }
@keyframes reader-panel-in { from { transform: translateX(.25rem); } }
@keyframes reader-feedback-in { from { opacity: 0; } }
@keyframes reader-toolbar-in { from { opacity: 0; transform: translate(-50%, .45rem); } }
@keyframes reader-dialog-in { from { opacity: 0; transform: translateY(.65rem); } }
@keyframes reader-dialog-out { to { opacity: 0; transform: translateY(.6rem); } }
@keyframes reader-backdrop-in { from { opacity: 0; } }
@keyframes reader-backdrop-out { to { opacity: 0; } }
@keyframes reader-mark-in { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes circle-composer-open { from { opacity: 0; transform: translateY(.28rem); } }
@keyframes circle-selection-context-in { from { opacity: 0; transform: translateY(.2rem); } }
@keyframes circle-message-confirm { from { background-color: var(--circle-message-flash); } to { background-color: transparent; } }
@keyframes reader-circle-message-confirm { from { background-color: color-mix(in srgb, var(--reader-gold-soft) 28%, transparent); } to { background-color: transparent; } }

.scripture-reader-room.is-reader-closing { pointer-events: none; animation: reader-room-out 150ms ease-in both !important; }

@media (min-width: 768px) and (max-width: 1100px) {
  .scripture-reader-layout[data-active-panel="marks"] { grid-template-columns: minmax(0, 1fr); }
  .reader-chapter { width: min(calc(100% - 4rem), var(--reader-measure)); }
  .reader-companion {
    position: fixed;
    top: 4.8rem;
    right: 0;
    z-index: 35;
    width: min(22rem, 48vw);
    min-height: calc(100dvh - 4.8rem);
    max-height: calc(100dvh - 4.8rem);
    border-left: 1px solid var(--reader-line);
    background: var(--reader-paper);
    box-shadow: -1.1rem 0 2.8rem rgba(91, 61, 16, .1);
  }
}

@media (max-width: 767px) {
  .scripture-reader-room .scripture-sheet { background: var(--reader-ivory); }
  .reader-room-topbar {
    min-height: 4.8rem;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-rows: 2.75rem 1rem;
    gap: .18rem .35rem;
    padding: max(.45rem, env(safe-area-inset-top)) .65rem .42rem;
    border-bottom: 0;
  }
  .reader-close { width: 2.75rem; min-width: 2.75rem; justify-content: center; padding: .3rem; border-radius: 50%; }
  .reader-mobile-readers { display: inline-flex; align-items: center; justify-content: center; gap: .22rem; max-width: 100%; color: var(--reader-gold); font: 700 .57rem/1.1 var(--font-ui); letter-spacing: .025em; white-space: nowrap; }
  .reader-mobile-readers .picto { width: .82rem; height: .82rem; }
  .reader-aa-button { min-width: 2.75rem; }
  .reader-topbar-actions { gap: .15rem; }
  .reader-topbar-audio { display: grid; }
  .reader-topbar-actions > :is(.reader-topbar-audio, .reader-panel-trigger, .reader-aa-button) {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    display: grid;
    place-items: center;
    padding: .38rem;
    border: 1px solid var(--reader-line);
    border-radius: 50%;
    background: rgba(255, 253, 247, .6);
    color: var(--reader-gold);
  }
  .reader-topbar-actions > :is(.reader-topbar-audio, .reader-panel-trigger, .reader-aa-button):is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--reader-gold) 42%, var(--reader-line));
    background: rgba(255, 253, 247, .82);
  }
  .reader-topbar-audio .picto { width: 1.15rem; height: 1.15rem; }
  .reader-topbar-actions > .reader-aa-button { font-size: 1.25rem; }
  .reader-topbar-status {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding-inline: .18rem;
    color: var(--reader-muted);
    font: 700 .62rem/1 var(--font-ui);
  }
  .reader-topbar-title {
    min-width: 0;
    overflow: hidden;
    color: var(--reader-ink);
    font-family: var(--font-display);
    font-size: calc(.76rem * var(--reader-font-scale));
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(.15rem);
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .scripture-reader-room[data-reader-chapter-context="visible"] .reader-topbar-title { opacity: 1; transform: none; }
  .reader-topbar-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--reader-line) 72%, transparent);
  }
  .reader-topbar-progress b { min-width: .42rem; display: block; height: 100%; background: var(--reader-gold); }
  .reader-panel-trigger { width: 2.75rem; min-height: 2.75rem; padding: .38rem; }
  .reader-panel-trigger .picto { width: 1.15rem; height: 1.15rem; }
  .scripture-reader-layout { width: 100%; min-height: calc(100dvh - 4.8rem); display: block; border: 0; }
  .reader-reading-stage { min-height: calc(100dvh - 4.8rem); }
  .scripture-reader-layout[data-active-panel="marks"] .reader-reading-stage { display: none; }
  .reader-chapter-art { height: 10rem; opacity: .62; }
  .reader-chapter { width: 100%; padding: 2.4rem .9rem 4rem; }
  .reader-chapter-heading { margin-bottom: 1.4rem; padding-inline: 2rem; }
  .reader-chapter-readers { display: none; }
  .scripture-reader-room[data-active-panel="marks"] .reader-topbar-status,
  .scripture-reader-room[data-active-panel="marks"] .reader-topbar-progress { display: none; }
  .reader-welcome-card { margin: 0 .35rem 2.4rem; }
  .reader-welcome-card summary { min-height: 8.6rem; grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; gap: .7rem; padding: 1rem; }
  .reader-welcome-card strong { font-size: 1.15rem; }
  .reader-welcome-card em { font-size: .94rem; }
  .scripture-reader-room .reader-verses .scripture-verse { grid-template-columns: 2.35rem minmax(0, 1fr); column-gap: .55rem; margin-bottom: 1rem; padding: .25rem .2rem .35rem 0; font-size: calc(clamp(1.25rem, 5.5vw, 1.48rem) * var(--reader-font-scale)); line-height: var(--reader-leading); }
  .scripture-reader-room .reader-verses .scripture-verse.is-focus { margin-inline: -.15rem; padding: .65rem .55rem .72rem 0; }
  .reader-source-card { margin-inline: .25rem !important; }
  .reader-chapter-navigation { gap: .55rem; margin-inline: .25rem; }
  .reader-chapter-navigation-link { min-height: 4.75rem; gap: .5rem; padding: .7rem .65rem; }
  .reader-chapter-navigation-link small { font-size: .6rem; }
  .reader-chapter-quiz { grid-template-columns: 2.8rem minmax(0, 1fr); gap: .75rem; margin-inline: .25rem; padding: 1rem .9rem; }
  .reader-chapter-quiz-emblem { width: 2.7rem; height: 2.7rem; }
  .reader-chapter-quiz-action { grid-column: 1 / -1; width: 100%; min-width: 0; padding-top: .25rem; }
  .reader-chapter-quiz-button { min-height: 3rem; }
  .reader-scroll-progress { display: none; }
  .reader-companion { position: static; min-height: calc(100dvh - 4.8rem); max-height: none; display: block; padding: 1.5rem 1rem max(3rem, env(safe-area-inset-bottom)); border: 0; background: var(--reader-ivory); }
  .reader-companion[hidden] { display: none; }
  .reader-companion-heading { padding-inline: .25rem; }
  .reader-companion-heading h2 { font-size: 1.8rem; }
  .circle-message { padding: 1rem .25rem 1.2rem; }
  .circle-message.is-reply { margin-left: 1rem; }
  .circle-message-body { font-size: 1.04rem; }
  .circle-vote-card { padding: 1.05rem; }
  .circle-vote-card h3 { font-size: 1.22rem; }
  .circle-vote-actions button { min-height: 3.25rem; font-size: .77rem; }
  .circle-message-field textarea { font-size: 1rem; }
  .scripture-reader-room .scripture-selection-bar { left: .5rem !important; right: .5rem; top: auto !important; bottom: max(.6rem, env(safe-area-inset-bottom)); width: auto; justify-content: stretch; border-radius: .75rem; }
  .scripture-selection-bar button { min-width: 0; flex: 1 1 25%; grid-template-columns: 1fr; grid-template-rows: 1.05rem auto; gap: .2rem; padding-inline: .2rem; }
  .reader-selection-status { bottom: 5.2rem; width: max-content; max-width: calc(100vw - 2rem); text-align: center; }
  .reader-note-dialog,
  .reader-settings-dialog,
  .reader-video-dialog,
  .reader-tools-dialog { width: 100%; max-width: none; max-height: 86dvh; margin: auto 0 0; border: 0; border-top: 1px solid var(--reader-line); border-radius: 1rem 1rem 0 0; }
  .reader-note-dialog > section,
  .reader-settings-dialog > section,
  .reader-tools-dialog > section { padding: 1.15rem 1rem max(1.4rem, env(safe-area-inset-bottom)); }
  .reader-editor-grid { grid-template-columns: 1fr; }
  .reader-tool-actions { grid-template-columns: 1fr; }
  .reader-undo-banner { bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .reader-video-card { grid-template-columns: 1fr; }
  .reader-video-card > a { justify-self: start; margin-left: 3.5rem; }
  .reader-video-dialog > section { min-height: 20rem; padding: 1rem .75rem max(1rem, env(safe-area-inset-bottom)); }
}

/* The reader Circle follows the chapter and deliberately does not inherit the retired companion-panel spacing. */
@media (max-width: 767px) {
  .reader-circle-panel { width: calc(100% - 1.5rem); margin: 2.75rem auto 3.4rem; padding-top: 0; }
  .reader-circle-message.is-reply { border-left: 0; }
  .reader-circle-message.is-reply.is-circle-message-new,
  .reader-circle-message.is-reply.is-circle-message-updated { margin-left: 0; }
}

@media (max-width: 390px) {
  .scripture-reader-room .reader-verses .scripture-verse { font-size: calc(1.18rem * var(--reader-font-scale)); }
  .reader-welcome-card summary { grid-template-columns: 1.8rem minmax(0, 1fr) 1rem; padding-inline: .75rem; }
  .reader-welcome-star .picto { width: 1.7rem; height: 1.7rem; }
  .circle-vote-actions { grid-template-columns: 1fr; }
  .circle-compose-foot { align-items: flex-start; flex-direction: column; }
  .circle-compose-actions { width: 100%; justify-content: stretch; }
  .circle-compose-actions > button { flex: 1 1 auto; }
  .reader-circle-message.is-root { padding-left: 3.7rem; }
  .reader-circle-replies,
  .reader-circle-thread-detail .reader-circle-replies { margin-left: 3.7rem; }
  .reader-circle-message.is-reply.is-nested { margin-left: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scripture-reader-room .scripture-sheet { scroll-behavior: auto; }
  .scripture-reader-room,
  .reader-room-topbar,
  .reader-chapter-art,
  .reader-chapter-heading,
  .reader-welcome-card,
  .scripture-reader-room .reader-verses,
  .scripture-reader-room .reader-verses .scripture-verse::before,
  .reader-scroll-progress > i b::after,
  .reader-audio-toggle,
  .is-reader-panel-entering,
  .is-reader-feedback-entering,
  .scripture-reader-room.is-reader-closing,
  .scripture-reader-room .scripture-selection-bar:not([hidden]),
  .reader-note-dialog[open],
  .reader-settings-dialog[open],
  .reader-video-dialog[open],
  .reader-tools-dialog[open],
  .scripture-reader-room .scripture-share-dialog[open],
  .reader-note-dialog.is-reader-dialog-closing,
  .reader-settings-dialog.is-reader-dialog-closing,
  .reader-video-dialog.is-reader-dialog-closing,
  .reader-tools-dialog.is-reader-dialog-closing,
  .scripture-reader-room .scripture-share-dialog.is-reader-dialog-closing,
  .reader-note-dialog[open]::backdrop,
  .reader-settings-dialog[open]::backdrop,
  .reader-video-dialog[open]::backdrop,
  .reader-tools-dialog[open]::backdrop,
  .scripture-reader-room .scripture-share-dialog[open]::backdrop,
  .reader-mark-card.is-new,
  .reader-chapter-quiz-button,
  .reader-circle-audience-trigger i,
  .circle-reply-body,
  .circle-inline-editor.is-circle-editor-open,
  .is-circle-selection-context-entering,
  .circle-message.is-circle-message-new,
  .circle-message.is-circle-message-updated,
  .circle-result-track i { animation: none; transition: none; }
}

@media (forced-colors: active) {
  .reader-audio-toggle { border-color: ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; forced-color-adjust: auto; }
  .scripture-reader-room .reader-audio-toggle:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .scripture-reader-room .reader-audio-toggle:focus-visible::after { display: none; }
  .reader-chapter-quiz,
  .reader-chapter-quiz-emblem,
  .reader-chapter-quiz-button { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; forced-color-adjust: auto; }
  .reader-chapter-quiz-button:focus-visible { outline-color: Highlight; }
  .reader-circle-audience-trigger,
  .reader-circle-audience-menu,
  .reader-circle-audience-menu button { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
  .reader-circle-audience-menu button[aria-selected="true"] .reader-circle-audience-check { color: Highlight; }
}

.scripture-community-page,
.scripture-profile-posts-page {
  --reader-ivory: #fffaf0;
  --reader-paper: #fffdf7;
  --reader-ink: #202831;
  --reader-muted: #777166;
  --reader-gold: #b77a13;
  --reader-line: rgba(172, 124, 41, .25);
  width: min(44rem, calc(100% - 2rem));
  margin: max(5.5rem, calc(env(safe-area-inset-top) + 4.5rem)) auto 4rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--reader-line);
  border-radius: 1rem;
  background: var(--reader-ivory);
  color: var(--reader-ink);
}
.scripture-community-page > header,
.scripture-profile-posts-page > header { display: grid; gap: .5rem; margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--reader-line); }
.scripture-community-page > header > p,
.scripture-profile-posts-page > header > p { margin: 0; color: var(--reader-gold); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.scripture-community-page > header h1,
.scripture-profile-posts-page > header h1 { margin: 0; font: 650 clamp(2rem, 6vw, 3rem)/1 var(--font-display); }
.scripture-community-page > header > span,
.scripture-profile-posts-page > header > span,
.scripture-profile-posts-page > header > small { color: var(--reader-muted); line-height: 1.45; }
.scripture-community-page .reader-companion-section { display: block; }
.scripture-profile-post-list { display: grid; gap: .75rem; }
.scripture-profile-post { display: grid; gap: .75rem; padding: 1rem 1.1rem; border: 1px solid var(--reader-line); border-radius: .7rem; background: var(--reader-paper); }
.scripture-profile-post > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--reader-gold); font-size: .75rem; }
.scripture-profile-post p { margin: 0; overflow-wrap: anywhere; font: 500 1rem/1.5 var(--font-display); }
.scripture-profile-post footer { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.scripture-profile-post footer a,
.scripture-profile-post footer button { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .45rem 0; border: 0; background: transparent; color: var(--reader-gold); font-size: .75rem; font-weight: 800; cursor: pointer; }
.scripture-profile-more { margin: 1rem auto 0; padding: .5rem 1rem; text-decoration: none; }
.moderation-history-summary { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--reader-line); border-radius: .65rem; background: rgba(238, 216, 172, .16); }
.moderation-history-summary p { margin: 0; color: var(--reader-muted); font-size: .8rem; }
.moderation-event-list { display: grid; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.moderation-event-list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .7rem; min-height: 3.5rem; }
.moderation-event-list li > span { position: relative; border-left: 1px solid var(--reader-line); }
.moderation-event-list li > span::before { content: ""; position: absolute; top: .3rem; left: 0; width: .55rem; height: .55rem; border: 2px solid var(--reader-ivory); border-radius: 50%; background: var(--reader-gold); transform: translateX(-55%); }
.moderation-event-list div { display: grid; align-content: start; gap: .15rem; padding-bottom: 1rem; }
.moderation-event-list small { color: var(--reader-muted); }
.profile-destination-picto { width: 3.625rem; height: 3.625rem; display: grid; place-items: center; border: 1px solid rgba(204, 159, 69, .32); border-radius: 50%; color: #b77a13; background: #fff8e9; }
.profile-destination-picto .picto { width: 2rem; height: 2rem; }

@media (max-width: 600px) {
  .scripture-community-page,
  .scripture-profile-posts-page { width: 100%; margin: 0; min-height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .scripture-profile-post > div { display: grid; gap: .2rem; }
}