/* Interactive Hebrew & Greek Exegetical Bible Stylesheet (NASB 95 Base) */

:root {
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-sidebar: #f1f5f9; /* The slightly dark shade of blue in the BG on the left */
  --bg-subtle: #e2e8f0;
  --bg-popover: #ffffff;
  --border-main: #e2e8f0;
  --border-subtle: #cbd5e1;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;
  
  --accent-primary: #1e40af;
  --accent-primary-hover: #1d4ed8;
  --accent-primary-light: #eff6ff;
  --accent-primary-border: #bfdbfe;
  
  --accent-gold: #2563eb;
  --accent-gold-light: #eff6ff;
  --accent-emerald: #059669;
  --accent-emerald-light: #d1fae5;
  --accent-purple: #7c3aed;
  --accent-purple-light: #ede9fe;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-popover: 0 12px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.04);

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", "Charter", "Iowan Old Style", "Palatino", "Georgia", "Cambria", serif;
  --font-greek: "Cardo", "Gentium Plus", "SBL Greek", "Times New Roman", serif;
  --font-hebrew: "Cardo", "SBL Hebrew", "Ezra SIL", "Frank Ruehl CLM", "David CLM", serif;
}

[data-theme="dark"] {
  --bg-main: #0b0f17;
  --bg-card: #131b2a;
  --bg-sidebar: #0f1724;
  --bg-subtle: #192336;
  --bg-popover: #1a2436;
  --border-main: #2a374d;
  --border-subtle: #1e2a3e;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  
  --accent-primary: #3b82f6;
  --accent-primary-hover: #60a5fa;
  --accent-primary-light: #1e3a8a33;
  --accent-primary-border: #1e40af;
  
  --accent-gold: #60a5fa;
  --accent-gold-light: #1e3a8a33;
  --accent-emerald: #10b981;
  --accent-emerald-light: #064e3b33;
  --accent-purple: #a855f7;
  --accent-purple-light: #581c8733;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-popover: 0 16px 32px -4px rgba(0, 0, 0, 0.6), 0 6px 12px -2px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.app-header {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-main);
  padding: 0.75rem 1.75rem;
  height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-badge {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  transition: all 0.2s ease;
}

.logo-badge .logo-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: #ffffff;
  stroke-width: 2.2;
}

.logo-badge .logo-word {
  font-weight: 800;
  letter-spacing: 0.06em;
}

.logo-group:hover .logo-badge {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

[data-theme="dark"] .logo-badge {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
}

.logo-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
}

.logo-title-short {
  display: none;
}

.logo-title-full {
  display: inline;
  white-space: nowrap;
}

.header-translation-pill {
  white-space: nowrap;
  flex-shrink: 0;
}

.version-pill {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .version-pill {
  background: rgba(30, 64, 175, 0.25);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.4);
}

.logo-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* =======================================================
   PROMINENT ACTIVE BOOK & CHAPTER LOCATION BANNERS
   ======================================================= */

/* Top App Header Active Location Indicator */
.header-active-location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.3rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  margin-left: 0.6rem;
  cursor: pointer;
}

.header-active-location:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary-light);
}

.header-loc-book {
  font-weight: 700;
  color: var(--text-main);
}

.header-loc-chap {
  font-weight: 800;
  color: var(--accent-primary);
}

.header-loc-verse-badge {
  display: inline-block;
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

[data-theme="dark"] .header-loc-verse-badge {
  background: #3b82f6;
  color: #0f172a;
}

/* Reader Sticky Top Banner (Always clearly visible when scrolling) */
.sticky-reading-banner {
  position: sticky;
  top: 64px;
  z-index: 80;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 2rem;
  margin: -2.5rem -3.5rem 1.8rem -3.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .sticky-reading-banner {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.sticky-banner-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.sticky-testament-pill {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.42rem;
  border-radius: 4px;
  background: rgba(30, 64, 175, 0.08);
  color: var(--accent-primary);
  border: 1px solid rgba(30, 64, 175, 0.25);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .sticky-testament-pill {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
}

.sticky-ref-heading {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  line-height: 1.2;
  white-space: nowrap;
}

.sticky-version-pill {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.52rem;
  border-radius: 9999px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.08);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

[data-theme="dark"] .sticky-version-pill {
  background: rgba(30, 64, 175, 0.25);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.4);
}

.sticky-chapter-arrow {
  background: none;
  border: 1.5px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sticky-verse-arrow {
  font-size: 0.95rem;
  padding: 0.15rem 0.45rem;
  color: var(--accent-primary);
  border-color: rgba(59, 130, 246, 0.3);
}

.sticky-verse-arrow:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--accent-primary);
}

.sticky-chapter-arrow:hover {
  background: var(--accent-primary-light, rgba(30, 64, 175, 0.08));
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.sticky-chapter-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

[data-theme="dark"] .sticky-chapter-arrow {
  border-color: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .sticky-chapter-arrow:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: #60a5fa;
}

.sticky-verse-tag {
  display: inline-flex;
  align-items: center;
  background: #fef3c7;
  color: #92400e;
  border: 1.5px solid #f59e0b;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.18rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.18);
}

[data-theme="dark"] .sticky-verse-tag {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: #d97706;
}

.sticky-banner-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.btn-clear-selection {
  background: var(--bg-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-clear-selection:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Grammar & Exegesis Drawer Top Location Banner (Sticky when scrolling down) */
.drawer-location-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin: 0 -1.5rem 0.85rem -1.5rem;
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .drawer-location-banner {
  background: rgba(15, 23, 42, 0.96);
  border-bottom-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.drawer-location-ref {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

[data-theme="dark"] .drawer-location-ref {
  color: #93c5fd;
}

.drawer-location-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.icon-btn {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  height: 34px;
  padding: 0 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--border-subtle);
}

/* Main Layout */
.app-container {
  display: flex;
  flex: 1;
  max-width: 1560px;
  width: 100%;
  margin: 0 auto;
}



.sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

.passage-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.passage-card-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.8rem 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.passage-card-btn:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.passage-card-btn.active {
  border-color: var(--accent-primary);
  background-color: var(--accent-primary-light);
  box-shadow: var(--shadow-sm);
}

.passage-card-ref {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
}

.passage-card-focus {
  font-size: 0.75rem;
  font-family: var(--font-greek);
  color: var(--accent-primary);
  font-weight: 600;
}

.passage-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Reader Main Workspace */
.reader-main {
  min-width: 0;
  flex: 1;
  padding: 2.5rem 3.5rem;
  max-width: 880px;
  margin: 0 auto;
}

.passage-header {
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.5rem;
}

.passage-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.passage-badge {
  display: inline-block;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 2px rgba(30, 64, 175, 0.08);
}

[data-theme="dark"] .passage-badge {
  background: rgba(30, 64, 175, 0.25);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.4);
}

.passage-title {
  font-size: 2rem;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.passage-subtitle {
  font-size: 1.05rem;
  color: #c2410c;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.passage-intro {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.6;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--accent-primary);
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
}

/* Scripture Text Content */
.scripture-container {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.95;
  color: var(--text-main);
  position: relative;
}

.verse-row {
  position: relative;
  display: flex;
  align-items: baseline;
  margin-bottom: 0.7rem;
  line-height: 1.85;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.verse-row:has(.show-popover),
.verse-row:has(.expandable-token:hover),
.verse-row.has-active-popover {
  z-index: 60;
}

.expandable-token.show-popover,
.expandable-token:hover {
  z-index: 70;
}

.verse-row:hover {
  background: rgba(0, 0, 0, 0.025);
}

[data-theme="dark"] .verse-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.verse-gutter {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 2.8rem;
  flex-shrink: 0;
  margin-right: 0.75rem;
  user-select: none;
}

.verse-num {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
}

.verse-star-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.verse-row:hover .verse-star-btn {
  opacity: 0.85;
}

.verse-star-btn.is-saved,
.verse-star-btn[data-saved="true"] {
  opacity: 1 !important;
  color: var(--accent-gold) !important;
}

.verse-star-btn:hover {
  opacity: 1 !important;
  transform: scale(1.25);
}

.verse-text-content {
  flex: 1;
  min-width: 0;
}

/* =======================================================
   MINIMAL SCRIPTURE WORDS (CLEAN & UNDISTRACTING)
   ======================================================= */

.expandable-token {
  position: relative;
  display: inline !important;
  color: inherit;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none;
  padding: 0;
  transition: all 0.15s ease;
}

.expandable-token .token-word {
  text-decoration: underline dotted #60a5fa;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  border-bottom: none;
  padding: 0;
}

[data-theme="dark"] .expandable-token .token-word {
  color: #60a5fa;
  text-decoration-color: rgba(96, 165, 250, 0.45);
}

.expandable-token:hover .token-word,
.expandable-token.active-focus .token-word {
  color: #1e3a8a;
  text-decoration: underline solid var(--accent-primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  background-color: var(--accent-primary-light);
  border-bottom: none;
}

[data-theme="dark"] .expandable-token:hover .token-word,
[data-theme="dark"] .expandable-token.active-focus .token-word {
  color: #93c5fd;
  text-decoration-color: #93c5fd;
  background-color: rgba(30, 58, 138, 0.35);
}

/* Word swap behavior between Standard and Expanded View */
.expandable-token .standard-text {
  display: inline;
}

.expandable-token .expanded-text {
  display: none;
}

/* When Expanded View Mode is active on body */
body.expanded-phrase-mode .expandable-token.has-wuest-expansion .standard-text {
  display: none;
}

body.expanded-phrase-mode .expandable-token.has-wuest-expansion .expanded-text {
  display: inline;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  color: var(--text-main, #0f172a);
  text-decoration: underline solid var(--accent-primary, #3b82f6);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border-bottom: none;
  margin: 0;
  transition: all 0.15s ease;
}

body.expanded-phrase-mode .expandable-token.has-wuest-expansion:hover .expanded-text,
body.expanded-phrase-mode .expandable-token.has-wuest-expansion.active-focus .expanded-text {
  background: rgba(59, 130, 246, 0.08);
  color: var(--text-main, #0f172a);
  text-decoration-color: var(--accent-primary, #2563eb);
}

[data-theme="dark"] body.expanded-phrase-mode .expandable-token.has-wuest-expansion .expanded-text {
  color: var(--text-main, #f8fafc);
  background: transparent;
  text-decoration-color: #60a5fa;
}

[data-theme="dark"] body.expanded-phrase-mode .expandable-token.has-wuest-expansion:hover .expanded-text {
  background: rgba(59, 130, 246, 0.22);
}

/* =======================================================
   HEADER READING TOGGLE (STANDARD VS. EXPANDED)
   ======================================================= */
.reading-toggle-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  gap: 2px;
  flex-shrink: 0;
}

[data-theme="dark"] .reading-toggle-group {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.reading-toggle-btn.btn-view-expanded {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Integrated Lens Dropdown Chevron on Expanded Button */
.expanded-lens-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  opacity: 0.7;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease;
}

.reading-toggle-btn.btn-view-expanded:hover .expanded-lens-chevron {
  opacity: 1;
}

.reading-toggle-btn.btn-view-expanded.active .expanded-lens-chevron {
  opacity: 1;
  color: var(--accent-primary, #2563eb);
}

[data-theme="dark"] .reading-toggle-btn.btn-view-expanded.active .expanded-lens-chevron {
  color: #60a5fa;
}

.expanded-lens-chevron:hover {
  background: rgba(37, 99, 235, 0.12);
}

.expanded-lens-chevron.open {
  transform: rotate(180deg);
}

/* =======================================================
   CLEVER FLOATING EXPANDED LENS POPOVER (ZERO LAYOUT SHIFT)
   ======================================================= */
.expanded-lens-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 285px;
  max-width: calc(100vw - 2rem);
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 120;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  animation: lensDropdownSlide 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lensDropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="dark"] .expanded-lens-popover {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.expanded-lens-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary, #2563eb);
  padding: 0.3rem 0.5rem 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  margin-bottom: 0.15rem;
}

[data-theme="dark"] .expanded-lens-popover-header {
  color: #60a5fa;
  border-bottom-color: #334155;
}

.expanded-lens-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lens-option-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.15s ease;
  user-select: none;
}

.lens-option-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .lens-option-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.lens-option-btn.active {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .lens-option-btn.active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.3);
}

.lens-opt-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  line-height: 1;
}

.lens-opt-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-grow: 1;
  min-width: 0;
}

.lens-opt-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

[data-theme="dark"] .lens-opt-name {
  color: #f8fafc;
}

.lens-option-btn.active .lens-opt-name {
  color: var(--accent-primary, #2563eb);
}

[data-theme="dark"] .lens-option-btn.active .lens-opt-name {
  color: #60a5fa;
}

.lens-opt-desc {
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .lens-opt-desc {
  color: #94a3b8;
}

.lens-opt-check {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-primary, #2563eb);
  margin-left: 0.25rem;
  flex-shrink: 0;
  visibility: hidden;
}

[data-theme="dark"] .lens-opt-check {
  color: #60a5fa;
}

.lens-option-btn.active .lens-opt-check {
  visibility: visible;
}

/* Hidden programmatic select (maintains 0px width in document flow) */
.expanded-lens-select {
  display: none !important;
}

/* Multi-translation expanded full verse display */
.verse-expanded-translation {
  display: none;
}

/* Base reading text ALWAYS preserves NASB 1995 tokens */
body.expanded-phrase-mode .verse-text-content .verse-standard-tokens {
  display: inline;
}

/* User custom expansion highlighting in Reader */
body.expanded-phrase-mode .expandable-token.has-custom-user-expansion .expanded-text {
  background: rgba(245, 158, 11, 0.16);
  border-bottom: 2px solid #d97706;
  color: #92400e;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
}

[data-theme="dark"] body.expanded-phrase-mode .expandable-token.has-custom-user-expansion .expanded-text {
  background: rgba(245, 158, 11, 0.22);
  border-bottom: 2px solid #f59e0b;
  color: #fbbf24;
}

/* ========================================================
   ⚡ MULTI-SOURCE WORD ENGINE CARD IN EXEGETICAL INSPECTOR
   ======================================================== */
.word-engine-card {
  border-left: 3.5px solid var(--accent-primary, #2563eb);
  background: var(--bg-card, #ffffff);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-left-width: 3.5px;
}

.word-engine-header.compact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  padding-bottom: 0.35rem;
}

.word-engine-badge {
  font-size: 0.74rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

[data-theme="dark"] .word-engine-badge {
  color: #60a5fa;
}

.word-engine-active-lens-label {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

/* Compact Horizontal Tab Bar */
.word-engine-tab-bar {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-bottom: 0.45rem;
  scrollbar-width: thin;
}

.word-engine-tab-bar::-webkit-scrollbar {
  height: 3px;
}
.word-engine-tab-bar::-webkit-scrollbar-thumb {
  background: var(--border-light, #cbd5e1);
  border-radius: 2px;
}

.we-tab-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  color: var(--text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.we-tab-pill:hover {
  background: #e2e8f0;
  color: var(--text-main, #1e293b);
  border-color: #cbd5e1;
}

.we-tab-pill.is-selected {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}

.we-tab-pill.has-active-reader {
  border-bottom: 2px solid #059669;
}

[data-theme="dark"] .we-tab-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

[data-theme="dark"] .we-tab-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

[data-theme="dark"] .we-tab-pill.is-selected {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* Focused Preview Box */
.word-engine-preview-box {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 6px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.4rem;
}

[data-theme="dark"] .word-engine-preview-box {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.we-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.we-preview-desc {
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.we-preview-body {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-main, #1e293b);
  font-family: var(--font-serif, Georgia, serif);
  margin-bottom: 0.4rem;
}

.we-preview-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}

.btn-word-engine-revert {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: none;
  border: 1px solid var(--border-subtle, #cbd5e1);
  color: var(--text-muted, #64748b);
  cursor: pointer;
}

.btn-word-engine-revert:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-main, #1e293b);
}

/* Compare All Toggle & Dense List */
.word-engine-compare-bar {
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}

.btn-toggle-compare {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-primary, #2563eb);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}

.btn-toggle-compare:hover {
  text-decoration: underline;
}

.word-engine-dense-compare-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border-subtle, #e2e8f0);
}

.we-dense-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-secondary, #f8fafc);
  font-size: 0.78rem;
}

.we-dense-row.is-active-row {
  background: rgba(37, 99, 235, 0.06);
  border-left: 2px solid #2563eb;
}

[data-theme="dark"] .we-dense-row {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .we-dense-row.is-active-row {
  background: rgba(59, 130, 246, 0.12);
  border-left: 2px solid #3b82f6;
}

.we-dense-text {
  flex-grow: 1;
  color: var(--text-main, #1e293b);
  font-family: var(--font-serif, Georgia, serif);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-dense-apply {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #cbd5e1);
  color: var(--text-main, #1e293b);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-dense-apply:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.word-engine-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.word-engine-option-tile {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  transition: all 0.15s ease;
  position: relative;
}

.word-engine-option-tile:hover {
  border-color: #93c5fd;
  background: rgba(37, 99, 235, 0.03);
}

.word-engine-option-tile.is-active-option {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
  box-shadow: 0 0 0 1px #2563eb;
}

[data-theme="dark"] .word-engine-option-tile {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .word-engine-option-tile.is-active-option {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  box-shadow: 0 0 0 1px #3b82f6;
}

.word-engine-option-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.word-engine-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pill-synthesis {
  background: #ede9fe;
  color: #6d28d9;
}
.pill-wuest {
  background: #dbeafe;
  color: #1e40af;
}
.pill-amp {
  background: #fef3c7;
  color: #92400e;
}
.pill-t4t {
  background: #ccfbf1;
  color: #0f766e;
}
.pill-aspect {
  background: #fce7f3;
  color: #9d174d;
}
.pill-lexical {
  background: #f1f5f9;
  color: #475569;
}

[data-theme="dark"] .pill-synthesis { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; }
[data-theme="dark"] .pill-wuest { background: rgba(37, 99, 235, 0.25); color: #93c5fd; }
[data-theme="dark"] .pill-amp { background: rgba(245, 158, 11, 0.25); color: #fcd34d; }
[data-theme="dark"] .pill-t4t { background: rgba(20, 184, 166, 0.25); color: #5eead4; }
[data-theme="dark"] .pill-aspect { background: rgba(236, 72, 153, 0.25); color: #f472b6; }
[data-theme="dark"] .pill-lexical { background: rgba(255, 255, 255, 0.1); color: #cbd5e1; }

.word-engine-option-body {
  font-size: 0.88rem;
  color: var(--text-main, #1e293b);
  line-height: 1.5;
  font-family: var(--font-serif, Georgia, serif);
  margin-bottom: 0.45rem;
}

.word-engine-option-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}

.btn-word-engine-apply {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-subtle, #cbd5e1);
  color: var(--text-main, #1e293b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-word-engine-apply:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.btn-word-engine-apply:active {
  transform: translateY(0);
}

.btn-word-engine-active {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

[data-theme="dark"] .btn-word-engine-active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.45);
}

/* Reader Token Pulse Highlight on Expansion Apply */
.pulse-applied-token {
  animation: pulseAppliedTokenAnim 1.6s ease-out;
  border-radius: 4px;
}

@keyframes pulseAppliedTokenAnim {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.9);
    background-color: rgba(245, 158, 11, 0.35);
  }
  60% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    background-color: transparent;
  }
}

/* Global Notification Toast */
.app-global-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card, #ffffff);
  color: var(--text-main, #1e293b);
  border: 1.5px solid var(--accent-gold, #f59e0b);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  padding: 0.65rem 1.35rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-global-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-theme="dark"] .app-global-toast {
  background: #1e293b;
  color: #f8fafc;
  border-color: #f59e0b;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

/* Expanded translation card in Inspector Drawer */
.expanded-translations-card {
  border-left: 4px solid var(--accent-primary);
  background: var(--bg-card);
  border-radius: 8px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.expanded-item-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.expanded-item-row:last-child {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

.expanded-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.expanded-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  letter-spacing: 0.03em;
}

.expanded-badge.badge-amp {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.expanded-badge.badge-t4t {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.expanded-badge.badge-roth {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
}

.expanded-badge.badge-leb {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.expanded-badge.badge-wbms {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

.expanded-badge.badge-custom {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.expanded-desc-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

.expanded-item-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
  font-family: var(--font-serif);
}

.reading-toggle-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.reading-toggle-btn:hover {
  color: var(--text-main, #0f172a);
}

.reading-toggle-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--accent-primary, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .reading-toggle-btn.active {
  background: #1e293b;
  color: #60a5fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Revelation Button in Toggle Group */
.reading-toggle-btn.btn-view-revelation.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.26));
  color: #b45309;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.2);
}

[data-theme="dark"] .reading-toggle-btn.btn-view-revelation.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.38));
  color: #fbbf24;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35);
}

/* =======================================================
   REVELATION READING MODE & BITE-SIZED HOVER POPUPS
   ======================================================= */

/* In Standard & Expanded modes, hide the revelation sparkle icon */
.token-revelation-sparkle {
  display: none;
}

/* In Revelation mode, show the subtle gold sparkle next to words with curated revelations */
body.revelation-mode .token-revelation-sparkle {
  display: inline-block;
  font-size: 0.72em;
  line-height: 1;
  margin-left: 2px;
  margin-right: 1px;
  color: #d97706;
  vertical-align: super;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  user-select: none;
}

body.revelation-mode .expandable-token.has-revelation:hover .token-revelation-sparkle {
  transform: scale(1.3);
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.7));
}

/* Pristine text reading with subtle golden underline on revelation words */
body.revelation-mode .expandable-token.has-revelation .standard-text {
  text-decoration: underline dotted #d97706;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}

body.revelation-mode .expandable-token.has-revelation:hover .standard-text {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

[data-theme="dark"] body.revelation-mode .token-revelation-sparkle {
  color: #fbbf24;
}

[data-theme="dark"] body.revelation-mode .expandable-token.has-revelation .standard-text {
  text-decoration-color: #f59e0b;
}

[data-theme="dark"] body.revelation-mode .expandable-token.has-revelation:hover .standard-text {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
}

/* The Revelation Card inside the Breakout Hover Window */
.breakout-revelation-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
  border-left: 3.5px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 7px;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
}

.breakout-revelation-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.breakout-revelation-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #b45309;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.breakout-revelation-pill .pill-sparkle {
  font-size: 0.82rem;
}

.breakout-category-pill {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.15);
  color: #92400e;
  letter-spacing: 0.02em;
}

.breakout-revelation-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 4px;
}

.breakout-revelation-compact {
  font-size: 0.84rem;
  font-style: italic;
  font-weight: 500;
  color: #92400e;
  line-height: 1.42;
  margin-bottom: 5px;
}

.breakout-revelation-history {
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--text-main);
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px dashed rgba(217, 119, 6, 0.25);
}

[data-theme="dark"] .breakout-revelation-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.08) 100%);
  border-left-color: #fbbf24;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .breakout-revelation-pill {
  color: #fbbf24;
}

[data-theme="dark"] .breakout-category-pill {
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
}

[data-theme="dark"] .breakout-revelation-title {
  color: #fef3c7;
}

[data-theme="dark"] .breakout-revelation-compact {
  color: #fcd34d;
}

[data-theme="dark"] .breakout-revelation-history {
  color: var(--text-main);
  border-top-color: rgba(245, 158, 11, 0.35);
}

/* Verse-Level Revelation Trigger & Popover */
.verse-revelation-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  margin-left: 2px;
  font-size: 0.82rem;
  line-height: 1;
  border-radius: 4px;
  padding: 1px 3px;
  color: #d97706;
  transition: transform 0.15s ease, filter 0.15s ease;
  user-select: none;
}

.verse-revelation-trigger:hover {
  transform: scale(1.25);
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.6));
}

[data-theme="dark"] .verse-revelation-trigger {
  color: #fbbf24;
}

.verse-revelation-trigger .breakout-window {
  width: 340px;
}

.verse-revelation-trigger:hover .breakout-window,
.verse-revelation-trigger.show-popover .breakout-window {
  display: block;
  animation: popoverFadeIn 0.15s ease-out;
}

/* Inspector Revelation Card Dark Mode */
[data-theme="dark"] .inspector-revelation-card {
  background: rgba(245, 158, 11, 0.12) !important;
  border-left-color: #f59e0b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .inspector-revelation-card .detail-label {
  color: #fbbf24 !important;
}

[data-theme="dark"] .inspector-revelation-card .revelation-category-pill {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fde68a !important;
}

[data-theme="dark"] .inspector-revelation-card .detail-text > div:first-child {
  color: #fde68a !important;
}

/* =======================================================
   THE EMMAUS LENS: CHRIST-CENTERED EXEGESIS
   ======================================================= */

/* Verse-Level Emmaus Trigger & Popover */
.verse-emmaus-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  margin-left: 3px;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 6px;
  padding: 2px 4px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #b45309;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  user-select: none;
}

.verse-emmaus-trigger:hover {
  transform: scale(1.22);
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(217, 119, 6, 0.6);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}

[data-theme="dark"] .verse-emmaus-trigger {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

[data-theme="dark"] .verse-emmaus-trigger:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

.verse-emmaus-trigger .breakout-window {
  width: 350px;
}

.verse-emmaus-trigger:hover .breakout-window,
.verse-emmaus-trigger.show-popover .breakout-window {
  display: block;
  animation: popoverFadeIn 0.15s ease-out;
}

.breakout-emmaus-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.breakout-emmaus-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.25) 100%);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

[data-theme="dark"] .breakout-emmaus-pill {
  background: rgba(245, 158, 11, 0.25);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.4);
}

.breakout-emmaus-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-main);
  font-family: var(--font-serif);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.breakout-emmaus-term {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-primary);
  font-family: var(--font-greek);
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.breakout-emmaus-preview {
  font-size: 0.84rem;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 0.45rem;
}

.breakout-emmaus-jesus {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.45;
  background: rgba(245, 158, 11, 0.08);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border-left: 2.5px solid #d97706;
}

[data-theme="dark"] .breakout-emmaus-jesus {
  background: rgba(245, 158, 11, 0.14);
  border-left-color: #f59e0b;
}

/* Sidebar Emmaus Lens Exegesis Card */
.emmaus-lens-card {
  border-left: 4.5px solid #d97706;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.07) 0%, rgba(217, 119, 6, 0.02) 100%);
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  margin-bottom: 0.95rem;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-left: 4.5px solid #d97706;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.emmaus-lens-card.emmaus-card-pulse {
  animation: emmausPulse 1.2s ease-out;
}

@keyframes emmausPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); transform: scale(1.02); }
  50% { box-shadow: 0 0 20px 6px rgba(245, 158, 11, 0.45); transform: scale(1.02); }
  100% { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08); transform: scale(1); }
}

[data-theme="dark"] .emmaus-lens-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(180, 83, 9, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.25);
  border-left-color: #f59e0b;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.emmaus-lens-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.emmaus-lens-branding {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.emmaus-lens-icon {
  font-size: 1.4rem;
  line-height: 1.1;
  filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.25));
}

.emmaus-lens-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.emmaus-lens-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #b45309;
}

[data-theme="dark"] .emmaus-lens-kicker {
  color: #fbbf24;
}

.emmaus-lens-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-main);
  font-family: var(--font-serif);
  margin: 0;
  line-height: 1.35;
}

.emmaus-lens-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.25);
  white-space: nowrap;
}

[data-theme="dark"] .emmaus-lens-pill {
  background: rgba(245, 158, 11, 0.22);
  color: #fef3c7;
  border-color: rgba(245, 158, 11, 0.35);
}

.emmaus-lens-verse-ref-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  background: rgba(0, 0, 0, 0.025);
  border-left: 2px solid #d97706;
  border-radius: 5px;
  margin-bottom: 0.85rem;
}

[data-theme="dark"] .emmaus-lens-verse-ref-bar {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: #f59e0b;
}

.emmaus-ref-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-serif);
}

