/* sermons/css/sermons.css
   Brave Life Sermons: hub + detail. Layout only.
   Colors, type, spacing, radii come from /shared/tokens.css; reset, .container, .card, .btn, .badge,
   .eyebrow, .section-*, .skeleton, .skip-link, focus ring come from /shared/base.css.
   Mobile-first. Breakpoints in this block: 768 and 1024 only.
   The Section Pager, Reading-size toggle, Scripture drawer and Live Mode blocks further down are
   kept exactly as shipped (they are the good stuff). */

/* ========== HUB: HERO ========== */
.sermons-hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-6);
  overflow: hidden;
}
.sermons-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(600px, 100%);
  height: 320px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--brand-orange) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.sermons-hero .section-header { position: relative; margin-bottom: 0; }
.sermons-hero h1 { margin-bottom: var(--space-3); }

/* ========== HUB: CONTROLS (topic pills + layout toggle) ========== */
.sermons-section { padding-bottom: var(--section-y); }

.sermons-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.tag-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-filters[hidden] { display: none; }

.tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tag-pill:hover { color: var(--color-text); border-color: rgba(250, 246, 241, 0.3); }
.tag-pill[aria-pressed="true"] {
  background: var(--brand-orange);
  border-color: transparent;
  color: var(--color-on-orange);
}

.view-toggle { display: flex; gap: var(--space-1); margin-left: auto; }
.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.view-btn svg { width: 20px; height: 20px; }
.view-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.view-btn[aria-pressed="true"] {
  border-color: var(--brand-orange);
  color: var(--brand-orange-hot);
  background: color-mix(in srgb, var(--brand-orange) 12%, transparent);
}

/* ========== HUB: CARD GRID ========== */
.sermons-grid { display: grid; gap: var(--space-4); }
.skeleton-card { aspect-ratio: 16 / 12; }

.sermon-card { display: flex; flex-direction: column; }

.sermon-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-2);
}
.sermon-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sermon-card:hover .sermon-card-image img { transform: scale(1.03); }
/* Bright by default; only a gentle scrim along the bottom so the media badge stays legible */
.sermon-card-image::after {
  content: '';
  position: absolute;
  inset: 60% 0 0;
  background: linear-gradient(180deg, transparent, var(--color-scrim));
  pointer-events: none;
}

/* No thumbnail: branded surface with the sermon's first letter */
.sermon-card-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 80% 100%, color-mix(in srgb, var(--brand-orange) 22%, transparent), transparent 70%),
    linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 14vw, 6rem);
  line-height: 1;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-orange) 60%, var(--color-surface));
}

.sermon-card-badge { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 1; }
.sermon-card-badge svg { width: 12px; height: 12px; }

.sermon-card-body {
  flex: 1;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.sermon-card-tags { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.sermon-card-tag {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-orange);
}
.sermon-card-tag + .sermon-card-tag::before { content: '·'; margin-right: var(--space-2); color: var(--color-text-faint); }
.sermon-card-title { margin: 0; font-size: var(--text-lg); line-height: 1.25; }
.sermon-card-meta { margin: 0; font-size: var(--text-sm); }
.sermon-card-cta { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); }

/* ========== HUB: EMPTY STATE ========== */
.sermons-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-8) var(--space-5); }
.sermons-empty svg { width: 48px; height: 48px; color: var(--color-text-faint); margin-bottom: var(--space-3); }
.sermons-empty h2 { margin-bottom: var(--space-2); }
.sermons-empty .btn { margin-top: var(--space-3); }

