/* ============================================================
   theBible.net — main.css
   Ported from bible-net-v2/apps/web/src/styles/index.css
   ============================================================ */

/* ------------------------------------------------------------
   Google Fonts import
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   CSS custom properties — light theme (default)
   ------------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg: 246 247 249;
  --fg: 51 51 51;
  --surface-1: 255 255 255;
  --surface-2: 238 241 244;
  --surface-3: 229 231 235;
  --muted: 107 114 128;
  --accent: 25 98 134;
  --reading-pane-font-size: 16px;
  --reading-pane-font-family: 'Merriweather', 'Source Serif 4', Georgia, serif;

  /* Reading comfort */
  --font-verse: 'Merriweather', 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --reading-line-height: 1.75;
  --reading-measure: 820px;
  --reading-verse-gap: 16px;
}

/* ------------------------------------------------------------
   Dark theme
   ------------------------------------------------------------ */
html.dark {
  color-scheme: dark;
  --bg: 18 18 18;
  --fg: 226 232 240;
  --surface-1: 30 30 30;
  --surface-2: 31 41 55;
  --surface-3: 55 65 81;
  --muted: 156 163 175;
  --accent: 96 165 250;
}

/* ------------------------------------------------------------
   Base reset
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, 'Segoe UI', sans-serif;
  color: rgb(var(--fg));
  background: rgb(var(--bg));
}

button,
input,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Typography utility classes
   ------------------------------------------------------------ */
.font-headline {
  font-family: var(--font-verse);
}

.scripture-text {
  font-family: var(--font-verse);
}

.font-serif-verse {
  font-family: var(--font-verse);
}

/* ------------------------------------------------------------
   Safe-area utility
   ------------------------------------------------------------ */
.safe-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------
   App shell layout (grid defined in reader.html inline styles)
   ------------------------------------------------------------ */
.app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
}

/* ------------------------------------------------------------
   Tag management (#5) — lives in the Settings modal's "Tags" tab
   (see settings_modal.html / tags.js), not a standalone panel.
   ------------------------------------------------------------ */

/* The containing block for #tags-color-popover's `position: absolute`
   (see .tag-color-popover and tags.js _positionColorPopover) -- without
   this the popover would anchor to the next positioned ancestor up the
   tree instead, which isn't where its position is computed relative to. */
#settings-section-tags {
  position: relative;
}

/* Empty-state icon — gentle color cycle hinting at the tag colors the user
   is about to create. No pulse/scale — that read as "breathing", which
   felt off for a static UI element. Respects reduced-motion. */
.tags-empty-icon {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  animation: tagsEmptyIconCycle 7s ease-in-out infinite;
}
@keyframes tagsEmptyIconCycle {
  0%, 100% { color: #3b82f6; background: rgba(59, 130, 246, 0.12); }
  25%      { color: #ec4899; background: rgba(236, 72, 153, 0.12); }
  50%      { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
  75%      { color: #10b981; background: rgba(16, 185, 129, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .tags-empty-icon {
    animation: none;
    color: rgb(var(--accent));
    background: rgb(var(--accent) / 0.1);
  }
}

/* Tag row — edit/delete icons hidden until hover on devices with real
   hover (mouse). Touch devices have no hover, so they stay visible —
   tap-to-reveal-then-tap-action would just be an extra step with no
   benefit there. */
.tag-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.625rem;
  padding: 0.5rem;
  transition: background-color 150ms ease;
}
.tag-row:hover {
  background: rgb(var(--surface-2));
}
.tag-row__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgb(var(--muted));
  margin-left: auto;
  padding-right: 0.375rem;
}

/* Tag name + color dot — on hover the dot morphs into a pill that spans
   behind the whole name, then shrinks back to a dot when the hover ends. */
.tag-row__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  /* Equal left/right padding here, not on .tag-row__name -- the pill's
     width:100% on hover resolves against this element's padding box (an
     absolutely positioned child's containing block is the padding edge
     of its positioned ancestor), so the gap before vs. after the text
     is governed entirely by this one symmetric value, not split across
     two elements that could drift out of sync. */
  padding: 0 1.25rem;
}
.tag-row__pill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 999px;
  background: var(--tag-color, #888);
  transform: translateY(-50%);
  z-index: 0;
}
.tag-row__name {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  white-space: nowrap;
  color: rgb(var(--fg));
}
@media (hover: hover) {
  .tag-row__pill {
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms ease;
  }
  .tag-row__name {
    transition: color 200ms ease;
  }
  .tag-row:hover .tag-row__pill {
    width: 100%;
    height: 1.375rem;
  }
  .tag-row:hover .tag-row__name {
    color: #fff;
  }
}

.tag-row__actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
@media (hover: hover) {
  .tag-row__actions {
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .tag-row:hover .tag-row__actions {
    opacity: 1;
    transform: translateX(0);
  }
}

.tag-row__icon-btn {
  display: flex;
  height: 2.125rem;
  width: 2.125rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.tag-row__icon-btn:hover {
  background: rgb(var(--surface-3));
  color: rgb(var(--accent));
}
.tag-row__icon-btn--danger:hover {
  color: #ef4444;
}

/* Trash -> trash-2 icon swap on hover, same technique as the verse action
   panel's default/hover icon pairs. */
.tag-row__icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.tag-row__icon-default,
.tag-row__icon-hover {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.tag-row__icon-hover {
  opacity: 0;
  transform: scale(0.7);
}
@media (hover: hover) {
  .tag-row__icon-btn:hover .tag-row__icon-default {
    opacity: 0;
    transform: scale(0.7);
  }
  .tag-row__icon-btn:hover .tag-row__icon-hover {
    opacity: 1;
    transform: scale(1);
  }
}

/* Round color swatch trigger + popover */
.tag-color-swatch {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 999px;
  border: 2px solid rgb(var(--surface-1));
  box-shadow: 0 0 0 1.5px rgb(var(--fg) / 0.15);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.tag-color-swatch:hover {
  transform: scale(1.06);
}
.tag-color-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent));
}

/* Positioned absolute relative to #settings-section-tags (below), not
   fixed to the viewport -- the popover needs to scroll together with
   the swatch that opened it as the Settings modal's content scrolls,
   rather than staying glued to a viewport coordinate and ending up
   rendered outside the modal's bounds. See tags.js
   _positionColorPopover. */
.tag-color-popover {
  position: absolute;
  z-index: 90;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgb(var(--surface-1));
  border: 1px solid rgb(var(--surface-3));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  max-height: min(24rem, calc(100vh - 16px));
  overflow-y: auto;
}

/* #settings-section-tags uses Tailwind's `space-y-6`, which adds
   margin-top to every non-hidden sibling after the first via
   `.space-y-6 > :not([hidden]) ~ :not([hidden])`. That selector's
   specificity (one class + two attribute-equivalent :not() args) beats
   a plain `.tag-color-popover` rule, so the margin silently survives
   and lands the popover 24px below the `top` tags.js
   _positionColorPopover computes -- undoing its swatch-clearance math.
   The ID selector here is what actually wins. */
#tags-color-popover {
  margin-top: 0;
}