.emmaus-quote-motto {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.35;
}

.emmaus-lens-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.emmaus-pillar-block {
  padding: 0.65rem 0.8rem;
  border-radius: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.emmaus-pillar-label {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pillar-bullet {
  font-size: 0.85rem;
}

.emmaus-term-highlight {
  color: var(--accent-primary);
  font-family: var(--font-greek);
  text-transform: none;
  font-weight: 700;
}

.emmaus-pillar-content {
  font-size: 0.91rem;
  line-height: 1.58;
  color: var(--text-main);
}

/* Highlighted Christ Pillar */
.emmaus-pillar-christ {
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3.5px solid #d97706;
}

.emmaus-pillar-christ .christ-label {
  color: #b45309;
  font-weight: 800;
}

[data-theme="dark"] .emmaus-pillar-christ {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  border-left-color: #f59e0b;
}

[data-theme="dark"] .emmaus-pillar-christ .christ-label {
  color: #fbbf24;
}

.emmaus-pillar-christ .christ-content {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-main);
  font-weight: 500;
}

/* Practical Heart Walk Pillar */
.emmaus-pillar-takeaway {
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.3);
  border-left: 3.5px solid #059669;
}

.emmaus-pillar-takeaway .heart-label {
  color: #047857;
  font-weight: 800;
}

[data-theme="dark"] .emmaus-pillar-takeaway {
  background: rgba(5, 150, 105, 0.13);
  border-color: rgba(5, 150, 105, 0.4);
  border-left-color: #10b981;
}

[data-theme="dark"] .emmaus-pillar-takeaway .heart-label {
  color: #34d399;
}

.emmaus-pillar-takeaway .heart-content {
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--text-main);
  font-weight: 500;
}

.expandable-token.active-focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Subtle, discreet footnote marker */
.footnote-mark {
  font-family: inherit;
  font-size: 0.68em;
  font-weight: 600;
  color: var(--accent-primary);
  opacity: 0.8;
  margin-left: 1px;
  margin-right: 0;
  vertical-align: 0.35em;
  line-height: 0;
  user-select: none;
  display: inline;
}

.expandable-token:hover .footnote-mark {
  opacity: 1;
}

/* =======================================================
   SLEEK, COMPACT BREAKOUT WINDOW (RESTORED TO ORIGINAL CLEAN DESIGN)
   ======================================================= */

.breakout-window {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  max-width: min(440px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 80px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-main) transparent;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-main);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-ui);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.12);
  z-index: 500;
  pointer-events: auto; /* ALLOWS CURSOR TO HOVER/READ INSIDE */
  text-align: left;
  line-height: 1.45;
  cursor: default;
}

.breakout-window::-webkit-scrollbar {
  width: 4px;
}
.breakout-window::-webkit-scrollbar-thumb {
  background-color: var(--border-main);
  border-radius: 4px;
}

/* Invisible bridge so moving cursor into window never loses hover */
.breakout-window::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  pointer-events: auto;
}

/* Crisp downward caret (default: window above token) */
.breakout-window::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-card) transparent transparent transparent;
  pointer-events: none;
}

/* =======================================================
   COLLISION-AWARE POSITIONING: BOTTOM & SIDES
   ======================================================= */

/* When placed BELOW token (insufficient room above) */
.breakout-window.pos-bottom {
  bottom: auto;
  top: calc(100% + 8px);
}

.breakout-window.pos-bottom::before {
  top: auto;
  bottom: 100%;
  height: 12px;
}

.breakout-window.pos-bottom::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--bg-card) transparent;
}

/* When shifted to align with LEFT edge of token */
.breakout-window.pos-align-left {
  left: 0;
  transform: none;
  --popover-tx: 0;
}

.breakout-window.pos-align-left::after {
  left: 18px;
  transform: none;
}

/* When shifted to align with RIGHT edge of token */
.breakout-window.pos-align-right {
  left: auto;
  right: 0;
  transform: none;
  --popover-tx: 0;
}

.breakout-window.pos-align-right::after {
  left: auto;
  right: 18px;
  transform: none;
}

/* Show breakout window strictly when active popover class is set by controller */
.expandable-token.show-popover > .breakout-window {
  display: block;
  animation: popoverFadeIn 0.15s ease-out;
}

.expandable-token.show-popover > .breakout-window.pos-bottom {
  animation: popoverFadeInBelow 0.15s ease-out;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translate(var(--popover-tx, -50%), 4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(var(--popover-tx, -50%), 0) scale(1);
  }
}

@keyframes popoverFadeInBelow {
  from {
    opacity: 0;
    transform: translate(var(--popover-tx, -50%), -4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(var(--popover-tx, -50%), 0) scale(1);
  }
}

.breakout-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
  margin-bottom: 5px;
}

.breakout-greek {
  font-family: var(--font-greek);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
}

.breakout-greek small {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--text-muted);
}

.breakout-hebrew {
  font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  direction: ltr;
}

.breakout-hebrew small {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--text-muted);
}

.breakout-english {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.breakout-tag {
  font-size: 0.65rem;
  font-family: monospace;
  font-weight: 700;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.breakout-expansion {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
  line-height: 1.35;
}

.breakout-explanation {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.breakout-sources {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dotted var(--border-subtle);
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* =======================================================
   STREAMLINED 3-FIELD BREAKOUT CARD (WORD • DEFINITION • BIBLICAL INSIGHT)
   ======================================================= */
.breakout-card-section {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.breakout-card-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.breakout-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.breakout-word-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.breakout-word-left {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
}
.breakout-word-eng {
  color: var(--accent-primary);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.breakout-word-sep {
  color: var(--text-muted);
  font-weight: 400;
  margin: 0 2px;
}
.breakout-word-orig {
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text-main);
}
.breakout-word-translit {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-style: italic;
}
.breakout-word-strongs {
  font-size: 0.76rem;
  font-family: monospace;
  font-weight: 700;
  color: var(--accent-primary);
  background: var(--accent-primary-light, rgba(37, 99, 235, 0.08));
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.breakout-parsing-line {
  font-size: 0.80rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}
.breakout-lex-def {
  font-size: 0.92rem;
  line-height: 1.50;
  color: var(--text-main);
  font-family: var(--font-ui);
}

/* 3. Biblical Insight (Commentary & Context Callout) */
.breakout-insight-card {
  background: rgba(79, 70, 229, 0.05);
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-left: 4px solid #4f46e5;
  padding: 9px 12px;
  border-radius: 6px;
  margin-top: 2px;
}
[data-theme="dark"] .breakout-insight-card {
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-left: 4px solid #818cf8;
}
.breakout-insight-label {
  color: #4f46e5;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
[data-theme="dark"] .breakout-insight-label {
  color: #a5b4fc;
}
.breakout-insight-body {
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--text-main);
  font-family: var(--font-ui);
}

/* Footer Action */
.breakout-tip {
  margin-top: 9px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}
.breakout-tip span {
  transition: color 0.15s ease;
}
.breakout-tip span:hover {
  color: var(--accent-primary);
  cursor: pointer;
}

/* Interlinear Row */
.interlinear-sub {
  display: none;
  font-family: var(--font-greek);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: normal;
  display: block;
  line-height: 1.2;
}

body[data-interlinear="false"] .interlinear-sub {
  display: none !important;
}

/* Right Exegetical Drawer / Inspector */
.exegetical-inspector {
  width: 390px;
  min-width: 390px;
  max-width: 390px;
  background-color: var(--bg-card);
  border-left: 1px solid var(--border-main);
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  flex-shrink: 0;
}

.inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted);
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  box-sizing: border-box;
}

.inspector-empty-icon {
  font-size: 2.5rem;
  opacity: 0.7;
}

.inspector-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 1.5rem 1.75rem 1.5rem;
  box-sizing: border-box;
}

.inspector-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1rem;
}

.inspector-greek-title {
  font-family: var(--font-greek);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1.2;
}

.inspector-hebrew-title {
  font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1.25;
}

.inspector-translit {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-style: italic;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.tag-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-aorist {
  background-color: var(--accent-primary-light);
  color: var(--accent-primary);
}

.tag-passive {
  background-color: var(--accent-emerald-light);
  color: var(--accent-emerald);
}

.tag-code {
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  font-family: monospace;
}

.detail-card {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.detail-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
}

.contrast-card {
  border-left: 3.5px solid var(--accent-primary);
  background-color: rgba(30, 64, 175, 0.05);
}

.contrast-card .detail-text {
  color: var(--text-main);
}

.source-card {
  border-left: 3.5px solid var(--accent-indigo, #6366f1);
  background-color: rgba(99, 102, 241, 0.05);
}

.source-card .detail-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.5;
}

/* ==========================================================================
   2-Tab Progressive Verse Study (Right Drawer)
   Tab 1: Spiritual & Greek/Hebrew Meaning | Tab 2: Historical Context
   ========================================================================== */
.verse-study-tab-bar {
  display: flex;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-top: 0.5rem;
  margin-bottom: 0.85rem;
}

.verse-study-tab-btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  min-width: 0;
  text-align: center;
}

.verse-study-tab-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-main);
}

.verse-study-tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-primary);
  border-color: var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .verse-study-tab-btn.active {
  background: rgba(30, 41, 59, 0.95);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.verse-study-tab-btn .tab-btn-icon {
  font-size: 1rem;
  line-height: 1;
}

.verse-study-tab-btn .tab-btn-label {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Master Synthesis Exegetical Card (Closed Loop) */
.verse-synthesis-master-card {
  background: var(--bg-card);
  border: 1.5px solid var(--accent-primary-border);
  border-left: 4.5px solid var(--accent-primary);
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-theme="dark"] .verse-synthesis-master-card {
  border-color: rgba(96, 165, 250, 0.3);
  border-left-color: #3b82f6;
  background: rgba(30, 41, 59, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.synthesis-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.5rem;
}

.synthesis-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.synthesis-closed-loop-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  border-radius: 4px;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

[data-theme="dark"] .synthesis-closed-loop-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}

.synthesis-master-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  font-family: var(--font-serif);
}

.synthesis-master-paragraph {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--text-main);
  font-family: var(--font-serif);
}

.synthesis-application-section {
  background: rgba(37, 99, 235, 0.04);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  border: 1px dashed rgba(37, 99, 235, 0.2);
}

[data-theme="dark"] .synthesis-application-section {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(96, 165, 250, 0.25);
}

.synthesis-application-header {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.synthesis-application-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
}

.verse-synthesis-citation-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  line-height: 1.45;
}

.verse-synthesis-citation-tag strong {
  color: var(--text-main);
}

/* Tab 2: Authorial & Historical Dossier */
.authorial-dossier-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4.5px solid #7c3aed;
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

[data-theme="dark"] .authorial-dossier-card {
  border-left-color: #a78bfa;
}

.authorial-dossier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.45rem;
}

.authorial-dossier-badge {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .authorial-dossier-badge {
  color: #c4b5fd;
}

.history-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
}

.history-meta-item {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}

.history-meta-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.history-meta-value {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
}

.history-narrative-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.history-narrative-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.history-narrative-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Cultural Excursus Card */
.cultural-excursus-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4.5px solid #d97706;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 0.85rem;
}

[data-theme="dark"] .cultural-excursus-card {
  border-left-color: #fbbf24;
}

/* Historical Gap Notice */
.historical-gap-notice {
  background: rgba(100, 116, 139, 0.06);
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.gap-notice-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gap-notice-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* Chapter Overview Topic Commentary Cards */
.chapter-topics-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.chapter-topics-header {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.chapter-topic-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-primary);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.chapter-topic-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.chapter-topic-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chapter-topic-ref {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chapter-topic-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border-radius: 4px;
}

.chapter-topic-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  font-family: var(--font-serif);
  line-height: 1.35;
}

.chapter-topic-preview {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.chapter-topic-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.verse-stage-carousel-nav {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
  margin-bottom: 0.85rem;
}

/* Numbered Progress Track (1 - 2 - 3 - 4 - 5) */
.verse-stage-steps-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin-bottom: 0.15rem;
}

.stage-track-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1.5px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  line-height: 1;
}

.stage-track-pill:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.stage-track-pill.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
  transform: scale(1.15);
}

.stage-track-pill.completed {
  border-color: #059669;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
}

.stage-track-line {
  flex: 1;
  height: 2px;
  background: var(--border-subtle);
  margin: 0 0.25rem;
  transition: background 0.2s ease;
}

.stage-track-line.completed {
  background: #059669;
}

/* 3-Button Stage Switcher (Left faded - Middle Active - Right faded) */
.verse-stage-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.3rem 0.35rem;
}

.verse-stage-switch-btn {
  flex: 0 1 auto;
  max-width: 32%;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}

.verse-stage-switch-btn:hover:not(.disabled) {
  opacity: 1;
  color: var(--text-main);
  background: var(--bg-hover);
  border-color: var(--border-subtle);
}

.verse-stage-switch-btn.disabled {
  opacity: 0.18;
  cursor: not-allowed;
  pointer-events: none;
}

.verse-stage-switch-active {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--accent-primary-border);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  text-align: center;
  min-width: 0;
}

[data-theme="dark"] .verse-stage-switch-active {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.active-stage-num {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.active-stage-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Condensed Lens Select */
.condensed-lens-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: all 0.15s ease;
}

.condensed-lens-select:hover,
.condensed-lens-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-primary-light);
}

/* Persistent Word Breakdown Card */
.verse-words-breakdown-card {
  margin-top: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.verse-words-breakdown-card.hebrew {
  border-color: rgba(245, 158, 11, 0.35);
}

.verse-words-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.verse-words-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.verse-words-title.hebrew {
  color: #b45309;
}

.verse-words-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}

.strongs-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-main);
  font-family: inherit;
}

.strongs-word-chip:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.strongs-chip-english {
  font-weight: 600;
}

.strongs-chip-lemma-greek {
  font-family: var(--font-greek);
  font-weight: 700;
  color: var(--accent-primary);
}

.strongs-chip-lemma-hebrew {
  font-family: var(--font-hebrew);
  font-weight: 700;
  color: #b45309;
}

.strongs-chip-id {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.verse-stage-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeIn 0.2s ease;
}

.verse-stage-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border-subtle);
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.verse-stage-indicator {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.verse-stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary-border);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  margin-left: auto;
}

.verse-stage-btn:hover {
  background: var(--accent-primary);
  color: #ffffff;
}

.verse-stage-prev-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.verse-stage-prev-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.verse-verb-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid #059669;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .verse-verb-card {
  border-left-color: #10b981;
}

[data-theme="dark"] .verse-verbal-overview-card {
  background: rgba(59, 130, 246, 0.1) !important;
  border-left-color: #60a5fa !important;
}

.verse-verb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.verse-verb-lemma {
  font-size: 1.05rem;
  font-weight: 700;
  color: #047857;
  font-family: var(--font-greek);
}

[data-theme="dark"] .verse-verb-lemma {
  color: #34d399;
}

.verse-verb-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border-radius: 4px;
}

.verse-verb-aspect {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.verse-verb-meaning {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
}

.verse-history-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid #7c3aed;
  border-radius: 8px;
  padding: 0.95rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .verse-history-card {
  border-left-color: #a78bfa;
}

.verse-history-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.verse-history-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Stage 6: Spiritual Application & Emmaus Cards */
.verse-application-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid #059669;
  border-radius: 8px;
  padding: 0.95rem 1.05rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

[data-theme="dark"] .verse-application-card {
  border-left-color: #10b981;
}

.verse-app-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 0.45rem;
}

.verse-app-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .verse-app-badge {
  color: #34d399;
}

.verse-app-author {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}

.verse-app-heart {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
  font-style: italic;
  font-family: var(--font-serif);
}

.verse-app-walk {
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
  margin-top: 0.25rem;
}

[data-theme="dark"] .verse-app-walk {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.verse-app-walk-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

[data-theme="dark"] .verse-app-walk-title {
  color: #6ee7b7;
}

.verse-app-walk-body {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-main);
  font-weight: 500;
}

/* Emmaus Lens Card */
.verse-emmaus-card {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-left: 3.5px solid #d97706;
  border-radius: 8px;
  padding: 0.95rem 1.05rem;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

[data-theme="dark"] .verse-emmaus-card {
  border-left-color: #f59e0b;
}

.verse-emmaus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.verse-emmaus-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d97706;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .verse-emmaus-badge {
  color: #fbbf24;
}

.verse-emmaus-pill {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
  padding: 0.15rem 0.45rem;
  border-radius: 12px;
}

[data-theme="dark"] .verse-emmaus-pill {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.22);
}

.verse-emmaus-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

.verse-emmaus-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d97706;
  font-family: var(--font-greek);
}

[data-theme="dark"] .verse-emmaus-sub {
  color: #fbbf24;
}

.verse-emmaus-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
}

.verse-emmaus-takeaway {
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(217, 119, 6, 0.3);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   Exegetical Revelation Card (Sidebar Inspector)
   ========================================================================== */
.exegetical-revelation-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 0.95rem 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.08);
  transition: all 0.2s ease;
}

[data-theme="dark"] .exegetical-revelation-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(180, 83, 9, 0.06) 100%);
  border-color: rgba(245, 158, 11, 0.35);
  border-left-color: #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.exegetical-revelation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.exegetical-revelation-badge {
  font-size: 0.74rem;
  font-weight: 800;
  color: #b45309;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .exegetical-revelation-badge {
  color: #fcd34d;
}

.exegetical-revelation-pill {
  font-size: 0.68rem;
  font-weight: 700;
  color: #92400e;
  background: rgba(245, 158, 11, 0.16);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

[data-theme="dark"] .exegetical-revelation-pill {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.25);
}

.exegetical-revelation-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.exegetical-revelation-subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.6rem;
  font-family: var(--font-greek, Georgia, serif);
  line-height: 1.3;
}

[data-theme="dark"] .exegetical-revelation-subtitle {
  color: #93c5fd;
}

.exegetical-revelation-body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Footer info */
.app-footer {
  margin-top: 2.5rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}


/* =======================================================
   OMNIBAR SEARCH & JUMP BAR
   ======================================================= */

.omnibar-container {
  display: flex;
  align-items: center;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 0.2rem 0.5rem 0.2rem 0.85rem;
  width: 440px;
  max-width: 100%;
  transition: all 0.2s ease;
}

.omnibar-container:focus-within {
  border-color: var(--accent-primary);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.omnibar-icon {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-right: 0.5rem;
  user-select: none;
}

.omnibar-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.85rem;
  color: var(--text-main);
  font-family: var(--font-ui);
}

.omnibar-input::placeholder {
  color: var(--text-faint);
  font-size: 0.82rem;
}

.omnibar-book-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.omnibar-book-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background-color: var(--accent-primary-light);
}

.loading-tag {
  font-size: 0.72rem;
  font-weight: 700;
  background-color: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* =======================================================
   CHAPTER PAGINATION NAV BAR
   ======================================================= */

.chapter-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.nav-chapter-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-chapter-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background-color: var(--accent-primary-light);
}

.chapter-indicator {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* =======================================================
   BOOK & CHAPTER SELECTOR MODAL
   ======================================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 0.15s ease-out;
}

.modal-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 14px;
  width: 720px;
  max-width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.modal-search {
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-search-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-sidebar);
  color: var(--text-main);
  font-size: 0.9rem;
  outline: none;
}

.modal-search-input:focus {
  border-color: var(--accent-primary);
  background-color: var(--bg-card);
}

