/*
   =====================================================
   BIBEL — Pergament Design Overlay
   Adds Pergament / Nacht / Modern themes + editorial type
   Loaded AFTER styles.css + styles-premium.css → wins by cascade
   =====================================================
*/

/* ==================== THEME PALETTES ==================== */

/* Pergament (warm parchment) — default */
html[data-theme="pergament"] {
  --bg-base:         #ECE2C8;
  --bg-primary:      #F6EFD9;
  --bg-secondary:    #EFE6CC;
  --bg-tertiary:     #E6DAB6;
  --bg-hover:        #E0D2A8;
  --bg-active:       #D9CCA6;

  --text-primary:    #1F1A12;
  --text-secondary:  #3A3225;
  --text-muted:      #7A6E55;

  --accent:          #8E2A1B;
  --accent-hover:    #6F1E11;
  --accent-light:    rgba(142, 42, 27, 0.10);
  --accent-secondary:#5F7A4A;
  --accent-warning:  #B85E2D;
  --accent-danger:   #8E2A1B;
  --accent-gold:     #B68A36;

  --border:          #D9CCA6;
  --border-strong:   #B8A77E;
  --border-glow:     rgba(142, 42, 27, 0.30);

  --rule:            #D9CCA6;
  --rule-soft:       rgba(31, 26, 18, 0.08);
  --paper:           #F6EFD9;
  --paper-2:         #EFE6CC;
  --ink:             #1F1A12;
  --ink-2:           #3A3225;
  --ink-mute:        #7A6E55;
  --ink-faint:       #A89A7B;

  --gold:            #B68A36;
  --sage:            #5F7A4A;
  --sky:             #3A5B7A;

  --hl-yellow:       #F2DD7E;
  --hl-peach:        #F2B582;
  --hl-sage:         #C4D2A0;
  --hl-sky:          #A8C6DC;
  --hl-rose:         #E8B0B0;

  --shadow-sm:       0 1px 3px rgba(60,40,20,0.10);
  --shadow-md:       0 4px 14px rgba(60,40,20,0.12);
  --shadow-lg:       0 12px 36px rgba(60,40,20,0.16);
  --shadow-xl:       0 20px 52px rgba(60,40,20,0.22);
  --shadow-glow:     0 0 24px rgba(142, 42, 27, 0.18);
  --shadow-inner:    inset 0 1px 3px rgba(60,40,20,0.10);

  --glass-bg:        rgba(246, 239, 217, 0.92);
  --glass-bg-light:  rgba(239, 230, 204, 0.88);
  --glass-border:    rgba(31, 26, 18, 0.06);

  --gradient-primary:linear-gradient(135deg, #8E2A1B 0%, #B85E2D 100%);
  --gradient-gold:   linear-gradient(135deg, #B68A36 0%, #8E2A1B 100%);
  --gradient-dark:   linear-gradient(180deg, #F6EFD9 0%, #ECE2C8 100%);
}

/* Nacht — dark with gold ink */
html[data-theme="nacht"] {
  --bg-base:         #0E0B06;
  --bg-primary:      #15110A;
  --bg-secondary:    #1B160D;
  --bg-tertiary:     #221C12;
  --bg-hover:        #2A2316;
  --bg-active:       #332B1C;

  --text-primary:    #ECE0C4;
  --text-secondary:  #D5C6A4;
  --text-muted:      #9A8B6B;

  --accent:          #D6A14B;
  --accent-hover:    #E7B768;
  --accent-light:    rgba(214, 161, 75, 0.14);
  --accent-secondary:#9CB87E;
  --accent-warning:  #E7B768;
  --accent-danger:   #C16851;
  --accent-gold:     #D6A14B;

  --border:          #2A2316;
  --border-strong:   #3D3320;
  --border-glow:     rgba(214, 161, 75, 0.30);

  --rule:            #2A2316;
  --rule-soft:       rgba(236, 224, 196, 0.08);
  --paper:           #15110A;
  --paper-2:         #1B160D;
  --ink:             #ECE0C4;
  --ink-2:           #D5C6A4;
  --ink-mute:        #9A8B6B;
  --ink-faint:       #6B5F47;

  --gold:            #D6A14B;
  --sage:            #9CB87E;
  --sky:             #88B0D0;

  --hl-yellow:       #6e5b1f;
  --hl-peach:        #6e4521;
  --hl-sage:         #3f5430;
  --hl-sky:          #2f4860;
  --hl-rose:         #5a3030;

  --shadow-sm:       0 2px 6px rgba(0,0,0,0.5);
  --shadow-md:       0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg:       0 14px 40px rgba(0,0,0,0.65);
  --shadow-xl:       0 22px 60px rgba(0,0,0,0.75);
  --shadow-glow:     0 0 28px rgba(214, 161, 75, 0.22);
  --shadow-inner:    inset 0 2px 4px rgba(0,0,0,0.4);

  --glass-bg:        rgba(21, 17, 10, 0.94);
  --glass-bg-light:  rgba(27, 22, 13, 0.88);
  --glass-border:    rgba(236, 224, 196, 0.06);

  --gradient-primary:linear-gradient(135deg, #D6A14B 0%, #B68A36 100%);
  --gradient-gold:   linear-gradient(135deg, #E7B768 0%, #D6A14B 100%);
  --gradient-dark:   linear-gradient(180deg, #15110A 0%, #0E0B06 100%);
}

/* Sepia — vintage old-book brown */
html[data-theme="sepia"] {
  --bg-base:         #E5D4B1;
  --bg-primary:      #F1E2BE;
  --bg-secondary:    #E9D8AE;
  --bg-tertiary:     #DDC994;
  --bg-hover:        #D0B97F;
  --bg-active:       #C6AC6A;

  --text-primary:    #2A1B0E;
  --text-secondary:  #4A331E;
  --text-muted:      #8C6D44;

  --accent:          #A04A1E;
  --accent-hover:    #823A14;
  --accent-light:    rgba(160, 74, 30, 0.12);
  --accent-secondary:#71864A;
  --accent-warning:  #C7782F;
  --accent-danger:   #A04A1E;
  --accent-gold:     #B68A36;

  --border:          #C5AB78;
  --border-strong:   #A98D55;
  --border-glow:     rgba(160, 74, 30, 0.30);

  --rule:            #C5AB78;
  --rule-soft:       rgba(42, 27, 14, 0.08);
  --paper:           #F1E2BE;
  --paper-2:         #E9D8AE;
  --ink:             #2A1B0E;
  --ink-2:           #4A331E;
  --ink-mute:        #8C6D44;
  --ink-faint:       #B49B70;

  --gold:            #B68A36;
  --sage:            #71864A;
  --sky:             #3F5A6B;

  --hl-yellow:       #F2DD7E;
  --hl-peach:        #F2B582;
  --hl-sage:         #C4D2A0;
  --hl-sky:          #A8C6DC;
  --hl-rose:         #E8B0B0;

  --shadow-sm:       0 1px 3px rgba(60,30,10,0.10);
  --shadow-md:       0 4px 14px rgba(60,30,10,0.12);
  --shadow-lg:       0 12px 36px rgba(60,30,10,0.16);
  --shadow-xl:       0 20px 52px rgba(60,30,10,0.22);
  --shadow-glow:     0 0 24px rgba(160, 74, 30, 0.18);
  --shadow-inner:    inset 0 1px 3px rgba(60,30,10,0.10);

  --glass-bg:        rgba(241, 226, 190, 0.92);
  --glass-bg-light:  rgba(233, 216, 174, 0.88);
  --glass-border:    rgba(42, 27, 14, 0.06);

  --gradient-primary:linear-gradient(135deg, #A04A1E 0%, #C7782F 100%);
  --gradient-gold:   linear-gradient(135deg, #B68A36 0%, #A04A1E 100%);
  --gradient-dark:   linear-gradient(180deg, #F1E2BE 0%, #E5D4B1 100%);
}

/* Tinte — deep midnight indigo with cream serif */
html[data-theme="tinte"] {
  --bg-base:         #0A0F1E;
  --bg-primary:      #111729;
  --bg-secondary:    #161C32;
  --bg-tertiary:     #1D2440;
  --bg-hover:        #232C4F;
  --bg-active:       #2A335A;

  --text-primary:    #E7DDC4;
  --text-secondary:  #C9BEA0;
  --text-muted:      #8B8369;
  --text-faint:      #5C5742;

  --accent:          #C28749;
  --accent-hover:    #D39A5C;
  --accent-light:    rgba(194, 135, 73, 0.14);
  --accent-secondary:#7B96B0;
  --accent-warning:  #D39A5C;
  --accent-danger:   #C16851;
  --accent-gold:     #C28749;

  --border:          #232C4F;
  --border-strong:   #313B62;
  --border-glow:     rgba(194, 135, 73, 0.28);

  --rule:            #232C4F;
  --rule-soft:       rgba(231, 221, 196, 0.08);
  --paper:           #111729;
  --paper-2:         #161C32;
  --ink:             #E7DDC4;
  --ink-2:           #C9BEA0;
  --ink-mute:        #8B8369;
  --ink-faint:       #5C5742;

  --gold:            #C28749;
  --sage:            #7B96B0;
  --sky:             #7B96B0;

  --hl-yellow:       #6e5b1f;
  --hl-peach:        #6e4521;
  --hl-sage:         #3a5a4a;
  --hl-sky:          #2f4860;
  --hl-rose:         #5a3030;

  --shadow-sm:       0 2px 6px rgba(0,0,0,0.5);
  --shadow-md:       0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg:       0 14px 40px rgba(0,0,0,0.65);
  --shadow-xl:       0 22px 60px rgba(0,0,0,0.75);
  --shadow-glow:     0 0 28px rgba(194, 135, 73, 0.22);
  --shadow-inner:    inset 0 2px 4px rgba(0,0,0,0.4);

  --glass-bg:        rgba(17, 23, 41, 0.94);
  --glass-bg-light:  rgba(22, 28, 50, 0.88);
  --glass-border:    rgba(231, 221, 196, 0.06);

  --gradient-primary:linear-gradient(135deg, #C28749 0%, #D39A5C 100%);
  --gradient-gold:   linear-gradient(135deg, #D39A5C 0%, #C28749 100%);
  --gradient-dark:   linear-gradient(180deg, #111729 0%, #0A0F1E 100%);
}

/* Modern — clean white */
html[data-theme="modern"] {
  --bg-base:         #F1F1EE;
  --bg-primary:      #FFFFFF;
  --bg-secondary:    #F7F7F4;
  --bg-tertiary:     #EBEBE7;
  --bg-hover:        #E5E5E0;
  --bg-active:       #D9D9D3;

  --text-primary:    #0E0E0E;
  --text-secondary:  #2A2A2A;
  --text-muted:      #6B6B66;

  --accent:          #2A4FB7;
  --accent-hover:    #1F3D90;
  --accent-light:    rgba(42, 79, 183, 0.10);
  --accent-secondary:#4F7752;
  --accent-warning:  #B85E2D;
  --accent-danger:   #C03A2B;
  --accent-gold:     #B68A36;

  --border:          #E5E5E0;
  --border-strong:   #C8C8C0;
  --border-glow:     rgba(42, 79, 183, 0.25);

  --rule:            #E5E5E0;
  --rule-soft:       rgba(0, 0, 0, 0.06);
  --paper:           #FFFFFF;
  --paper-2:         #F7F7F4;
  --ink:             #0E0E0E;
  --ink-2:           #2A2A2A;
  --ink-mute:        #6B6B66;
  --ink-faint:       #ADADA6;

  --gold:            #B68A36;
  --sage:            #4F7752;
  --sky:             #2A4FB7;

  --hl-yellow:       #FFF2A8;
  --hl-peach:        #FFD0A8;
  --hl-sage:         #D6E7C7;
  --hl-sky:          #C5D9F1;
  --hl-rose:         #F4C9C9;

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:       0 12px 36px rgba(0,0,0,0.10);
  --shadow-xl:       0 20px 50px rgba(0,0,0,0.14);
  --shadow-glow:     0 0 24px rgba(42, 79, 183, 0.18);
  --shadow-inner:    inset 0 1px 3px rgba(0,0,0,0.05);

  --glass-bg:        rgba(255, 255, 255, 0.95);
  --glass-bg-light:  rgba(247, 247, 244, 0.90);
  --glass-border:    rgba(0, 0, 0, 0.06);

  --gradient-primary:linear-gradient(135deg, #2A4FB7 0%, #466DD6 100%);
  --gradient-gold:   linear-gradient(135deg, #B68A36 0%, #8E6A20 100%);
  --gradient-dark:   linear-gradient(180deg, #FFFFFF 0%, #F1F1EE 100%);
}

/* ==================== TYPOGRAPHY ==================== */

html[data-theme="pergament"],
html[data-theme="nacht"],
html[data-theme="modern"] {
  --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-sans:  'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-slab:  'Source Serif 4', Georgia, serif;
  --font-system: var(--font-sans);
  --mono:       'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

html[data-theme="pergament"] body,
html[data-theme="nacht"] body,
html[data-theme="modern"] body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}

/* Replace the dark blue radial glow with subtle paper texture */
html[data-theme="pergament"] body::before,
html[data-theme="nacht"] body::before,
html[data-theme="modern"] body::before {
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(180,140,80,.06), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(120,80,40,.04), transparent 60%);
  opacity: .5;
}

html[data-theme="nacht"] body::before {
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(214,161,75,.08), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(214,161,75,.04), transparent 60%);
}

html[data-theme="modern"] body::before {
  background: none;
}

/* ==================== HEADER ==================== */

html[data-theme="pergament"] .header,
html[data-theme="nacht"] .header,
html[data-theme="modern"] .header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="pergament"] .logo-text,
html[data-theme="nacht"] .logo-text,
html[data-theme="modern"] .logo-text {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

html[data-theme="pergament"] .logo .accent,
html[data-theme="modern"] .logo .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}

html[data-theme="nacht"] .logo .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

html[data-theme="pergament"] .version,
html[data-theme="nacht"] .version,
html[data-theme="modern"] .version {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0 0 0 6px;
}

html[data-theme="pergament"] .icon-btn,
html[data-theme="nacht"] .icon-btn,
html[data-theme="modern"] .icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mute);
  border-radius: 8px;
}

html[data-theme="pergament"] .icon-btn:hover,
html[data-theme="nacht"] .icon-btn:hover,
html[data-theme="modern"] .icon-btn:hover {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
}

/* ==================== QUICK BAR / TRANSLATION PILL ==================== */

html[data-theme="pergament"] .quick-bar,
html[data-theme="nacht"] .quick-bar,
html[data-theme="modern"] .quick-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none;
}

html[data-theme="pergament"] .translation-trigger,
html[data-theme="nacht"] .translation-trigger,
html[data-theme="modern"] .translation-trigger {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px 8px 14px;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

html[data-theme="pergament"] .translation-trigger:hover,
html[data-theme="nacht"] .translation-trigger:hover,
html[data-theme="modern"] .translation-trigger:hover {
  border-color: var(--ink-mute);
  background: var(--paper);
}

html[data-theme="pergament"] .quick-label,
html[data-theme="nacht"] .quick-label,
html[data-theme="modern"] .quick-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

html[data-theme="pergament"] .quick-chip,
html[data-theme="nacht"] .quick-chip,
html[data-theme="modern"] .quick-chip {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--font-sans);
  border-radius: 999px;
  font-size: 12px;
}

html[data-theme="pergament"] .quick-chip:hover,
html[data-theme="nacht"] .quick-chip:hover,
html[data-theme="modern"] .quick-chip:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}

html[data-theme="pergament"] .quick-chip.active,
html[data-theme="nacht"] .quick-chip.active,
html[data-theme="modern"] .quick-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

html[data-theme="nacht"] .quick-chip.active {
  background: var(--accent);
  color: #0E0B06;
  border-color: var(--accent);
}

/* ==================== SIDEBAR PANELS ==================== */

html[data-theme="pergament"] .sidebar-left,
html[data-theme="nacht"] .sidebar-left,
html[data-theme="modern"] .sidebar-left,
html[data-theme="pergament"] .sidebar-right,
html[data-theme="nacht"] .sidebar-right,
html[data-theme="modern"] .sidebar-right {
  background: var(--paper-2);
  border-color: var(--rule);
}

html[data-theme="pergament"] .panel,
html[data-theme="nacht"] .panel,
html[data-theme="modern"] .panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: none;
}

html[data-theme="pergament"] .panel-header,
html[data-theme="nacht"] .panel-header,
html[data-theme="modern"] .panel-header {
  background: transparent;
  border-bottom: 1px solid var(--rule);
}

html[data-theme="pergament"] .panel-title h3,
html[data-theme="nacht"] .panel-title h3,
html[data-theme="modern"] .panel-title h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

html[data-theme="pergament"] .badge,
html[data-theme="nacht"] .badge,
html[data-theme="modern"] .badge {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Book and chapter tiles — editorial */
html[data-theme="pergament"] .book-btn,
html[data-theme="nacht"] .book-btn,
html[data-theme="modern"] .book-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 6px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

html[data-theme="pergament"] .book-btn:hover,
html[data-theme="nacht"] .book-btn:hover,
html[data-theme="modern"] .book-btn:hover {
  background: var(--rule-soft);
  border-color: var(--ink-mute);
  transform: none;
  color: var(--ink);
}

html[data-theme="pergament"] .book-btn.active,
html[data-theme="modern"] .book-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

html[data-theme="nacht"] .book-btn.active {
  background: var(--accent);
  color: #0E0B06;
  border-color: var(--accent);
}

html[data-theme="pergament"] .book-btn.ot,
html[data-theme="nacht"] .book-btn.ot,
html[data-theme="modern"] .book-btn.ot {
  border-left: 2px solid var(--gold);
}

html[data-theme="pergament"] .book-btn.nt,
html[data-theme="nacht"] .book-btn.nt,
html[data-theme="modern"] .book-btn.nt {
  border-left: 2px solid var(--sage);
}

html[data-theme="pergament"] .chapter-btn,
html[data-theme="nacht"] .chapter-btn,
html[data-theme="modern"] .chapter-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
}

html[data-theme="pergament"] .chapter-btn:hover,
html[data-theme="nacht"] .chapter-btn:hover,
html[data-theme="modern"] .chapter-btn:hover {
  background: var(--rule-soft);
  border-color: var(--ink-mute);
  color: var(--ink);
}

html[data-theme="pergament"] .chapter-btn.active,
html[data-theme="modern"] .chapter-btn.active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

html[data-theme="nacht"] .chapter-btn.active {
  background: var(--accent);
  color: #0E0B06;
  border-color: var(--accent);
}

html[data-theme="pergament"] .chapter-btn.read,
html[data-theme="nacht"] .chapter-btn.read,
html[data-theme="modern"] .chapter-btn.read {
  background: transparent;
  border-color: var(--sage);
  color: var(--sage);
}

/* Highlight when sidebar panel briefly pulses on auto-jump */
.panel.flash-attention {
  animation: panelFlash 0.9s ease;
}
@keyframes panelFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-light, rgba(142,42,27,.25)); }
  40%  { box-shadow: 0 0 0 6px var(--accent-light, rgba(142,42,27,.18)); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Tab buttons (Alle/AT/NT, Vers-Modus) */
html[data-theme="pergament"] .tab-btn,
html[data-theme="nacht"] .tab-btn,
html[data-theme="modern"] .tab-btn,
html[data-theme="pergament"] .mode-tab,
html[data-theme="nacht"] .mode-tab,
html[data-theme="modern"] .mode-tab {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 5px 10px;
}

html[data-theme="pergament"] .tab-btn.active,
html[data-theme="modern"] .tab-btn.active,
html[data-theme="pergament"] .mode-tab.active,
html[data-theme="modern"] .mode-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

html[data-theme="nacht"] .tab-btn.active,
html[data-theme="nacht"] .mode-tab.active {
  background: var(--accent);
  color: #0E0B06;
  border-color: var(--accent);
}

/* ==================== READER AREA ==================== */

html[data-theme="pergament"] .reader-area,
html[data-theme="nacht"] .reader-area,
html[data-theme="modern"] .reader-area {
  background: var(--paper);
}

html[data-theme="pergament"] .reader-toolbar,
html[data-theme="nacht"] .reader-toolbar,
html[data-theme="modern"] .reader-toolbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none;
}

html[data-theme="pergament"] .current-ref,
html[data-theme="nacht"] .current-ref,
html[data-theme="modern"] .current-ref {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

html[data-theme="pergament"] .nav-btn,
html[data-theme="nacht"] .nav-btn,
html[data-theme="modern"] .nav-btn,
html[data-theme="pergament"] .tool-btn,
html[data-theme="nacht"] .tool-btn,
html[data-theme="modern"] .tool-btn {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  border-radius: 8px;
  font-family: var(--font-sans);
}

html[data-theme="pergament"] .nav-btn:hover,
html[data-theme="nacht"] .nav-btn:hover,
html[data-theme="modern"] .nav-btn:hover,
html[data-theme="pergament"] .tool-btn:hover,
html[data-theme="nacht"] .tool-btn:hover,
html[data-theme="modern"] .tool-btn:hover {
  color: var(--ink);
  border-color: var(--ink-mute);
  background: var(--paper-2);
}

html[data-theme="pergament"] .reader-content,
html[data-theme="nacht"] .reader-content,
html[data-theme="modern"] .reader-content {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: -0.005em;
}

/* Welcome screen — editorial */
html[data-theme="pergament"] .welcome,
html[data-theme="nacht"] .welcome,
html[data-theme="modern"] .welcome {
  text-align: left;
  padding: 64px clamp(28px, 5vw, 80px) 80px;
  max-width: 780px;
  margin: 0 auto;
}

html[data-theme="pergament"] .welcome h2,
html[data-theme="nacht"] .welcome h2,
html[data-theme="modern"] .welcome h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}

html[data-theme="pergament"] .welcome > p,
html[data-theme="nacht"] .welcome > p,
html[data-theme="modern"] .welcome > p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  margin: 0 0 28px;
  max-width: 56ch;
}

html[data-theme="pergament"] .quick-starts,
html[data-theme="nacht"] .quick-starts,
html[data-theme="modern"] .quick-starts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 28px 0 12px;
}

html[data-theme="pergament"] .quick-start,
html[data-theme="nacht"] .quick-start,
html[data-theme="modern"] .quick-start {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

html[data-theme="pergament"] .quick-start:hover,
html[data-theme="nacht"] .quick-start:hover,
html[data-theme="modern"] .quick-start:hover {
  border-color: var(--ink-mute);
  background: var(--paper-2);
}

html[data-theme="pergament"] .feature-badge,
html[data-theme="nacht"] .feature-badge,
html[data-theme="modern"] .feature-badge {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ==================== VERSES — DROP CAP + EDITORIAL ==================== */

html[data-theme="pergament"] .verse-row,
html[data-theme="nacht"] .verse-row,
html[data-theme="modern"] .verse-row {
  font-family: var(--font-serif);
  color: var(--ink);
  padding: 7px 16px 7px 56px;
  margin: 0 0 0 -16px;
  border-radius: 6px;
  position: relative;
  transition: background-color .15s ease;
}

html[data-theme="pergament"] .verse-row:hover,
html[data-theme="nacht"] .verse-row:hover,
html[data-theme="modern"] .verse-row:hover {
  background: var(--rule-soft);
}

html[data-theme="pergament"] .verse-row.active,
html[data-theme="pergament"] .verse-row.selected,
html[data-theme="nacht"] .verse-row.active,
html[data-theme="nacht"] .verse-row.selected,
html[data-theme="modern"] .verse-row.active,
html[data-theme="modern"] .verse-row.selected {
  background: var(--rule-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-theme="pergament"] .verse-row .verse-num,
html[data-theme="nacht"] .verse-row .verse-num,
html[data-theme="modern"] .verse-row .verse-num {
  position: absolute;
  left: 14px;
  top: 0.55em;
  width: 32px;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: transparent;
  user-select: none;
  display: block;
}

/* Drop cap on first verse after the editorial chapter head */
html[data-theme="pergament"] .reader-content .editorial-chapter-head + .verse-row .verse-text::first-letter,
html[data-theme="nacht"] .reader-content .editorial-chapter-head + .verse-row .verse-text::first-letter,
html[data-theme="modern"] .reader-content .editorial-chapter-head + .verse-row .verse-text::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 4.2em;
  line-height: 0.86;
  float: left;
  padding: 0.06em 0.10em 0 0;
  color: var(--accent);
  font-style: normal;
}

/* Verse text container */
html[data-theme="pergament"] .verse-row .verse-text,
html[data-theme="nacht"] .verse-row .verse-text,
html[data-theme="modern"] .verse-row .verse-text {
  font-family: var(--font-serif);
  display: block;
}

/* Editorial chapter title block injected by render */
.editorial-chapter-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 32px 0 22px;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--rule, #D9CCA6);
}

.editorial-chapter-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint, #A89A7B);
  margin-bottom: 10px;
}

.editorial-chapter-head .eyebrow .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint, #A89A7B);
}

.editorial-chapter-head .title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
}

.editorial-chapter-head .subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 17px;
  margin: 0;
}