.tag-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  width: 11.5rem;
}

.tag-color-option {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease;
}
.tag-color-option:hover {
  transform: scale(1.12);
}
.tag-color-option.is-selected {
  border-color: rgb(var(--fg));
}

.tag-color-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgb(var(--surface-3));
}

.tag-color-pager__btn {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: none;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.tag-color-pager__btn:hover:not(:disabled) {
  background: rgb(var(--surface-2));
  color: rgb(var(--fg));
}
.tag-color-pager__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.tag-color-pager__dots {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.tag-color-pager__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 999px;
  background: rgb(var(--fg) / 0.2);
}
.tag-color-pager__dot.is-active {
  background: rgb(var(--accent));
}

/* Mobile-only: bump tap targets toward the ~44px touch-target guideline.
   These controls are sized for a mouse cursor by default (28-36px),
   which is fine for hover-reveal desktop interactions but too small to
   reliably tap. Padding grows the hit area without growing the icon
   itself, so the row/grid stays visually compact. */
@media (max-width: 767px) {
  .tag-row__icon-btn {
    height: 2.75rem;
    width: 2.75rem;
  }
  .tag-color-swatch {
    height: 2.75rem;
    width: 2.75rem;
  }
  .tag-color-option {
    height: 2.5rem;
    width: 2.5rem;
  }
  .tag-color-pager__btn {
    height: 2.5rem;
    width: 2.5rem;
  }
  #tags-panel-back,
  #tags-panel-add-trigger {
    height: 2.75rem;
    width: 2.75rem;
  }

  /* The color picker becomes a bottom sheet instead of a popover anchored
     to the swatch -- there's rarely room to float a panel near the
     swatch on a small screen without it running off the viewport. */
  .tag-color-popover {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
  }
  .tag-color-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    width: 13rem;
    margin: 0 auto;
  }
  .tag-color-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgb(var(--surface-3));
  }
  .tag-color-popover__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--muted));
  }
  .tag-color-popover__close {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    background: rgb(var(--surface-2));
    color: rgb(var(--fg));
    cursor: pointer;
  }
}

.tag-color-popover__header {
  display: none;
}

/* ------------------------------------------------------------
   Pane shell components
   ------------------------------------------------------------ */
.pane-shell {
  height: 100%;
  overflow: hidden;
  background: rgb(var(--surface-1));
}

.pane-header {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(var(--muted));
  background: color-mix(in srgb, rgb(var(--surface-2)) 82%, transparent);
}

/* Simple card — flat white bg, subtle shadow */
.tonal-card {
  border-radius: 0.5rem;
  background: rgb(var(--surface-1));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html.dark .tonal-card {
  background: rgb(var(--surface-2));
}

/* ------------------------------------------------------------
   Search highlight
   ------------------------------------------------------------ */
.search-highlight {
  border-radius: 0.25rem;
  background: rgba(253, 224, 71, 0.75);   /* yellow-300 — classic find highlight */
  color: #1c1917;                           /* force dark text for contrast on yellow */
  padding: 0 0.15rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

html.dark .search-highlight {
  background: rgba(217, 119, 6, 0.55);    /* amber-600 — warm, readable on dark surfaces */
  color: #fef3c7;                           /* amber-50 — light warm text on amber bg */
}

/* (search-mode-pill removed — replaced by simple toggle buttons in template) */

/* Search mode content fade-in */
.search-mode-content {
  animation: searchModeFadeIn 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes searchModeFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   AI search shell — conic-gradient border animation
   ------------------------------------------------------------ */
.ai-search-shell .white,
.ai-search-shell .border,
.ai-search-shell .darkBorderBg,
.ai-search-shell .glow {
  max-height: none;
  max-width: var(--ai-shell-width, 314px);
  height: calc(var(--ai-input-height, 56px) + 14px);
  width: var(--ai-shell-width, 314px);
  position: absolute;
  overflow: hidden;
  z-index: -1;
  border-radius: 12px;
  filter: blur(3px);
}

.ai-search-shell .input {
  background-color: #050b14;
  border: none;
  width: var(--ai-input-width, 301px);
  min-height: 56px;
  height: var(--ai-input-height, 56px);
  border-radius: 10px;
  color: #eef4ff;
  padding-inline: 64px;
  padding-right: 56px;
  padding-top: 1.02rem;
  padding-bottom: 0.9rem;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 197, 253, 0.42) rgba(0, 0, 0, 0);
  transition: height 180ms ease;
}

.ai-search-shell .input::-webkit-scrollbar {
  width: 6px;
}

.ai-search-shell .input::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(147, 197, 253, 0.44);
}

.ai-search-shell #poda {
  --ai-input-width: 301px;
  --ai-shell-width: 314px;
  --ai-input-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--ai-shell-width, 314px);
  min-height: calc(var(--ai-input-height, 56px) + 14px);
  margin: 0 auto;
}

.ai-search-shell .input::placeholder {
  color: transparent;
}

.ai-search-shell .input:focus {
  outline: none;
}

.ai-search-shell .white {
  height: calc(var(--ai-input-height, 56px) + 7px);
  max-width: calc(var(--ai-input-width, 301px) + 6px);
  border-radius: 10px;
  filter: blur(2px);
}

.ai-search-shell .white::before {
  content: '';
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #a6c2e6,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #dbcfb9,
    rgba(0, 0, 0, 0) 58%
  );
  transition: all 2s;
}