/* ========== HUB: LIST VIEW ========== */
/* Phones: each row is a stacked card. ≥768: a real table. The title is the link; the row follows it. */
.sermons-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sermons-table thead { display: none; }
.sermons-table, .sermons-table tbody, .sermons-table tr, .sermons-table td { display: block; }
.sermons-table tbody tr {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor: pointer;
}
.sermons-table tbody tr:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.sermons-table td { padding: 2px 0; }
.sermons-table td:empty { display: none; }
.sermons-table thead th {
  text-align: left;
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.table-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}
.table-link:hover { color: var(--brand-orange-hot); }
.table-location { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.table-date { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-tags { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.table-media { display: flex; gap: var(--space-2); }
.table-arrow { display: none; color: var(--color-text-faint); font-size: var(--text-lg); line-height: 1; }
.sermons-table tbody tr:hover .table-arrow { color: var(--brand-orange-hot); }

/* ========== DETAIL: HERO ========== */
/* Phones: image box (16:9, min 220px) then a dark text band. ≥768: image behind the text with a scrim.
   No thumbnail: plain dark band. */
.detail-hero { position: relative; background: var(--color-bg-raised); border-bottom: 1px solid var(--color-border); overflow-x: clip; }
.detail-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  max-height: 60svh;
  overflow: hidden;
  background: var(--color-surface);
}
.detail-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.detail-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--color-bg-raised) 100%);
  pointer-events: none;
}
.detail-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
  text-align: center;
}
.back-link { align-self: flex-start; min-height: 44px; margin-bottom: var(--space-3); }
.detail-hero-content { display: block; }
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.detail-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.detail-meta-item svg { width: 16px; height: 16px; opacity: 0.7; }
.detail-title { margin-bottom: var(--space-3); }
.detail-description { margin: 0 auto; }
.detail-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.detail-tag { min-height: 44px; padding-inline: var(--space-4); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.detail-tag:hover { border-color: var(--brand-orange); color: var(--brand-orange-hot); }

.detail-notfound { text-align: center; padding: var(--space-10) 0; }

/* Skeleton lines used by sermon.html while the sermon loads */
.skeleton-line { height: 16px; width: 60%; margin: 0 auto var(--space-3); border-radius: var(--radius-sm); }
.skeleton-line--short { width: 100px; }
.skeleton-line--title { height: 40px; width: 80%; }

/* ========== DETAIL: SECTIONS ========== */
.sermon-notes-section,
.sermon-video-section,
.sermon-transcript-section,
.sermon-scriptures-section {
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--color-border);
}
.related-sermons-section { padding: var(--space-9) 0 var(--section-y); }

/* ========== DETAIL: NOTES (reading column) ========== */
/* Base sizes here; the Reading-size block below scales them with --bln-text-scale. */
.sermon-notes-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  text-align: left;
}
.sermon-notes-content h1,
.sermon-notes-content h2,
.sermon-notes-content h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3);
  text-transform: none;
  text-wrap: balance;
}
.sermon-notes-content h1 { font-size: 28px; }
.sermon-notes-content h2 { font-size: 26px; }
.sermon-notes-content h3 { font-size: 20px; }
.sermon-notes-content h2 + h3 { margin-top: var(--space-4); }
.sermon-notes-content p,
.sermon-notes-content li { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.sermon-notes-content p { margin-bottom: var(--space-4); }
.sermon-notes-content ul,
.sermon-notes-content ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.sermon-notes-content li { margin-bottom: var(--space-2); }
.sermon-notes-content blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-orange-hot);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--brand-orange) 8%, transparent);
  color: var(--color-text-muted);
  font-style: italic;
}
.sermon-notes-content strong { font-weight: 700; color: var(--color-text); }
.sermon-notes-content a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }

/* ========== DETAIL: TRANSCRIPT ========== */
.transcript-toggle { margin-top: var(--space-3); }
.transcript-content { display: none; }
.transcript-content.expanded { display: block; animation: fadeIn var(--dur) var(--ease-out); }
.transcript-content .sermon-notes-content { margin-top: var(--space-5); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== DETAIL: VIDEO ========== */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ========== DETAIL: SCRIPTURES ========== */
.scriptures-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.scripture-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.scripture-pill svg { width: 14px; height: 14px; opacity: 0.6; }
.scripture-pill:hover { color: var(--color-text); border-color: rgba(250, 246, 241, 0.3); }

/* ========== DETAIL: RELATED ========== */
.related-sermons-grid { display: grid; gap: var(--space-4); text-align: left; }

/* ========== BREAKPOINTS ========== */
@media (min-width: 768px) {
  .sermons-hero { padding: var(--space-10) 0 var(--space-7); }
  .sermons-grid, .related-sermons-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

  /* Real table */
  .sermons-table { border-spacing: 0 var(--space-2); }
  .sermons-table thead { display: table-header-group; }
  .sermons-table tbody { display: table-row-group; }
  .sermons-table tr { display: table-row; }
  .sermons-table td { display: table-cell; padding: var(--space-3) var(--space-4); vertical-align: middle; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .sermons-table td:empty { display: table-cell; }
  .sermons-table tbody tr { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; }
  .sermons-table td:first-child { border-left: 1px solid var(--color-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .sermons-table td:last-child { border-right: 1px solid var(--color-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; width: 44px; text-align: center; }
  .table-arrow { display: inline; }

  /* Hero: image behind the title */
  .detail-hero--image .detail-hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
  }
  .detail-hero--image .detail-hero__media::after {
    background: linear-gradient(180deg, var(--color-scrim) 0%, rgba(10, 9, 8, 0.35) 35%, var(--color-bg-raised) 100%);
  }
  .detail-hero--image .detail-hero__inner { min-height: 480px; justify-content: flex-end; padding-top: var(--space-9); }
  .detail-hero__inner { padding-bottom: var(--space-8); }
}

@media (min-width: 1024px) {
  .sermons-grid, .related-sermons-grid { grid-template-columns: repeat(3, 1fr); }
  .detail-hero--image .detail-hero__inner { min-height: 560px; }
}

/* ============================================================
   Section Pager (scrollspy) — sticky chip nav for sermon notes
   Auto-built by sermon-detail.js from <h2> elements inside
   .sermon-notes-content. Hidden when there are < 2 sections.
   ============================================================ */

.section-pager {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: rgba(8, 10, 12, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 24px;
}

.section-pager__inner {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-pager__inner::-webkit-scrollbar { display: none; }

.section-pager__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  text-decoration: none;
}

.section-pager__chip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.section-pager__chip__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.section-pager__chip--active {
  background: rgba(95, 252, 192, 0.10);
  border-color: rgba(95, 252, 192, 0.45);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(95, 252, 192, 0.18), 0 6px 24px -10px rgba(95, 252, 192, 0.45);
}

.section-pager__chip--active .section-pager__chip__num {
  background: rgba(95, 252, 192, 0.85);
  color: #001310;
}

/* Smooth-scroll anchor offset clears nav (80) + pager (~46) + breathing room */
.sermon-notes-content h2[id],
.sermon-notes-content h3[id] {
  scroll-margin-top: 140px;
}

@media (max-width: 768px) {
  .section-pager { top: 56px; }
  .section-pager__inner { padding: 10px 16px; gap: 6px; }
  .section-pager__chip { font-size: 12px; padding: 7px 12px; }
  .sermon-notes-content h2[id],
  .sermon-notes-content h3[id] { scroll-margin-top: 110px; }
}

/* ============================================================
   Sermon detail page — center alignment for all sections.
   Section-level text-align centers inline-flex labels and any
   block headings; reading content (.sermon-notes-content) opts
   back into left-aligned text for readability.
   ============================================================ */
.sermon-notes-section,
.sermon-video-section,
.sermon-transcript-section,
.sermon-scriptures-section,
.related-sermons-section {
  text-align: center;
}

.scriptures-list { justify-content: center; }
.related-sermons-section .section-title { text-align: center; }

/* Pager chips center when they fit; "safe" falls back to start
   when chips overflow on mobile so they remain reachable via
   horizontal scroll. */
.section-pager__inner {
  justify-content: safe center;
}

/* ============================================================
   Living Margin + Progress Beacon + View Transitions
   Three layered motion cues that communicate "this is where you
   are in the message" without ever moving content. All driven by
   CSS variables that JS updates each scroll frame.
   ============================================================ */

/* Progress beacon — 2px mint bar pinned to the bottom edge of the
   sticky chip pager. Fills left→right as the reader scrolls through
   the active section, then resets to 0 when the active chip changes.
   `--progress` is a unit value 0..1 set in JS. */
.section-pager__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right,
    rgba(95, 252, 192, 0.85) 0%,
    rgba(95, 252, 192, 0.85) 100%);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: transform 100ms linear;
  pointer-events: none;
  z-index: 1;
}

/* The pager already has `position: sticky`, which establishes a
   containing block for absolutely positioned descendants — so the
   progress bar anchors to the pager's bottom edge correctly. */

/* Living margin line — a 2px mint vertical line in the left margin
   of the active section's heading. Grows top-down with scroll
   progress; jumps to the new heading on section handoff. JS sets
   `--margin-progress` (0..1) on the active <h2 id> and clears it
   on every other heading. */
.sermon-notes-content h2[id] {
  position: relative;
}

.sermon-notes-content h2[id]::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(95, 252, 192, 0.65);
  transform: scaleY(var(--margin-progress, 0));
  transform-origin: top;
  transition: transform 120ms linear;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sermon-notes-content h2[id]::before { left: -8px; }
}

/* View Transitions — name the active chip so the mint glow morphs
   smoothly between chips on handoff. The API is opt-in: browsers
   without support fall through to the synchronous class swap. */
.section-pager__chip--active {
  view-transition-name: bln-chip-active;
}

::view-transition-old(bln-chip-active),
::view-transition-new(bln-chip-active) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Honor the system reduced-motion preference: kill the linear
   transitions on the beacons (they remain accurate, just no tween). */
@media (prefers-reduced-motion: reduce) {
  .section-pager__progress { transition: none; }
  .sermon-notes-content h2[id]::before { transition: none; }
}

/* === Reading size toggle === */
/* 3-step reading scale (1x / 1.18x / 1.36x) controlled via the
   --bln-text-scale CSS variable on <html>. All reading content
   (hero description, notes body, headings, scripture pills) scales
   together, so the page stays visually coherent and centered.
   Toggle pill is bottom-right, sized to Apple HIG (44px tall) so
   iOS doesn't interpret taps as double-tap-zoom. */

html { --bln-text-scale: 1; }
html[data-bln-size="lg"] { --bln-text-scale: 1.18; }
html[data-bln-size="xl"] { --bln-text-scale: 1.36; }

/* Apply the scale across reading content. !important is scoped to
   these rules so the existing px rules (which we want as base values)
   are overridden only when the user has opted in. */
.sermon-notes-content { font-size: calc(17px * var(--bln-text-scale)) !important; }
.sermon-notes-content h2 { font-size: calc(26px * var(--bln-text-scale)) !important; }
.sermon-notes-content h3 { font-size: calc(20px * var(--bln-text-scale)) !important; }
.sermon-notes-content p,
.sermon-notes-content li,
.sermon-notes-content blockquote { font-size: inherit; }
.detail-description { font-size: calc(16px * var(--bln-text-scale)) !important; }
.detail-title { font-size: calc(42px * var(--bln-text-scale)) !important; }
.scripture-pill { font-size: calc(13px * var(--bln-text-scale)) !important; }

/* Mobile reading content is slightly tighter at base (line-height 1.55) */
@media (max-width: 768px) {
  .sermon-notes-content { font-size: calc(17px * var(--bln-text-scale)) !important; }
  .detail-title { font-size: calc(28px * var(--bln-text-scale)) !important; }
}

.bln-size-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(8, 10, 12, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;  /* Prevent iOS double-tap zoom on the pill */
}

.bln-size-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  touch-action: manipulation;  /* Disable iOS double-tap zoom on the button itself */
  -webkit-tap-highlight-color: transparent;
}

.bln-size-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bln-size-toggle__btn:focus-visible {
  outline: 2px solid #7CE7B0;
  outline-offset: 2px;
}

/* Visible "active step" indicator on the size pill */
.bln-size-toggle__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .bln-size-toggle__btn {
    transition: none;
  }
}