.editorial-chapter-head .chapnum {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--accent);
  line-height: 0.85;
  padding-bottom: 4px;
}

.editorial-chapter-head .chapnum .lab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 4px;
}

.editorial-chapter-head .chapnum .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(64px, 8vw, 100px);
  letter-spacing: -0.04em;
  line-height: 0.8;
}

.editorial-chapter-head .chapnum .of {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  padding-bottom: 16px;
}

.editorial-chapter-head .meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}

.editorial-chapter-head .meta b {
  color: var(--ink-mute);
  font-weight: 500;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .editorial-chapter-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .editorial-chapter-head .chapnum {
    justify-content: flex-start;
  }
}

/* ==================== SIDEBAR-RIGHT TABS ==================== */

html[data-theme="pergament"] .sidebar-tabs,
html[data-theme="nacht"] .sidebar-tabs,
html[data-theme="modern"] .sidebar-tabs {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

html[data-theme="pergament"] .sidebar-tab,
html[data-theme="nacht"] .sidebar-tab,
html[data-theme="modern"] .sidebar-tab {
  background: transparent;
  color: var(--ink-mute);
}

html[data-theme="pergament"] .sidebar-tab.active,
html[data-theme="nacht"] .sidebar-tab.active,
html[data-theme="modern"] .sidebar-tab.active {
  color: var(--accent);
  background: var(--paper);
  border-bottom: 2px solid var(--accent);
}

/* ==================== MOBILE NAV ==================== */

html[data-theme="pergament"] .mobile-nav,
html[data-theme="nacht"] .mobile-nav,
html[data-theme="modern"] .mobile-nav {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  backdrop-filter: none;
}

html[data-theme="pergament"] .mobile-nav-btn,
html[data-theme="nacht"] .mobile-nav-btn,
html[data-theme="modern"] .mobile-nav-btn {
  color: var(--ink-mute);
  font-family: var(--font-sans);
}

html[data-theme="pergament"] .mobile-nav-btn.active,
html[data-theme="modern"] .mobile-nav-btn.active {
  color: var(--accent);
}

html[data-theme="nacht"] .mobile-nav-btn.active {
  color: var(--gold);
}

/* ==================== BUTTONS ==================== */

html[data-theme="pergament"] .btn,
html[data-theme="nacht"] .btn,
html[data-theme="modern"] .btn {
  font-family: var(--font-sans);
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
}

html[data-theme="pergament"] .btn:hover,
html[data-theme="nacht"] .btn:hover,
html[data-theme="modern"] .btn:hover {
  background: var(--paper-2);
  border-color: var(--ink-mute);
}

html[data-theme="pergament"] .btn-primary,
html[data-theme="modern"] .btn-primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

html[data-theme="nacht"] .btn-primary {
  background: var(--accent);
  color: #0E0B06;
  border-color: var(--accent);
}

html[data-theme="pergament"] .btn-primary:hover,
html[data-theme="modern"] .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--paper);
}

