/* Final reader corrections: typography control, verse marker and settings preview. */
.verse-number{
  justify-self:center;
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
}

.reader-more-v2{
  align-items:center;
  gap:1px;
  padding:0;
  font-size:18px;
  line-height:1;
  letter-spacing:-.08em;
}
.reader-more-v2>span{display:block;line-height:1}
.reader-more-v2 small{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1;
  letter-spacing:-.08em;
}

/* Settings must leave Scripture readable while its type changes live. */
.settings-dim{
  background:rgba(25,43,35,.10);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
html[data-theme="dark"] .settings-dim{background:rgba(0,0,0,.13)}

/*
 * Keep the chapter title fixed without turning the top of the reader into a
 * separate blurred rectangle.  Scripture now glides under a short, soft
 * ambient fade: no border, shadow or hard backdrop-filter edge appears when
 * the header switches to its sticky state.
 */
.reader-v2__header::before,
.reader-v2__header.is-scrolled::before{
  inset:0 0 auto;
  height:112px;
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--bg) 94%,transparent) 0%,
    color-mix(in srgb,var(--bg) 78%,transparent) 47%,
    transparent 100%
  ) !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html[data-theme="dark"] .reader-v2__header::before,
html[data-theme="dark"] .reader-v2__header.is-scrolled::before{
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--bg) 97%,transparent) 0%,
    color-mix(in srgb,var(--bg) 80%,transparent) 47%,
    transparent 100%
  ) !important;
}

/* Brand roles stay deliberate: purple = active reading, yellow = OT,
   lime = successful action. Red remains reserved for destructive actions. */
.b27-toast{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid color-mix(in srgb,var(--lime) 56%,var(--line));
  background:color-mix(in srgb,var(--glass-strong) 86%,var(--lime) 14%);
  color:var(--ink);
}
.b27-toast::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 18%,transparent);
}

/* Story postcards have a true 9:16 canvas without overwhelming iPhone sheets. */
.b27-studio__sheet[data-view="preview"] canvas,
.b27-studio__sheet[data-view="crop"] canvas{
  width:min(100%,360px);
  margin-inline:auto;
}
.b27-studio__templates button{aspect-ratio:9/16}

/* Dark-mode OT tiles must retain the warm brand role without borrowing the
   black sheet below them.  A stable pale-yellow surface and graphite type are
   readable at every scroll position. */
html[data-theme="dark"] .book-grid[data-old-books] .book-tile{
  color:#3d3211;
  background:linear-gradient(145deg,#fff6d2,#eadb9d) !important;
  border-color:rgba(255,247,210,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(0,0,0,.16);
}
html[data-theme="dark"] .book-grid[data-old-books] .book-tile.is-selected{
  color:#3d3211 !important;
  background:#f4c62b !important;
  border-color:#ffe17a;
}
html[data-theme="dark"] .testament-title.old{color:#f4c62b}
html[data-theme="dark"] .book-search{
  background:linear-gradient(transparent 0%,rgba(27,31,29,.90) 30%,rgba(27,31,29,.98) 100%);
}
html[data-theme="dark"] .book-search label{
  background:rgba(50,53,51,.92);
}

/* Reader light theme: the page rests on one fixed ambient wall.  The blurred
   blinds and distant botanical shadows never scroll with the Scripture; only
   the reader and its glass controls move above this foundation. */
html:not([data-theme="dark"]) .ambient{
  background:
    radial-gradient(90% 58% at -7% 8%,rgba(255,255,252,.88),transparent 68%),
    radial-gradient(64% 54% at 103% 64%,rgba(128,163,139,.31),transparent 73%),
    radial-gradient(72% 43% at 44% 106%,rgba(226,215,238,.22),transparent 76%),
    #d8e2d9;
}
html:not([data-theme="dark"]) .ambient::before{
  inset:-12% -24%;
  width:auto;
  height:auto;
  border-radius:0;
  opacity:.43;
  background:
    repeating-linear-gradient(128deg,transparent 0 70px,rgba(44,62,50,.19) 71px 80px,transparent 81px 142px),
    linear-gradient(114deg,rgba(78,113,88,.24),transparent 58%);
  filter:blur(15px) saturate(.72);
  transform:rotate(-6deg) scale(1.08);
}
html:not([data-theme="dark"]) .ambient::after{
  inset:-10% -22%;
  width:auto;
  height:auto;
  border-radius:0;
  opacity:.48;
  background:
    radial-gradient(54% 6% at 90% 18%,rgba(38,66,48,.38) 0 37%,transparent 68%),
    radial-gradient(46% 5% at 82% 30%,rgba(38,66,48,.32) 0 37%,transparent 68%),
    radial-gradient(51% 7% at 94% 43%,rgba(38,66,48,.28) 0 37%,transparent 68%),
    radial-gradient(45% 6% at 79% 56%,rgba(38,66,48,.23) 0 37%,transparent 68%);
  filter:blur(18px) saturate(.68);
  transform:rotate(-6deg) scale(1.08);
}
html:not([data-theme="dark"]) .ambient i:nth-child(1){
  width:74vw;height:34vw;left:-25vw;top:63vh;
  background:rgba(59,94,70,.13);filter:blur(60px);opacity:.52;
}
html:not([data-theme="dark"]) .ambient i:nth-child(2){
  width:48vw;height:22vw;right:-13vw;top:11vh;
  background:rgba(181,203,164,.24);filter:blur(54px);opacity:.56;
}
html:not([data-theme="dark"]) .ambient i:nth-child(3){
  width:44vw;height:22vw;left:38vw;top:43vh;
  background:rgba(183,165,220,.14);filter:blur(58px);opacity:.48;
}

/* Selection is a single lavender surface: no legacy coloured rail. */
.verse.selected{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 7px 20px rgba(83,64,128,.09);
}