.testament-tabs {
  display: flex;
  padding: 0.6rem 1.5rem 0;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.testament-tab {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.testament-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.book-btn {
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.book-btn:hover {
  background-color: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.chapter-grid-container {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.chapter-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.btn-back {
  background: none;
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-back:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 0.5rem;
}

.chapter-cell-btn {
  height: 42px;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.chapter-cell-btn:hover {
  background-color: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}


/* =======================================================
   FULL BIBLE NAVIGATION SIDEBAR
   ======================================================= */

.passage-sidebar {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-main);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  flex-shrink: 0;
}

.sidebar-nav-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.sidebar-filter-input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-size: 0.82rem;
  outline: none;
  font-family: var(--font-ui);
  box-sizing: border-box;
}

.sidebar-filter-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.sidebar-tabs {
  display: flex;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.sidebar-tab {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.15rem;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sidebar-tab.active {
  background-color: var(--accent-primary);
  color: #ffffff;
}

/* Scrollable container for all books - min-height: 0 is mandatory for flex shrinking */
.sidebar-book-list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 4px;
}

.sidebar-book-list::-webkit-scrollbar {
  width: 6px;
}
.sidebar-book-list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-book-list::-webkit-scrollbar-thumb {
  background-color: var(--border-main);
  border-radius: 3px;
}

/* Book Accordion Card */
.nav-book-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.nav-book-card.is-active-book {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  background-color: #eff6ff;
}

.nav-book-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-main);
  user-select: none;
  transition: background-color 0.15s ease;
}

.nav-book-row:hover {
  background-color: var(--accent-primary-light);
  color: var(--accent-primary);
}

.nav-book-card.is-active-book .nav-book-row {
  background-color: var(--accent-primary-light);
  color: var(--accent-primary);
  font-weight: 700;
}

.nav-book-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-ch-count {
  font-size: 0.7rem;
  color: var(--text-faint);
  font-weight: 500;
}

.nav-chevron {
  font-size: 0.68rem;
  color: var(--text-faint);
  transition: transform 0.2s ease;
  display: inline-block;
}

.nav-book-card.is-open .nav-chevron {
  transform: rotate(90deg);
  color: var(--accent-primary);
}

/* Chapter Grid inside Book Card */
.nav-chapters-panel {
  display: none;
  padding: 0.55rem;
  background-color: #eff6ff;
  border-top: 1px solid #dbeafe;
  max-height: 220px;
  overflow-y: auto;
}

.nav-chapters-panel::-webkit-scrollbar {
  width: 5px;
}
.nav-chapters-panel::-webkit-scrollbar-thumb {
  background-color: var(--border-main);
  border-radius: 3px;
}

.nav-book-card.is-open .nav-chapters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 0.35rem;
}

.nav-ch-pill {
  height: 30px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-ch-pill:hover {
  background-color: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.nav-ch-pill.active-chapter {
  background-color: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.4);
}

/* Highlight items in sidebar */
.highlight-item-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.highlight-item-btn:hover,
.highlight-item-btn.active {
  border-color: var(--accent-primary);
  background-color: var(--accent-primary-light);
}

/* =======================================================
   MOBILE & TABLET RESPONSIVE SYSTEM
   ======================================================= */

/* Mobile Nav Toggle Button (Hidden on Desktop) */
.mobile-nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.mobile-nav-toggle-btn:active {
  transform: scale(0.95);
  background: var(--bg-hover);
}

.sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.15rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  line-height: 1;
}

.sidebar-close-btn:active {
  background: var(--bg-hover);
}

.sidebar-backdrop,
.inspector-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop.active,
.inspector-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Inspector Header & Handle */
.inspector-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.inspector-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border-main);
  border-radius: 9999px;
  margin: 0 auto;
}

.inspector-mobile-close-btn {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}

/* Responsive Overrides for Screens <= 1080px */
@media (max-width: 1080px) {
  .mobile-nav-toggle-btn {
    display: inline-flex !important;
  }
  .sidebar-close-btn {
    display: block !important;
  }
  .inspector-mobile-bar {
    display: flex !important;
  }

  .app-container {
    flex-direction: column;
    display: block;
    position: relative;
  }

  /* Sidebar becomes off-canvas slide-over drawer */
  .passage-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 320px !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 2000 !important;
    background: var(--bg-card) !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
    padding-top: max(1rem, env(safe-area-inset-top, 1rem)) !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)) !important;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  .passage-sidebar.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Exegetical Inspector becomes sliding Bottom Sheet */
  .exegetical-inspector {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 86dvh !important;
    max-height: 86dvh !important;
    z-index: 2000 !important;
    background: var(--bg-card) !important;
    border-radius: 20px 20px 0 0 !important;
    border-top: 1px solid var(--border-main) !important;
    border-left: none !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    padding: 0 !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex !important;
    flex-direction: column;
  }

  .inspector-mobile-bar {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg-card);
    padding: 0.65rem 1rem 0.45rem 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .exegetical-inspector .inspector-content {
    padding: 0 0.85rem 1.5rem 0.85rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .exegetical-inspector .drawer-location-banner {
    position: sticky;
    top: 40px;
    margin: 0.25rem 0 0.55rem 0 !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .exegetical-inspector.mobile-open {
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .reader-main {
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 0.65rem !important;
    box-sizing: border-box !important;
    padding-bottom: max(3rem, env(safe-area-inset-bottom, 3rem)) !important;
  }

  .sticky-reading-banner {
    margin: -0.85rem -0.65rem 0.85rem -0.65rem !important;
    padding: 0.5rem 0.65rem !important;
  }
}

/* Small Mobile Screens <= 768px */
@media (max-width: 768px) {
  /* Prevent horizontal document overflow */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .app-header {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.35rem 0.45rem;
    height: auto !important;
    min-height: auto !important;
    padding: 0.45rem 0.65rem !important;
    padding-top: max(0.45rem, env(safe-area-inset-top, 0.45rem)) !important;
    padding-left: max(0.65rem, env(safe-area-inset-left, 0.65rem)) !important;
    padding-right: max(0.65rem, env(safe-area-inset-right, 0.65rem)) !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .header-brand-wrap {
    grid-column: 1 / 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
  }

  .header-right-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.35rem !important;
    margin-left: auto;
  }

  /* Omit redundant desktop-only controls from mobile top bar */
  #headerTranslationPill,
  .header-tour-btn,
  .header-history-nav,
  .logo-title-full,
  .logo-subtitle {
    display: none !important;
  }

  .header-guide-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .guide-btn-label,
  .tour-btn-label {
    display: none !important;
  }

  .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .omnibar-container {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100% !important;
    margin: 0 !important;
    height: 36px;
    padding: 0.15rem 0.45rem 0.15rem 0.65rem;
    box-sizing: border-box !important;
  }

  .omnibar-input {
    font-size: 0.84rem;
  }

  .logo-title-short {
    display: inline !important;
  }

  .logo-title {
    font-size: 0.88rem !important;
    gap: 0.25rem;
    white-space: nowrap;
    min-width: 0;
  }

  .logo-badge {
    padding: 0.18rem 0.36rem !important;
    font-size: 0.68rem !important;
    flex-shrink: 0;
  }

  /* Homepage Container & Hero on Mobile */
  .home-hub-container {
    padding: 0.65rem 0.45rem 2rem 0.45rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .home-hero {
    margin-bottom: 0.75rem !important;
    padding: 0.15rem !important;
  }

  .home-hero-badge {
    font-size: 0.7rem !important;
    padding: 0.18rem 0.55rem !important;
    margin-bottom: 0.35rem !important;
  }

  .home-hero-title {
    font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 0.3rem !important;
  }

  .home-hero-subtitle {
    font-size: 0.84rem !important;
    line-height: 1.4 !important;
    color: var(--text-muted) !important;
  }

  /* Daily Spotlight Card (Verse of the Day) on Mobile */
  .home-spotlight-card {
    padding: 0.95rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
    border-radius: 12px !important;
    border-left-width: 4px !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .spotlight-top-header {
    gap: 0.35rem !important;
  }

  .spotlight-badge-group {
    gap: 0.3rem !important;
  }

  .spotlight-star-badge {
    font-size: 0.64rem !important;
    padding: 0.18rem 0.45rem !important;
    letter-spacing: 0.03em !important;
  }

  .spotlight-testament-pill {
    font-size: 0.64rem !important;
    padding: 0.18rem 0.45rem !important;
  }

  .spotlight-shuffle-btn {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
    height: 26px !important;
    gap: 0.25rem !important;
  }

  .spotlight-ref {
    font-size: 1.3rem !important;
    margin-top: 0.1rem !important;
  }

  .spotlight-title {
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
  }

  .spotlight-verse-quote {
    font-size: 0.92rem !important;
    padding-left: 0.6rem !important;
    border-left-width: 3px !important;
    margin: 0.25rem 0 0.6rem !important;
    line-height: 1.5 !important;
  }

  .spotlight-theology-box {
    padding: 0.7rem 0.75rem !important;
    margin: 0.25rem 0 0.55rem !important;
    border-radius: 8px !important;
  }

  .spotlight-theology-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    margin-bottom: 0.35rem !important;
  }

  .spotlight-theology-badge {
    font-size: 0.66rem !important;
  }

  .spotlight-sources-badge {
    font-size: 0.64rem !important;
    padding: 0.12rem 0.4rem !important;
    align-self: flex-start !important;
  }

  .spotlight-theology-text {
    font-size: 0.84rem !important;
    line-height: 1.52 !important;
  }

  .spotlight-full-commentary-details {
    margin: 0.2rem 0 0.45rem !important;
  }

  .spotlight-full-commentary-summary {
    font-size: 0.76rem !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 7px !important;
  }

  .spotlight-author-card {
    padding: 0.65rem 0.7rem !important;
    margin-top: 0.45rem !important;
    border-radius: 7px !important;
  }

  .spotlight-author-name {
    font-size: 0.8rem !important;
  }

  .spotlight-author-era {
    font-size: 0.66rem !important;
  }

  .spotlight-author-work {
    font-size: 0.7rem !important;
  }

  .spotlight-author-quote {
    font-size: 0.8rem !important;
    line-height: 1.48 !important;
    max-height: 140px !important;
  }

  .spotlight-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    margin-top: 0.2rem !important;
  }

  .spotlight-btn-primary,
  .spotlight-btn-secondary {
    padding: 0.6rem 0.45rem !important;
    font-size: 0.78rem !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 40px !important;
  }

  /* Sticky Reader Navigation on Mobile */
  .sticky-reading-banner {
    position: relative !important;
    top: 0 !important;
    margin: -0.85rem -0.65rem 0.75rem -0.65rem !important;
    padding: 0.4rem 0.55rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    box-sizing: border-box !important;
    width: calc(100% + 1.3rem) !important;
  }

  /* Omit redundant translation pill in sticky reader bar */
  .sticky-reading-banner .version-pill,
  .sticky-reading-banner .header-translation-pill,
  .sticky-reading-banner .gem-badge-nt,
  .sticky-reading-banner .gem-badge-ot {
    display: none !important;
  }

  .sticky-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    min-width: 0 !important;
  }

  .sticky-ref-heading {
    font-size: 1rem !important;
    white-space: nowrap !important;
  }

  .sticky-chapter-arrow {
    padding: 0.15rem 0.35rem !important;
    font-size: 1rem !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  .reading-toggle-group {
    scale: 0.88;
    transform-origin: right center;
    flex-shrink: 0;
  }

  /* Scripture text & Verse rows on Mobile */
  .verse-row {
    padding: 0.45rem 0.2rem !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
  }

  .scripture-verse-row {
    padding: 0.55rem 0.3rem !important;
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
  }

  .verse-star-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    justify-content: center !important;
    margin-right: 0.2rem !important;
  }

  .token-word {
    padding: 0.12rem 0.15rem !important;
  }

  /* Verse Study Drawer (Bottom Sheet) inside Mobile */
  .drawer-location-banner {
    margin: 0.2rem 0 0.45rem 0 !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 7px !important;
  }

  /* Omit redundant duplicate close button inside location banner on mobile */
  .drawer-location-banner .btn-clear-selection {
    display: none !important;
  }

  .drawer-location-ref {
    font-size: 0.98rem !important;
  }

  .verse-words-breakdown-card {
    padding: 0.45rem 0.55rem !important;
    margin-bottom: 0.45rem !important;
    border-radius: 8px !important;
  }

  .verse-words-header {
    font-size: 0.7rem !important;
    margin-bottom: 0.2rem !important;
  }

  /* Omit non-essential instruction text on mobile */
  .verse-words-hint {
    display: none !important;
  }

  /* Single swipeable horizontal row for Greek/Hebrew word chips */
  .strongs-chips-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    gap: 0.28rem !important;
    padding: 0.05rem 0 0.35rem 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .strongs-word-chip {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
    padding: 0.18rem 0.42rem !important;
    height: auto !important;
  }

  /* Stepper Navigation on Mobile */
  .verse-stage-carousel-nav {
    margin-top: 0.3rem !important;
    margin-bottom: 0.55rem !important;
    gap: 0.3rem !important;
  }

  .verse-stage-steps-track {
    padding: 0 0.2rem !important;
    margin-bottom: 0.1rem !important;
  }

  .stage-track-pill {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
  }

  .stage-track-line {
    margin: 0 0.12rem !important;
  }

  .verse-stage-switcher {
    padding: 0.22rem 0.25rem !important;
    gap: 0.2rem !important;
    border-radius: 7px !important;
  }

  .verse-stage-switch-btn {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.25rem !important;
    max-width: 28% !important;
  }

  .verse-stage-switch-active {
    padding: 0.22rem 0.35rem !important;
    border-radius: 5px !important;
  }

  .active-stage-num {
    font-size: 0.56rem !important;
    letter-spacing: 0.03em !important;
  }

  .active-stage-title {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Stage 5 Commentary on Mobile */
  .ai-commentary-summary-card {
    padding: 0.7rem 0.75rem !important;
    margin-bottom: 0.55rem !important;
    border-radius: 8px !important;
  }

  .ai-summary-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    margin-bottom: 0.35rem !important;
  }

  .ai-summary-badge {
    font-size: 0.66rem !important;
  }

  .ai-summary-source-pill {
    font-size: 0.63rem !important;
    padding: 0.12rem 0.4rem !important;
    align-self: flex-start !important;
  }

  .theology-synthesis-text {
    font-size: 0.83rem !important;
    line-height: 1.52 !important;
  }

  .classical-note-card {
    padding: 0.7rem 0.75rem !important;
    margin-bottom: 0.45rem !important;
    border-radius: 8px !important;
  }

  .classical-note-preview {
    font-size: 0.82rem !important;
    line-height: 1.48 !important;
  }

  .classical-expand-prompt,
  .classical-collapse-prompt {
    font-size: 0.72rem !important;
  }

  .verse-stage-stepper {
    flex-direction: column !important;
    gap: 0.4rem !important;
    padding-top: 0.55rem !important;
  }

  .verse-stage-stepper button {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Home Today in Biblical Calendar card on mobile */
  .home-today-season-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.75rem 0.85rem !important;
    gap: 0.65rem !important;
  }

  .today-season-right {
    width: 100% !important;
  }

  .today-season-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
  }

  .modal-overlay {
    padding: 0.5rem !important;
  }

  .modal-card {
    max-height: 92vh !important;
    border-radius: 12px !important;
  }

  .scripture-pills-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }

  .scripture-pill-btn {
    padding: 0.5rem 0.45rem !important;
    min-height: 44px;
  }

  .concordance-verse-card {
    padding: 0.75rem !important;
  }
}

/* Extra Compact Screens <= 420px (e.g. iPhone SE & smaller) */
@media (max-width: 420px) {
  .spotlight-actions {
    grid-template-columns: 1fr !important;
  }

  .logo-title-short {
    font-size: 0.82rem !important;
  }
}

/* Extra Compact Screens <= 380px (e.g. iPhone SE) */
@media (max-width: 380px) {
  .logo-title-short {
    display: none !important;
  }
}

/* Search Dropdown Styles with Clear Scroll Affordance */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 0.5rem;
  z-index: 1000;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Category Quick-Jump Header Bar */
.dropdown-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: var(--bg-sidebar, #f8fafc);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  flex-shrink: 0;
  gap: 0.4rem;
  flex-wrap: wrap;
  user-select: none;
}

.dropdown-quick-summary {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dropdown-chips-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.dropdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-main);
  transition: all 0.15s ease;
  line-height: 1.35;
}

.dropdown-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dropdown-chip.chip-verses {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

.dropdown-chip.chip-hebrew {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}

.dropdown-chip.chip-greek {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
}

.dropdown-chip.chip-topics {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.25);
}

.dropdown-chip.chip-concordance {
  color: var(--accent-indigo, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .dropdown-chip.chip-topics {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
}

[data-theme="dark"] .dropdown-chip.chip-verses {
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .dropdown-chip.chip-hebrew {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .dropdown-chip.chip-greek {
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
}

[data-theme="dark"] .dropdown-chip.chip-concordance {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
}

/* Scroll Container */
.dropdown-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary, #2563eb) rgba(0, 0, 0, 0.06);
  padding-bottom: 1.75rem;
}

.dropdown-scroll-body::-webkit-scrollbar {
  width: 7px;
}
.dropdown-scroll-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
.dropdown-scroll-body::-webkit-scrollbar-thumb {
  background: var(--accent-primary, #2563eb);
  border-radius: 4px;
}
.dropdown-scroll-body::-webkit-scrollbar-thumb:hover {
  background: #1d4ed8;
}

/* Floating Bottom Scroll Affordance Indicator */
.dropdown-scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.42rem 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, var(--bg-card) 60%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px dashed rgba(37, 99, 235, 0.25);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #1d4ed8;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

[data-theme="dark"] .dropdown-scroll-indicator {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, var(--bg-card) 60%);
  border-top-color: rgba(96, 165, 250, 0.3);
  color: #93c5fd;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}

.dropdown-scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

.dropdown-scroll-indicator:hover {
  background: var(--bg-card);
  color: var(--accent-primary);
}

.dropdown-scroll-indicator .indicator-arrow {
  display: inline-block;
  animation: bounceDown 1.4s infinite;
  font-size: 0.85rem;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* End of Results Footer */
.dropdown-end-footer {
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-faint);
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.dropdown-header {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  font-weight: 600;
}
.dropdown-header:first-child {
  border-top: none;
}
.dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.95rem;
  transition: background 0.2s;
}
.dropdown-item:last-child {
  border-bottom: none;
}
.dropdown-item:hover {
  background: var(--bg-sidebar);
}

.dropdown-header-hebrew {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border-left: 3.5px solid #d97706;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
[data-theme="dark"] .dropdown-header-hebrew {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

.dropdown-header-greek {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-left: 3.5px solid #2563eb;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
[data-theme="dark"] .dropdown-header-greek {
  background: rgba(37, 99, 235, 0.16);
  color: #60a5fa;
}

.dropdown-header-ref {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border-left: 3.5px solid #059669;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
[data-theme="dark"] .dropdown-header-ref {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.badge-hebrew {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
  letter-spacing: 0.03em;
}
[data-theme="dark"] .badge-hebrew {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
}

.badge-greek {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.3);
  letter-spacing: 0.03em;
}
[data-theme="dark"] .badge-greek {
  background: rgba(37, 99, 235, 0.22);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.5);
}

.dropdown-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-item-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dropdown-item-lemma-hebrew {
  font-family: var(--font-hebrew, 'SBL Hebrew', 'Ezra SIL', serif);
  font-size: 1.15rem;
  direction: rtl;
  color: #b45309;
  font-weight: 700;
}
[data-theme="dark"] .dropdown-item-lemma-hebrew {
  color: #fbbf24;
}

.dropdown-item-lemma-greek {
  font-family: var(--font-greek, 'Times New Roman', serif);
  font-size: 1.05rem;
  color: #2563eb;
  font-weight: 700;
}
[data-theme="dark"] .dropdown-item-lemma-greek {
  color: #60a5fa;
}

.dropdown-item-translit {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.dropdown-item-gloss {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.dropdown-item-meta {
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ==========================================================================
   Home Hub & Introductory Portal Styles
   ========================================================================== */

.home-hub-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.75rem;
}

.home-hero {
  text-align: center;
  margin-bottom: 1.25rem;
}

.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary-border);
  padding: 0.25rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  box-shadow: 0 1px 2px rgba(30, 64, 175, 0.06);
}

.home-hero-title {
  font-family: var(--font-serif);
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.45rem;
}

.home-hero-subtitle {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto;
}

/* ==========================================================================
   Home Action Grid & Graphical Launchpad
   ========================================================================== */

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  margin-top: 0.25rem;
}

@media (max-width: 820px) {
  .home-action-grid {
    grid-template-columns: 1fr;
  }
}

.home-action-card {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 12px;
  padding: 1.15rem 1.15rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.action-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.action-card-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.icon-blue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.icon-purple {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
}

.icon-teal {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}

.icon-amber {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #d97706;
}

.action-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.action-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Hub 1: Scripture Pills Grid */
.scripture-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.scripture-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.45rem 0.65rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-main);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.scripture-pill-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  transform: translateY(-1px);
}

.pill-book {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-main);
}

.scripture-pill-btn:hover .pill-book {
  color: #2563eb;
}

.pill-topic {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.05rem;
}

.action-card-footer {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Hub 2: Search Box & Root Chips */
.home-search-box {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.home-search-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border-radius: 7px;
  border: 1.5px solid var(--border-main);
  background: var(--bg-subtle);
  color: var(--text-main);
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.home-search-input:focus {
  border-color: #3b82f6;
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.home-search-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.home-search-btn:hover {
  background: #1d4ed8;
}

.root-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}

.root-chip-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-main);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.root-chip-btn:hover {
  background: #f5f3ff;
  border-color: #8b5cf6;
  transform: translateY(-1px);
}

.root-english {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.root-chip-btn:hover .root-english {
  color: #6d28d9;
}

.root-greek {
  font-family: var(--font-greek);
  font-size: 0.78rem;
  color: #6d28d9;
  font-weight: 600;
}

/* Hub 3: Primer Lessons Grid */
.primer-lessons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}

.primer-lesson-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-main);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.primer-lesson-btn:hover {
  background: #ecfdf5;
  border-color: #10b981;
  transform: translateY(-1px);
}

.lesson-num-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: #059669;
  background: #ffffff;
  border: 1px solid #a7f3d0;
  padding: 0.1rem 0.32rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.lesson-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.primer-lesson-btn:hover .lesson-name {
  color: #047857;
}

/* Hub 4: Visual Tools List */
.tools-visual-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.tool-visual-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-main);
  border-radius: 7px;
  padding: 0.42rem 0.65rem;
}

.tool-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.aspect-badge-icon {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.root-badge-icon {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.lexicon-badge-icon {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.tool-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.tool-text strong {
  color: var(--text-main);
}

.action-demo-btn {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
  border-radius: 7px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-demo-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

/* Dark Mode Overrides for Action Grid */
[data-theme="dark"] .home-action-card {
  background: var(--bg-card);
  border-color: var(--border-main);
}

[data-theme="dark"] .home-action-card:hover {
  border-color: var(--accent-primary-border);
}

[data-theme="dark"] .scripture-pill-btn,
[data-theme="dark"] .root-chip-btn,
[data-theme="dark"] .primer-lesson-btn,
[data-theme="dark"] .tool-visual-item {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .scripture-pill-btn:hover {
  background: #1e3a8a;
  border-color: #60a5fa;
}

[data-theme="dark"] .root-chip-btn:hover {
  background: #2e1065;
  border-color: #c084fc;
}

[data-theme="dark"] .primer-lesson-btn:hover {
  background: #064e3b;
  border-color: #34d399;
}

[data-theme="dark"] .lesson-num-badge {
  background: #0f172a;
}

[data-theme="dark"] .action-demo-btn {
  background: #1e293b;
  border-color: #3b82f6;
  color: #93c5fd;
}

[data-theme="dark"] .action-demo-btn:hover {
  background: #2563eb;
  color: #ffffff;
}

.calendar-card {
  grid-column: 1 / -1;
}

.gateway-toggle-devo-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-main);
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.65rem 1.15rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 0.5rem;
}

.gateway-toggle-devo-btn:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary-border);
}

/* Devotional Styles */
.devotional-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.devo-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}
.devo-date-badge {
  display: inline-block;
  background: var(--accent-primary);
  color: #ffffff;
  padding: 0.3rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(30, 64, 175, 0.25);
}

.devo-intro-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-primary);
  border-radius: 8px;
  padding: 1.35rem 1.6rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
  line-height: 1.65;
}

.devo-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  background: var(--accent-primary-light);
  border: 1px solid var(--accent-primary-border);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.devo-intro-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.65rem;
}

.devo-intro-body {
  font-size: 0.96rem;
  color: var(--text-main);
  line-height: 1.7;
  font-family: var(--font-ui);
}
.devo-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--accent-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
.devo-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.devo-content {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-main);
}
.devo-content p {
  margin-bottom: 1.5rem;
}

.verse-row-container:hover {
  background: var(--bg-sidebar);
}

.delete-saved-btn:hover { color: var(--accent-primary) !important; transform: scale(1.1); }
.verse-star-btn:hover { transform: scale(1.1); }

/* =======================================================
   BIBLICAL STUDY GUIDE PRIMER STYLING
   ======================================================= */

.study-guide-container {
  padding: 2.5rem 2rem;
  max-width: 960px;
  margin: 0 auto;
  color: var(--text-main);
  animation: fadeIn 0.3s ease;
}