/* ==================== TOAST / MODAL ==================== */

html[data-theme="pergament"] .modal,
html[data-theme="nacht"] .modal,
html[data-theme="modern"] .modal {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-sans);
}

html[data-theme="pergament"] .modal-header h3,
html[data-theme="nacht"] .modal-header h3,
html[data-theme="modern"] .modal-header h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
}

/* Notes list / panel toolbar */
html[data-theme="pergament"] .panel-toolbar,
html[data-theme="nacht"] .panel-toolbar,
html[data-theme="modern"] .panel-toolbar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 12px;
}

html[data-theme="pergament"] .empty-hint,
html[data-theme="nacht"] .empty-hint,
html[data-theme="modern"] .empty-hint,
html[data-theme="pergament"] .hint,
html[data-theme="nacht"] .hint,
html[data-theme="modern"] .hint {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 14px;
}

/* Inputs */
html[data-theme="pergament"] input,
html[data-theme="nacht"] input,
html[data-theme="modern"] input,
html[data-theme="pergament"] select,
html[data-theme="nacht"] select,
html[data-theme="modern"] select,
html[data-theme="pergament"] textarea,
html[data-theme="nacht"] textarea,
html[data-theme="modern"] textarea {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-sans);
  border-radius: 6px;
}

html[data-theme="pergament"] input:focus,
html[data-theme="nacht"] input:focus,
html[data-theme="modern"] input:focus {
  border-color: var(--ink-mute);
  outline: none;
}