/* === Inline scripture drawer === */
/* Tappable scripture refs auto-wrapped inside .sermon-notes-content,
   plus an enhanced .scripture-pill click target. Tapping opens the
   bottom-sheet (mobile) / right-side panel (desktop) drawer below. */

.bln-scripture-ref {
  display: inline;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(95, 252, 192, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.bln-scripture-ref:hover {
  color: #fff;
  text-decoration-color: rgba(95, 252, 192, 0.8);
}

.bln-scripture-ref:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scripture pill is upgraded to a tappable button via JS — give a
   subtle interactive cue so users know they're clickable. */
.scripture-pill[role="button"] { cursor: pointer; }
.scripture-pill[role="button"]:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

/* Body scroll lock while drawer is open */
body.bln-drawer-open {
  overflow: hidden;
}

/* Drawer container (wrapper) — does not block pointer events when closed */
.bln-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.bln-drawer.is-open { pointer-events: auto; }

.bln-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.bln-drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.bln-drawer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: rgba(12, 14, 16, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  color: #E8E8E8;
  pointer-events: auto;
}
.bln-drawer-panel.is-open { transform: translateY(0); }
.bln-drawer-panel:focus { outline: none; }

@media (min-width: 768px) {
  .bln-drawer-panel {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(480px, 100vw);
    max-height: 100vh;
    border-radius: 16px 0 0 16px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(100%);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  }
  .bln-drawer-panel.is-open { transform: translateX(0); }
}

.bln-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.bln-drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.bln-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.bln-drawer-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.bln-drawer-close:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

.bln-drawer-body {
  padding: 0 20px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.bln-drawer-passage { padding-top: 16px; }

.bln-drawer-verse {
  display: block;
  font-size: 17px;
  line-height: 1.6;
  color: #E8E8E8;
  font-weight: 400;
  margin: 0 0 12px;
  padding-left: 28px;
  text-indent: -28px;
}

.bln-drawer-verse-num {
  display: inline-block;
  width: 24px;
  margin-right: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: rgba(95, 252, 192, 0.85);
  vertical-align: baseline;
}

.bln-drawer-verse-text { color: #E8E8E8; }

.bln-drawer-text {
  font-size: 17px;
  line-height: 1.6;
  color: #E8E8E8;
  margin: 16px 0 0;
}

.bln-drawer-attribution {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

.bln-drawer-error {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #E8E8E8;
}
.bln-drawer-error a {
  color: rgba(95, 252, 192, 0.95);
  text-decoration: underline;
}

/* Skeleton (reuses skeleton-shimmer keyframe) */
.bln-drawer-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.bln-drawer-skeleton-line {
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.bln-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bln-drawer-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.bln-drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 12px 16px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.92);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.18) 18%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.18) 82%,
      rgba(255, 255, 255, 0.32) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.bln-drawer-btn:hover {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)),
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.22) 18%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0.22) 82%,
      rgba(255, 255, 255, 0.42) 100%);
  color: #fff;
}