/* Sticky Study Guide Header (Always visible at top when scrolling) */
.guide-sticky-header {
  position: sticky;
  top: 64px;
  z-index: 85;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 0.85rem 1.5rem;
  margin: -2.5rem -2rem 2.2rem -2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

[data-theme="dark"] .guide-sticky-header {
  background: rgba(15, 23, 42, 0.94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.guide-sticky-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.guide-sticky-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.guide-sticky-badge {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary-border);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.guide-sticky-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.guide-sticky-nav-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.guide-lead-purpose-box {
  background: var(--bg-sidebar);
  border-left: 4px solid var(--accent-primary);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem auto 1.5rem auto;
  max-width: 820px;
  text-align: left;
}

.guide-intro-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 860px;
  margin: 1.5rem auto 0 auto;
  text-align: left;
}

.intro-pillar {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.intro-pillar .pillar-icon {
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
}

.intro-pillar strong {
  font-size: 0.92rem;
  color: var(--accent-primary);
}

.intro-pillar span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.guide-hero {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}

.guide-pill-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-primary), #4f46e5);
  color: #ffffff;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.guide-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--accent-primary);
  margin: 0 0 0.75rem 0;
  line-height: 1.25;
}

.guide-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 1.75rem auto;
  line-height: 1.6;
}

.guide-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.guide-nav-pill {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.guide-nav-pill:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.guide-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.guide-section-header {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.guide-section-num {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: var(--font-sans);
  color: var(--accent-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.guide-section-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--accent-primary);
  margin: 0 0 0.35rem 0;
}

.guide-section-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.guide-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.guide-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.lang-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.lang-card-header {
  margin-bottom: 0.75rem;
}

.lang-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.lang-name {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.lang-orig {
  font-family: var(--font-greek);
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Distinct jewel tones for each Biblical language */
.lang-card-hebrew {
  border-top: 3.5px solid #2563eb;
}
.lang-card-hebrew .lang-tag {
  color: #2563eb;
}
.lang-card-hebrew .lang-orig {
  color: #2563eb;
}

.lang-card-aramaic {
  border-top: 3.5px solid #7c3aed;
}
.lang-card-aramaic .lang-tag {
  color: #7c3aed;
}
.lang-card-aramaic .lang-orig {
  color: #7c3aed;
}

.lang-card-greek {
  border-top: 3.5px solid #059669;
}
.lang-card-greek .lang-tag {
  color: #059669;
}
.lang-card-greek .lang-orig {
  color: #059669;
}

[data-theme="dark"] .lang-card-hebrew .lang-orig { color: #60a5fa; }
[data-theme="dark"] .lang-card-aramaic .lang-orig { color: #c084fc; }
[data-theme="dark"] .lang-card-greek .lang-orig { color: #34d399; }

.lang-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
  margin-bottom: 0.75rem;
}

.lang-list {
  padding-left: 1.2rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.lang-list li {
  margin-bottom: 0.5rem;
}

.guide-box-highlight {
  background: var(--accent-primary-light);
  border-left: 4px solid var(--accent-primary);
  padding: 1.25rem 1.4rem;
  border-radius: 0 8px 8px 0;
}

.table-responsive {
  overflow-x: auto;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.guide-table th {
  background: var(--bg-sidebar);
  color: var(--accent-primary);
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 700;
  border-bottom: 2px solid var(--border-light);
}

.guide-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  line-height: 1.5;
}

.aspect-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-aorist {
  background: rgba(43, 76, 126, 0.15);
  color: var(--accent-primary);
}

.badge-present {
  background: rgba(46, 117, 89, 0.15);
  color: #2e7559;
}

.badge-perfect {
  background: var(--accent-purple-light);
  color: var(--accent-purple);
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.badge-imperfect {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
}

.guide-jump-btn {
  display: inline-block;
  margin-top: 0.4rem;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  color: var(--accent-primary);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.guide-jump-btn:hover {
  background: var(--accent-primary);
  color: white;
}

.sub-card {
  background: var(--bg-sidebar);
  border-radius: 8px;
  padding: 1.25rem;
  border: 1px solid var(--border-subtle);
}

.sub-card-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.15rem;
  color: var(--accent-primary);
}

.sub-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.voice-item {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.voice-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.voice-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.callout-gold {
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  color: var(--text-main);
}

[data-theme="dark"] .callout-gold {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.compound-example {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.compound-formula {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.compound-formula strong {
  color: var(--accent-primary);
}

.compound-result {
  font-size: 0.92rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.case-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.1rem;
}

.case-card.case-card-featured {
  background: var(--accent-primary-light) !important;
  border: 1px solid var(--accent-primary-border) !important;
}

.case-badge {
  display: inline-block;
  background: rgba(43, 76, 126, 0.12);
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.case-badge.case-badge-featured {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}

.case-title {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  color: var(--text-main);
}

.case-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.guide-step-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--bg-sidebar);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.step-num {
  min-width: 2.2rem;
  height: 2.2rem;
  background: var(--accent-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
}

.step-content h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  color: var(--accent-primary);
}

.step-content p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.5;
}

.guide-action-btn {
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.guide-action-btn:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-2px);
}


/* Paged Guide Sidebar and Navigation */
.guide-nav-list {
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guide-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding: 0 0.5rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.5rem;
}

.guide-badge-count {
  background: var(--accent-primary-light);
  border: 1px solid var(--accent-primary-border);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--accent-primary);
  font-weight: 700;
}

.guide-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.2s ease;
  font-family: inherit;
}

.guide-nav-item:hover {
  background: var(--bg-sidebar);
  border-color: var(--border-light);
  transform: translateX(2px);
}

.guide-nav-item.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 3px 10px rgba(43, 76, 126, 0.25);
}

.guide-nav-num {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1;
}

.guide-nav-item.active .guide-nav-num {
  color: #ffffff;
}

.guide-nav-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.guide-nav-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.guide-nav-item.active .guide-nav-title {
  color: #ffffff;
}

.guide-nav-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}

.guide-nav-item.active .guide-nav-sub {
  color: rgba(255, 255, 255, 0.8);
}

.guide-section-page {
  animation: fadeIn 0.25s ease;
}

.guide-page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 1rem;
}

.guide-page-indicator {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-nav-prev-btn,
.guide-nav-next-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.guide-nav-prev-btn:hover,
.guide-nav-next-btn:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.guide-nav-pill {
  cursor: pointer;
}

.guide-nav-pill.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

/* Hebrew Binyanim Badges & Table */
.binyan-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.binyan-qal { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.binyan-niphal { background: rgba(14, 165, 233, 0.12); color: #0284c7; }
.binyan-piel { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.binyan-pual { background: rgba(234, 88, 12, 0.12); color: #ea580c; }
.binyan-hiphil { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.binyan-hophal { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
.binyan-hitpael { background: rgba(5, 150, 105, 0.12); color: #059669; }

[data-theme="dark"] .binyan-qal { background: rgba(37, 99, 235, 0.25); color: #60a5fa; }
[data-theme="dark"] .binyan-niphal { background: rgba(14, 165, 233, 0.25); color: #38bdf8; }
[data-theme="dark"] .binyan-piel { background: rgba(220, 38, 38, 0.25); color: #f87171; }
[data-theme="dark"] .binyan-pual { background: rgba(234, 88, 12, 0.25); color: #fb923c; }
[data-theme="dark"] .binyan-hiphil { background: rgba(124, 58, 237, 0.25); color: #c084fc; }
[data-theme="dark"] .binyan-hophal { background: rgba(168, 85, 247, 0.25); color: #d8b4fe; }
[data-theme="dark"] .binyan-hitpael { background: rgba(5, 150, 105, 0.25); color: #34d399; }

/* Interactive Demo Container & Widgets */
.interactive-demo-card {
  background: var(--bg-card);
  border: 1.5px solid var(--accent-primary-border);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.demo-step-box {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
}

.demo-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.demo-step-tag {
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.demo-step-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.demo-controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.demo-btn-toggle {
  background: linear-gradient(135deg, var(--accent-primary), #4338ca);
  color: #ffffff;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.demo-btn-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.demo-verse-selector-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.demo-verse-selector-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.demo-verse-selector-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.demo-verse-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-main);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.demo-verse-ref {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-tokens-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.demo-token-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.demo-token-btn:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary-light);
  transform: translateY(-1px);
}

.demo-token-btn.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.demo-token-btn.active span {
  color: #ffffff !important;
}

.demo-inspector-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 4.5px solid var(--accent-primary);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.demo-root-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.demo-root-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s;
}

.demo-root-chip:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.demo-root-chip.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}


.verse-row.verse-selected {
  background: rgba(30, 64, 175, 0.07) !important;
  border-left: 3.5px solid var(--accent-primary);
  border-radius: 0 4px 4px 0;
  transition: background 0.3s ease, border-left 0.3s ease;
}

/* ==========================================================================
   Scholarly Concordance & Core Roots UI
   ========================================================================== */

.concordance-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem 1rem;
}

.concordance-header-box {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.5rem;
}

.concordance-query-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
  letter-spacing: -0.02em;
}

.concordance-query-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.5;
}

.concordance-testament-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.concordance-testament-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  border-radius: 9999px;
  padding: 0.35rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.concordance-testament-btn:hover {
  color: var(--text-main);
  border-color: var(--accent-primary-border);
  background: var(--accent-primary-light);
}

.concordance-testament-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 1px 3px rgba(30, 64, 175, 0.2);
}

.concordance-testament-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
}

.concordance-testament-tag.nt {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.35);
}
[data-theme="dark"] .concordance-testament-tag.nt {
  background: rgba(37, 99, 235, 0.22);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.5);
}

.concordance-testament-tag.ot {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .concordance-testament-tag.ot {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
}

.concordance-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.concordance-roots-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.concordance-root-chip {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.concordance-root-chip:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.concordance-root-chip.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #ffffff !important;
}

.concordance-root-chip-greek {
  font-family: var(--font-greek);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.concordance-root-chip.active .concordance-root-chip-greek {
  color: #ffffff !important;
}

.concordance-root-chip-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-sidebar);
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: 12px;
}

.concordance-root-chip.active .concordance-root-chip-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.concordance-active-root-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--accent-primary);
  border-radius: 6px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.concordance-banner-title {
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 0.95rem;
}

.concordance-banner-forms {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-left: 0.4rem;
}

.concordance-banner-def {
  margin-top: 0.25rem;
  color: var(--text-main);
  font-size: 0.88rem;
  line-height: 1.45;
}

.concordance-clear-root-btn {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  user-select: none;
}

.concordance-clear-root-btn:hover {
  background: var(--accent-primary-light, rgba(59, 130, 246, 0.1));
  color: var(--accent-primary, #3b82f6);
  border-color: var(--accent-primary, #3b82f6);
}

.concordance-clear-root-btn.hebrew:hover {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: #d97706;
}

.concordance-root-chip.hebrew {
  border-color: rgba(245, 158, 11, 0.35);
}

.concordance-root-chip.hebrew:hover {
  border-color: #d97706;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.concordance-root-chip.hebrew.active {
  border-color: #d97706 !important;
  background: #d97706 !important;
  color: #ffffff !important;
}

.concordance-root-chip.hebrew.active .concordance-root-chip-greek,
.concordance-root-chip.hebrew.active .concordance-root-chip-strongs,
.concordance-root-chip.hebrew.active span {
  color: #ffffff !important;
}

.concordance-root-chip.hebrew.active .concordance-root-chip-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}



.concordance-books-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.concordance-book-btn {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.concordance-book-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.concordance-book-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.concordance-book-count {
  font-size: 0.75rem;
  opacity: 0.85;
}

.concordance-verse-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.concordance-verse-card:hover {
  border-color: var(--accent-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.concordance-verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.concordance-verse-ref {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.concordance-verse-jump-btn {
  font-size: 0.8rem;
  color: var(--accent-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.concordance-verse-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
}

.concordance-mark {
  background-color: #fef08a;
  color: #1e293b;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

[data-theme="dark"] .concordance-mark {
  background-color: rgba(234, 179, 8, 0.3);
  color: #fef08a;
}

.concordance-root-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-primary-light);
  border: 1px solid var(--accent-primary-border);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-main);
}

.concordance-root-pill-greek {
  font-family: var(--font-greek);
  font-weight: 700;
  color: var(--accent-primary);
  font-size: 0.95rem;
}

.concordance-root-pill-nuance {
  color: var(--text-muted);
}

/* =======================================================
   TODAY IN THE BIBLICAL CALENDAR (HOME PAGE BANNER)
   ======================================================= */
.home-today-season-card {
  background: #ffffff;
  border: 1.5px solid #bfdbfe;
  border-left: 4.5px solid var(--accent-primary);
  border-radius: 12px;
  padding: 0.85rem 1.35rem;
  margin-bottom: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-today-season-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.today-season-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.today-season-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  flex-wrap: wrap;
}

.today-season-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  display: inline-block;
}

/* Live Hebcal Sync Badge */
.hebcal-sync-pill {
  font-size: 0.68rem;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
}

[data-theme="dark"] .hebcal-sync-pill {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.35);
}

.today-season-headline {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.today-season-date {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
}

.today-season-hebrew-script {
  font-family: 'SBL Hebrew', 'Ezra SIL', 'David', 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-primary);
  direction: rtl;
  margin-left: 0.2rem;
}

.today-season-sep {
  color: var(--border-main);
}

.today-season-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-primary);
}

.today-season-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.today-season-btn {
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.today-season-btn:hover {
  background: var(--accent-primary-hover);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transform: translateX(2px);
}

/* =======================================================
   DEDICATED CALENDAR & DEVOTIONAL PAGE
   ======================================================= */
.calendar-page-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 2.25rem 2rem 5rem;
}

.calendar-back-btn {
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
  transition: all 0.15s ease;
}

.calendar-back-btn:hover {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border-color: var(--accent-primary-border);
}

.calendar-page-hero {
  background: #ffffff;
  border: 1px solid var(--border-main);
  border-left: 4.5px solid var(--accent-primary);
  border-radius: 12px;
  padding: 1.6rem 1.85rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.calendar-hero-badges {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.calendar-date-pill {
  background: #eff6ff;
  color: var(--accent-primary);
  border: 1px solid #bfdbfe;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
}

.calendar-hebrew-script-pill {
  font-family: 'SBL Hebrew', 'Ezra SIL', 'David', 'Times New Roman', serif;
  direction: rtl;
  font-size: 0.95rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-primary);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
}

[data-theme="dark"] .calendar-hebrew-script-pill {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.35);
}

.calendar-season-pill {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
}

.calendar-page-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 0.45rem;
  line-height: 1.25;
}

.calendar-page-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.calendar-scriptures-row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.calendar-scripture-chip {
  background: #f8fafc;
  border: 1px solid var(--border-main);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calendar-scripture-chip:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
}

[data-theme="dark"] .home-today-season-card {
  background: #131b2a;
  border-color: #1e3a8a;
}
[data-theme="dark"] .calendar-page-hero {
  background: #131b2a;
  border-color: #2a374d;
}
[data-theme="dark"] .calendar-scripture-chip {
  background: #192336;
  border-color: #2a374d;
}
[data-theme="dark"] .calendar-back-btn {
  background: #131b2a;
  border-color: #2a374d;
  color: #94a3b8;
}

/* Verse Commentary & Inspector Navigation Styles */
.study-whole-verse-btn,
.back-to-verse-btn {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 8px;
  color: var(--accent-primary, #2563eb);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.18s ease;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
  text-decoration: none;
}

.study-whole-verse-btn:hover,
.back-to-verse-btn:hover {
  background: rgba(37, 99, 235, 0.16);
  border-color: var(--accent-primary, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.14);
}

[data-theme="dark"] .study-whole-verse-btn,
[data-theme="dark"] .back-to-verse-btn {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

[data-theme="dark"] .study-whole-verse-btn:hover,
[data-theme="dark"] .back-to-verse-btn:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #60a5fa;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Interactive Strong's Word Chips (English + Strong's #) */
.strongs-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  text-decoration: none;
}

.strongs-word-chip:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(30, 64, 175, 0.12);
}

.strongs-chip-english {
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: -0.01em;
}

.strongs-chip-id {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--accent-primary);
  opacity: 0.85;
}

[data-theme="dark"] .strongs-word-chip {
  background: #192336;
  border-color: #2a374d;
  color: #e2e8f0;
}

[data-theme="dark"] .strongs-word-chip:hover {
  background: #23334d;
  border-color: #60a5fa;
  color: #93c5fd;
}

[data-theme="dark"] .strongs-chip-id {
  color: #93c5fd;
}

.strongs-word-chip-hebrew {
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--bg-card);
}

.strongs-word-chip-hebrew:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: #d97706;
  color: #b45309;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.15);
}

.strongs-chip-lemma-hebrew {
  font-family: var(--font-hebrew, 'SBL Hebrew', 'Ezra SIL', serif);
  font-size: 0.92rem;
  direction: rtl;
  color: #b45309;
  font-weight: 700;
}

.strongs-chip-id-hebrew {
  font-family: monospace;
  font-size: 0.7rem;
  color: #b45309;
  opacity: 0.9;
}

[data-theme="dark"] .strongs-word-chip-hebrew {
  background: #231b10;
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .strongs-word-chip-hebrew:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  color: #fbbf24;
}

[data-theme="dark"] .strongs-chip-lemma-hebrew,
[data-theme="dark"] .strongs-chip-id-hebrew {
  color: #fbbf24;
}

/* Sample verse links on Word Root Page */
.strongs-sample-verse-link {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--accent-indigo, #6366f1);
  padding: 0.22rem 0.5rem;
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.strongs-sample-verse-link:hover {
  background: var(--accent-indigo, #6366f1);
  color: #ffffff;
  transform: translateY(-1px);
}

[data-theme="dark"] .strongs-sample-verse-link {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

[data-theme="dark"] .strongs-sample-verse-link:hover {
  background: #6366f1;
  color: #ffffff;
}

.btn-full-concordance {
  transition: all 0.15s ease;
}

.btn-full-concordance:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* Reading Mode Selector (Top Header Bar) */
.reading-mode-selector {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle, #e2e8f0);
  border: 1px solid var(--border-subtle, #cbd5e1);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.32rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.mode-btn:hover {
  color: var(--text-main);
}

.mode-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--accent-primary, #1e40af);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mode-btn-icon {
  font-size: 0.85rem;
}

.mode-btn-label {
  letter-spacing: -0.01em;
}

[data-theme="dark"] .reading-mode-selector {
  background: #192336;
  border-color: #2a374d;
}

[data-theme="dark"] .mode-btn {
  color: #94a3b8;
}

[data-theme="dark"] .mode-btn:hover {
  color: #f1f5f9;
}

[data-theme="dark"] .mode-btn.active {
  background: #23334d;
  color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Expanded Wuest / AMP Translation Phrasing */
.expanded-wuest-phrase {
  font-weight: 600;
  color: var(--accent-primary, #1e40af);
  border-bottom: 1.5px dotted rgba(30, 64, 175, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 2px;
}
/* =====================================================================
 * AMP READING MODE STYLES
 * ===================================================================== */
.amp-bracket {
  color: var(--accent-primary);
  font-weight: 500;
  background-color: var(--accent-primary-light, rgba(30, 64, 175, 0.04));
  padding: 0 0.15rem;
  border-radius: 3px;
  font-style: italic;
}

[data-theme="dark"] .amp-bracket {
  color: #93c5fd;
  background-color: rgba(59, 130, 246, 0.12);
}

.amp-paren {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

[data-theme="dark"] .amp-paren {
  color: #94a3b8;
}
.expanded-wuest-phrase:hover {
  background: var(--accent-primary-light, rgba(30, 64, 175, 0.08));
  border-bottom-color: var(--accent-primary, #1e40af);
  border-radius: 3px;
}

[data-theme="dark"] .expanded-wuest-phrase {
  color: #93c5fd;
  border-bottom-color: rgba(147, 197, 253, 0.4);
}

[data-theme="dark"] .expanded-wuest-phrase:hover {
  background: rgba(147, 197, 253, 0.1);
  border-bottom-color: #93c5fd;
}

.expanded-wuest-phrase.active-focus {
  background: rgba(30, 64, 175, 0.15);
  border-bottom: 2px solid var(--accent-primary, #1e40af);
  border-radius: 3px;
}

[data-theme="dark"] .expanded-wuest-phrase.active-focus {
  background: rgba(147, 197, 253, 0.2);
  border-bottom: 2px solid #93c5fd;
}

/* Holy Spirit & Practical Application Cards */
.practical-app-card {
  border-left: 4px solid var(--accent-emerald, #059669);
  background: rgba(5, 150, 105, 0.05);
  padding: 0.85rem 1rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 0.4rem;
  transition: all 0.2s ease;
}

[data-theme="dark"] .practical-app-card {
  background: rgba(16, 185, 129, 0.08);
  border-left-color: #10b981;
}

.practical-app-text {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-main);
  font-weight: 500;
  font-family: var(--font-sans);
}

.spirit-walk-prompt {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(5, 150, 105, 0.25);
  font-size: 0.84rem;
  color: #047857;
  line-height: 1.45;
}

[data-theme="dark"] .spirit-walk-prompt {
  border-top-color: rgba(52, 211, 153, 0.25);
  color: #6ee7b7;
}

[data-theme="dark"] .spirit-walk-prompt strong {
  color: #a7f3d0;
}

/* =======================================================
   SEARCH-TRIGGERED ROOT WORD HIGHLIGHT
   ======================================================= */
.search-highlighted-token {
  animation: searchTokenPulse 2.8s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 4px;
}

@keyframes searchTokenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.85);
    background-color: rgba(37, 99, 235, 0.35);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.3);
    background-color: rgba(37, 99, 235, 0.25);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    background-color: rgba(37, 99, 235, 0.12);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

[data-theme="dark"] .search-highlighted-token {
  animation: searchTokenPulseDark 2.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes searchTokenPulseDark {
  0% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.85);
    background-color: rgba(59, 130, 246, 0.45);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.35);
    background-color: rgba(59, 130, 246, 0.3);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
    background-color: rgba(59, 130, 246, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
}

.search-highlighted-token.hebrew-token {
  animation: searchTokenPulseHebrew 2.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@keyframes searchTokenPulseHebrew {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.85);
    background-color: rgba(245, 158, 11, 0.4);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.35);
    background-color: rgba(245, 158, 11, 0.3);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
    background-color: rgba(245, 158, 11, 0.15);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
  }
}


/* =======================================================
   STUDY & APP GUIDE + INTERACTIVE TOUR STYLING
   ======================================================= */

/* Header Guide & Tour Buttons */
.header-guide-btn,
.header-tour-btn {
  height: 32px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.header-guide-btn:hover,
.header-tour-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.header-guide-btn.active {
  background: var(--accent-primary);
  color: #ffffff !important;
  border-color: var(--accent-primary);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.header-tour-btn {
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.08);
  color: #d97706;
}

.header-tour-btn:hover {
  background: #d97706;
  color: #ffffff;
  border-color: #d97706;
}

@media (max-width: 820px) {
  .guide-btn-label,
  .tour-btn-label {
    display: none;
  }
  .header-guide-btn,
  .header-tour-btn {
    padding: 0 0.5rem;
  }
}

/* Guide Top Bar & Actions */
.guide-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.guide-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.guide-return-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateX(-2px);
}

.guide-hero-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(217, 119, 6, 0.4);
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
  transition: all 0.2s ease;
}

.guide-hero-tour-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

.guide-lead-text {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-main);
  max-width: 820px;
  margin: 0 auto 0.75rem auto;
}

.guide-lead-purpose {
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--accent-primary);
  max-width: 780px;
  margin: 0 auto 1.5rem auto;
}

/* Three-Letter Root Tree */
.root-tree-box {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.92rem;
  line-height: 1.6;
}

.root-tree-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border-subtle);
  flex-wrap: wrap;
}

.root-badge {
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.root-hebrew {
  font-family: var(--font-hebrew);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.root-translit {
  color: var(--text-muted);
  font-weight: 600;
}

.root-meaning {
  color: var(--text-main);
  font-weight: 700;
}

.root-branches {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.root-branch-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.branch-connector {
  color: var(--accent-primary);
  font-weight: bold;
}

.branch-word {
  font-weight: 700;
  color: var(--accent-primary);
}

.branch-def {
  color: var(--text-main);
}

/* Greek Verb Tenses Diagram Box */
.greek-diagram-box {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem;
  overflow-x: auto;
}

.greek-diagram-pre {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-main);
  font-weight: 600;
}

/* Physical Reality Concept Cards */
.concept-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.concept-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.concept-icon {
  font-size: 1.4rem;
}

.concept-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.concept-body {
  margin: 0 0 0.85rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-main);
}

.concept-verse {
  margin-top: auto;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border-left: 3px solid var(--accent-primary);
}

/* Interactive Tour CTA Banner */
.tour-cta-banner {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(217, 119, 6, 0.12));
  border: 1px solid var(--border-light);
  border-left: 4px solid #d97706;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tour-cta-content {
  flex: 1;
  min-width: 260px;
}

.tour-cta-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #d97706;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.tour-cta-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.25rem;
  color: var(--text-main);
}

.tour-cta-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.tour-cta-btn {
  padding: 0.65rem 1.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tour-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
}

/* Interface Walkthrough Grid */
.interface-walkthrough-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.walkthrough-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.walkthrough-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.walkthrough-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.walkthrough-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.walkthrough-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.walkthrough-loc {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.15rem;
}

.walkthrough-text {
  margin: 0 0 0.65rem 0;
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.5;
}

.walkthrough-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Fullscreen Interactive Lightbox Modal */
.tour-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.tour-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tour-modal-dialog {
  position: relative;
  z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: tourModalZoom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tourModalZoom {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.tour-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-sidebar);
}

.tour-step-indicator {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent-primary);
  color: #ffffff;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tour-modal-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-main);
  flex: 1;
  margin-left: 0.85rem;
}

.tour-close-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s;
}

.tour-close-btn:hover {
  color: var(--text-main);
  background: var(--bg-hover);
}

.tour-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.tour-slide-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tour-visual-mock {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 1.25rem;
}

.tour-bullet-points {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tour-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-sidebar);
  border-radius: 8px;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tour-try-btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--accent-primary);
  background: var(--accent-primary);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s;
}

.tour-try-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.tour-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sidebar);
}

.tour-nav-btn {
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s;
}

.tour-nav-btn:hover:not(:disabled) {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.tour-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tour-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tour-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.tour-dot:hover {
  background: #94a3b8;
}

.tour-dot.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.3);
}

/* =======================================================
   INTERACTIVE SPOTLIGHT TUTORIAL MODE & WALKTHROUGH
   ======================================================= */
html.tutorial-lock-scroll,
body.tutorial-lock-scroll {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.tutorial-backdrop-catcher {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  background: transparent;
  pointer-events: none;
}

.tutorial-spotlight-box {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.48), 0 0 25px rgba(59, 130, 246, 0.70);
  border: 2px solid #3b82f6;
  pointer-events: none;
  z-index: 99995;
  display: none;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}

[data-theme="dark"] .tutorial-spotlight-box {
  box-shadow: 0 0 0 9999px rgba(5, 10, 20, 0.52), 0 0 25px rgba(59, 130, 246, 0.75);
}

.tutorial-spotlight-box.pulse-spotlight-attention {
  animation: spotlightAttentionPulse 0.6s ease-in-out;
}

@keyframes spotlightAttentionPulse {
  0%, 100% {
    border-color: #3b82f6;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.48), 0 0 25px rgba(59, 130, 246, 0.70);
  }
  50% {
    border-color: #f59e0b;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.58), 0 0 40px rgba(245, 158, 11, 0.85);
    transform: scale(1.02);
  }
}

.tutorial-top-banner {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(90deg, #1e3a8a, #1d4ed8);
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 100005;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  font-size: 0.84rem;
}

.tutorial-banner-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tutorial-banner-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.4);
  animation: tutPulseDot 1.5s infinite;
}