/* Theme-toggle icon visibility for new theme names (pergament/nacht/modern).
   The legacy rule [data-theme="dark"]/[data-theme="light"] in styles.css would otherwise
   show BOTH the sun and moon at the same time. */
html[data-theme="pergament"] #theme-toggle .light-icon,
html[data-theme="sepia"]     #theme-toggle .light-icon,
html[data-theme="modern"]    #theme-toggle .light-icon { display: none; }
html[data-theme="nacht"]     #theme-toggle .dark-icon,
html[data-theme="tinte"]     #theme-toggle .dark-icon { display: none; }

/* Scroll-top button accent */
html[data-theme="pergament"] .scroll-top-btn,
html[data-theme="modern"] .scroll-top-btn {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

html[data-theme="nacht"] .scroll-top-btn {
  background: var(--accent);
  color: #0E0B06;
  border: 1px solid var(--accent);
}

/* =====================================================================
   READING-AS-HERO POLISH
   Editorial overlay for the chrome around the reader. Reading stays the
   visual focal point; chrome (donate pills, install banner, floating BMC
   widget) is reachable but dezent.
   ===================================================================== */

/* ---- Donate top-bar: small + translucent until you reach for it ---- */
html[data-theme="pergament"] #donate-topbar,
html[data-theme="nacht"]     #donate-topbar,
html[data-theme="modern"]    #donate-topbar {
  opacity: 0.55;
  transition: opacity .2s ease;
}
/* Mobile: hide the fixed donate pills entirely.
   The reader is the hero; donations are still reachable via the welcome screen,
   the in-page footer ("Projekt unterstützen"), and the floating BMC widget. */