.bln-drawer-btn:focus-visible {
  outline: 2px solid rgba(95, 252, 192, 0.85);
  outline-offset: 2px;
}

.bln-drawer-btn--copy {
  background-image:
    linear-gradient(rgba(95, 252, 192, 0.10), rgba(95, 252, 192, 0.06)),
    linear-gradient(160deg,
      rgba(95, 252, 192, 0.55) 0%,
      rgba(95, 252, 192, 0.25) 25%,
      rgba(95, 252, 192, 0.04) 50%,
      rgba(95, 252, 192, 0.25) 75%,
      rgba(95, 252, 192, 0.55) 100%);
  color: #E8FFF6;
  box-shadow: 0 6px 24px -10px rgba(95, 252, 192, 0.45);
}

.bln-drawer-btn--copy:hover {
  background-image:
    linear-gradient(rgba(95, 252, 192, 0.16), rgba(95, 252, 192, 0.10)),
    linear-gradient(160deg,
      rgba(95, 252, 192, 0.7) 0%,
      rgba(95, 252, 192, 0.32) 25%,
      rgba(95, 252, 192, 0.06) 50%,
      rgba(95, 252, 192, 0.32) 75%,
      rgba(95, 252, 192, 0.7) 100%);
  color: #fff;
}

/* Toast — mint-glow confirmation, 2s lifetime via JS */
.bln-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 95;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #001310;
  background: rgba(95, 252, 192, 0.92);
  box-shadow: 0 6px 24px -8px rgba(95, 252, 192, 0.55), 0 0 0 1px rgba(95, 252, 192, 0.4);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}
.bln-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bln-drawer-scrim,
  .bln-drawer-panel,
  .bln-toast {
    transition: opacity 120ms linear !important;
  }
  .bln-drawer-panel {
    transform: none !important;
    opacity: 0;
  }
  .bln-drawer-panel.is-open {
    transform: none !important;
    opacity: 1;
  }
  .bln-drawer-skeleton-line {
    animation: none;
  }
}