.ai-search-shell .border {
  height: calc(var(--ai-input-height, 56px) + 3px);
  max-width: calc(var(--ai-input-width, 301px) + 2px);
  border-radius: 11px;
  filter: blur(0.5px);
}

.ai-search-shell .border::before {
  content: '';
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #0f1624,
    #5f88bc 5%,
    #0f1624 14%,
    #0f1624 50%,
    #cbbd9f 60%,
    #0f1624 64%
  );
  transition: all 2s;
}

.ai-search-shell .darkBorderBg {
  height: calc(var(--ai-input-height, 56px) + 11px);
  max-width: calc(var(--ai-input-width, 301px) + 11px);
}

.ai-search-shell .darkBorderBg::before {
  content: '';
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #243f67,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #bcae93,
    rgba(0, 0, 0, 0) 60%
  );
  transition: all 2s;
}

/* Hover rotation state */
.ai-search-shell #poda:hover > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(-98deg);
}

.ai-search-shell #poda:hover > .glow::before {
  transform: translate(-50%, -50%) rotate(-120deg);
}

.ai-search-shell #poda:hover > .white::before {
  transform: translate(-50%, -50%) rotate(-97deg);
}

.ai-search-shell #poda:hover > .border::before {
  transform: translate(-50%, -50%) rotate(-110deg);
}

/* Focus-within rotation state */
.ai-search-shell #poda:focus-within > .darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(442deg);
  transition: all 4s;
}

.ai-search-shell #poda:focus-within > .glow::before {
  transform: translate(-50%, -50%) rotate(420deg);
  transition: all 4s;
}

.ai-search-shell #poda:focus-within > .white::before {
  transform: translate(-50%, -50%) rotate(443deg);
  transition: all 4s;
}

.ai-search-shell #poda:focus-within > .border::before {
  transform: translate(-50%, -50%) rotate(430deg);
  transition: all 4s;
}

.ai-search-shell .glow {
  overflow: hidden;
  filter: blur(22px);
  opacity: 0.33;
  max-height: calc(var(--ai-input-height, 56px) + 74px);
  max-width: calc(var(--ai-shell-width, 314px) + 40px);
}

.ai-search-shell .glow::before {
  content: '';
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute;
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #000,
    #6f99ca 5%,
    #000 38%,
    #000 50%,
    #d5c8b0 60%,
    #000 87%
  );
  transition: all 2s;
}

.ai-search-shell #main {
  position: relative;
  width: var(--ai-input-width, 301px);
  height: var(--ai-input-height, 56px);
}

.ai-search-shell .ai-input-logo {
  position: absolute;
  left: 0.85rem;
  top: 28px;
  z-index: 6;
  display: inline-flex;
  height: 1.75rem;
  width: 1.75rem;
  transform: translateY(-50%);
}

.ai-search-shell .ai-static-placeholder {
  pointer-events: none;
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 4;
  width: calc(var(--ai-input-width, 301px) - 126px);
  transform: translate(-50%, -50%);
  color: #a4b6d4;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  transition: opacity 140ms ease;
}

.ai-search-shell .ai-search-submit {
  position: absolute;
  right: 0.5rem;
  top: 28px;
  z-index: 5;
  display: inline-flex;
  height: 2.1rem;
  width: 2.1rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, rgb(var(--accent)) 26%, rgba(5, 11, 20, 0.66));
  color: #f8fbff;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.4),
    0 0 10px rgba(96, 165, 250, 0.28);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.ai-search-shell .ai-search-submit:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(186, 230, 253, 0.48),
    0 0 12px rgba(96, 165, 250, 0.36);
}

.ai-search-shell .ai-search-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   Study panel rich content
   ------------------------------------------------------------ */
.study-rich-content {
  line-height: 1.55;
}

.study-rich-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75rem auto;
  border-radius: 0.75rem;
}

.study-rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.85rem;
}

.study-rich-content th,
.study-rich-content td {
  border: 1px solid rgba(var(--fg), 0.2);
  padding: 0.45rem 0.55rem;
  vertical-align: top;
}

.study-rich-content th {
  background: rgb(var(--surface-3));
  text-align: left;
}

.study-rich-content a {
  color: rgb(var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Special-section body text — EPUB "sb*" paragraph/list classes */
.study-rich-content p {
  margin-bottom: 0.75rem;
}

.study-rich-content p:last-child {
  margin-bottom: 0;
}

.study-rich-content p[class*="sbah"],
.study-rich-content p[class*="sbbh"],
.study-rich-content p[class="sb1h"],
.study-rich-content p[class*="sbh-alt"] {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: rgb(var(--accent));
}

.study-rich-content ul,
.study-rich-content ol {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.5rem;
}

.study-rich-content li[class*="sbul"],
.study-rich-content li[class*="sbnl"],
.study-rich-content li[class*="sbbl"] {
  margin-bottom: 0.4rem;
  list-style: none;
}

.study-rich-content p[class*="sbbq"] {
  border-left: 3px solid rgb(var(--accent));
  padding-left: 0.75rem;
  margin: 0.75rem 0;
  font-style: italic;
  color: rgb(var(--muted));
}

.study-rich-content p[class*="shaded"],
.study-rich-content p[class*="box"] {
  border-radius: 0.5rem;
  background: rgb(var(--surface-2));
  padding: 0.6rem 0.75rem;
  margin: 0.75rem 0;
}

.study-rich-content p[class*="small"],
.study-rich-content span[class*="small"] {
  font-size: 0.8125rem;
  color: rgb(var(--muted));
}

.study-rich-content .enref {
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: super;
  color: rgb(var(--accent));
  text-decoration: none;
}

.study-rich-content p[class*="figcap"],
.study-rich-content p[class*="figh"] {
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgb(var(--muted));
  margin-top: 0.25rem;
}

.study-rich-content [class*="heb"],
.study-rich-content [class*="grc"] {
  font-style: italic;
}

/* ------------------------------------------------------------
   Settings glass panel + scrollbar
   ------------------------------------------------------------ */
.settings-glass-panel {
  background: rgb(var(--surface-1));
}

html.dark .settings-glass-panel {
  background: rgb(var(--surface-1));
}

.settings-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.settings-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.settings-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(140, 146, 158, 0.48);
  border-radius: 10px;
}

html.dark .settings-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(184, 194, 210, 0.42);
}