@media (max-width: 768px) {
  html[data-theme="pergament"] #donate-topbar,
  html[data-theme="nacht"]     #donate-topbar,
  html[data-theme="modern"]    #donate-topbar {
    display: none !important;
  }
}
html[data-theme="pergament"] #donate-topbar:hover,
html[data-theme="pergament"] #donate-topbar:focus-within,
html[data-theme="nacht"]     #donate-topbar:hover,
html[data-theme="nacht"]     #donate-topbar:focus-within,
html[data-theme="modern"]    #donate-topbar:hover,
html[data-theme="modern"]    #donate-topbar:focus-within {
  opacity: 1;
}

/* ---- Welcome-screen donate area stays full-strength (it's the CTA) ---- */
html[data-theme="pergament"] #welcome-screen #donate-topbar,
html[data-theme="nacht"]     #welcome-screen #donate-topbar,
html[data-theme="modern"]    #welcome-screen #donate-topbar { opacity: 1; }

/* ---- Buy-Me-Coffee floating widget: shrink + dim on mobile ---- */
@media (max-width: 768px) {
  #bmc-wbtn {
    width: 40px !important;
    height: 40px !important;
    opacity: 0.55 !important;
    bottom: 88px !important;        /* clear of bottom-nav */
    right: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  }
  #bmc-wbtn:hover, #bmc-wbtn:focus { opacity: 1 !important; }
}