/* === Live Mode === */
/* Pastor cues active section from a tablet; readers see a "LIVE" badge in the
   chip pager, a soft mint pulse on the active chip + heading, and an opt-in
   "Follow Live" floating pill that auto-scrolls to the active section. The
   reader-side JS toggles classes; the styles below own all visuals. */

.section-pager { position: relative; }

.bln-live-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 999px;
  pointer-events: none;
  z-index: 5;
}
.bln-live-on .bln-live-badge { display: inline-flex; }
.bln-live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: bln-live-dot-pulse 1.6s ease-out infinite;
}
@keyframes bln-live-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

/* Active chip — soft mint glow + 4s pulse */
.section-pager__chip.bln-live-active {
  border-color: rgba(110, 231, 183, 0.55) !important;
  background: rgba(16, 185, 129, 0.10);
  color: #d1fae5;
  box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.35), 0 0 20px rgba(16, 185, 129, 0.25);
  animation: bln-live-chip-pulse 4s ease-in-out infinite;
}
@keyframes bln-live-chip-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.30), 0 0 14px rgba(16, 185, 129, 0.18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.55), 0 0 26px rgba(16, 185, 129, 0.40);
  }
}

/* Active heading — single mint underline drawn-once on activation. We use a
   distinct visual (underline) to avoid colliding with any left-border
   "living margin" treatments other agents may add. */
.sermon-notes-content h2.bln-live-active {
  position: relative;
  color: #ecfdf5;
  transition: color 280ms ease;
}
.sermon-notes-content h2.bln-live-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(16,185,129,0) 0%, rgba(16,185,129,0.95) 50%, rgba(16,185,129,0) 100%);
  border-radius: 2px;
  animation: bln-live-underline-draw 900ms cubic-bezier(.2,.7,.2,1) forwards,
             bln-live-underline-glow 4s ease-in-out 900ms infinite;
}
@keyframes bln-live-underline-draw {
  from { width: 0; opacity: 0; }
  to   { width: min(180px, 40%); opacity: 1; }
}
@keyframes bln-live-underline-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.65)); }
}

/* Floating "Follow Live" pill — bottom-left, dormant when not live */
.bln-follow-live {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  font: 500 13px/1 'Kanit','Inter',-apple-system,sans-serif;
  color: #e5e7eb;
  background: rgba(17, 17, 17, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 120ms ease;
}
.bln-follow-live:hover { transform: translateY(-1px); }
.bln-follow-live[hidden] { display: none !important; }
.bln-follow-live__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(110, 231, 183, 0.35);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.55);
  transition: background 200ms ease, box-shadow 200ms ease;
}
/* Soft mint pulse on the pill itself when live (dormant pill = no pulse) */
.bln-live-on .bln-follow-live {
  animation: bln-follow-live-breath 4s ease-in-out infinite;
}
@keyframes bln-follow-live-breath {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(16, 185, 129, 0.0); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 22px 0 rgba(16, 185, 129, 0.28); }
}
.bln-follow-live.is-on {
  color: #d1fae5;
  border-color: rgba(110, 231, 183, 0.65);
  background: rgba(16, 185, 129, 0.16);
}
.bln-follow-live.is-on .bln-follow-live__dot {
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

/* Reduced motion: disable all Live Mode animations */
@media (prefers-reduced-motion: reduce) {
  .bln-live-badge__dot,
  .section-pager__chip.bln-live-active,
  .bln-live-on .bln-follow-live { animation: none !important; }
  .sermon-notes-content h2.bln-live-active::after {
    animation: none !important;
    width: min(180px, 40%);
    opacity: 1;
  }
}

/* Mobile — keep the pill out of the way of any size toggle that lives
   bottom-right. We sit on the LEFT and shrink slightly. */
@media (max-width: 640px) {
  .bln-follow-live {
    left: 12px;
    bottom: 12px;
    padding: 8px 12px 8px 10px;
    font-size: 12px;
  }
  .bln-live-badge { top: 6px; right: 8px; font-size: 10px; padding: 3px 8px 3px 6px; }
}


/* ============================================================
   Overrides layered on the kept blocks above (tokens only, no behavior change):
   the sticky pager sits directly under the shared header at every width.
   ============================================================ */
.section-pager { top: var(--header-h); }