@keyframes tutPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.tutorial-banner-exit-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tutorial-banner-exit-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
}

.tutorial-callout-card {
  position: fixed;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-main, #cbd5e1) transparent;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--accent-primary, #2563eb);
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 100000;
  display: none;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
  animation: tutCardFadeIn 0.25s ease-out;
}

.tutorial-callout-card::-webkit-scrollbar {
  width: 4px;
}
.tutorial-callout-card::-webkit-scrollbar-thumb {
  background-color: var(--border-main, #cbd5e1);
  border-radius: 4px;
}

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

[data-theme="dark"] .tutorial-callout-card {
  background: #0f172a;
  border-color: #3b82f6;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* =======================================================
   LIVE TOKEN HOVER BOX PREVIEW IN TUTORIAL MODE
   ======================================================= */
.verse-row:has(.tutorial-hover-preview),
.verse-row.has-tutorial-hover-preview {
  z-index: 100001 !important;
  position: relative !important;
}

.expandable-token.tutorial-hover-preview {
  position: relative !important;
  z-index: 100001 !important;
  background-color: rgba(37, 99, 235, 0.15) !important;
  border-radius: 3px !important;
  outline: 2px solid #2563eb !important;
}

.expandable-token.tutorial-hover-preview .breakout-window {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
  animation: none !important;
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(37, 99, 235, 0.45) !important;
}

.expandable-token.tutorial-hover-preview .breakout-window::before {
  top: auto !important;
  bottom: 100% !important;
  height: 14px !important;
}

.expandable-token.tutorial-hover-preview .breakout-window::after {
  top: auto !important;
  bottom: 100% !important;
  border-width: 6px !important;
  border-style: solid !important;
  border-color: transparent transparent var(--bg-card) transparent !important;
}

/* =======================================================
   TUTORIAL IN-CARD HOVER BOX VISUAL PREVIEW & BREAKDOWN
   ======================================================= */
.tut-hover-preview-card {
  background: var(--bg-surface, #f8fafc);
  border: 1px solid var(--border-main, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin: 0.4rem 0 0.5rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  line-height: 1.35;
  position: relative;
  text-align: left;
}

[data-theme="dark"] .tut-hover-preview-card {
  background: rgba(15, 23, 42, 0.85);
  border-color: #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tut-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-bottom: 0.45rem;
}

[data-theme="dark"] .tut-preview-badge {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.2);
}

.tut-preview-header {
  margin-bottom: 0.45rem;
}

.tut-preview-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-main, #0f172a);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.tut-preview-title .breakout-title-eng {
  color: var(--text-main, #0f172a);
}

.tut-preview-title .breakout-title-orig {
  font-family: var(--font-greek, 'SBL Greek', 'Times New Roman', serif);
  font-weight: 700;
  color: #2563eb;
  font-size: 0.95rem;
}

[data-theme="dark"] .tut-preview-title .breakout-title-orig {
  color: #60a5fa;
}

.tut-preview-title .breakout-title-translit {
  font-style: italic;
  color: var(--text-muted, #64748b);
  font-size: 0.82rem;
}

.tut-preview-title .breakout-title-strongs {
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  margin-left: 2px;
}

[data-theme="dark"] .tut-preview-title .breakout-title-strongs {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.tut-preview-parsing {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
}

.tut-preview-divider {
  height: 1px;
  background: var(--border-subtle, #e2e8f0);
  margin: 0.45rem 0;
}

[data-theme="dark"] .tut-preview-divider {
  background: #334155;
}

.tut-preview-section {
  margin-bottom: 0.4rem;
}

.tut-preview-section-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.2rem;
}

.tut-preview-section-body {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-main, #1e293b);
}

[data-theme="dark"] .tut-preview-section-body {
  color: #e2e8f0;
}

.tut-preview-subtext {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

.tut-preview-picture-body {
  font-size: 0.8rem;
  line-height: 1.42;
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.06);
  padding: 0.35rem 0.5rem;
  border-left: 2.5px solid #2563eb;
  border-radius: 4px;
}

[data-theme="dark"] .tut-preview-picture-body {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border-color: #60a5fa;
}

.tut-preview-tip {
  font-size: 0.72rem;
  color: var(--accent-primary, #2563eb);
  font-weight: 600;
  margin-top: 0.4rem;
  text-align: right;
  opacity: 0.9;
}

/* What's Inside Every Hover Box Breakdown */
.tut-hover-breakdown-box {
  background: rgba(37, 99, 235, 0.04);
  border: 1px dashed rgba(37, 99, 235, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.55rem;
  text-align: left;
}

[data-theme="dark"] .tut-hover-breakdown-box {
  background: rgba(30, 58, 138, 0.15);
  border-color: rgba(96, 165, 250, 0.35);
}

.tut-breakdown-header {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .tut-breakdown-header {
  color: #f1f5f9;
}

.tut-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.tut-breakdown-list li {
  font-size: 0.74rem;
  line-height: 1.38;
  color: var(--text-main, #334155);
}

[data-theme="dark"] .tut-breakdown-list li {
  color: #cbd5e1;
}

.tut-breakdown-list strong {
  color: var(--accent-primary, #2563eb);
}

[data-theme="dark"] .tut-breakdown-list strong {
  color: #60a5fa;
}

.tutorial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.tutorial-step-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-primary, #2563eb);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .tutorial-step-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

.tutorial-btn-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.tutorial-btn-close:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.tutorial-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.tutorial-card-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-main);
  margin-bottom: 0.5rem;
}

.tutorial-card-prompt {
  font-size: 0.76rem;
  padding: 0.45rem 0.65rem;
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid var(--accent-primary);
  border-radius: 6px;
  margin-bottom: 0.65rem;
  color: var(--text-main);
  line-height: 1.4;
}

[data-theme="dark"] .tutorial-card-prompt {
  background: rgba(59, 130, 246, 0.15);
}

.tutorial-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.55rem;
}

.tutorial-nav-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tut-prev {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.btn-tut-prev:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-main);
}

.btn-tut-prev:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-tut-next {
  background: var(--accent-primary, #2563eb);
  color: #ffffff;
  border: none;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.btn-tut-next:hover {
  background: var(--accent-primary-hover, #1d4ed8);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45);
}

.btn-tut-finish {
  background: #059669;
  color: #ffffff;
  border: none;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3);
}

.btn-tut-finish:hover {
  background: #047857;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.45);
}

.tutorial-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tut-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-main, #cbd5e1);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tut-dot.active {
  width: 18px;
  border-radius: 4px;
  background: var(--accent-primary, #2563eb);
}

/* ==========================================================================
   Passage Context Card & Pericope Grouping Styles
   ========================================================================== */
.passage-context-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-left: 3.5px solid #6366f1;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-top: 0.45rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.05);
}

[data-theme="dark"] .passage-context-card {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  border-left-color: #818cf8;
}

.passage-context-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.passage-context-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6366f1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

[data-theme="dark"] .passage-context-tag {
  color: #a5b4fc;
}

.passage-context-range {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(99, 102, 241, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.passage-context-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

.passage-context-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.verse-application-card.passage-app-card {
  border-left-color: #6366f1;
}

[data-theme="dark"] .verse-application-card.passage-app-card {
  border-left-color: #818cf8;
}

/* Classical Note Details - Seamless Non-Repeating Continuation */
details.classical-note-details {
  margin-top: 0.45rem;
  cursor: pointer;
}

details.classical-note-details summary {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-primary);
  outline: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}

details.classical-note-details summary:hover {
  color: var(--accent-hover, #4f46e5);
}

details.classical-note-details summary .classical-expand-prompt {
  display: inline;
}

details.classical-note-details summary .classical-collapse-prompt {
  display: none;
}

details.classical-note-details[open] summary .classical-expand-prompt {
  display: none !important;
}

details.classical-note-details[open] summary .classical-collapse-prompt {
  display: inline !important;
}

.classical-note-continuation {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-line;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-subtle);
}

/* Intelligent Scripture Search & Match Badges */
.dropdown-header-verses {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border-left: 3.5px solid #10b981;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
[data-theme="dark"] .dropdown-header-verses {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.dropdown-item-verse {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dropdown-verse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-verse-ref {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dropdown-verse-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dropdown-verse-badge.exact {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .dropdown-verse-badge.exact {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.dropdown-verse-badge.all {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
[data-theme="dark"] .dropdown-verse-badge.all {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.dropdown-verse-badge.synonym {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .dropdown-verse-badge.synonym {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dropdown-verse-badge.alias {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
  border: 1px solid rgba(236, 72, 153, 0.25);
}
[data-theme="dark"] .dropdown-verse-badge.alias {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}

.dropdown-verse-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.dropdown-verse-text strong,
.dropdown-verse-text mark {
  color: var(--text-main);
  background: rgba(245, 158, 11, 0.22);
  font-weight: 600;
  padding: 0 0.15rem;
  border-radius: 2px;
}
[data-theme="dark"] .dropdown-verse-text mark {
  background: rgba(245, 158, 11, 0.35);
  color: #fef3c7;
}

/* Concordance result match badges */
.concordance-match-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
}

.concordance-match-exact {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .concordance-match-exact {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
}

.concordance-match-all {
  background: rgba(99, 102, 241, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .concordance-match-all {
  background: rgba(99, 102, 241, 0.22);
  color: #a5b4fc;
}

.concordance-match-synonym {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .concordance-match-synonym {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

.concordance-match-alias {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
  border: 1px solid rgba(236, 72, 153, 0.3);
}
[data-theme="dark"] .concordance-match-alias {
  background: rgba(236, 72, 153, 0.22);
  color: #f472b6;
}

mark.concordance-mark {
  background: rgba(245, 158, 11, 0.24);
  color: var(--text-main);
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
  font-weight: 700;
}
[data-theme="dark"] mark.concordance-mark {
  background: rgba(245, 158, 11, 0.38);
  color: #fef3c7;
}

/* =======================================================
   REFRESHED HOMEPAGE: DAILY SPOTLIGHT & EXEGETICAL GEMS
   ======================================================= */
.home-spotlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 5px solid #f59e0b;
  border-radius: 14px;
  padding: 1.6rem 1.85rem;
  margin-bottom: 1.35rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

[data-theme="dark"] .home-spotlight-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  border-left-color: #fbbf24;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.spotlight-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.spotlight-badge-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.spotlight-star-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.28);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

[data-theme="dark"] .spotlight-star-badge {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.spotlight-testament-pill {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .spotlight-testament-pill {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.spotlight-shuffle-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease-in-out;
}

.spotlight-shuffle-btn svg,
.gems-shuffle-btn svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--accent-primary);
  flex-shrink: 0;
}

.spotlight-shuffle-btn:hover,
.gems-shuffle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.spotlight-shuffle-btn:hover svg,
.gems-shuffle-btn:hover svg {
  transform: rotate(180deg);
}

.spotlight-shuffle-btn:active svg,
.gems-shuffle-btn:active svg {
  transform: rotate(360deg);
}

.spotlight-main-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.spotlight-ref-row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.spotlight-ref {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.spotlight-lemma-pill {
  font-size: 0.86rem;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .spotlight-lemma-pill {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.spotlight-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.spotlight-verse-text {
  font-size: 1.02rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--text-main);
  background: var(--bg-surface);
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  border-left: 3.5px solid var(--accent-primary);
  margin: 0;
}

.spotlight-commentary-box {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-left: 4.5px solid #f59e0b;
  border-radius: 11px;
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.08);
}

[data-theme="dark"] .spotlight-commentary-box {
  background: rgba(245, 158, 11, 0.09);
  border-color: rgba(245, 158, 11, 0.35);
  border-left-color: #fbbf24;
}

.spotlight-commentary-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d97706;
}

[data-theme="dark"] .spotlight-commentary-label {
  color: #fbbf24;
}

.spotlight-sources-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  text-transform: none;
  letter-spacing: normal;
}

[data-theme="dark"] .spotlight-sources-badge {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.4);
}

.spotlight-summary-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.spotlight-takeaway-block {
  background: var(--bg-card);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-left: 3.5px solid #10b981;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

[data-theme="dark"] .spotlight-takeaway-block {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}

.spotlight-theology-block {
  background: var(--bg-card);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-left: 3.5px solid #6366f1;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

[data-theme="dark"] .spotlight-theology-block {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
}

.spotlight-block-heading {
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}

.spotlight-takeaway-block .spotlight-block-heading {
  color: #059669;
}
[data-theme="dark"] .spotlight-takeaway-block .spotlight-block-heading {
  color: #34d399;
}

.spotlight-theology-block .spotlight-block-heading {
  color: #4f46e5;
}
[data-theme="dark"] .spotlight-theology-block .spotlight-block-heading {
  color: #a5b4fc;
}

.spotlight-theology-text,
.spotlight-commentary-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
}

/* =======================================================
   HOMEPAGE EXPANDABLE FULL COMMENTARY ACCORDION
   ======================================================= */
.spotlight-full-commentary-details {
  margin-top: 0.35rem;
  border-top: 1px dashed rgba(245, 158, 11, 0.25);
  padding-top: 0.65rem;
}

.spotlight-full-commentary-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b45309;
  user-select: none;
  transition: all 0.2s ease;
}

.spotlight-full-commentary-summary::-webkit-details-marker {
  display: none;
}

.spotlight-full-commentary-summary:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .spotlight-full-commentary-summary {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fde68a;
}

[data-theme="dark"] .spotlight-full-commentary-summary:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.45);
}

.spotlight-summary-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.spotlight-summary-chevron {
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.spotlight-full-commentary-details[open] .spotlight-summary-chevron {
  transform: rotate(180deg);
}

.spotlight-full-commentary-content {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeIn 0.25s ease-out;
}

.spotlight-author-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--accent-primary);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .spotlight-author-card {
  background: rgba(255, 255, 255, 0.03);
}

.spotlight-author-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.spotlight-author-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
}

.spotlight-author-era {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.spotlight-author-work {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0.45rem;
  font-style: italic;
}

.spotlight-author-quote {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 0.45rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.spotlight-author-citations {
  font-size: 0.73rem;
  color: var(--text-muted);
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border-subtle);
  line-height: 1.35;
}

/* =======================================================
   STAGE 5: AI COMMENTARY & THEOLOGICAL SUMMARY CARD
   ======================================================= */
.ai-commentary-summary-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-left: 4.5px solid #f59e0b;
  border-radius: 10px;
  padding: 1.05rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-theme="dark"] .ai-commentary-summary-card {
  background: var(--bg-card);
  border-color: rgba(245, 158, 11, 0.4);
  border-left-color: #fbbf24;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.ai-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-subtle);
}

.ai-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d97706;
}

[data-theme="dark"] .ai-summary-badge {
  color: #fbbf24;
}

.ai-summary-source-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
}

[data-theme="dark"] .ai-summary-source-pill {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.35);
}

.ai-summary-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ai-summary-section {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-left: 3px solid #10b981;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
}

[data-theme="dark"] .ai-summary-section {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.ai-summary-section.theology-section {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.2);
  border-left-color: #6366f1;
}

[data-theme="dark"] .ai-summary-section.theology-section {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

.ai-summary-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  color: #059669;
}

[data-theme="dark"] .ai-summary-section-label {
  color: #34d399;
}

.ai-summary-section.theology-section .ai-summary-section-label {
  color: #4f46e5;
}

[data-theme="dark"] .ai-summary-section.theology-section .ai-summary-section-label {
  color: #a5b4fc;
}

.ai-summary-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
}

.spotlight-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.35rem;
}

.spotlight-action-primary {
  background: linear-gradient(135deg, var(--accent-primary), #4338ca);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.spotlight-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.spotlight-action-secondary {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.15s, border-color 0.15s;
}

.spotlight-action-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

/* Exegetical Commentary Stream Section */
.home-gems-section {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.gems-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.gems-header-left {
  max-width: 680px;
}

.gems-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  margin-bottom: 0.45rem;
}

[data-theme="dark"] .gems-section-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
}

.gems-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.01em;
}

.gems-section-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.gems-filter-bar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.gems-filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
}

.gems-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--text-main);
}

.gems-filter-btn.active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

.gems-shuffle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease-in-out;
}

.gems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.2rem;
}

.gem-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  cursor: pointer;
  position: relative;
}

.gem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--accent-primary);
}

[data-theme="dark"] .gem-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
}

[data-theme="dark"] .gem-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  border-color: var(--accent-primary);
}

.gem-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.gem-ref {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-primary);
  margin: 0;
}

.gem-testament-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
}

.gem-badge-ot {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
  border: 1px solid rgba(147, 51, 234, 0.25);
}

[data-theme="dark"] .gem-badge-ot {
  background: rgba(147, 51, 234, 0.25);
  color: #c084fc;
}

.gem-badge-nt {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .gem-badge-nt {
  background: rgba(37, 99, 235, 0.25);
  color: #93c5fd;
}

.gem-lemma {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.gem-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin: 0;
}

.gem-verse-quote {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
  border-left: 2.5px solid var(--border-light);
  padding-left: 0.65rem;
  margin: 0;
}

.gem-insight {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-main);
  background: var(--bg-surface);
  padding: 0.75rem 0.95rem;
  border-radius: 7px;
  margin: 0;
}

.gem-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}

.gem-study-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.15s;
}

.gem-card:hover .gem-study-link {
  gap: 0.45rem;
}

/* =========================================================================
   BIBLICAL TOPICS & THEMATIC GUIDE STYLES
   ========================================================================= */

.dropdown-header-topics {
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}
[data-theme="dark"] .dropdown-header-topics {
  background: rgba(124, 58, 237, 0.18);
  color: #c4b5fd;
}
.dropdown-item-topic {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s ease;
}
.dropdown-item-topic:hover {
  background: var(--bg-sidebar);
}
.dropdown-topic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dropdown-topic-title-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
}
.dropdown-topic-category-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.25);
  white-space: nowrap;
}
[data-theme="dark"] .dropdown-topic-category-badge {
  background: rgba(124, 58, 237, 0.25);
  color: #ddd6fe;
}
.dropdown-topic-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.dropdown-topic-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.73rem;
  color: var(--text-faint);
  margin-top: 0.1rem;
}
.dropdown-topic-verses-tags {
  display: inline-flex;
  gap: 0.3rem;
}
.dropdown-topic-vtag {
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-weight: 600;
  color: var(--accent-primary);
}

/* Sidebar Topics Navigation */
.sidebar-topics-category-header {
  padding: 0.55rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-topics-category-header:first-child {
  border-top: none;
}
.nav-topic-card {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
}
.nav-topic-card:hover {
  background: var(--bg-sidebar);
  border-left: 3px solid #7c3aed;
  padding-left: calc(0.9rem - 3px);
}
.nav-topic-card.is-active-topic {
  background: rgba(124, 58, 237, 0.08);
  border-left: 3px solid #7c3aed;
  padding-left: calc(0.9rem - 3px);
}
.nav-topic-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.nav-topic-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-topic-passages-count {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}
.nav-topic-preview {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-topic-refs-preview {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-top: 0.3rem;
}

/* Center Reader Thematic Study Hub */
.topic-view-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem 1.25rem;
}
.topic-hub-header {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.topic-hub-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.topic-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-body);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.topic-return-btn:hover {
  background: var(--bg-sidebar);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.topic-hub-category-pill {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.25);
}
[data-theme="dark"] .topic-hub-category-pill {
  background: rgba(124, 58, 237, 0.25);
  color: #ddd6fe;
}
.topic-hub-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.topic-hub-summary {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border-left: 4px solid #7c3aed;
  padding: 0.85rem 1.1rem;
  border-radius: 0 8px 8px 0;
  margin: 0.75rem 0 1.25rem 0;
}
.topic-roots-section {
  margin-top: 1.25rem;
}
.topic-roots-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.topic-roots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.topic-root-card {
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topic-root-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.topic-root-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.topic-root-strongs {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.topic-root-strongs.hebrew {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
.topic-root-strongs.greek {
  background: rgba(37, 99, 235, 0.15);
  color: #2563eb;
}
.topic-root-lemma {
  font-size: 1.15rem;
  font-weight: 700;
}
.topic-root-translit {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}
.topic-root-meaning {
  font-size: 0.78rem;
  color: var(--text-main);
  line-height: 1.35;
  margin-top: 0.25rem;
}
.topic-passages-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.topic-passage-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: border-color 0.2s ease;
}
.topic-passage-card:hover {
  border-color: var(--border-medium);
}
.topic-passage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.6rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.topic-passage-ref {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-primary);
}
.topic-passage-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.topic-passage-text {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 0.85rem;
}
.topic-passage-takeaway {
  font-size: 0.84rem;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  line-height: 1.45;
  margin-bottom: 1rem;
}
.topic-passage-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.topic-btn-study {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.topic-btn-study:hover {
  opacity: 0.9;
}
.topic-btn-chapter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topic-btn-chapter:hover {
  background: var(--bg-sidebar);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.topic-related-box {
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.topic-related-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.topic-related-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.topic-related-pill {
  padding: 0.35rem 0.75rem;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.topic-related-pill:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: #7c3aed;
  color: #7c3aed;
}

/* =========================================================================
   BIBLICAL HISTORICAL TIMELINE & WORLD CONTEXT STYLES
   ========================================================================= */

.home-timeline-gateway-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(124, 58, 237, 0.08) 100%), var(--bg-card);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 12px;
  padding: 1rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}
.home-timeline-gateway-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.12);
  border-color: #7c3aed;
}
[data-theme="dark"] .home-timeline-gateway-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(124, 58, 237, 0.16) 100%), var(--bg-card);
  border-color: rgba(167, 139, 250, 0.3);
}