/* ---- Install banner: theme-aware so it doesn't disappear in Modern ---- */
html[data-theme="pergament"] .install-banner,
html[data-theme="modern"]    .install-banner {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 14px rgba(60,40,20,.10);
}
html[data-theme="nacht"] .install-banner {
  background: var(--paper-2);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 14px rgba(0,0,0,.32);
}
html[data-theme="pergament"] .install-banner strong,
html[data-theme="nacht"]     .install-banner strong,
html[data-theme="modern"]    .install-banner strong { color: var(--ink); }
html[data-theme="pergament"] .install-banner .install-text span,
html[data-theme="nacht"]     .install-banner .install-text span,
html[data-theme="modern"]    .install-banner .install-text span { color: var(--ink-mute); }
html[data-theme="pergament"] .install-dismiss,
html[data-theme="nacht"]     .install-dismiss,
html[data-theme="modern"]    .install-dismiss {
  background: transparent;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
}

/* ---- Mobile bottom nav: theme-aware backdrop + readable labels ---- */
html[data-theme="pergament"] .mobile-nav,
html[data-theme="modern"]    .mobile-nav {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 10px rgba(60,40,20,.08);
}
html[data-theme="nacht"] .mobile-nav {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -2px 10px rgba(0,0,0,.40);
}
html[data-theme="pergament"] .mobile-nav-btn,
html[data-theme="nacht"]     .mobile-nav-btn,
html[data-theme="modern"]    .mobile-nav-btn {
  color: var(--ink-mute);
  font-family: var(--font-sans);
}
html[data-theme="pergament"] .mobile-nav-btn.active,
html[data-theme="modern"]    .mobile-nav-btn.active {
  color: var(--accent);
}
html[data-theme="nacht"] .mobile-nav-btn.active {
  color: var(--accent);
}