/* ------------------------------------------------------------
   Manila tab
   ------------------------------------------------------------ */
.manila-tab {
  background: #e8effb;
  box-shadow:
    0 16px 28px -24px rgba(15, 23, 42, 0.9),
    inset 0 -1px 0 rgba(var(--fg), 0.08);
}

html.dark .manila-tab {
  background: #4c5f83;
}

/* ------------------------------------------------------------
   Brand aura animation (search section branding)
   ------------------------------------------------------------ */
.brand-aura {
  position: absolute;
  inset: -20px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(var(--accent), 0.08) 0%,
    transparent 70%
  );
  filter: blur(20px);
  animation: auraMorph 8s ease-in-out infinite alternate;
}

@keyframes auraMorph {
  0% {
    background: radial-gradient(
      ellipse at 30% 40%,
      rgba(var(--accent), 0.08) 0%,
      transparent 70%
    );
  }
  100% {
    background: radial-gradient(
      ellipse at 70% 60%,
      rgba(var(--accent), 0.12) 0%,
      transparent 70%
    );
  }
}

/* ------------------------------------------------------------
   Study panel (flat sidebar, no glassmorphism)
   ------------------------------------------------------------ */
.study-rich-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.study-rich-content td,
.study-rich-content th {
  padding: 0.375rem 0.5rem;
  border: 1px solid rgb(var(--surface-3));
  text-align: left;
}

.study-rich-content th {
  background: rgb(var(--surface-2));
  font-weight: 600;
  font-size: 0.75rem;
}

/* Reading header retraction on scroll */
#reading-header {
  transition: transform 200ms ease, opacity 200ms ease;
}

/* The reference picker (#reading-reference-picker) lives inside this
   header. `position: sticky` + a z-index makes the header its own
   stacking context, which traps the picker's z-index inside it -- the
   picker can't outrank the header's siblings (e.g. the mobile Search
   overlay or Study bottom sheet, both z-index 40) no matter how high
   its own z-index is set. Bumping the header above those siblings ONLY
   while the picker is open (toggled via App._setReferencePickerOpen) is
   what lets it actually render on top; the rest of the time the header
   needs to stay below those mobile overlays, so this can't be
   permanent. ID + class selector specificity guarantees this wins over
   the plain `.z-30` utility regardless of stylesheet load order. */
#reading-header.reference-picker-open {
  z-index: 60;
}

/* ------------------------------------------------------------
   Bible reading pane
   ------------------------------------------------------------ */
.bible-pane {
  position: relative;
  background: rgb(var(--surface-1));
}

html.dark .bible-pane {
  background: #1f2a38;
}

.bible-pane__scroll {
  height: 100%;
  overflow: auto;
  padding: 4rem 1.25rem 1.5rem;
}

@media (min-width: 768px) {
  .bible-pane__scroll {
    padding: 4rem 1.5rem 2rem;
  }
}

.bible-pane__scroll.focus-mode {
  padding-left: 5rem;
  padding-right: 5rem;
}

@media (min-width: 1024px) {
  .bible-pane__scroll.focus-mode {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

.bible-pane__content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 44rem;
}

@media (min-width: 768px) {
  .bible-pane__content {
    max-width: var(--reading-pane-max-width, 44rem);
  }
}

/* Verse row */
.verse-row {
  position: relative;
}

.verse-btn {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

/* The row is a clickable <div role="button">, but the verse text itself
   should be drag-selectable so users can copy a phrase the normal way.
   user-select is inherited, so we don't need to touch descendants — and
   not touching them lets .verse-note-marker's own rule win for the
   superscript markers without a specificity fight. */
.verse-btn .verse-text {
  user-select: text;
  -webkit-user-select: text;
}

.verse-btn:hover {
  background: rgba(var(--surface-2), 0.65);
}

#reading-center .verse-btn.is-selected,
#reading-center .chapter-verse.is-active-verse .verse-btn {
  background: rgb(var(--accent) / 0.1);
  box-shadow: inset 3px 0 0 rgb(var(--accent));
}

html.dark #reading-center .verse-btn.is-selected,
html.dark #reading-center .chapter-verse.is-active-verse .verse-btn {
  background: rgb(var(--accent) / 0.15);
}

/* Continuous flow mode */
/* Continuous verse flow — inline book/paragraph layout */
#reading-center.flow-mode-active .chapter-verse {
  display: inline;
  padding-bottom: 0;
}

#reading-center.flow-mode-active .verse-actions-slot,
#reading-center.flow-mode-active .verse-indicators {
  display: none;
}

#reading-center.flow-mode-active .verse-btn {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
}

#reading-center.flow-mode-active .verse-btn:hover {
  background: transparent !important;
}

#reading-center.flow-mode-active .verse-btn.is-selected .verse-text {
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent));
  text-decoration-style: solid;
  text-underline-offset: 0.15em;
}

#reading-center.flow-mode-active .verse-num {
  display: inline !important;
  min-width: auto !important;
  text-align: left !important;
  vertical-align: super;
  font-size: 0.68em;
  margin: 0 0.15em 0 0.35em;
}

#reading-center.flow-mode-active .verse-text {
  display: inline;
}

/* Verse number */
.verse-num {
  margin-right: 0.5rem;
  vertical-align: text-top;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--accent));
}

/* Verse text */
.verse-text {
  line-height: 2;
  color: rgb(var(--fg));
  font-size: var(--reading-pane-font-size, 16px);
  font-family: var(--reading-pane-font-family, 'Merriweather', 'Source Serif 4', Georgia, serif);
  transition:
    font-size 300ms ease,
    font-family 300ms ease,
    background-color 300ms ease,
    text-decoration-color 300ms ease;
}

/* Verse superscript note markers. user-select: none so the marker
   characters are excluded from drag-selection and native Ctrl+C — the
   verse-action-panel Copy button strips them via JS independently. */
.verse-note-marker {
  font-size: 0.65em;
  font-weight: 700;
  color: rgb(var(--accent));
  user-select: none;
  -webkit-user-select: none;
}

/* Mobile Study bottom sheet height -- a CSS var (not an inline style on
   the element) so App._initStudyPanelMobileResize can set it without
   that value leaking into the desktop md:h-full rule above: inline
   styles always beat classes regardless of media query, but a custom
   property's *value* just cascades normally while the property it
   feeds is scoped to this mobile-only rule. */