.timeline-gateway-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c3aed;
  margin-bottom: 0.35rem;
}
[data-theme="dark"] .timeline-gateway-badge {
  color: #c4b5fd;
}
.timeline-gateway-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  display: inline-block;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.6);
}
.timeline-era-count-pill {
  font-size: 0.66rem;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  color: #6d28d9;
}
[data-theme="dark"] .timeline-era-count-pill {
  background: rgba(124, 58, 237, 0.3);
  color: #ddd6fe;
}
.timeline-gateway-headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.timeline-gateway-icon {
  font-size: 1.35rem;
}
.timeline-gateway-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.timeline-gateway-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.25rem;
  max-width: 820px;
}
.timeline-gateway-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.timeline-gateway-btn:hover {
  background: #6d28d9;
  transform: translateX(2px);
}

/* Timeline Full Page Container */
.timeline-page-container {
  max-width: 1050px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem 1.25rem;
}

.timeline-sticky-header {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.timeline-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.timeline-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-body);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-return-btn:hover {
  background: var(--bg-sidebar);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.timeline-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.timeline-page-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.timeline-page-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 1.25rem 0;
}

/* Timeline Controls: Search & View Toggles */
.timeline-controls-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.timeline-search-box {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.timeline-search-input {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.2rem;
  font-size: 0.86rem;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-body);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s ease;
}
.timeline-search-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.timeline-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.timeline-view-toggles {
  display: inline-flex;
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.timeline-view-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-view-btn.active {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Interactive Era Rail */
.timeline-eras-rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}
.timeline-era-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 140px;
}
.timeline-era-chip:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}
.timeline-era-chip.active {
  background: var(--bg-card);
  border-color: #7c3aed;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}
.timeline-era-chip-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
}
.timeline-era-chip-dates {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Empire Filter Pills */
.timeline-empires-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.timeline-empire-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-right: 0.2rem;
}
.timeline-empire-chip {
  padding: 0.25rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-empire-chip:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}
.timeline-empire-chip.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

/* Timeline Stream & Event Cards */
.timeline-stream-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}
.timeline-stream-container::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 24px;
  width: 3px;
  background: linear-gradient(180deg, #7c3aed 0%, #2563eb 50%, #059669 100%);
  border-radius: 2px;
  opacity: 0.35;
}

.timeline-event-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.4rem 1.6rem 1.4rem 3.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}
.timeline-event-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.timeline-node-dot {
  position: absolute;
  left: 17px;
  top: 1.7rem;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3.5px solid #7c3aed;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--bg-body);
}

.timeline-event-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.timeline-event-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.timeline-date-badge {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: #7c3aed;
  color: #ffffff;
}
.timeline-empire-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
}
.timeline-region-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.timeline-event-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  margin: 0 0 0.5rem 0;
}
.timeline-correlated-scripture-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.timeline-correlated-scripture-row span.icon {
  font-size: 0.9rem;
}
.timeline-scripture-pill {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-scripture-pill:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

.timeline-history-text {
  font-size: 0.92rem;
  color: var(--text-main);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Verifiable Archaeology Spotlight Box */
.timeline-archaeology-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.08) 100%), var(--bg-sidebar);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] .timeline-archaeology-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.15) 100%), var(--bg-sidebar);
  border-color: rgba(251, 191, 36, 0.35);
}
.timeline-archaeology-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.timeline-archaeology-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #b45309;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
[data-theme="dark"] .timeline-archaeology-name {
  color: #fbbf24;
}
.timeline-archaeology-museum {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-body);
  border: 1px solid var(--border-subtle);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
.timeline-archaeology-desc {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.45;
}

.timeline-key-passages-box {
  background: var(--bg-body);
  border-left: 3px solid var(--accent-primary);
  padding: 0.65rem 0.9rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  font-family: var(--font-serif, Georgia, serif);
  color: var(--text-main);
}
.timeline-key-passages-ref {
  font-weight: 700;
  font-family: var(--font-sans, system-ui);
  color: var(--accent-primary);
  margin-bottom: 0.2rem;
}

.timeline-event-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.timeline-btn-read {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.timeline-btn-read:hover {
  opacity: 0.9;
}
.timeline-btn-book-guide {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-btn-book-guide:hover {
  background: var(--bg-sidebar);
  border-color: #7c3aed;
  color: #7c3aed;
}

/* Granular Book-by-Book Breakdown View */
.timeline-granular-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.timeline-granular-book-selector {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.timeline-granular-book-btn {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.timeline-granular-book-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}
.timeline-granular-book-btn.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}

.timeline-granular-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.timeline-granular-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.timeline-granular-ch-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  margin-bottom: 0.4rem;
}
[data-theme="dark"] .timeline-granular-ch-badge {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}
.timeline-granular-sec-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}
.timeline-granular-sec-era {
  font-size: 0.74rem;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 0.5rem;
}
[data-theme="dark"] .timeline-granular-sec-era {
  color: #fbbf24;
}
.timeline-granular-sec-world {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 0.6rem;
}
.timeline-granular-sec-themes {
  font-size: 0.78rem;
  color: var(--text-faint);
  background: var(--bg-sidebar);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1.4;
  margin-bottom: 0.85rem;
}
.timeline-granular-sec-btn {
  width: 100%;
  padding: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  background: var(--bg-body);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  color: var(--accent-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-granular-sec-btn:hover {
  background: var(--accent-primary);
  color: #ffffff;
}




/* ==========================================================================
   MULTI-LAYERED VISUAL TIMELINE & CANONICAL BOOKSHELF ENGINE
   ========================================================================== */

/* Layer 1: Panoramic Grand Storyboard View */
.timeline-panoramic-view {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  animation: fadeIn 0.25s ease-out;
}

.timeline-macro-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(37, 99, 235, 0.08) 100%), var(--bg-card);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .timeline-macro-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16) 0%, rgba(37, 99, 235, 0.16) 100%), var(--bg-card);
  border-color: rgba(167, 139, 250, 0.3);
}

.macro-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.macro-badge {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: #7c3aed;
  color: #ffffff;
  text-transform: uppercase;
}
.macro-sub-badge {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
}
.macro-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}
.macro-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 900px;
}

/* Layer Stepper Pills */
.timeline-layer-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-medium);
}
.layer-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 20px;
  background: var(--bg-body);
  border: 1px solid var(--border-medium);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.layer-step-pill .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border-medium);
  color: var(--text-main);
  font-size: 0.68rem;
  font-weight: 800;
}
.layer-step-pill.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}
.layer-step-pill.active .step-num {
  background: #ffffff;
  color: #7c3aed;
}
.layer-step-pill.disabled {
  opacity: 0.6;
  cursor: default;
}
.step-divider {
  color: var(--text-faint);
  font-weight: bold;
}

/* Macro Filters Bar */
.timeline-macro-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 0;
}
.filter-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.25rem;
}
.macro-filter-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.macro-filter-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}
.macro-filter-btn.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

/* Continuous Storyline Highway */
.timeline-highway-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.timeline-highway-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.highway-header-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.highway-header-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.timeline-highway-track-wrap {
  overflow-x: auto;
  padding: 1rem 0.5rem;
  scrollbar-width: thin;
}
.timeline-highway-track {
  display: flex;
  align-items: center;
  min-width: 960px;
  position: relative;
  padding: 0.5rem 0;
}
.highway-connector-line {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, #d1d5db 0%, #9ca3af 100%);
  border-radius: 2px;
  min-width: 28px;
}
[data-theme="dark"] .highway-connector-line {
  background: linear-gradient(90deg, #4b5563 0%, #374151 100%);
}
.highway-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.highway-node:hover {
  transform: translateY(-4px) scale(1.08);
}
.highway-node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3.5px solid var(--node-color, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}
.highway-node:hover .highway-node-circle {
  background: var(--node-color, #7c3aed);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.highway-node.is-cross .highway-node-circle {
  border-width: 4px;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.1);
}
.highway-node-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  white-space: nowrap;
}
.highway-node-dates {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.highway-milestone-callouts {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-subtle);
  font-size: 0.78rem;
  align-items: center;
}
.highway-callout.ot-side {
  color: #b45309;
}
[data-theme="dark"] .highway-callout.ot-side {
  color: #fbbf24;
}
.highway-callout.cross-nexus {
  text-align: center;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  color: #dc2626;
  font-weight: 700;
}
[data-theme="dark"] .highway-callout.cross-nexus {
  background: rgba(220, 38, 38, 0.2);
  color: #f87171;
}
.highway-callout.nt-side {
  text-align: right;
  color: #047857;
}
[data-theme="dark"] .highway-callout.nt-side {
  color: #34d399;
}

/* The Grand Canonical Bookshelf Display Case */
.timeline-bookshelf-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bookshelf-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bookshelf-section-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.01em;
}
.bookshelf-section-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.timeline-bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Individual Grand Epoch Volume Card */
.timeline-epoch-volume-card {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.timeline-epoch-volume-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: var(--epoch-color, #7c3aed);
}

/* 3D Spine on the left */
.epoch-volume-spine {
  width: 48px;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0.25rem;
  color: #ffffff;
  box-shadow: inset -3px 0 8px rgba(0, 0, 0, 0.25);
  position: relative;
}
.epoch-volume-num {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.epoch-volume-spine-icon {
  font-size: 1.35rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Volume Content Body */
.epoch-volume-content {
  flex: 1;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.epoch-volume-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.epoch-badge-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.epoch-num-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.epoch-testament-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-faint);
}
.epoch-dates-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.epoch-volume-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.28;
  margin: 0 0 0.35rem 0;
}
.epoch-volume-subtitle {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
}

/* Covenant Box */
.epoch-volume-covenant-box {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--bg-sidebar);
  border-left: 3px solid var(--epoch-color, #7c3aed);
  border-radius: 0 6px 6px 0;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.75rem;
  font-size: 0.76rem;
}
.covenant-icon {
  font-size: 0.9rem;
}
.covenant-title {
  font-weight: 800;
  color: var(--text-main);
}
.covenant-verse {
  color: var(--text-muted);
  margin-left: 0.3rem;
  font-size: 0.72rem;
}

/* Canonical Books Display */
.epoch-volume-canonical-books {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}
.bookshelf-icon {
  font-size: 0.85rem;
}
.bookshelf-list strong {
  color: var(--text-main);
}

.epoch-volume-highlight {
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-faint);
  margin: 0 0 0.85rem 0;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 0.5rem;
}

/* Bifurcation & Christ Pivot Badges */
.epoch-mini-bifurcation {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.85rem;
  font-size: 0.72rem;
}
.bifurcation-track.north {
  color: #c2410c;
  display: flex;
  justify-content: space-between;
}
.bifurcation-track.south {
  color: #b45309;
  display: flex;
  justify-content: space-between;
}
[data-theme="dark"] .bifurcation-track.north {
  color: #fb923c;
}
[data-theme="dark"] .bifurcation-track.south {
  color: #fcd34d;
}

.epoch-christ-pivot-badge {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(185, 28, 28, 0.18) 100%);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.85rem;
  font-size: 0.74rem;
  font-weight: 800;
  color: #dc2626;
  text-align: center;
}
[data-theme="dark"] .epoch-christ-pivot-badge {
  color: #f87171;
}

.epoch-volume-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.epoch-counts-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.count-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg-sidebar);
  color: var(--text-muted);
}
.count-pill.archaeology {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
[data-theme="dark"] .count-pill.archaeology {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.epoch-dive-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.timeline-epoch-volume-card:hover .epoch-dive-btn {
  transform: translateX(3px);
}
.dive-arrow {
  font-weight: bold;
}


/* ==========================================================================
   LAYER 2: EPOCH DEEP-DIVE VIEW
   ========================================================================== */

.timeline-epoch-deepdive {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeIn 0.25s ease-out;
}

/* Navigation & Breadcrumb Bar */
.deepdive-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.deepdive-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.deepdive-back-btn:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
}
.deepdive-back-btn .key-hint {
  font-size: 0.7rem;
  opacity: 0.7;
}

.deepdive-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
}
.crumb-link {
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
}
.crumb-link:hover {
  color: #7c3aed;
  text-decoration: underline;
}
.crumb-sep {
  color: var(--text-faint);
}
.crumb-current {
  font-weight: 800;
  color: var(--text-main);
}

.deepdive-steppers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.deepdive-step-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}
.deepdive-step-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

/* Epoch Hero Banner */
.deepdive-hero-banner {
  border-radius: 16px;
  padding: 2rem 2.2rem;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}
.hero-top-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.hero-epoch-num {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
}
.hero-testament-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}
.hero-date-badge {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.95;
}

.hero-epoch-title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}
.hero-epoch-subtitle {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.95;
  max-width: 850px;
  margin: 0 0 1rem 0;
}

.hero-covenant-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  margin-bottom: 0.85rem;
}
.covenant-lead {
  font-weight: 600;
  opacity: 0.9;
}
.covenant-name {
  font-weight: 800;
}
.covenant-ref {
  opacity: 0.85;
}

.hero-meta-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  opacity: 0.9;
  flex-wrap: wrap;
}

/* Sub-Tabs Bar */
.deepdive-tabs-bar {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border-subtle);
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.deepdive-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.15rem;
  font-size: 0.86rem;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.deepdive-tab-btn:hover {
  color: var(--text-main);
}
.deepdive-tab-btn.active {
  color: var(--epoch-color, #7c3aed);
  border-bottom-color: var(--epoch-color, #7c3aed);
}

/* Tab 1: Milestones Track */
.epoch-milestones-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.epoch-milestone-node-card {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
}
.epoch-milestone-node-card:hover {
  transform: translateX(4px);
  border-color: var(--node-accent, #7c3aed);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.node-order-badge {
  width: 44px;
  min-width: 44px;
  background: var(--node-accent, #7c3aed);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
}
.node-card-body {
  flex: 1;
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.node-card-top-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.node-year-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--node-accent, #7c3aed);
  color: #ffffff;
}
.node-empire-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
}
.node-region-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.node-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}
.node-card-context {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.node-card-meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.node-scripture-chip {
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-medium);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: var(--accent-primary);
}
.node-archaeology-chip {
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
[data-theme="dark"] .node-archaeology-chip {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.node-inspect-prompt {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--node-accent, #7c3aed);
  margin-left: auto;
}

/* Tab 2: 3D Canonical Bookshelf Spines */
.epoch-bookshelf-display {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.epoch-bookshelf-intro h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.25rem 0;
}
.epoch-bookshelf-intro p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}
.epoch-spines-shelf {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 2rem 1rem 1rem 1rem;
  background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-sidebar) 92%, #854d0e 93%, #713f12 100%);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  min-height: 260px;
}
[data-theme="dark"] .epoch-spines-shelf {
  background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-sidebar) 92%, #451a03 93%, #290e03 100%);
}
.canonical-book-spine {
  width: 58px;
  min-width: 58px;
  height: 210px;
  background: var(--spine-color, #7c3aed);
  border-radius: 4px 6px 4px 2px;
  box-shadow: -3px 4px 10px rgba(0, 0, 0, 0.25), inset 2px 0 4px rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0.25rem;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.canonical-book-spine:hover {
  transform: translateY(-16px) scale(1.05);
  box-shadow: -5px 12px 20px rgba(0, 0, 0, 0.35);
  z-index: 5;
}
.spine-stripes {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.3);
}
.spine-category {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.spine-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.spine-chapters {
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.9;
}
.spine-gold-emboss {
  width: 100%;
  height: 3px;
  background: #f59e0b;
}

/* Tab 3: Archaeological Evidence Grid */
.epoch-archaeology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.epoch-arch-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
}
.epoch-arch-card:hover {
  border-color: #f59e0b;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.15);
}
.epoch-arch-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arch-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
[data-theme="dark"] .arch-badge {
  color: #fbbf24;
}
.arch-date {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}
.epoch-arch-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
}
.epoch-arch-museum {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.epoch-arch-significance {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0;
}
.epoch-arch-correlate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 0.6rem;
  margin-top: 0.25rem;
}
.arch-more-btn {
  color: #7c3aed;
  font-weight: 700;
}

/* Tab 4: Original Language Roots Grid */
.epoch-roots-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.epoch-roots-intro h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 0.25rem 0;
}
.epoch-roots-intro p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}
.epoch-roots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.epoch-root-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.epoch-root-card:hover {
  border-color: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
}
.epoch-root-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.epoch-root-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.epoch-root-badge.hebrew {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}
[data-theme="dark"] .epoch-root-badge.hebrew {
  background: rgba(234, 88, 12, 0.25);
  color: #fb923c;
}
.epoch-root-badge.greek {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
[data-theme="dark"] .epoch-root-badge.greek {
  background: rgba(37, 99, 235, 0.25);
  color: #60a5fa;
}
.epoch-root-search-icon {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7c3aed;
}
.epoch-root-lemma {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.epoch-root-lemma.hebrew-text {
  direction: rtl;
  font-family: var(--font-hebrew, 'SBL Hebrew', serif);
}
.epoch-root-lemma .translit {
  direction: ltr;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.epoch-root-meaning {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}


/* ==========================================================================
   LAYER 3: MILESTONE & EXEGETICAL DETAIL DRAWER (SLIDE-OVER MODAL)
   ========================================================================== */

.timeline-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}
.timeline-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 92vw);
  background: var(--bg-card);
  z-index: 1001;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 1px solid var(--border-medium);
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  padding: 1.25rem 1.6rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-top-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.drawer-date-badge {
  font-size: 0.74rem;
  font-weight: 800;
  background: var(--drawer-color, #7c3aed);
  color: #ffffff;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
}
.drawer-empire-badge, .drawer-region-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  line-height: 1;
}
.drawer-close-btn:hover {
  background: var(--bg-sidebar);
  color: var(--text-main);
}

.drawer-title {
  padding: 1rem 1.6rem 0.25rem 1.6rem;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.25;
  margin: 0;
}

.drawer-primary-actions {
  padding: 0.5rem 1.6rem 1rem 1.6rem;
  border-bottom: 1px solid var(--border-subtle);
}
.drawer-btn-read {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 800;
  background: var(--drawer-color, #7c3aed);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: opacity 0.15s ease;
}
.drawer-btn-read:hover {
  opacity: 0.92;
}

.drawer-body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.drawer-section-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.drawer-scripture-quote {
  background: var(--bg-sidebar);
  border-left: 3px solid var(--drawer-color, #7c3aed);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.drawer-scripture-quote .quote-ref {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--drawer-color, #7c3aed);
  margin-bottom: 0.25rem;
}
.drawer-scripture-quote .quote-text {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-main);
  font-style: italic;
}

.drawer-prose-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-main);
}

.drawer-arch-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%), var(--bg-sidebar);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
[data-theme="dark"] .drawer-arch-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.2) 100%), var(--bg-sidebar);
}
.drawer-arch-title {
  font-size: 1rem;
  font-weight: 800;
  color: #b45309;
  margin-bottom: 0.35rem;
}
[data-theme="dark"] .drawer-arch-title {
  color: #fbbf24;
}
.drawer-arch-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.drawer-arch-significance {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-main);
  margin: 0;
}

.drawer-footer {
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sidebar);
}
.drawer-footer-close {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  color: var(--text-main);
  cursor: pointer;
}
.drawer-footer-close:hover {
  background: var(--border-medium);
}

/* ==========================================================================
   MASTER 180° COVENANT ARCH & CHRONOLOGICAL DIAGRAM
   ========================================================================== */

/* Timeline Mode: Keep sidebar navigation accessible on desktop, off-canvas on mobile */
@media (min-width: 1081px) {
  body.timeline-fullscreen-mode .passage-sidebar {
    display: flex !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    transition: width 0.2s ease;
  }
  body.timeline-fullscreen-mode .app-container {
    max-width: 100% !important;
    padding: 0 1rem 0 0 !important;
  }
  body.timeline-fullscreen-mode .reader-main {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: calc(100% - 270px) !important;
    width: calc(100% - 270px) !important;
    padding: 0.75rem 1rem 3rem 1rem !important;
    margin: 0 !important;
  }
}

@media (max-width: 1080px) {
  body.timeline-fullscreen-mode .app-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.timeline-fullscreen-mode .reader-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

body.timeline-fullscreen-mode .timeline-page-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.timeline-fullscreen-mode #timelinePageContainer {
  width: 100% !important;
  max-width: 100% !important;
}

.timeline-unified-header {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.unified-header-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.unified-left-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.timeline-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: transparent;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-return-btn:hover {
  background: var(--bg-sidebar);
  border-color: var(--accent-primary);
}
.unified-timeline-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.timeline-view-toggles {
  display: flex;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.timeline-view-btn {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeline-view-btn.active {
  background: var(--bg-card);
  color: var(--accent-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.unified-header-row-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}
.diagram-filter-group {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.diagram-filter-chip {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  border: 1.5px solid var(--border-medium);
  background: var(--bg-sidebar);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.diagram-filter-chip:hover {
  border-color: var(--accent-primary);
  color: var(--text-main);
}
.diagram-filter-chip.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

.diagram-legend-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  overflow-x: auto;
  scrollbar-width: thin;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

/* ==========================================================================
   180° COVENANT ARCH SVG & PEDESTAL CONTAINER
   ========================================================================== */
.timeline-covenant-arch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: fadeIn 0.2s ease-out;
}

.covenant-arch-svg-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 1rem 1rem 0 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

[data-theme="dark"] .covenant-arch-svg-wrapper {
  background: #0f172a;
  border-color: #1e293b;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.covenant-arch-svg {
  width: 100%;
  height: auto;
  max-height: 540px;
  overflow: visible;
}

/* Arch Book Slice Styling */
.arch-book-slice {
  transition: all 0.15s ease-out;
}
.arch-book-slice .slice-path {
  transition: all 0.15s ease-out;
}
.arch-book-slice:hover .slice-path {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28));
  stroke: #ffffff;
  stroke-width: 2px;
}
.arch-book-slice.selected .slice-path {
  filter: drop-shadow(0 0 12px #2563eb);
  stroke: #ffffff;
  stroke-width: 2.5px;
}
.arch-book-slice.dimmed {
  opacity: 0.18;
}

/* Anchor Badges */
.anchor-badge {
  transition: all 0.2s ease;
}
.anchor-badge:hover {
  transform: translateY(-3px) scale(1.06);
}
.apex-aura {
  animation: pulseAura 3s ease-in-out infinite;
}
@keyframes pulseAura {{
  0%, 100% {{ transform: scale(1); opacity: 0.7; }}
  50% {{ transform: scale(1.08); opacity: 1; }}
}}

/* Interactive Center Pedestal Card */
.timeline-pedestal-card {
  position: absolute;
  bottom: 14px;
  width: 530px;
  max-width: 92%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  z-index: 50;
  transition: all 0.25s ease;
}
.pedestal-col-left {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-right: 1px solid var(--border-subtle);
  padding-right: 0.75rem;
}
.pedestal-col-right {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

[data-theme="dark"] .timeline-pedestal-card {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.pedestal-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.55rem;
}
.pedestal-meta-top {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.pedestal-tag-badge {
  font-size: 0.64rem;
  font-weight: 800;
  color: #ffffff;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pedestal-date-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
}
.pedestal-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pedestal-book-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-main);
}
.pedestal-ch-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pedestal-book-monogram {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.02em;
}

.pedestal-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pedestal-sec-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.pedestal-role-p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pedestal-verse-quote {
  background: var(--bg-sidebar);
  border-left: 3px solid var(--accent-hue, #2563eb);
  border-radius: 0 6px 6px 0;
  padding: 0.45rem 0.65rem;
}
.pedestal-verse-quote .quote {
  margin: 0 0 0.2rem 0;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pedestal-verse-quote .ref {
  font-size: 0.66rem;
  font-weight: 800;
}

.pedestal-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pedestal-breakdown-item {
  font-size: 0.7rem;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pedestal-breakdown-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pedestal-read-btn {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
  margin-top: 0.2rem;
}
.pedestal-read-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.35);
}

/* ==========================================================================
   LINEAR 5 GRAND EPOCHS & DUAL-TRACK TIMELINE STYLES
   ========================================================================== */

.linear-timeline-macro-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.macro-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.macro-sub-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}

.macro-main-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.02em;
}

.macro-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0 0;
}

.macro-legend-pill {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.85rem;
  border-radius: 12px;
}

.continuous-axis-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 1.5rem 1rem 1rem 1rem;
  position: relative;
}

.epoch-segments-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.epoch-linear-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.epoch-linear-segment:hover {
  transform: translateY(-4px);
}

.epoch-linear-segment:hover .lineart-icon {
  stroke: var(--accent-primary);
  transform: scale(1.08);
}

.epoch-icon-wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
}