/* ---- Reader-toolbar icons: keep contrast in all themes ---- */
html[data-theme="pergament"] .reader-toolbar .icon-btn,
html[data-theme="nacht"]     .reader-toolbar .icon-btn,
html[data-theme="modern"]    .reader-toolbar .icon-btn {
  color: var(--ink-2);
  opacity: 1;
}
html[data-theme="pergament"] .reader-toolbar .icon-btn:hover,
html[data-theme="nacht"]     .reader-toolbar .icon-btn:hover,
html[data-theme="modern"]    .reader-toolbar .icon-btn:hover {
  color: var(--accent);
  background: var(--paper);
}

/* ---- Quick-bar (Schnellwahl): horizontal scroll on small screens ---- */
@media (max-width: 768px) {
  html[data-theme="pergament"] .quick-bar-inner,
  html[data-theme="nacht"]     .quick-bar-inner,
  html[data-theme="modern"]    .quick-bar-inner {
    overflow-x: auto;
    scrollbar-width: none;        /* Firefox */
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-right: 80px;          /* room for donate-topbar overlap */
  }
  html[data-theme="pergament"] .quick-bar-inner::-webkit-scrollbar,
  html[data-theme="nacht"]     .quick-bar-inner::-webkit-scrollbar,
  html[data-theme="modern"]    .quick-bar-inner::-webkit-scrollbar { display: none; }
  html[data-theme="pergament"] .quick-chip,
  html[data-theme="nacht"]     .quick-chip,
  html[data-theme="modern"]    .quick-chip { flex: 0 0 auto; }
}

/* ---- Reader bottom-padding: never let banners / FABs clip the last verse ---- */
/* Desktop: room for install-banner (~72px) + BMC widget (~64px) + breathing room */
#reader-content, #reader-area, .reader-content, .reader-area {
  padding-bottom: 180px !important;
  scroll-padding-bottom: 180px;
}
@media (max-width: 768px) {
  #reader-content, #reader-area, .reader-content, .reader-area {
    /* mobile: bottom-nav (~60px) + install banner (~76px) + safe-area + 32px gap */
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Reader chrome is tighter on phones — give the prose more room */
  html[data-theme="pergament"] .chapter-opening,
  html[data-theme="nacht"]     .chapter-opening,
  html[data-theme="modern"]    .chapter-opening {
    padding: 1rem 1rem 0.5rem !important;
  }
  html[data-theme="pergament"] .verses-container,
  html[data-theme="nacht"]     .verses-container,
  html[data-theme="modern"]    .verses-container {
    padding: 0 1.05rem !important;
  }
}

/* ---- Skip link visible on focus, theme-aware ---- */
html[data-theme="pergament"] .skip-link:focus,
html[data-theme="nacht"]     .skip-link:focus,
html[data-theme="modern"]    .skip-link:focus {
  background: var(--ink);
  color: var(--paper);
}

/* ---- Focus rings consistent + visible ---- */
html[data-theme="pergament"] *:focus-visible,
html[data-theme="nacht"]     *:focus-visible,
html[data-theme="modern"]    *:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Toast in editorial style ---- */
html[data-theme="pergament"] .toast,
html[data-theme="nacht"]     .toast,
html[data-theme="modern"]    .toast {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-lg);
}

/* ---- Offline indicator subtle ---- */
html[data-theme="pergament"] .offline-indicator,
html[data-theme="nacht"]     .offline-indicator,
html[data-theme="modern"]    .offline-indicator {
  background: var(--paper);
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  font-family: var(--font-sans);
}

/* ---- Verse "resume" flash: shown briefly when we restored a saved position ---- */
@keyframes verseResumeFlash {
  0%   { background: var(--accent-light, rgba(142,42,27,0.18)); }
  100% { background: transparent; }
}
.verse-row.verse-resumed {
  animation: verseResumeFlash 1.4s ease-out;
  border-radius: 6px;
}

/* ---- Search-hit highlight inside verse text (auto-removes after 6s) ---- */
mark.search-hit {
  background: var(--hl-yellow, #F2DD7E);
  color: var(--ink, #1F1A12);
  padding: 0 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--accent, #8E2A1B) inset;
  animation: searchHitPulse 1s ease-out 3;
}
@keyframes searchHitPulse {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1.0); }
}

/* ---- Editorial Share-Image Themes ----
   Match the in-app palettes so a share-image visibly reflects the reader's vibe. */