@media (max-width: 767px) {
  .study-panel-mobile-sheet {
    height: var(--study-sheet-height, min(60vh, 32rem));
  }
}

.study-panel-mobile-grip.is-dragging span {
  background: rgb(var(--accent));
}

/* Study panel resize handle */
.study-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 20;
  cursor: col-resize;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}

.study-resize-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.study-resize-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--muted));
  transition: background 150ms ease, transform 150ms ease;
}

.study-resize-handle:hover .study-resize-dots span,
.study-resize-handle.is-dragging .study-resize-dots span {
  background: rgb(var(--accent));
  transform: scaleX(1.3);
}

/* Search panel resize handle — mirror of the study panel handle but
   anchored to the right edge so the user drags inward from the search
   side. Same dot styling reused. */
.search-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 20;
  cursor: col-resize;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}
.search-resize-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.search-resize-dots span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(var(--muted));
  transition: background 150ms ease, transform 150ms ease;
}
.search-resize-handle:hover .search-resize-dots span,
.search-resize-handle.is-dragging .search-resize-dots span {
  background: rgb(var(--accent));
  transform: scaleX(1.3);
}


/* Reading tool: focus view
   JS adds .has-selection to #reading-center and .selected-row to the
   active .chapter-verse; removing both clears the effect on dismiss. */
#reading-center.focus-view-active .chapter-verse {
  transition: opacity 250ms ease;
}

#reading-center.focus-view-active.has-selection .chapter-verse:not(.selected-row) {
  opacity: 0.3;
}

/* Study panel — marker badge matching the in-text superscript style */
.study-panel-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border-radius: 1em;
  background-color: rgb(var(--accent));
  color: rgb(var(--surface-1));
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Study panel — clickable verse reference links */
.study-ref-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: rgb(var(--accent));
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: text-decoration-style 120ms ease, opacity 120ms ease;
}
.study-ref-link:hover {
  text-decoration-style: solid;
  opacity: 0.8;
}

.study-ref-sep {
  color: rgb(var(--muted));
  user-select: none;
}

.study-note-translation {
  font-style: italic;
  color: rgb(var(--muted));
}

/* Scroll-to-top button */
.scroll-to-top-btn {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 20;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  background: rgb(var(--surface-1));
  color: rgb(var(--accent));
  cursor: pointer;
  box-shadow: 0 12px 26px -20px rgba(15, 23, 42, 0.9);
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
}

@media (min-width: 768px) {
  .scroll-to-top-btn {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

.scroll-to-top-btn.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.75rem);
}

.scroll-to-top-btn:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   Inline verse actions panel
   ------------------------------------------------------------ */
.inline-verse-actions {
  margin: 1.5rem auto;
  width: 100%;
  max-width: 42rem;
  border-radius: 0.5rem;
  background: rgb(var(--surface-1));
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: inlineActionsIn 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes inlineActionsIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inline-verse-actions__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--surface-3), 0.6);
  position: relative;
}

.inline-verse-actions__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--fg));
  border: 0;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease;
}

.inline-verse-actions__action-btn:hover {
  background: rgb(var(--surface-2));
}

.inline-verse-actions__action-btn.is-active {
  background: rgb(var(--surface-2));
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.34);
}

.inline-verse-actions__action-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(var(--muted));
}

.inline-verse-actions__sep {
  height: 1rem;
  width: 1px;
  background: rgb(var(--surface-3));
}

.inline-verse-actions__close-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 1rem;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.inline-verse-actions__close-btn:hover {
  background: rgb(var(--surface-2));
}

/* Context panel (highlight/note) */
.inline-verse-actions__context-panel {
  overflow: hidden;
  transition:
    max-height 200ms ease-out,
    opacity 200ms ease-out,
    transform 200ms ease-out,
    margin 200ms ease-out;
}

.inline-verse-actions__context-panel.is-open {
  max-height: 34rem;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0.5rem;
  overflow: visible;
}

.inline-verse-actions__context-panel.is-closed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}

.inline-verse-actions__context-inner {
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--surface-3), 0.55);
  background: rgba(var(--surface-2), 0.45);
  padding: 0.75rem;
}

/* Color swatch */
.color-swatch {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 9px 18px -13px rgba(15, 23, 42, 0.95);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.color-swatch:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 20px -12px rgba(15, 23, 42, 0.88);
}

.color-swatch.is-selected {
  outline: 2px solid rgba(var(--accent), 0.7);
  outline-offset: 2px;
}

/* Color picker popover */
.color-picker-popover {
  position: absolute;
  z-index: 30;
  width: 15.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--surface-3), 0.65);
  background: rgba(var(--surface-1), 0.98);
  padding: 0.75rem;
  box-shadow: 0 24px 44px -26px rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.color-picker-popover__arrow {
  pointer-events: none;
  position: absolute;
  left: 50%;
  height: 0.625rem;
  width: 0.625rem;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(var(--surface-3), 0.65);
  background: rgba(var(--surface-1), 0.98);
}

.color-picker-saturation {
  position: relative;
  height: 6rem;
  width: 100%;
  cursor: crosshair;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--surface-3), 0.65);
}

.color-picker-saturation__white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, white, transparent);
}

.color-picker-saturation__black {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, black, transparent);
}

.color-picker-saturation__cursor {
  pointer-events: none;
  position: absolute;
  height: 0.875rem;
  width: 0.875rem;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55);
}

/* Hue slider */
.hue-slider {
  height: 0.375rem;
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hue-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* (left-rail removed — controls moved to reading header and search section) */

/* (top-header removed — controls moved to reading header in bible_pane.html) */

/* ------------------------------------------------------------
   Settings modal
   ------------------------------------------------------------ */
.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--fg), 0.32);
  padding: 1rem;
}

@media (min-width: 640px) {
  .settings-modal-backdrop {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) {
  .settings-modal-backdrop {
    padding: 2rem 1.5rem;
  }
}

.settings-modal {
  display: flex;
  flex-direction: column;
  height: min(92vh, 54rem);
  width: 100%;
  max-width: 64rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--fg), 0.12);
  box-shadow: 0 36px 80px -44px rgba(15, 23, 42, 0.95);
  background: rgb(var(--surface-1));
}