.lineart-icon {
  width: 56px;
  height: 56px;
  stroke: var(--text-main);
  display: block;
  transition: all 0.25s ease;
}

.epoch-title-wrap {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.epoch-num-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
}

.epoch-name {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.continuous-svg-axis-wrap {
  width: 100%;
  margin: 0.75rem 0;
}

.epoch-bottom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.epoch-bottom-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.epoch-bold-date {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.epoch-books-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  max-width: 180px;
}

.epoch-book-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.epoch-book-chip:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-primary-light);
}

.epoch-book-extra {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  cursor: pointer;
}

.epoch-explore-link {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.epoch-explore-link:hover {
  text-decoration: underline;
}

.world-empires-ribbon-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.85rem 1.15rem;
  margin-top: 0.5rem;
}

.world-empires-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.world-empires-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
}

.world-empires-sub {
  font-size: 0.72rem;
  color: var(--text-faint);
  font-weight: 600;
}

.world-empires-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  text-align: center;
}

.empire-block {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.5rem 0.25rem;
}

.empire-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-main);
}

.empire-dates {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   LAYER 2: DUAL-TRACK LINEAR TIMELINE STYLES
   ========================================================================== */

.dual-track-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.dual-track-header {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.back-to-macro-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.back-to-macro-btn:hover {
  background: var(--border-subtle);
  border-color: var(--accent-primary);
}

.header-divider-v {
  width: 1px;
  height: 18px;
  background: var(--border-subtle);
}

.epoch-badge-chip {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.epoch-title-h1 {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-main);
  margin-left: 0.5rem;
}

.epoch-span-h1 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

.epoch-hint-text {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dual-track-canvas-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.dual-track-scroll-area {
  min-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.track-header-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
}

.track-header-label.lower {
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.track-dot.blue {
  background: var(--accent-primary);
}

.track-dot.slate {
  background: var(--text-faint);
}

.track-caption {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: none;
  color: var(--text-faint);
}

.book-ribbons-track {
  position: relative;
  height: 44px;
  width: 100%;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  padding: 4px;
  display: flex;
  align-items: center;
}

.book-ribbons-track.two-tiers,
.world-empires-ribbons-track.two-tiers {
  height: 76px;
  display: block;
}

.book-ribbon-bar {
  position: absolute;
  height: 32px;
  border-radius: 6px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.book-ribbon-bar.tier-1,
.empire-ribbon-bar.tier-1 {
  top: 4px;
}

.book-ribbon-bar.tier-2,
.empire-ribbon-bar.tier-2 {
  top: 38px;
}

.book-ribbon-bar:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.book-ribbon-title {
  font-weight: 800;
}

.book-ribbon-span {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.8;
}

.event-stems-track {
  position: relative;
  height: 155px;
  width: 100%;
}

.event-stem-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform: translateX(-50%);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.event-stem-node:hover {
  z-index: 20;
}

.event-stem-node.upper {
  bottom: 0;
  top: auto;
  justify-content: flex-end;
}

.event-stem-node.lower {
  top: 0;
  bottom: auto;
  justify-content: flex-start;
}

.stem-content-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.event-stem-node:hover .stem-content-bubble {
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
}

.event-stem-node.active .stem-content-bubble {
  background: #eff6ff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.stem-icon {
  width: 18px;
  height: 18px;
  stroke: var(--text-main);
  transition: all 0.2s ease;
}

.event-stem-node:hover .stem-icon,
.event-stem-node.active .stem-icon {
  stroke: var(--accent-primary);
  transform: scale(1.1);
}

.stem-title {
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 1px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.event-stem-node:hover .stem-title,
.event-stem-node.active .stem-title {
  color: var(--accent-primary);
  font-weight: 900;
}

.stem-date {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-primary);
  white-space: nowrap;
}

.event-stem-node.lower .stem-date {
  color: var(--text-muted);
}

.event-stem-node.active.lower .stem-date {
  color: var(--accent-primary);
}

/* Crisp Solid Stem Lines and Anchors */
.stem-line {
  width: 1.5px;
  background-color: #94a3b8;
  position: relative;
  margin: 0 auto;
  transition: all 0.2s ease;
}

.stem-line.stagger-high {
  height: 76px;
}

.stem-line.stagger-low {
  height: 14px;
}

.event-stem-node.active .stem-line {
  background-color: var(--accent-primary);
  width: 2.5px;
}

/* Anchor Pin Dots on Ruler */
.stem-line.upper::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #64748b;
  border: 1px solid #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.event-stem-node.active .stem-line.upper::after {
  background-color: var(--accent-primary);
  width: 8px;
  height: 8px;
  bottom: -4px;
}

.stem-line.lower::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #64748b;
  border: 1px solid #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.event-stem-node.active .stem-line.lower::after {
  background-color: var(--accent-primary);
  width: 8px;
  height: 8px;
  top: -4px;
}

.central-date-ruler {
  position: relative;
  width: 100%;
  height: 36px;
  border-top: 2px solid var(--text-main);
  border-bottom: 2px solid var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
  background: var(--bg-sidebar);
}

.ruler-tick-item {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ruler-tick-item.edge {
  font-weight: 900;
  color: var(--text-main);
}

.world-empires-ribbons-track {
  position: relative;
  height: 44px;
  width: 100%;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  padding: 4px;
  display: flex;
  align-items: center;
}

.empire-ribbon-bar {
  position: absolute;
  height: 32px;
  border-radius: 6px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.empire-ribbon-title {
  font-weight: 800;
}

.empire-ribbon-span {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Dual Track Ribbon Palette Utility Classes */
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-50 { background-color: #fffbeb !important; }
.bg-blue-50 { background-color: #eff6ff !important; }
.bg-emerald-50 { background-color: #ecfdf5 !important; }
.bg-indigo-50 { background-color: #eef2ff !important; }
.bg-purple-50 { background-color: #faf5ff !important; }
.bg-rose-50 { background-color: #fff1f2 !important; }
.bg-sky-50 { background-color: #f0f9ff !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-teal-50 { background-color: #f0fdf4 !important; }

.border-amber-300 { border-color: #fcd34d !important; }
.border-blue-300 { border-color: #93c5fd !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-indigo-200 { border-color: #c7d2fe !important; }
.border-purple-300 { border-color: #d8b4fe !important; }
.border-rose-200 { border-color: #fecdd3 !important; }
.border-rose-300 { border-color: #fda4af !important; }
.border-sky-200 { border-color: #bae6fd !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }
.border-teal-300 { border-color: #5eead4 !important; }

.text-amber-900 { color: #78350f !important; }
.text-blue-900 { color: #1e3a8a !important; }
.text-emerald-900 { color: #064e3b !important; }
.text-indigo-900 { color: #312e81 !important; }
.text-purple-900 { color: #581c87 !important; }
.text-rose-900 { color: #881337 !important; }
.text-sky-900 { color: #0c4a6e !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.text-teal-900 { color: #134e4a !important; }

/* ==========================================================================
   LAYER 3: DETAIL INSPECTOR LENS STYLES
   ========================================================================== */

.inspector-lens-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-top: 1rem;
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.inspector-type-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.inspector-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-main);
}

.inspector-date-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
}

.inspector-read-btn {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--accent-primary);
  border: none;
  padding: 0.28rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inspector-read-btn:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
}

.inspector-columns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  font-size: 0.78rem;
}

.inspector-col {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.85rem;
}

.inspector-col-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.inspector-col-ref {
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.35rem;
  font-size: 0.76rem;
}

.inspector-col-body {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
  font-size: 0.76rem;
}

/* ==========================================================================
   VERTICAL CHRONOLOGICAL CONTINUUM TIMELINE
   ========================================================================== */

.vertical-timeline-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 68px);
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 0.5rem;
}

/* Top Control Bar */
.vertical-top-control-bar {
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vertical-top-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vertical-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.vertical-header-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin: 0;
}

.vertical-header-badge {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Filter Chips Row */
.vertical-filter-chips-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.vertical-filter-chip {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.vertical-filter-chip:hover {
  border-color: var(--border-medium);
  color: var(--text-main);
}

.vertical-filter-chip.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

/* Vertical Scroll Area with Fade Vignettes */
.vertical-scroll-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scroll-behavior: smooth;
  background: #ffffff;
}

/* The Fading Mask: disabled to eliminate white gradient overlay intersecting cards and images */
.vertical-fade-vignette-top,
.vertical-fade-vignette-bottom {
  display: none !important;
}

/* Timeline Canvas */
.vertical-timeline-canvas {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem 1.5rem;
}

/* Central Spine */
.central-vertical-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, 
    rgba(203, 213, 225, 0) 0%, 
    #cbd5e1 3%, 
    #94a3b8 50%, 
    #cbd5e1 97%, 
    rgba(203, 213, 225, 0) 100%
  );
  z-index: 1;
}

/* Track Labels Header */
.vertical-timeline-track-legend {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  align-items: center;
  text-align: center;
}

.vertical-track-legend-title {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vertical-track-legend-title.left {
  color: var(--accent-primary);
  text-align: right;
  padding-right: 25px;
}

.vertical-track-legend-title.center {
  color: var(--text-faint);
  font-size: 0.7rem;
}

.vertical-track-legend-title.right {
  color: var(--accent-gold);
  text-align: left;
  padding-left: 25px;
}

/* Epoch Banner Header on Spine */
.vertical-epoch-divider-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 3.5rem 0 2rem 0;
  z-index: 4;
}

.vertical-epoch-divider-banner {
  background: #ffffff;
  border: 1.5px solid var(--accent-primary);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.vertical-epoch-divider-banner:hover {
  transform: scale(1.03);
}

.vertical-epoch-divider-num {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--accent-primary);
  color: #ffffff;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.vertical-epoch-divider-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
}

.vertical-epoch-divider-dates {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent-primary);
}

/* Timeline Row: Spine Node + Left Card + Right Card */
.vertical-timeline-milestone-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  align-items: center;
  margin-bottom: 2.75rem;
  z-index: 3;
}

/* Central Date Node */
.vertical-spine-center-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.vertical-spine-date-badge {
  background: #ffffff;
  border: 2px solid var(--text-main);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--text-main);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.vertical-spine-date-badge.highlight {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: #eff6ff;
}

.vertical-spine-node-pin {
  width: 10px;
  height: 10px;
  background: var(--text-main);
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  margin-top: 3px;
}

/* Connector Branch Lines */
.vertical-connector-line-left,
.vertical-connector-line-right {
  position: absolute;
  top: 50%;
  height: 1.5px;
  background: var(--border-medium);
  z-index: 2;
}

.vertical-connector-line-left {
  right: 50%;
  width: 70px;
}

.vertical-connector-line-right {
  left: 50%;
  width: 70px;
}

/* Event Cards */
.vertical-event-card-wing {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 0.9rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.vertical-event-card-wing:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.vertical-event-card-wing.left-wing {
  margin-right: 25px;
}

.vertical-event-card-wing.right-wing {
  margin-left: 25px;
}

.vertical-card-thumb-wrap {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vertical-card-thumb-icon {
  width: 42px;
  height: 42px;
  stroke: var(--text-main);
}

.vertical-card-content {
  flex: 1;
  min-width: 0;
}

.vertical-card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.2rem;
}

.vertical-card-category-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vertical-card-category-tag.biblical { color: var(--accent-primary); }
.vertical-card-category-tag.secular { color: var(--accent-gold); }

.vertical-card-date-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
}

.vertical-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.vertical-card-summary {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vertical-card-action-hint {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Lightbox Modal Popup */
.vertical-lightbox-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.vertical-lightbox-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.vertical-lightbox-modal {
  background: #ffffff;
  border-radius: 20px;
  max-width: 1140px;
  width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
  border: 1px solid var(--border-medium);
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vertical-lightbox-backdrop.active .vertical-lightbox-modal {
  transform: translateY(0) scale(1);
}

.vertical-lightbox-close-btn {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  background: #f1f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.15s ease;
  z-index: 10;
}

.vertical-lightbox-close-btn:hover {
  background: #e2e8f0;
  transform: rotate(90deg);
}

.vertical-lightbox-header {
  padding: 1.75rem 1.75rem 1.15rem 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.vertical-lightbox-hero-thumb {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-lightbox-hero-thumb svg {
  width: 64px;
  height: 64px;
  stroke: var(--accent-primary);
}

.vertical-lightbox-badges-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.vertical-lightbox-date-badge {
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--text-main);
  color: #ffffff;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
}

.vertical-lightbox-ref-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
}

.vertical-lightbox-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.vertical-lightbox-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Modal 3-Column Grid: Biblical Primary (1.55fr) vs Companion Columns (1fr each) */
.vertical-lightbox-body-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 1.5rem;
  padding: 1.15rem 1.5rem 1.5rem 1.5rem;
  background: #f8fafc;
}

@media (max-width: 1020px) {
  .vertical-lightbox-body-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
}

.vertical-lightbox-col-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

/* Primary Biblical Column Styling */
.vertical-lightbox-col-card.biblical-primary {
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  border: 1.5px solid rgba(37, 99, 235, 0.35);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
}

.vertical-primary-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  margin-left: auto;
}

.vertical-lightbox-col-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
}

.vertical-lightbox-col-header.biblical { color: var(--accent-primary); }
.vertical-lightbox-col-header.secular { color: var(--accent-gold); }
.vertical-lightbox-col-header.arch { color: var(--accent-emerald); }

.vertical-lightbox-col-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.65rem;
  line-height: 1.35;
}

/* Structured Biblical Sub-Section Cards */
.vertical-modal-section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.55rem;
}

.vertical-modal-section-card.narrative {
  border-left: 3.5px solid #2563eb;
  background: #f8faff;
}

.vertical-modal-section-card.theology {
  border-left: 3.5px solid #7c3aed;
  background: #faf8ff;
}

.vertical-modal-section-card.typology {
  border-left: 3.5px solid #d97706;
  background: #fffdfa;
  margin-bottom: 0.65rem;
}

.vertical-modal-section-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.vertical-modal-section-card.narrative .vertical-modal-section-label { color: #1d4ed8; }
.vertical-modal-section-card.theology .vertical-modal-section-label { color: #6d28d9; }
.vertical-modal-section-card.typology .vertical-modal-section-label { color: #b45309; }

.vertical-modal-narrative-text {
  font-size: 0.84rem;
  line-height: 1.62;
  color: #1e293b;
  font-weight: 450;
}

.vertical-modal-theology-text {
  font-size: 0.82rem;
  line-height: 1.58;
  color: #334155;
}

.vertical-modal-typology-text {
  font-size: 0.80rem;
  line-height: 1.55;
  color: #451a03;
}

.vertical-modal-typology-refs {
  display: block;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 0.35rem;
  font-size: 0.76rem;
}

/* Companion Columns (Secular & Archaeology) */
.vertical-lightbox-col-card.companion-col {
  background: #ffffff;
}

/* Explicit Citation Banners for Columns 2 & 3 */
.vertical-modal-citation-banner {
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.74rem;
  line-height: 1.45;
}

.vertical-modal-citation-banner.secular {
  background: #fefce8;
  border: 1px solid #fef08a;
  color: #713f12;
}

.vertical-modal-citation-banner.arch {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #064e3b;
}

.citation-banner-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.vertical-modal-citation-banner.secular .citation-banner-label { color: #854d0e; }
.vertical-modal-citation-banner.arch .citation-banner-label { color: #047857; }

.citation-banner-value {
  font-weight: 700;
  word-break: break-word;
}

.vertical-modal-col-block {
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #334155;
}

.vertical-modal-col-block:last-child {
  margin-bottom: 0;
}

.vertical-modal-col-block-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin-bottom: 0.25rem;
}

.vertical-lightbox-col-body {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

.vertical-lightbox-read-btn {
  margin-top: auto;
  padding: 0.6rem 1rem;
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.vertical-lightbox-read-btn:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.25);
}


/* ==========================================================================
   EXPANDED HIERARCHICAL CONTINUUM: TIER 1 (ANCHOR) VS TIER 2 (EPISODE)
   ========================================================================== */

/* Tier 1: Major Anchor Events (Closer to central spine, wider, prominent imagery) */
.vertical-timeline-milestone-row.tier-1 {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
  margin-bottom: 3.25rem;
  transition: all 0.25s ease;
}

.vertical-timeline-milestone-row.tier-1 .vertical-connector-line-left {
  right: 50%;
  width: 50px;
  height: 2.5px;
  background: var(--accent-primary);
}

.vertical-timeline-milestone-row.tier-1 .vertical-connector-line-right {
  left: 50%;
  width: 50px;
  height: 2.5px;
  background: var(--accent-gold);
}

.vertical-timeline-milestone-row.tier-1 .vertical-event-card-wing.left-wing {
  margin-right: 18px;
}

.vertical-timeline-milestone-row.tier-1 .vertical-event-card-wing.right-wing {
  margin-left: 18px;
}

.vertical-timeline-milestone-row.tier-1 .vertical-event-card-wing {
  padding: 1.15rem;
  border: 1.5px solid rgba(37, 99, 235, 0.28);
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.08);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
}

.vertical-timeline-milestone-row.tier-1 .vertical-spine-date-badge {
  font-size: 0.88rem;
  font-weight: 900;
  padding: 0.4rem 0.85rem;
  border-width: 2.5px;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: #eff6ff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.18);
}

.vertical-timeline-milestone-row.tier-1 .vertical-card-thumb-wrap {
  width: 95px;
  height: 95px;
  min-width: 95px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-medium);
}

.vertical-timeline-milestone-row.tier-1 .vertical-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.vertical-timeline-milestone-row.tier-1:hover .vertical-card-thumb-img {
  transform: scale(1.08);
}

.vertical-timeline-milestone-row.tier-1 .vertical-card-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.3;
}

/* Tier 2: Supporting Scriptural Episodes (Farther from central spine, streamlined scannable format) */
.vertical-timeline-milestone-row.tier-2 {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
  margin-bottom: 2rem;
  transition: all 0.25s ease;
}

.vertical-timeline-milestone-row.tier-2 .vertical-connector-line-left {
  right: 50%;
  width: 90px;
  height: 1.5px;
  background: #cbd5e1;
  border-top: 1px dashed #94a3b8;
}

.vertical-timeline-milestone-row.tier-2 .vertical-connector-line-right {
  left: 50%;
  width: 90px;
  height: 1.5px;
  background: #cbd5e1;
  border-top: 1px dashed #94a3b8;
}

.vertical-timeline-milestone-row.tier-2 .vertical-event-card-wing.left-wing {
  margin-right: 42px;
}

.vertical-timeline-milestone-row.tier-2 .vertical-event-card-wing.right-wing {
  margin-left: 42px;
}

.vertical-timeline-milestone-row.tier-2 .vertical-event-card-wing {
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
}

.vertical-timeline-milestone-row.tier-2 .vertical-spine-date-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-width: 1px;
  border-color: var(--border-medium);
  color: var(--text-muted);
  background: #f8fafc;
}

.vertical-timeline-milestone-row.tier-2 .vertical-card-thumb-wrap {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 9px;
  overflow: hidden;
  background: #f1f5f9;
}

.vertical-timeline-milestone-row.tier-2 .vertical-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-timeline-milestone-row.tier-2 .vertical-card-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
}

/* Tier Badges */
.tier-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  display: inline-block;
}

.tier-badge.anchor {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.tier-badge.episode {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Lightbox Modal Hero Image */
.vertical-lightbox-hero-thumb {
  overflow: hidden;
}

.vertical-lightbox-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Epoch Stream Auto-Load Bridge */
.vertical-epoch-stream-bridge {
  max-width: 680px;
  margin: 3.5rem auto 2rem auto;
  padding: 1.1rem 1.75rem;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.98));
  border: 1.5px dashed var(--accent-primary);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
  position: relative;
  z-index: 5;
  cursor: pointer;
  transition: all 0.22s ease;
}

.vertical-epoch-stream-bridge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.16);
  border-color: var(--accent-primary-hover);
  background: #ffffff;
}

.epoch-stream-bridge-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-primary);
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.epoch-stream-bridge-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.epoch-stream-bridge-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}


/* ==========================================================================
   THEOLOGICAL BIBLICAL CONTINUUM: BOTH COLUMNS BIBLICAL (8 GRAND EPOCHS)
   ========================================================================== */

/* 8 Grand Theological Epochs Chromatic Variables */
.vertical-epoch-section[data-epoch="primeval"] {
  --epoch-accent: #d97706;
  --epoch-tag-bg: #fef3c7;
  --epoch-border: rgba(217, 119, 6, 0.38);
  --epoch-glow: rgba(217, 119, 6, 0.14);
}

.vertical-epoch-section[data-epoch="patriarchs"] {
  --epoch-accent: #b45309;
  --epoch-tag-bg: #fef3c7;
  --epoch-border: rgba(180, 83, 9, 0.38);
  --epoch-glow: rgba(180, 83, 9, 0.14);
}

.vertical-epoch-section[data-epoch="exodus"] {
  --epoch-accent: #ea580c;
  --epoch-tag-bg: #ffedd5;
  --epoch-border: rgba(234, 88, 12, 0.38);
  --epoch-glow: rgba(234, 88, 12, 0.14);
}

.vertical-epoch-section[data-epoch="conquest"] {
  --epoch-accent: #c2410c;
  --epoch-tag-bg: #ffedd5;
  --epoch-border: rgba(194, 65, 12, 0.38);
  --epoch-glow: rgba(194, 65, 12, 0.14);
}

.vertical-epoch-section[data-epoch="monarchy"] {
  --epoch-accent: #7c3aed;
  --epoch-tag-bg: #f3e8ff;
  --epoch-border: rgba(124, 58, 237, 0.38);
  --epoch-glow: rgba(124, 58, 237, 0.14);
}

.vertical-epoch-section[data-epoch="exile"] {
  --epoch-accent: #0d9488;
  --epoch-tag-bg: #ccfbf1;
  --epoch-border: rgba(13, 148, 136, 0.38);
  --epoch-glow: rgba(13, 148, 136, 0.14);
}

.vertical-epoch-section[data-epoch="gospels"] {
  --epoch-accent: #2563eb;
  --epoch-tag-bg: #dbeafe;
  --epoch-border: rgba(37, 99, 235, 0.38);
  --epoch-glow: rgba(37, 99, 235, 0.14);
}

.vertical-epoch-section[data-epoch="church"] {
  --epoch-accent: #dc2626;
  --epoch-tag-bg: #fee2e2;
  --epoch-border: rgba(220, 38, 38, 0.38);
  --epoch-glow: rgba(220, 38, 38, 0.14);
}

/* Maximized Vertical Space for Top Control Bar & Header */
.timeline-unified-header.compact {
  padding: 0.5rem 1.25rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: #ffffff !important;
}

.unified-header-row-1.compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.unified-header-row-1.compact .unified-timeline-title {
  font-size: 1.15rem !important;
  margin: 0 !important;
  font-weight: 800 !important;
}

.unified-header-row-1.compact .timeline-return-btn {
  font-size: 0.78rem !important;
  padding: 0.3rem 0.75rem !important;
}

.timeline-return-btn-short {
  display: none;
}

.timeline-title-short {
  display: none;
}

.vertical-timeline-page {
  height: calc(100vh - 58px) !important;
}

.vertical-top-control-bar {
  padding: 0.65rem 1.5rem !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.vertical-top-title-row {
  margin-bottom: 0.45rem !important;
}

.vertical-header-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.vertical-timeline-canvas {
  padding: 1.5rem 1.5rem 5rem 1.5rem !important;
}

/* ==========================================================================
   ALTERNATING BIBLICAL COLUMNS LAYOUT
   ========================================================================== */

.vertical-timeline-milestone-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 100px 1fr !important;
  align-items: center !important;
  margin-bottom: 2rem !important;
  z-index: 3 !important;
}

/* Tier 1 vs Tier 2 Margins & Connectors */
.vertical-timeline-milestone-row.tier-1.align-left .vertical-event-card-wing.left-wing {
  margin-right: 18px !important;
}

.vertical-timeline-milestone-row.tier-1.align-right .vertical-event-card-wing.right-wing {
  margin-left: 18px !important;
}

.vertical-timeline-milestone-row.tier-2.align-left .vertical-event-card-wing.left-wing {
  margin-right: 36px !important;
}

.vertical-timeline-milestone-row.tier-2.align-right .vertical-event-card-wing.right-wing {
  margin-left: 36px !important;
}

/* Connectors in Alternating Flow */
.vertical-timeline-milestone-row.align-left .vertical-connector-line-left {
  right: 50% !important;
  width: 50px !important;
  height: 2.5px !important;
  background: var(--epoch-accent, #b45309) !important;
  display: block !important;
}

.vertical-timeline-milestone-row.tier-2.align-left .vertical-connector-line-left {
  width: 80px !important;
  height: 1.5px !important;
  background: #cbd5e1 !important;
  border-top: 1px dashed var(--epoch-accent, #94a3b8) !important;
}

.vertical-timeline-milestone-row.align-right .vertical-connector-line-right {
  left: 50% !important;
  width: 50px !important;
  height: 2.5px !important;
  background: var(--epoch-accent, #b45309) !important;
  display: block !important;
}

.vertical-timeline-milestone-row.tier-2.align-right .vertical-connector-line-right {
  width: 80px !important;
  height: 1.5px !important;
  background: #cbd5e1 !important;
  border-top: 1px dashed var(--epoch-accent, #94a3b8) !important;
}

.vertical-timeline-milestone-row.align-left .vertical-connector-line-right.empty,
.vertical-timeline-milestone-row.align-right .vertical-connector-line-left.empty {
  display: none !important;
}

.vertical-event-card-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   BIBLICAL EVENT CARDS (BOTH LEFT & RIGHT COLUMNS)
   ========================================================================== */

/* Left and Right Major Anchor Cards (Planted Transparent Artwork) */
.vertical-event-card-wing.biblical-planted-card {
  position: relative !important;
  overflow: visible !important; /* Feet firmly planted at bottom, head gracefully breaks top border! */
  min-height: 220px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fffdf8 100%) !important;
  border: 1.5px solid var(--epoch-border, rgba(217, 119, 6, 0.35)) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 20px var(--epoch-glow, rgba(217, 119, 6, 0.08)), 0 1px 3px rgba(0,0,0,0.03) !important;
  padding: 1.4rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vertical-event-card-wing.biblical-planted-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px var(--epoch-glow, rgba(217, 119, 6, 0.18)) !important;
  border-color: var(--epoch-accent, #d97706) !important;
}

/* Planted Figure Wrap */
.planted-figure-wrap {
  position: absolute !important;
  bottom: 0 !important;
  right: 12px !important;
  width: 170px !important;
  height: 250px !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.planted-figure-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  filter: drop-shadow(0 8px 14px rgba(120, 53, 15, 0.16)) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vertical-event-card-wing.biblical-planted-card:hover .planted-figure-wrap img {
  transform: translateY(-4px) scale(1.02) !important;
}

.biblical-content-area {
  padding-right: 175px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Tier 2: Streamlined, Compact Biblical Event Cards (NO icon, NO image) */
.vertical-event-card-wing.biblical-card-streamlined {
  background: linear-gradient(145deg, #ffffff 0%, #fffdf8 100%) !important;
  border: 1.5px solid var(--epoch-border, rgba(217, 119, 6, 0.25)) !important;
  border-radius: 14px !important;
  padding: 0.85rem 1.15rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  cursor: pointer !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: all 0.22s ease !important;
}

.vertical-event-card-wing.biblical-card-streamlined:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  border-color: var(--epoch-accent, #b45309) !important;
}

.vertical-card-content {
  width: 100% !important;
}

.vertical-card-scripture-ref {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: var(--epoch-accent, #b45309) !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: 0.02em !important;
}

.vertical-event-card-wing .vertical-card-title {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin-bottom: 0.25rem !important;
}

.vertical-event-card-wing .vertical-card-summary {
  font-size: 0.8rem !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  margin-bottom: 0.4rem !important;
}

.vertical-event-card-wing .vertical-card-action-hint {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--epoch-accent, #b45309) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.vertical-event-card-wing:hover .vertical-card-action-hint {
  text-decoration: underline !important;
}

/* Spine Node and Date Badge */
.vertical-spine-date-badge {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 9999px !important;
  border: 1.5px solid var(--border-medium) !important;
  background: #ffffff !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.vertical-spine-date-badge.tier-1.highlight {
  border-color: var(--epoch-accent, #b45309) !important;
  color: var(--epoch-accent, #b45309) !important;
  background: var(--epoch-tag-bg, #eff6ff) !important;
  box-shadow: 0 3px 10px var(--epoch-glow, rgba(37, 99, 235, 0.18)) !important;
  font-weight: 900 !important;
}

/* Responsive Stacking on Mobile/Tablet */
@media (max-width: 900px) {
  .vertical-timeline-milestone-row {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .vertical-connector-line-left,
  .vertical-connector-line-right {
    display: none !important;
  }
  .vertical-event-card-placeholder {
    display: none !important;
  }
  .vertical-event-card-wing.left-wing,
  .vertical-event-card-wing.right-wing {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .biblical-content-area {
    padding-right: 0 !important;
  }
  .planted-figure-wrap {
    position: static !important;
    width: 130px !important;
    height: 170px !important;
    margin: 0 auto 0.75rem auto !important;
  }
}


/* ==========================================================================
   REFINED TIMELINE CONTINUUM: OUTLINED SEARCH, STICKY 8-EPOCHS & PACKED CARDS
   ========================================================================== */

/* 1. Distinct Outlined Search Bar with Stepper Controls */
.vertical-timeline-search-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 440px !important;
  max-width: 100% !important;
  height: 42px !important;
  padding: 0 0.55rem 0 0.75rem !important;
  background: var(--bg-card, #ffffff) !important;
  border: 2px solid #2563eb !important; /* Crisp, high-contrast outline */
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
}

[data-theme="dark"] .vertical-timeline-search-box {
  background: #1e293b !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.vertical-timeline-search-box:focus-within {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25), 0 4px 16px rgba(37, 99, 235, 0.2) !important;
}

.vertical-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #2563eb !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .vertical-search-icon {
  color: #60a5fa !important;
}

.vertical-timeline-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--text-main, #0f172a) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

.vertical-timeline-search-input::placeholder {
  color: var(--text-muted, #64748b) !important;
  font-size: 0.82rem !important;
}

/* Stepper (1 of X) & Action Controls */
.vertical-search-controls {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
  margin-left: 0.4rem !important;
}

.vertical-search-count {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.12) !important;
  border: 1px solid rgba(37, 99, 235, 0.25) !important;
  border-radius: 9999px !important;
  padding: 0.2rem 0.55rem !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

[data-theme="dark"] .vertical-search-count {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

.search-stepper-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-medium, #cbd5e1) !important;
  background: var(--bg-hover, #f1f5f9) !important;
  color: var(--text-main, #334155) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.search-stepper-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  transform: translateY(-1px) !important;
}

.search-clear-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(100, 116, 139, 0.16) !important;
  color: var(--text-muted, #64748b) !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.search-clear-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* 2. Sticky 8-Epoch Navigation Bar */
.vertical-epoch-sticky-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1.5px solid var(--border-medium, #e2e8f0) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  padding: 0.4rem 1rem !important;
  margin-top: 0.65rem !important;
}

[data-theme="dark"] .vertical-epoch-sticky-nav {
  background: rgba(15, 23, 42, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.epoch-sticky-nav-track {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 6px !important;
  max-width: 100% !important;
}

.epoch-nav-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.25rem !important;
  border-radius: 8px !important;
  border: 1.5px solid transparent !important;
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--text-muted, #64748b) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-align: center !important;
  outline: none !important;
}

[data-theme="dark"] .epoch-nav-pill {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
}

.epoch-nav-pill:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: var(--border-medium, #cbd5e1) !important;
  transform: translateY(-1px) !important;
}

[data-theme="dark"] .epoch-nav-pill:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

.epoch-pill-num {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  opacity: 0.8 !important;
}

.epoch-pill-name {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.epoch-pill-dates {
  font-size: 0.61rem !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  opacity: 0.7 !important;
  white-space: nowrap !important;
}

/* Active State by Epoch Accent */
.epoch-nav-pill.active {
  font-weight: 800 !important;
  transform: scale(1.02) !important;
}

.epoch-nav-pill[data-epoch="primeval"].active {
  border-color: #d97706 !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.25) !important;
}
.epoch-nav-pill[data-epoch="patriarchs"].active {
  border-color: #b45309 !important;
  background: #fef3c7 !important;
  color: #78350f !important;
  box-shadow: 0 2px 10px rgba(180, 83, 9, 0.25) !important;
}
.epoch-nav-pill[data-epoch="exodus"].active {
  border-color: #ea580c !important;
  background: #ffedd5 !important;
  color: #9a3412 !important;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.25) !important;
}
.epoch-nav-pill[data-epoch="conquest"].active {
  border-color: #c2410c !important;
  background: #ffedd5 !important;
  color: #7c2d12 !important;
  box-shadow: 0 2px 10px rgba(194, 65, 12, 0.25) !important;
}
.epoch-nav-pill[data-epoch="monarchy"].active {
  border-color: #7c3aed !important;
  background: #f3e8ff !important;
  color: #5b21b6 !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.25) !important;
}
.epoch-nav-pill[data-epoch="exile"].active {
  border-color: #0d9488 !important;
  background: #ccfbf1 !important;
  color: #115e59 !important;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.25) !important;
}
.epoch-nav-pill[data-epoch="gospels"].active {
  border-color: #2563eb !important;
  background: #dbeafe !important;
  color: #1e40af !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25) !important;
}
.epoch-nav-pill[data-epoch="church"].active {
  border-color: #dc2626 !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25) !important;
}

[data-theme="dark"] .epoch-nav-pill.active {
  background: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .epoch-nav-pill[data-epoch="primeval"].active { color: #fcd34d !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="patriarchs"].active { color: #fbbf24 !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="exodus"].active { color: #fb923c !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="conquest"].active { color: #f87171 !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="monarchy"].active { color: #c084fc !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="exile"].active { color: #5eead4 !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="gospels"].active { color: #93c5fd !important; }
[data-theme="dark"] .epoch-nav-pill[data-epoch="church"].active { color: #fca5a5 !important; }

/* 3. Alternating Rows Vertical Packing (Tightly Nestled Left & Right Cards) */
@media (min-width: 901px) {
  .vertical-timeline-milestone-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 100px 1fr !important;
    align-items: center !important;
    margin-bottom: 0.35rem !important; /* Minimized vertical margin */
    z-index: 3 !important;
  }

  /* Consecutive alternating rows pull up vertically to nestle side-by-side */
  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row {
    margin-top: -3.5rem !important; /* Desktop vertical pull-up */
  }

  /* Tier 1 rows have slightly more breathing room for the planted spot art */
  .vertical-timeline-milestone-row.tier-1 + .vertical-timeline-milestone-row {
    margin-top: -1.75rem !important;
  }
  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row.tier-1 {
    margin-top: -1.75rem !important;
  }
}

@media (max-width: 900px) {
  .vertical-timeline-milestone-row {
    margin-bottom: 1.25rem !important;
  }
  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row,
  .vertical-timeline-milestone-row.tier-1 + .vertical-timeline-milestone-row,
  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row.tier-1 {
    margin-top: 1rem !important; /* Clean separation on stacked mobile without overlap */
  }
}

/* 4. Search Highlight & Stepper Focus Styles */
.vertical-timeline-milestone-row.search-highlight-active {
  z-index: 30 !important;
}

.vertical-timeline-milestone-row.search-highlight-active .vertical-event-card-wing {
  outline: 3px solid #f59e0b !important;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.3), 0 8px 32px rgba(245, 158, 11, 0.4) !important;
  transform: scale(1.025) translateY(-2px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vertical-timeline-milestone-row.search-highlight-match .vertical-event-card-wing {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.25) !important;
}

.vertical-timeline-milestone-row.search-dimmed {
  opacity: 0.28 !important;
  filter: grayscale(40%) !important;
  transition: opacity 0.25s ease, filter 0.25s ease !important;
}

.vertical-timeline-milestone-row.search-dimmed:hover {
  opacity: 0.75 !important;
  filter: none !important;
}



/* Unified Sticky Header Bar (Fixed at Top of Viewport) */
.timeline-unified-header.compact.sticky-timeline-bar {
  position: sticky !important;
  top: 64px !important;
  z-index: 70 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1.5px solid var(--border-medium, #e2e8f0) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  padding: 0.6rem 1rem 0.5rem 1rem !important;
  margin-bottom: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

[data-theme="dark"] .timeline-unified-header.compact.sticky-timeline-bar {
  background: rgba(15, 23, 42, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.timeline-unified-header.compact.sticky-timeline-bar .unified-header-row-1 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.vertical-epoch-sticky-nav {
  margin-top: 0.45rem !important;
  border-bottom: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE TIMELINE & FULL-SCREEN OPTIMIZATIONS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Header & Navigation Bar Stacking */
  .timeline-unified-header.compact.sticky-timeline-bar {
    top: 52px !important;
    padding: 0.5rem 0.65rem !important;
    border-radius: 0 0 12px 12px !important;
  }

  .timeline-unified-header.compact.sticky-timeline-bar .unified-header-row-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
  }

  .timeline-unified-header.compact.sticky-timeline-bar .unified-left-group {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .unified-timeline-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
  }

  .timeline-title-full {
    display: none !important;
  }

  .timeline-title-short {
    display: inline !important;
  }

  .timeline-return-btn {
    padding: 0.32rem 0.65rem !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .timeline-return-btn-full {
    display: none !important;
  }

  .timeline-return-btn-short {
    display: inline !important;
  }

  /* Hide redundant desktop 3-column legend on mobile */
  .vertical-timeline-track-legend {
    display: none !important;
  }

  .vertical-timeline-search-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    box-sizing: border-box !important;
    padding: 0 0.45rem 0 0.6rem !important;
  }

  .vertical-timeline-search-input {
    font-size: 0.82rem !important;
  }

  .vertical-search-controls {
    gap: 0.25rem !important;
    margin-left: 0.25rem !important;
  }

  .vertical-search-count {
    font-size: 0.68rem !important;
    padding: 0.15rem 0.45rem !important;
  }

  .search-stepper-btn {
    width: 24px !important;
    height: 24px !important;
  }

  /* 2. Touch-Momentum Horizontal 8-Epoch Sticky Track */
  .vertical-epoch-sticky-nav {
    padding: 0.3rem 0.5rem 0.4rem 0.5rem !important;
    margin-top: 0.2rem !important;
  }

  .epoch-sticky-nav-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    gap: 0.45rem !important;
    padding: 2px 2px 4px 2px !important;
    scrollbar-width: none !important;
  }

  .epoch-sticky-nav-track::-webkit-scrollbar {
    display: none !important;
  }

  .epoch-nav-pill {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    scroll-snap-align: start !important;
    padding: 0.35rem 0.55rem !important;
  }

  .epoch-pill-num {
    font-size: 0.6rem !important;
  }

  .epoch-pill-name {
    font-size: 0.72rem !important;
  }

  .epoch-pill-dates {
    font-size: 0.58rem !important;
  }

  /* 3. Left-Anchored Spine Single-Column Layout */
  .vertical-timeline-canvas {
    padding: 0.75rem 0.5rem 5rem 0.5rem !important;
    position: relative !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .central-vertical-spine {
    left: 20px !important;
    transform: none !important;
    width: 3px !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  .vertical-timeline-milestone-row {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    margin-bottom: 1.15rem !important;
    margin-top: 0 !important;
    padding-left: 38px !important;
    box-sizing: border-box !important;
  }

  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row,
  .vertical-timeline-milestone-row.tier-1 + .vertical-timeline-milestone-row,
  .vertical-timeline-milestone-row + .vertical-timeline-milestone-row.tier-1 {
    margin-top: 0 !important;
  }

  /* Node Dot on Left Spine */
  .vertical-spine-center-node {
    position: absolute !important;
    left: 12px !important;
    top: 18px !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .vertical-spine-date-badge {
    display: none !important; /* Date is already visible in the card meta row */
  }

  .vertical-spine-node-pin {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2.5px solid #ffffff !important;
    background: var(--epoch-accent, #2563eb) !important;
    box-shadow: 0 0 0 2px var(--epoch-accent, #2563eb), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
  }

  [data-theme="dark"] .vertical-spine-node-pin {
    border-color: #0f172a !important;
  }

  /* Connector lines & desktop placeholders */
  .vertical-connector-line-left,
  .vertical-connector-line-right,
  .vertical-event-card-placeholder {
    display: none !important;
  }

  /* Milestone Card Full-Width Polish */
  .vertical-event-card-wing {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 0.85rem 1rem !important;
  }

  .vertical-event-card-wing.biblical-planted-card {
    min-height: auto !important;
    padding: 0.85rem 1rem !important;
  }

  .biblical-content-area {
    padding-right: 0 !important;
    width: 100% !important;
  }

  .planted-figure-wrap {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    max-height: 120px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 0 0.5rem 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .planted-figure-wrap img {
    height: 100% !important;
    max-height: 115px !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .vertical-card-title {
    font-size: 0.92rem !important;
  }

  .vertical-card-summary {
    font-size: 0.78rem !important;
  }

  /* Epoch Divider Banners */
  .vertical-epoch-divider-wrap {
    margin: 2rem 0 1rem 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
  }

  .vertical-epoch-divider-banner {
    max-width: 95% !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.75rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    text-align: center !important;
  }

  .vertical-epoch-divider-title {
    font-size: 0.82rem !important;
  }

  .vertical-epoch-divider-dates {
    font-size: 0.72rem !important;
  }

  /* 4. Lightbox Native Bottom Sheet */
  .vertical-lightbox-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
    background: rgba(15, 23, 42, 0.75) !important;
  }

  .vertical-lightbox-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 90dvh !important;
    max-height: 90dvh !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    transform: translateY(100%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .vertical-lightbox-backdrop.active .vertical-lightbox-modal {
    transform: translateY(0) !important;
  }

  /* Native Mobile Pull Indicator */
  .vertical-lightbox-modal::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    background: #cbd5e1 !important;
    border-radius: 9999px !important;
    margin: 8px auto 4px auto !important;
    flex-shrink: 0 !important;
  }

  [data-theme="dark"] .vertical-lightbox-modal::before {
    background: #475569 !important;
  }

  .vertical-lightbox-close-btn {
    top: 0.65rem !important;
    right: 0.65rem !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .vertical-lightbox-header {
    padding: 0.65rem 0.85rem !important;
    gap: 0.65rem !important;
    flex-shrink: 0 !important;
  }

  .vertical-lightbox-hero-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 8px !important;
  }

  .vertical-lightbox-hero-thumb svg {
    width: 36px !important;
    height: 36px !important;
  }

  .vertical-lightbox-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .vertical-lightbox-subtitle {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .vertical-lightbox-body-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0.75rem calc(2.5rem + env(safe-area-inset-bottom, 20px)) 0.75rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
  }

  .vertical-lightbox-col-card {
    padding: 0.85rem !important;
    border-radius: 12px !important;
  }

  .vertical-lightbox-col-title {
    font-size: 0.88rem !important;
  }

  /* 5. 180° Covenant Arch & Linear Macro Pedestal on Mobile */
  .timeline-pedestal-card {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .pedestal-col-left {
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding-right: 0 !important;
    padding-bottom: 0.65rem !important;
  }

  .continuous-axis-card {
    padding: 0.85rem 0.5rem !important;
    overflow-x: auto !important;
  }

  .epoch-segments-grid {
    min-width: 600px !important;
  }

  .epoch-bottom-grid {
    min-width: 600px !important;
  }
}


/* MOBILE BOTTOM SHEET FOR BREAKOUT WINDOWS */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Prevent synthetic hover locking from touch events */
  .expandable-token:hover .breakout-window,
  .expandable-token:active .breakout-window {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Only display when the active class is toggled via JS tap */
  .expandable-token.mobile-active .breakout-window {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    
    /* Bottom Sheet Styling */
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 80vh !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 100000 !important;
    transform: translateY(0) !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.3) !important;
    overflow-y: auto !important;
    animation: slideUpBottomSheet 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 !important;
  }

  .expandable-token.mobile-active .breakout-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    z-index: 2;
  }
}

@keyframes slideUpBottomSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Modal Backdrop */
.mobile-breakout-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99999;
  backdrop-filter: blur(2px);
  animation: fadeInBackdrop 0.2s ease;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.breakout-card-header {
  position: relative;
}

/* ====== 
   ANTIGRAVITY TIMELINE PURPLE OVERRIDES
   Requested by user: "make the button on the top right the same color... make the center numbers that cool purple"
   Purple hex: #7c3aed
   ====== */

#btnHeaderTimeline {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.05);
}
#btnHeaderTimeline:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: #7c3aed;
}
#btnHeaderTimeline.active {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25) !important;
}

/* Center timeline numbers - purple for highlight Tier 1 */
.vertical-spine-date-badge.highlight {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06) !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18) !important;
}

/* Fallbacks for tier-1 highlight classes depending on where they appear */
.vertical-timeline-milestone-row.tier-1 .vertical-spine-date-badge {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06) !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18) !important;
}

.vertical-spine-date-badge.tier-1.highlight {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06) !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18) !important;
}

/* Section 1 Typography Fixes */
/* NOTE: .token-word is deliberately NOT forced here. Each token holds two
   copies of its word (.standard-text / .expanded-text) and the swap rules
   above hide one of them. Forcing display:inline !important on .token-word
   made both copies visible ("HeHe", "beganbegan"). */
.verse-container, .verse-marker, .expandable-token, .breakout-gloss {
  display: inline !important;
  margin: 0 !important;
}
.token-word {
  margin: 0 !important;
}


/* ====== MASTER SYNTHESIS: Scripture vs. exegetical breakout ======
   Scripture (NASB '95) keeps the normal serif body text. Breakouts are
   visibly NOT Scripture: bold, accent-coloured, UI font, slightly smaller,
   always in brackets. (Earlier markup relied on Tailwind classes such as
   "font-semibold" that this app never loads, so the emphasis was lost.) */
.master-synthesis-wrapper .standard-text { display: inline !important; }
.verse-text-content { flex: 1; min-width: 0; }
.synth-gloss {
  display: inline !important;
  font-family: var(--font-ui);
  font-size: 0.8em;
  font-weight: 700;
  font-style: normal;
  color: var(--accent-primary);
  letter-spacing: 0.005em;
  margin: 0 0.1em !important;
  white-space: normal;
}
.expandable-token.has-synth-gloss > .standard-text {
  text-decoration: underline dotted;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 4px;
}
[data-theme="dark"] .synth-gloss { color: #93c5fd; }

/* Master Synthesis: curated breakouts are clickable to reveal their sources */
.synth-gloss.synth-curated { cursor: help; }
.synth-gloss.synth-curated:hover, .synth-gloss.synth-curated:focus-visible { text-decoration: underline dotted; outline: none; }
.synth-source-pop {
  position: fixed; z-index: 10000; max-height: 60vh; overflow: auto;
  background: var(--bg-primary, #fff); color: var(--text-primary, #1f2937);
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: .75rem .9rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); font-family: var(--font-ui, system-ui, sans-serif); font-size: .82rem; line-height: 1.45;
}
.synth-source-head { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; margin-bottom: .4rem; }
.synth-source-row + .synth-source-row { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(0,0,0,.08); }
.synth-source-work { font-weight: 700; color: #2563eb; margin-bottom: .15rem; }
.synth-source-quote { font-style: italic; }
[data-theme="dark"] .synth-source-pop { background: #1e293b; color: #e2e8f0; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .synth-source-work { color: #93c5fd; }