.share-image-canvas[data-bg="pergament"] {
  background: linear-gradient(180deg, #F6EFD9 0%, #ECE2C8 100%);
  color: #1F1A12;
}
.share-image-canvas[data-bg="pergament"] .share-verse-ref { color: #8E2A1B; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.share-image-canvas[data-bg="pergament"] .share-watermark { color: #7A6E55; }
.share-image-canvas[data-bg="sepia"] {
  background: linear-gradient(180deg, #F1E2BE 0%, #E5D4B1 100%);
  color: #2A1B0E;
}
.share-image-canvas[data-bg="sepia"] .share-verse-ref { color: #A04A1E; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.share-image-canvas[data-bg="sepia"] .share-watermark { color: #8C6D44; }
.share-image-canvas[data-bg="nacht"] {
  background: linear-gradient(180deg, #15110A 0%, #0E0B06 100%);
  color: #ECE0C4;
}
.share-image-canvas[data-bg="nacht"] .share-verse-ref { color: #D6A14B; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.share-image-canvas[data-bg="nacht"] .share-watermark { color: #9A8B6B; }
.share-image-canvas[data-bg="tinte"] {
  background: linear-gradient(180deg, #111729 0%, #0A0F1E 100%);
  color: #E7DDC4;
}
.share-image-canvas[data-bg="tinte"] .share-verse-ref { color: #C28749; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.share-image-canvas[data-bg="tinte"] .share-watermark { color: #8B8369; }
.share-image-canvas[data-bg="modern"] {
  background: #FFFFFF;
  color: #0E0E0E;
}
.share-image-canvas[data-bg="modern"] .share-verse-ref { color: #2A4FB7; font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.share-image-canvas[data-bg="modern"] .share-watermark { color: #6B6B66; }

/* ---- Aspect-ratio formats. Preview keeps max-width 400 from styles.css; we
   set aspect-ratio so html2canvas captures the right shape. */
.share-image-canvas[data-format="square"]    { aspect-ratio: 1 / 1;  min-height: 0; }
.share-image-canvas[data-format="story"]     { aspect-ratio: 9 / 16; min-height: 0; max-width: 280px; }
.share-image-canvas[data-format="portrait"]  { aspect-ratio: 4 / 5;  min-height: 0; }
.share-image-canvas[data-format="landscape"] { aspect-ratio: 16 / 9; min-height: 0; }

/* ---- Custom user-set background colour / image / text colours ---- */
.share-image-canvas.custom-bg-color {
  background: var(--custom-bg-color, #F6EFD9) !important;
}
.share-image-canvas.custom-bg-image {
  /* Layered: dark overlay on top of the user's image so text stays readable */
  background-image:
    linear-gradient(var(--custom-bg-overlay, rgba(0,0,0,0)), var(--custom-bg-overlay, rgba(0,0,0,0))),
    var(--custom-bg-image, none) !important;
  background-size: auto, var(--custom-bg-size, cover) !important;
  background-position: center, var(--custom-bg-position, 50% 50%) !important;
  background-repeat: no-repeat, no-repeat !important;
}
.share-image-canvas.custom-text-color .share-verse-text { color: var(--custom-text-color, inherit) !important; }
.share-image-canvas.custom-text-color .share-verse-ref  { color: var(--custom-ref-color, inherit) !important; }
.share-image-canvas.custom-text-color .share-watermark  { color: var(--custom-text-color, inherit) !important; opacity: 0.7; }

/* ---- Custom editor block ---- */
.share-custom-editor {
  margin-top: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rule, #D9CCA6);
  border-radius: 10px;
  background: var(--paper-2, rgba(255,255,255,.4));
}
.share-custom-editor summary {
  cursor: pointer;
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1F1A12);
  list-style: none;
  user-select: none;
}
.share-custom-editor summary::-webkit-details-marker { display: none; }
.share-custom-editor summary::after { content: ' ▾'; opacity: .6; }
.share-custom-editor[open] summary::after { content: ' ▴'; }
.share-custom-grid { margin-top: .65rem; display: grid; gap: .4rem; }
.share-custom-editor .form-group.inline {
  display: flex; align-items: center; gap: .5rem; margin: 0;
}
.share-custom-editor .form-group.inline > label {
  flex: 0 0 130px; font-size: 12px; color: var(--ink-mute, #7A6E55);
}
.share-custom-editor input.color-picker {
  width: 38px; height: 28px; padding: 0; border: 1px solid var(--rule, #D9CCA6); border-radius: 6px; background: transparent;
}
.share-custom-editor input[type="range"] { flex: 1; }
.share-custom-editor .btn-xs {
  padding: 4px 10px; font-size: 11px; border-radius: 5px;
  background: var(--paper, #F6EFD9); border: 1px solid var(--rule, #D9CCA6); color: var(--ink, #1F1A12);
  cursor: pointer;
}
.share-custom-editor .btn-xs:hover { border-color: var(--ink-mute, #7A6E55); }
.share-image-uploader {
  margin: .65rem 0;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.share-image-uploader .muted { font-size: 11px; color: var(--ink-mute, #7A6E55); }
.share-image-controls { margin-top: .35rem; display: grid; gap: .35rem; }
.share-image-controls output { font-size: 11px; min-width: 38px; text-align: right; color: var(--ink-mute, #7A6E55); }

/* ---- Search-result "jump-highlight" on the whole verse-row ---- */
@keyframes jumpHighlightFlash {
  0%   { background: var(--accent-light, rgba(142,42,27,0.22)); box-shadow: 0 0 0 2px var(--accent, #8E2A1B); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.verse-row.jump-highlight {
  animation: jumpHighlightFlash 2.4s ease-out;
  border-radius: 6px;
}

/* ---- Share-Targets popup menu ---- */
.share-targets-menu {
  background: var(--paper, #F6EFD9);
  border: 1px solid var(--rule, #D9CCA6);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,.18));
  padding: 6px;
  min-width: 220px;
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  color: var(--ink, #1F1A12);
  animation: shareMenuIn .15s ease-out;
}
@keyframes shareMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.share-target-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink, #1F1A12);
  font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.share-target-btn:hover, .share-target-btn:focus-visible {
  background: var(--paper-2, #EFE6CC);
  border-color: var(--rule, #D9CCA6);
  outline: none;
}
.share-target-icon { font-size: 16px; width: 22px; text-align: center; }

/* ---- Highlighted verses: text must stay readable in every theme.
       JS sets background + auto-contrast color on .verse-text. Make sure
       sibling decorations (verse-num, drop cap, refs) also pick a contrasting
       color via inheritance, not the dark theme's default --ink. */
.verse-row[data-highlight] .verse-text { color: inherit !important; }
.verse-row[data-highlight] .verse-num,
.verse-row[data-highlight] .drop-cap,
.verse-row[data-highlight] .verse-ref { color: currentColor !important; opacity: 0.85; }
.verse-row[data-highlight] {
  /* When a row is highlighted, give the eye a hard edge against the page */
  border-radius: 6px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}