.settings-nav__btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border-radius: 9999px;
  padding: 0.75rem 1rem;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: all 200ms ease;
}

.settings-nav__btn.is-active {
  background: rgb(var(--surface-1));
  color: rgb(var(--accent));
  box-shadow: 0 20px 38px -30px rgba(15, 23, 42, 0.95);
}

.settings-nav__btn:not(.is-active) {
  color: rgba(var(--fg), 0.6);
}

.settings-nav__btn:not(.is-active):hover {
  background: rgb(var(--surface-3));
}

/* Toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.75rem;
  background: rgb(var(--surface-2));
  padding: 1rem;
  box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.9);
}

.toggle-switch {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  border-radius: 9999px;
  padding: 0.25rem;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.toggle-switch.is-on {
  background: rgb(var(--accent));
}

.toggle-switch.is-off {
  background: rgb(var(--surface-3));
}

.toggle-switch__thumb {
  position: absolute;
  top: 0.25rem;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: white;
  box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.95);
  transition: all 200ms ease;
}

.toggle-switch.is-on .toggle-switch__thumb {
  right: 0.25rem;
}

.toggle-switch.is-off .toggle-switch__thumb {
  left: 0.25rem;
}

/* AI depth pill */
.ai-depth-pill {
  display: flex;
  width: 100%;
  max-width: 32rem;
  border-radius: 9999px;
  background: rgb(var(--surface-3));
  padding: 0.25rem;
}

.ai-depth-pill__btn {
  flex: 1;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: rgb(var(--muted));
  transition: all 200ms ease;
}

.ai-depth-pill__btn.is-active {
  background: white;
  color: rgb(var(--accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------
   Loading skeletons
   ------------------------------------------------------------ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.skeleton {
  animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: rgb(var(--surface-2));
  border-radius: 0.5rem;
}

/* ------------------------------------------------------------
   Error / alert banners
   ------------------------------------------------------------ */
.alert-warning {
  border-radius: 0.75rem;
  background: rgba(251, 191, 36, 0.15);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: #92400e;
  box-shadow: 0 10px 24px -20px rgba(180, 83, 9, 0.65);
}

html.dark .alert-warning {
  background: rgba(180, 83, 9, 0.35);
  color: #fef3c7;
}

/* Commentary badge */
.commentary-badge {
  border-radius: 0.375rem;
  background: rgba(var(--accent), 0.15);
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--accent));
}

/* Pagination buttons */
.pagination-btn {
  min-height: 2.5rem;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--surface-3), 0.65);
  background: rgb(var(--surface-2));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(var(--fg));
  cursor: pointer;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.9);
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgb(var(--surface-3));
  box-shadow:
    0 0 28px rgba(125, 211, 252, 0.24),
    0 16px 30px -22px rgba(15, 23, 42, 0.95);
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ------------------------------------------------------------
   Typewriter placeholder
   ------------------------------------------------------------ */
.typewriter-container {
  display: inline-flex;
  align-items: center;
  min-width: 1px;
  white-space: pre;
}

.typewriter-cursor {
  display: inline-block;
  width: 1.5px;
  height: 84%;
  margin-left: 2px;
  margin-right: 1px;
  vertical-align: bottom;
  border-radius: 2px;
  transition: opacity 0.14s;
}

/* ------------------------------------------------------------
   Utility classes (replaces Tailwind one-offs)
   ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Utility classes provided by Tailwind CDN: hidden, flex, grid, relative, absolute, inset-0 */

/* ------------------------------------------------------------
   Chart fullscreen modal
   ------------------------------------------------------------ */
#chart-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: rgb(var(--surface-1));
  color: rgb(var(--fg));
  overflow: hidden;
}

.chart-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media print {
  body > *:not(#chart-fullscreen-modal) {
    display: none !important;
  }
  #chart-fullscreen-modal {
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
  }
  #chart-fullscreen-modal,
  #chart-fullscreen-modal * {
    color: #000 !important;
  }
  #chart-fullscreen-header {
    position: static !important;
  }
  #chart-fullscreen-header button {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .search-mode-content {
    animation: none;
  }

  .inline-verse-actions {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Verse action panel ──────────────────────────────────────── */
.verse-action-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  background: rgb(var(--surface-1));
  border-top: 1px solid rgb(var(--surface-3));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.verse-action-panel.is-open {
  transform: translateY(0);
}

/* Desktop inline mode — panel lives inside the verse row */
.verse-action-panel.is-inline {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  opacity: 0;
  margin: 0.375rem 0 0.25rem;
  border-top: none;
  border: 1px solid rgb(var(--surface-3));
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.verse-action-panel.is-inline.is-open {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Mobile bottom sheet overrides ──────────────────────────── */
@media (max-width: 767px) {
  .verse-action-panel {
    position: fixed;
    border-radius: 1.5rem 1.5rem 0 0;
    border-top: none;
    z-index: 51;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
  }
  /* Shadow only when visible — prevents ghost strip at screen bottom */
  .verse-action-panel.is-open {
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
  }
  /* Drag handle pill */
  .verse-action-panel::before {
    content: '';
    display: block;
    width: 3rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgb(var(--surface-3));
    margin: 0.875rem auto 0;
    flex-shrink: 0;
  }
  /* Reference row */
  .verse-action-panel__ref-row {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem 1rem;
  }
  .verse-action-panel__ref-pill {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.3rem 1.25rem;
  }
  .verse-action-panel__close-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
  /* Context area */
  .verse-action-panel__context  { flex: 1 1 auto; }
  .verse-action-panel__context.is-open {
    max-height: 44vh;
    overflow-y: auto;
  }
  .verse-action-panel__context-inner {
    padding: 1rem 1.25rem 0.5rem;
  }
  /* Action buttons row — stretch so all buttons share the same height */
  .verse-action-panel__actions {
    flex-shrink: 0;
    align-items: stretch;
    padding: 0 0 max(1.25rem, env(safe-area-inset-bottom));
    gap: 0;
    border-top: 1px solid rgb(var(--surface-3));
  }
  .verse-action-btn {
    justify-content: center;
    padding: 1.125rem 0.125rem;
    gap: 0.5rem;
    border-radius: 0;
    flex: 1;
  }
  .verse-action-btn__label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    white-space: nowrap;       /* prevents label wrapping → equal heights */
  }
  /* Larger icons */
  .verse-action-btn svg {
    width: 24px;
    height: 24px;
  }
  /* Separator */
  .verse-action-btn--sep {
    border-left: 1px solid rgb(var(--surface-3));
    border-radius: 0;
    margin-left: 0;
    padding-left: 0.125rem;
  }

  /* Highlight / underline context — spread to fill the wider sheet and
     separate sections with a divider instead of floating remove buttons. */
  .vap-section {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgb(var(--surface-3));
  }
  .vap-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .vap-swatches,
  .vap-patterns {
    justify-content: space-between;
  }
  .vap-swatches {
    margin-bottom: 0;
  }
  .color-swatch {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.125rem;
  }
  .underline-pattern-btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
  }
  /* Stack swatches above Remove button on the bottom sheet so touch
     targets stay comfortable on narrow screens. */
  .vap-section-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
  }
  .vap-remove-btn {
    width: 100%;
    justify-content: center;
    padding: 0.625rem;
  }
  /* Bottom sheet has its own scroll — min-height would just add empty
     space. Let the sheet size to its content. */
  .verse-action-panel__context-inner {
    min-height: 0;
  }
}

/* Dim non-selected verses when panel is open */
#reading-center.has-selection .chapter-verse {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
#reading-center.has-selection .chapter-verse.selected-row,
#reading-center.has-selection .chapter-verse.is-multi-selected {
  opacity: 1;
}

/* Multi-verse selection highlight */
.verse-btn.is-selected {
  background: rgba(var(--accent), 0.14) !important;
}
.chapter-verse.is-multi-selected .verse-btn {
  background: rgba(var(--accent), 0.12) !important;
}
.chapter-verse.is-multi-selected .verse-num {
  color: rgb(var(--accent));
  opacity: 1;
}

.verse-action-panel__ref-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem 0;
  position: relative;
}

.verse-action-panel__ref-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: rgb(var(--surface-2));
  padding: 0.2rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--accent));
  letter-spacing: 0.01em;
}

.verse-action-panel__close-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  padding: 0;
}

/* Per-context icons on the left of the ref-row (mirror of close btn).
   Currently used by the Note context to host save + trash icons next
   to the reference pill so the context body stays minimal. */
.verse-action-panel__ref-extras {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.verse-action-panel__close-btn:hover {
  background: rgb(var(--surface-2));
  color: rgb(var(--fg));
}

.verse-action-panel__context {
  overflow: hidden;
  transition:
    max-height 250ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.verse-action-panel__context.is-open {
  max-height: 24rem;
  opacity: 1;
}

.verse-action-panel__context.is-closed {
  max-height: 0;
  opacity: 0;
}

.verse-action-panel__context-inner {
  padding: 1rem 1.25rem 0.25rem;
  /* Keep the panel a consistent size when switching between Highlight,
     Underline, Tag, and Note contexts so the cursor doesn't chase a
     moving target. Tuned to the tallest context (Note's textarea). */
  min-height: 7rem;
}

.verse-action-panel__actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 0.75rem 0.75rem;
  gap: 0.25rem;
}

.verse-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  padding: 0.5rem 0.25rem;
  border-radius: 0.625rem;
  border: 0;
  background: transparent;
  color: rgb(var(--fg));
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover) {
  .verse-action-btn:hover {
    background: rgb(var(--surface-2));
    color: rgb(var(--accent));
  }
}

.verse-action-btn:active {
  background: rgb(var(--surface-2));
  color: rgb(var(--accent));
}

.verse-action-btn.is-active {
  color: rgb(var(--accent));
  background: rgb(var(--surface-2));
}

/* Subtle separator before utility actions (Share, Copy) */
.verse-action-btn--sep {
  border-left: 1px solid rgb(var(--surface-3));
  border-radius: 0 0.625rem 0.625rem 0;
  margin-left: 0.25rem;
  padding-left: 0.5rem;
}

.verse-action-btn__label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--muted));
}

/* ── Action button: grow on hover + icon swap ─────────────────── */
.verse-action-btn {
  transform: scale(1);
  transition:
    background-color 150ms ease,
    color 150ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
  .verse-action-btn:hover {
    transform: scale(1.12);
  }
}
.verse-action-btn:active {
  transform: scale(1.12);
}
.verse-action-btn.is-active {
  color: rgb(var(--accent));
  background: rgb(var(--surface-2));
  box-shadow: 0 0 0 1.5px rgb(var(--accent));
  position: relative;
  z-index: 2;
}

.verse-action-btn__icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.verse-action-btn__icon-default,
.verse-action-btn__icon-hover {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.verse-action-btn__icon-hover {
  opacity: 0;
  transform: scale(0.65) rotate(-8deg);
}
@media (hover: hover) {
  .verse-action-btn:hover .verse-action-btn__icon-default {
    opacity: 0;
    transform: scale(0.65) rotate(8deg);
  }
  .verse-action-btn:hover .verse-action-btn__icon-hover {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ── Context panel internals ─────────────────────────────────── */
/* ── Highlight / Underline layout sections ───────────────────── */
.vap-section {
  margin-bottom: 1.25rem;
}
.vap-section-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--muted));
  margin: 0 0 0.625rem 0;
}
/* Swatches + (patterns) + inline Remove button on one row.
   space-between distributes whitespace evenly: with 3 children, the
   pattern buttons sit centred between swatches and Remove with equal
   padding on each side. With 2 children (Highlight), swatches anchor
   left and Remove anchors right. Wraps gracefully on narrow panels. */
.vap-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Mode toggle — iOS segmented control style ───────────────── */
.vap-mode-toggle {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  background: rgb(var(--surface-2));
  border-radius: 0.625rem;
  padding: 0.25rem;
}
.vap-mode-btn {
  flex: 1;
  padding: 0.45rem 0;
  border-radius: 0.4rem;
  border: none;
  background: transparent;
  color: rgb(var(--muted));
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.vap-mode-btn.is-active {
  background: rgb(var(--surface-1));
  color: rgb(var(--fg));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

.vap-context-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.vap-context-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--muted));
  min-width: 2.5rem;
}
.vap-swatches {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.is-selected {
  box-shadow: 0 0 0 2px rgb(var(--fg));
  transform: scale(1.1);
}
.vap-patterns {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.underline-pattern-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgb(var(--surface-3));
  background: transparent;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  min-height: 3rem;
  flex: 1;
}
/* Inline (desktop) — pattern buttons sit on the same row as swatches,
   so shrink them to match the row height of the color circles. */
@media (min-width: 768px) {
  .vap-section-row .vap-patterns {
    gap: 0.375rem;
  }
  .vap-section-row .underline-pattern-btn {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    min-height: 1.75rem;
  }
  .vap-section-row .underline-pattern-btn svg {
    width: 22px;
    height: 8px;
  }
}
.underline-pattern-btn.is-active {
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
  background: rgba(var(--accent), 0.08);
}
.underline-pattern-btn:hover:not(.is-active) {
  border-color: rgb(var(--muted));
  color: rgb(var(--fg));
}
/* SVG preview sits inside the button */
.underline-pattern-btn svg {
  display: block;
  overflow: visible;
}
.vap-remove-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.625rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.07);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.vap-remove-btn:hover {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.14);
}

/* ── Tag context ─────────────────────────────────────────────── */
.vap-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-bottom: 0.625rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--surface-3));
}
.vap-tag-selected {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  padding: 0.2rem 0.5rem 0.2rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
}
.vap-tag-remove-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.3);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
  transition: background 120ms ease;
}
.vap-tag-remove-x:hover { background: rgba(255,255,255,0.5); }

.vap-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vap-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 0;
  background: rgb(var(--surface-2));
  color: rgb(var(--fg));
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  min-height: 2.5rem;
}
.vap-tag-option:hover { transform: scale(1.04); background: rgb(var(--surface-3)); }
.vap-tag-option.is-active { background: rgb(var(--surface-3)); font-weight: 700; }
.vap-tag-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Guest state (sign in to tag) and empty state (no custom tags yet) —
   shown instead of the tag grid when there's nothing real to pick from. */
.vap-tag-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.vap-tag-guest p {
  margin: 0;
  font-size: 0.8125rem;
  color: rgb(var(--muted));
}
.vap-tag-manage-btn {
  border-radius: 0.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 0;
  background: rgb(var(--accent));
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: filter 150ms ease;
}
.vap-tag-manage-btn:hover {
  filter: brightness(1.1);
}

/* "Manage tags" link under a populated grid — quick path back to the
   Tags rail panel for renaming/deleting without leaving verse actions. */
.vap-tag-manage-link {
  display: block;
  margin-top: 0.625rem;
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--accent));
  cursor: pointer;
}
.vap-tag-manage-link:hover {
  text-decoration: underline;
}

/* ── Note context ────────────────────────────────────────────── */
.vap-note-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.vap-note-textarea {
  width: 100%;
  resize: none;
  border-radius: 0.625rem;
  border: 1px solid rgb(var(--surface-3));
  background: rgb(var(--bg));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(var(--fg));
  outline: none;
  font: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.vap-note-textarea:focus {
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 2px rgba(var(--accent), 0.25);
}
.vap-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.vap-icon-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vap-icon-btn:hover:not([disabled]) {
  background: rgb(var(--surface-2));
  color: rgb(var(--accent));
}
.vap-icon-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.vap-icon-btn--danger:hover:not([disabled]) {
  color: rgb(239, 68, 68);
  background: rgba(239, 68, 68, 0.08);
}
.vap-note-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.vap-btn-ghost {
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--muted));
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.vap-btn-ghost:hover { background: rgb(var(--surface-2)); color: rgb(var(--fg)); }
.vap-btn-primary {
  border-radius: 0.5rem;
  padding: 0.35rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgb(var(--accent));
  color: white;
  border: 0;
  cursor: pointer;
  transition: filter 150ms ease, opacity 150ms ease;
}
.vap-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.vap-btn-primary:not(:disabled):hover { filter: brightness(1.1); }

/* ── Verse indicators ────────────────────────────────────────── */
.verse-indicators {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

/* Tag swatch: colored dot with a label that slides out on hover. A real
   <button> (not a static span) -- clicking it opens that tag's verse
   list in the Tags rail panel, so reset native button chrome. */
.verse-tag-swatch {
  display: inline-flex;
  align-items: center;
  height: 1.1rem;
  border: 0;
  background: none;
  margin: 0;
  font: inherit;
  border-radius: 999px;
  padding-left: 0.25rem;
  padding-right: 0;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.verse-tag-dot {
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--tag-color, #888);
}
.verse-tag-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tag-color, #888);
  letter-spacing: 0.03em;
  padding-left: 0;
  padding-right: 0;
  transition: max-width 0.22s ease, padding 0.22s ease;
}
.verse-tag-swatch:hover .verse-tag-label {
  max-width: 5rem;
  padding-left: 0.22rem;
  padding-right: 0.35rem;
}

/* Note indicator: solid sticky-note icon, opens popover on click */
.verse-note-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: #F59E0B;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.verse-note-indicator:hover {
  color: #D97706;
  transform: scale(1.2);
}

/* Note popover */
.verse-note-popover {
  position: fixed;
  z-index: 9999;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  background: rgb(var(--surface-1));
  border: 1px solid rgb(var(--surface-3));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgb(var(--fg));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.verse-note-popover.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Verse reference inline preview card ─────────────────────── */
.verse-ref-preview {
  position: fixed;
  z-index: 9999;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgb(var(--surface-1));
  border: 1px solid rgb(var(--surface-3));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.verse-ref-preview.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.verse-ref-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.verse-ref-preview__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgb(var(--accent));
}
.verse-ref-preview__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(var(--muted));
  cursor: pointer;
  flex-shrink: 0;
}
.verse-ref-preview__close:hover {
  background: rgb(var(--surface-2));
  color: rgb(var(--fg));
}
.verse-ref-preview__text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgb(var(--fg));
  margin: 0 0 0.6rem;
  word-break: break-word;
}
.verse-ref-preview__goto {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgb(var(--accent));
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.verse-ref-preview__goto:hover {
  filter: brightness(1.1);
}

/* ── Search result card ──────────────────────────────────────── */
.commentary-quote-icon {
  cursor: default;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.commentary-quote-icon:hover {
  transform: scale(1.25);
}

/* Search result card hover — accent ring + lift */
.search-result-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.search-result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(var(--accent) / 0.35);
}