/* ============================================================
   SWRV Kingdom Genesis — Theme System (5 premium themes)
   ============================================================ */

/* Global fallback: --bg-1 was used in several panels but never explicitly
   defined per theme. Falling back to --bg gives every panel a real solid
   color in every theme (fixes the transparent-Layers/sheet contrast bug). */
:root{ --bg-1: var(--bg); }

/* VINTAGE PAPER (default) — aged paper, sepia, gold accents */
:root,
[data-theme="vintage"]{
  --bg:#e8dcc0;--bg-2:#ddcfae;--bg-3:#d1c098;
  --fg:#3a2810;--fg-mute:#5c4628;--fg-dim:#7c6648;
  --gold:#8b6f2a;--gold-bright:#a88840;
  --red-letter:#a01a10;
  --crimson:#8b3a2e;--emerald:#3a6b3a;--azure:#3a5a7a;
  --violet:#5a4080;--teal:#2e6661;
  --line:#a89668;--kingdom-bg:rgba(139,111,42,0.15);
  --warning:#8b3a2e;--warning-bg:rgba(139,58,46,0.1);
  --enoch:#4a6a96;--enoch-bg:rgba(74,106,150,0.1);
  --josephus:#8b6f2a;--josephus-bg:rgba(139,111,42,0.1);
  --cultural:#3a6b3a;--cultural-bg:rgba(58,107,58,0.1);
  --people:#8b4a2e;--people-bg:rgba(139,74,46,0.1);
  --strongs:#5a4080;--strongs-bg:rgba(90,64,128,0.08);
  --font-body:'Crimson Pro','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-display:'Cormorant Garamond','Crimson Pro',Georgia,serif;
}
body[data-theme="vintage"]{
  background:#e8dcc0
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.28 0 0 0 0 0.12 0 0 0 0.07 0'/></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
  background-blend-mode:multiply;
}

/* LUXE — onyx with gold and marble */
[data-theme="luxe"]{
  --bg:#0a0908;--bg-2:#16130f;--bg-3:#221d17;
  --fg:#e8d9b0;--fg-mute:#b8a778;--fg-dim:#897a50;
  --gold:#d4af37;--gold-bright:#ffd770;
  --red-letter:#e8574a;
  --crimson:#9b2335;--emerald:#1b5e20;--azure:#1a3a5e;
  --violet:#4b1d6e;--teal:#1a4d4a;
  --line:#3a3328;--kingdom-bg:rgba(212,175,55,0.1);
  --warning:#9b2335;--warning-bg:rgba(155,35,53,0.1);
  --enoch:#7a8eac;--enoch-bg:rgba(122,142,172,0.1);
  --josephus:#d4af37;--josephus-bg:rgba(212,175,55,0.08);
  --cultural:#3a8e4d;--cultural-bg:rgba(58,142,77,0.08);
  --people:#a06840;--people-bg:rgba(160,104,64,0.1);
  --strongs:#9d72c4;--strongs-bg:rgba(157,114,196,0.08);
  --font-body:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --font-display:'Playfair Display','Cormorant Garamond',Georgia,serif;
}
body[data-theme="luxe"]{
  background:radial-gradient(ellipse at top,#1a1410 0%,#0a0908 70%);
}
[data-theme="luxe"] .brand-title,
[data-theme="luxe"] .chapter-title{
  background:linear-gradient(180deg,#ffd770 0%,#d4af37 60%,#8b6f1e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* CYBERPUNK — neon, futuristic */
[data-theme="cyberpunk"]{
  --bg:#05050a;--bg-2:#0a0a14;--bg-3:#14141f;
  --fg:#e0fbff;--fg-mute:#88c0d0;--fg-dim:#5a8a96;
  --gold:#00fff0;--gold-bright:#7afff7;
  --red-letter:#ff5c4a;
  --crimson:#ff2a6d;--emerald:#39ff14;--azure:#00d4ff;
  --violet:#bd00ff;--teal:#00fff0;
  --line:#1a2a3a;--kingdom-bg:rgba(0,255,240,0.06);
  --warning:#ff2a6d;--warning-bg:rgba(255,42,109,0.08);
  --enoch:#bd00ff;--enoch-bg:rgba(189,0,255,0.08);
  --josephus:#00fff0;--josephus-bg:rgba(0,255,240,0.06);
  --cultural:#39ff14;--cultural-bg:rgba(57,255,20,0.06);
  --people:#ff2a6d;--people-bg:rgba(255,42,109,0.08);
  --strongs:#bd00ff;--strongs-bg:rgba(189,0,255,0.06);
  --font-body:'Rajdhani','Inter','Segoe UI',sans-serif;
  --font-display:'Orbitron','Rajdhani',sans-serif;
}
body[data-theme="cyberpunk"]{
  background:linear-gradient(180deg,#05050a 0%,#0a0a14 100%);
}
[data-theme="cyberpunk"] .brand-title,
[data-theme="cyberpunk"] .chapter-title{
  text-shadow:0 0 12px rgba(0,255,240,0.7);letter-spacing:0.05em;
}

/* EARTH — soft sage, beige, wood */
[data-theme="earth"]{
  --bg:#e8e4d9;--bg-2:#dad5c5;--bg-3:#ccc4ae;
  --fg:#2d2a22;--fg-mute:#544e3e;--fg-dim:#766e58;
  --gold:#8a7138;--gold-bright:#a88a48;
  --red-letter:#9e1f14;
  --crimson:#7a3a2e;--emerald:#4a6e3a;--azure:#406880;
  --violet:#5e4868;--teal:#3a6862;
  --line:#a89e82;--kingdom-bg:rgba(138,113,56,0.12);
  --warning:#7a3a2e;--warning-bg:rgba(122,58,46,0.08);
  --enoch:#506a86;--enoch-bg:rgba(80,106,134,0.1);
  --josephus:#8a7138;--josephus-bg:rgba(138,113,56,0.1);
  --cultural:#4a6e3a;--cultural-bg:rgba(74,110,58,0.1);
  --people:#7a4a2e;--people-bg:rgba(122,74,46,0.1);
  --strongs:#5e4868;--strongs-bg:rgba(94,72,104,0.08);
  --font-body:'Lora','Source Serif Pro',Georgia,serif;
  --font-display:'Lora','Cormorant Garamond',Georgia,serif;
}
body[data-theme="earth"]{
  background:linear-gradient(180deg,#e8e4d9 0%,#dad5c5 100%);
}

/* SONIC — jazz, navy/violet, brass */
[data-theme="sonic"]{
  --bg:#0d0a1a;--bg-2:#161028;--bg-3:#221836;
  --fg:#f0e6ff;--fg-mute:#b8a8d8;--fg-dim:#867a98;
  --gold:#d4a14a;--gold-bright:#f0bf6c;
  --red-letter:#ff6455;
  --crimson:#d4365c;--emerald:#3a9c7a;--azure:#5c8acc;
  --violet:#a86cd8;--teal:#4ac2b6;
  --line:#3a2e54;--kingdom-bg:rgba(212,161,74,0.12);
  --warning:#d4365c;--warning-bg:rgba(212,54,92,0.1);
  --enoch:#5c8acc;--enoch-bg:rgba(92,138,204,0.1);
  --josephus:#d4a14a;--josephus-bg:rgba(212,161,74,0.1);
  --cultural:#3a9c7a;--cultural-bg:rgba(58,156,122,0.1);
  --people:#d4365c;--people-bg:rgba(212,54,92,0.1);
  --strongs:#a86cd8;--strongs-bg:rgba(168,108,216,0.1);
  --font-body:'Cinzel','Cormorant Garamond',Georgia,serif;
  --font-display:'Cinzel','Playfair Display',Georgia,serif;
}
body[data-theme="sonic"]{
  background:radial-gradient(ellipse at top right,#221836 0%,#0d0a1a 70%);
}
[data-theme="sonic"] .brand-title{
  font-style:italic;letter-spacing:0.08em;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body, 'Iowan Old Style','Palatino Linotype',Georgia,serif);line-height:1.65;font-size:16px;min-height:100vh;overflow-x:hidden}
.sticky-nav{position:sticky;top:0;z-index:100}
header.app-header{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--gold),#8a6d2e);color:#0e0a06;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:0.5px;font-family:-apple-system,sans-serif}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:0.3px;font-family:var(--font-display,inherit)}
.brand-sub{font-size:11px;color:var(--fg-dim);letter-spacing:0.5px;text-transform:uppercase}
.header-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.icon-btn{background:var(--bg-3);border:1px solid var(--line);color:var(--fg-mute);padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;transition:all 0.2s}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.icon-btn.active{color:#0e0a06;background:var(--gold);border-color:var(--gold)}
.mode-toggle{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.mode-toggle button{background:var(--bg-3);border:none;color:var(--fg-mute);padding:8px 12px;cursor:pointer;font-size:12px;font-family:-apple-system,sans-serif;font-weight:600;letter-spacing:0.3px;border-right:1px solid var(--line)}
.mode-toggle button:last-child{border-right:none}
.mode-toggle button.active{background:var(--gold);color:#0e0a06}
.protocol-bar{background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 18px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.protocol-bar::-webkit-scrollbar{display:none}
.rule-pill{background:var(--bg-3);border:1px solid var(--line);color:var(--fg-dim);padding:4px 10px;border-radius:12px;font-size:10px;font-family:-apple-system,sans-serif;letter-spacing:0.3px;white-space:nowrap;font-weight:600}
.layout{display:block;min-height:calc(100vh - 130px)}
.sidebar{width:220px;background:var(--bg-2);border-right:1px solid var(--line);padding:14px 0;overflow-y:auto;max-height:calc(100vh - 130px);position:sticky;top:130px}
.sidebar h3{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:1.2px;padding:0 18px 8px;font-family:-apple-system,sans-serif;font-weight:700}
.chapter-nav{display:flex;flex-direction:column}
.ch-link{padding:8px 18px;cursor:pointer;color:var(--fg-mute);font-size:13px;border-left:3px solid transparent;transition:all 0.15s}
.ch-link:hover{background:var(--bg-3);color:var(--gold)}
.ch-link.active{color:var(--gold);border-left-color:var(--gold);background:var(--kingdom-bg);font-weight:600}
.ch-num{font-weight:700;margin-right:6px}
.ch-meta{display:inline-block;color:var(--fg-dim);font-size:10px;margin-left:6px;font-family:-apple-system,sans-serif}
.main{flex:1;padding:12px 28px 80px;max-width:980px;margin:0 auto}
.chapter-title{color:var(--gold);font-size:26px;font-family:var(--font-display,inherit);margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:10px}
.verse{margin-bottom:28px;padding:14px 0;border-bottom:1px dotted var(--bg-3)}
.verse-num{display:inline-block;color:var(--gold);font-weight:700;margin-right:10px;font-size:14px;vertical-align:top;min-width:26px;font-family:-apple-system,sans-serif}
.verse-text{display:inline;font-size:var(--bible-text-size,17px);line-height:var(--bible-line-height,1.72);color:var(--fg);-webkit-user-select:text;user-select:text;cursor:text;}
/* Red Letter — Jesus's direct words */
.verse-text.red-letter{ color:var(--red-letter, #a01a10); }
.verse-text.red-letter .definable{ border-bottom-color:var(--red-letter, #a01a10); }
.verse-text.red-letter .definable:hover{ color:var(--red-letter, #a01a10); filter:brightness(1.3); }
.definable{cursor:pointer;border-bottom:1px dotted var(--gold);transition:color 0.15s}
.definable:hover{color:var(--gold)}
.person-name{cursor:pointer;color:var(--people);font-weight:600;border-bottom:1px dotted var(--people);transition:all 0.15s}
.person-name:hover{background:var(--people-bg)}
.numbering-note{margin:8px 0 0 36px;padding:8px 12px;background:var(--bg-3);border-left:3px solid var(--azure);border-radius:4px;font-size:12px;color:var(--fg-dim);font-style:italic}
.sources{margin-top:12px;margin-left:36px;display:flex;flex-wrap:wrap;gap:6px}
.source-tab{background:var(--bg-3);border:1px solid var(--line);color:var(--fg-dim);padding:4px 10px;border-radius:4px;font-size:11px;font-family:-apple-system,sans-serif;font-weight:600;cursor:pointer;transition:all 0.15s;letter-spacing:0.3px}
.src-cat-badge{display:inline-block;margin-right:4px;font-size:10px;opacity:0.85}
.event-card{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;padding:12px 14px;margin:10px 0}
.event-card-title{color:var(--gold);font-weight:700;font-size:14px;margin-bottom:4px;letter-spacing:0.3px}
.event-card-meta{font-size:11px;color:var(--fg-dim);margin-bottom:8px}
.event-card-date{display:inline-block;padding:2px 8px;background:var(--bg-3);border-radius:3px;margin-right:6px;color:var(--gold)}
.confidence-pill{display:inline-block;padding:1px 7px;border-radius:3px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px}
.confidence-certain{background:rgba(5,150,105,0.15);color:#059669;border:1px solid #059669}
.confidence-approximate{background:rgba(8,145,178,0.15);color:#0891B2;border:1px solid #0891B2}
.confidence-debated{background:rgba(217,119,6,0.15);color:#D97706;border:1px solid #D97706}
.confidence-traditional{background:rgba(126,34,206,0.15);color:#7E22CE;border:1px solid #7E22CE}
.event-themes{margin-top:6px}
.event-theme{display:inline-block;padding:2px 7px;margin-right:4px;margin-top:3px;background:var(--bg-3);border-radius:3px;font-size:10px;color:var(--fg-dim)}
.audit-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0}
.audit-stat{background:var(--bg-2);border:1px solid var(--line);padding:10px 12px;border-radius:6px}
.audit-stat-num{color:var(--gold);font-size:22px;font-weight:700;font-family:-apple-system,sans-serif}
.audit-stat-label{color:var(--fg-dim);font-size:11px;text-transform:uppercase;letter-spacing:0.4px;margin-top:2px}
.audit-stat-check{color:#059669;font-size:14px;margin-right:6px}
.audit-stat-warn{color:#D97706}
.strongs-word-btn{display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:3px 9px;cursor:pointer;font-family:inherit;color:var(--fg);transition:all 0.15s}
.strongs-word-btn:hover{background:var(--gold);color:#0e0a06;border-color:var(--gold)}
.strongs-roots-panel{margin-top:8px}
.strongs-roots-panel summary{outline:none;list-style:none}
.strongs-roots-panel summary::-webkit-details-marker{display:none}
.strongs-roots-panel summary:hover{opacity:0.8}
.source-tab:hover{color:var(--gold)}
.source-tab.active{color:#0e0a06;background:var(--gold);border-color:var(--gold)}
.source-tab.amp.active{color:#fff;background:var(--violet);border-color:var(--violet)}
.source-content{margin-top:8px;margin-left:36px;padding:10px 14px;background:var(--bg-2);border-left:3px solid var(--gold);border-radius:4px;font-size:15px;font-style:italic;color:var(--fg-mute)}
.source-content.amp{border-left-color:var(--violet);font-style:normal}
.source-content.greek{border-left-color:var(--emerald);font-family:'Times New Roman',serif;font-style:normal}
.source-content.hebrew{border-left-color:var(--azure);direction:rtl;text-align:right;font-family:'Times New Roman',serif;font-style:normal;font-size:18px;line-height:2}
.kingdom-lens{margin:14px 0 8px 36px;padding:14px 16px;background:var(--kingdom-bg);border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:6px}
.kingdom-lens-label{display:inline-block;background:var(--gold);color:#0e0a06;font-size:10px;font-weight:800;padding:2px 8px;border-radius:3px;letter-spacing:1px;margin-bottom:6px;font-family:-apple-system,sans-serif}
.kingdom-lens-text{color:var(--fg);font-size:14px;line-height:1.6;font-style:italic}
.cultural-panel{margin:10px 0 8px 36px;padding:14px 16px;background:var(--cultural-bg);border:1px solid var(--cultural);border-left:4px solid var(--cultural);border-radius:6px}
.cultural-label{display:inline-block;background:var(--cultural);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:3px;letter-spacing:1px;margin-bottom:6px;font-family:-apple-system,sans-serif}
.cultural-title{color:var(--cultural);font-weight:700;font-size:14px;margin-bottom:6px}
.cultural-detail{color:var(--fg);font-size:13px;line-height:1.6;margin-bottom:6px}
.cultural-source{color:var(--fg-dim);font-size:11px;font-style:italic}
.translation-flag{margin:8px 0 8px 36px;padding:10px 14px;background:var(--warning-bg);border-left:3px solid var(--warning);border-radius:4px;font-size:13px}
.flag-label{display:inline-block;background:var(--warning);color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:2px;letter-spacing:0.8px;margin-bottom:5px;font-family:-apple-system,sans-serif}
.flag-title{color:var(--warning);font-weight:700;margin-bottom:4px;font-size:13px}
.flag-note{color:var(--fg-mute)}
.crossrefs{margin:8px 0 0 36px;display:flex;flex-wrap:wrap;gap:6px}
.xref-pill{background:var(--enoch-bg);border:1px solid var(--enoch);color:var(--enoch);padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;font-family:-apple-system,sans-serif;transition:all 0.15s}
.xref-pill:hover{background:var(--enoch);color:#0e0a06}
.xref-pill.josephus{color:var(--josephus);border-color:var(--josephus);background:var(--josephus-bg)}
.xref-pill.josephus:hover{background:var(--josephus);color:#0e0a06}
.xref-content{margin:6px 0 0 36px;padding:10px 14px;background:var(--bg-2);border-left:3px solid var(--enoch);border-radius:4px;font-size:13px;color:var(--fg-mute);display:none}
.xref-content.josephus{border-left-color:var(--josephus)}
.xref-content.show{display:block}
.verse-mode-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px;padding:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px}
.nav-btn{background:var(--gold);color:#0e0a06;border:none;padding:10px 18px;border-radius:6px;font-weight:700;font-family:-apple-system,sans-serif;cursor:pointer;font-size:14px;letter-spacing:0.3px;transition:all 0.15s;flex-shrink:0}
.nav-btn:hover:not(:disabled){background:var(--gold-bright);transform:translateY(-1px)}
.nav-btn:disabled{background:var(--bg-3);color:var(--fg-dim);cursor:not-allowed}
.verse-counter{flex:1;text-align:center;color:var(--gold);font-weight:600;font-size:13px;font-family:-apple-system,sans-serif}
.verse-counter-num{font-size:18px;display:block;margin-bottom:2px}
.verse-counter-meta{color:var(--fg-dim);font-size:11px;font-weight:400;letter-spacing:0.5px;text-transform:uppercase}
.verse-mode .verse{padding:0;border-bottom:none;margin-bottom:0}
.verse-mode .verse-text{font-size:var(--bible-text-size)!important;line-height:var(--bible-line-height)!important}
.verse-mode .verse-num{font-size:18px;min-width:36px}
.verse-jump{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.verse-jump select{background:var(--bg-3);border:1px solid var(--line);color:var(--fg);padding:6px 10px;border-radius:4px;font-family:inherit;font-size:13px}
.def-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-2);border:2px solid var(--gold);border-radius:10px;padding:22px;max-width:620px;width:92%;max-height:85vh;overflow-y:auto;z-index:1000;display:none;box-shadow:0 20px 60px rgba(0,0,0,0.7)}
.def-popup.show{display:block}
.def-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:999;display:none}
.def-overlay.show{display:block}
.def-word{color:var(--gold);font-size:22px;font-weight:700;margin-bottom:4px}
.def-hebrew{font-size:28px;color:var(--azure);font-family:'Times New Roman',serif;margin-bottom:6px;direction:rtl}
.def-translit{font-style:italic;color:var(--fg-mute);margin-bottom:12px;font-size:14px}
.def-strongs{display:inline-block;background:var(--bg-3);border:1px solid var(--line);color:var(--gold);padding:2px 8px;border-radius:3px;font-size:11px;font-family:-apple-system,sans-serif;margin-bottom:14px;cursor:pointer}
.def-strongs:hover{border-color:var(--gold)}
.def-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.def-section-label{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:0.8px;margin-bottom:5px;font-family:-apple-system,sans-serif}
.def-section-text{color:var(--fg);font-size:14px;line-height:1.6}
.def-list{margin-left:18px;color:var(--fg);font-size:13px;line-height:1.7}
.def-list li{margin-bottom:4px}
.def-section.kingdom-section{background:var(--kingdom-bg);border-radius:4px;padding:10px;margin-left:-4px;margin-right:-4px;border-top:none;padding-top:8px}
.def-section.warning-section{background:var(--warning-bg);border-radius:4px;padding:10px;margin-left:-4px;margin-right:-4px;border-top:none;padding-top:8px}
.def-section.warning-section .def-section-label{color:var(--warning)}
.def-section.strongs-section{background:var(--strongs-bg);border-radius:4px;padding:10px;margin-left:-4px;margin-right:-4px;border-top:none;padding-top:8px;border-left:3px solid var(--strongs)}
.def-section.strongs-section .def-section-label{color:var(--strongs)}
.def-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--fg-dim);font-size:22px;cursor:pointer;line-height:1;font-family:inherit}
.def-close:hover{color:var(--gold)}
.def-popup.people{border-color:var(--people)}
.def-popup.people .def-word{color:var(--people)}
.def-popup.people .def-section-label{color:var(--people)}
.def-popup.strongs{border-color:var(--strongs)}
.def-popup.strongs .def-word{color:var(--strongs)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;display:none;padding:20px;overflow:hidden;touch-action:none;-webkit-overflow-scrolling:none;overscroll-behavior:contain}
.modal.show{display:flex;align-items:flex-start;justify-content:center}
.modal-inner{background:var(--bg-2);border:2px solid var(--gold);border-radius:10px;padding:24px 28px;max-width:760px;width:100%;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.modal-title{color:var(--gold);font-size:22px;font-weight:700;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.modal-body{font-size:14px;line-height:1.7;color:var(--fg-mute)}
.modal-body h4{color:var(--gold);margin-top:16px;margin-bottom:8px;font-size:14px;font-family:-apple-system,sans-serif}
.modal-body p{margin-bottom:12px}
.modal-body table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12px}
.modal-body th{background:var(--bg-3);color:var(--gold);padding:6px 10px;text-align:left;font-family:-apple-system,sans-serif}
.modal-body td{padding:5px 10px;border-bottom:1px solid var(--line)}
.people-card{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--people);border-radius:6px;padding:14px;margin-bottom:12px;cursor:pointer;transition:all 0.15s}
.people-card:hover{border-left-color:var(--gold);transform:translateX(2px)}
.people-card-name{color:var(--people);font-weight:700;font-size:16px;margin-bottom:4px}
.people-card-region{color:var(--fg-dim);font-size:12px;font-style:italic}
.strongs-search{display:flex;gap:8px;margin-bottom:14px}
.strongs-search input{flex:1;background:var(--bg-3);border:1px solid var(--line);color:var(--fg);padding:10px 14px;border-radius:6px;font-family:inherit;font-size:14px}
.strongs-search input:focus{outline:none;border-color:var(--strongs)}
.strongs-search button{background:var(--strongs);color:#fff;border:none;padding:10px 18px;border-radius:6px;font-family:-apple-system,sans-serif;font-weight:700;cursor:pointer;font-size:13px}
.strongs-result{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--strongs);border-radius:6px;padding:14px;margin-bottom:10px}
.strongs-result-id{color:var(--strongs);font-weight:700;font-size:12px;font-family:-apple-system,sans-serif;letter-spacing:1px}
.strongs-result-lemma{color:var(--azure);font-size:22px;font-family:'Times New Roman',serif;margin:4px 0;direction:rtl}
.strongs-result-xlit{color:var(--fg-mute);font-style:italic;font-size:13px;margin-bottom:6px}
.strongs-result-def{color:var(--fg);font-size:13px;line-height:1.6}
.strongs-result-kjv{color:var(--fg-dim);font-size:12px;margin-top:6px;font-style:italic}
.modal-close{background:var(--bg-3);border:1px solid var(--line);color:var(--fg);padding:8px 16px;border-radius:6px;cursor:pointer;margin-top:14px;font-family:inherit}
.modal-close:hover{color:var(--gold);border-color:var(--gold)}
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:22px 24px;color:var(--fg-dim);font-size:13px}
.footer-section{margin-bottom:14px}
.footer-section h4{color:var(--gold);margin-bottom:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-family:-apple-system,sans-serif}
.rules-list,.library-list{font-size:12px;line-height:1.8;color:var(--fg-mute)}
.rules-list b{color:var(--gold-bright);font-family:-apple-system,sans-serif}
.player{position:fixed;bottom:20px;right:20px;background:var(--bg-2);border:1px solid var(--line);border-radius:50px;padding:8px 14px;display:flex;align-items:center;gap:10px;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.player-btn{background:var(--gold);color:#0e0a06;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit}
.player-track{font-size:11px;color:var(--fg-mute);font-family:-apple-system,sans-serif;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.layout{flex-direction:column}.sidebar{width:100%;max-height:none;position:relative;top:0;padding:8px 0}.chapter-nav{flex-direction:row;flex-wrap:wrap;padding:0 12px;gap:4px}.ch-link{padding:6px 10px;border:1px solid var(--line);border-radius:4px;border-left-width:1px}.ch-link.active{border-left-width:1px}.main{padding:8px 14px 100px}.chapter-title{font-size:22px}.verse-text{font-size:16px}.verse-mode .verse-text{font-size:18px}.sources,.kingdom-lens,.cultural-panel,.translation-flag,.crossrefs,.xref-content,.source-content,.numbering-note{margin-left:0}.player{right:12px;bottom:12px}.player-track{max-width:80px}.brand-text{display:none}.header-actions .icon-btn{padding:6px 10px;font-size:12px}}

.ch-picker-bar{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.ch-select{flex:1;max-width:420px;padding:8px 12px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;cursor:pointer}
.ch-select:focus{outline:none;border-color:var(--gold)}
.ch-nav-btn{padding:8px 14px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:14px;font-family:inherit;transition:all 0.15s}
.ch-nav-btn:hover{background:var(--bg-3);border-color:var(--gold);color:var(--gold)}
.ch-reload-btn{font-size:13px;padding:5px 9px;min-width:unset;border-color:rgba(212,175,55,0.35);color:rgba(212,175,55,0.7);line-height:1;}
.ch-reload-btn:hover{color:var(--gold);border-color:var(--gold);}
.ch-reload-btn.spinning{animation:ch-spin 0.7s linear;}
@keyframes ch-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (max-width:600px){.ch-picker-bar{padding:8px 12px}.ch-select{max-width:none}}

/* Genesis 1-4 deep build UI */
.plot-panel{background:var(--strongs-bg);border-left:4px solid var(--gold);padding:12px 16px;border-radius:6px;margin:14px 0;font-size:14px;line-height:1.6}
.plot-panel h4{color:var(--gold);margin:0 0 8px 0;font-size:14px;letter-spacing:0.05em;text-transform:uppercase;font-weight:700}
.plot-panel .plot-plain{color:var(--fg);margin:0 0 10px 0}
.plot-panel .plot-why{color:var(--fg-mute);font-style:italic;padding:8px 12px;background:var(--kingdom-bg);border-radius:4px;border-left:2px solid var(--gold)}
.plot-panel .plot-why::before{content:"Why it matters: ";font-weight:700;color:var(--gold);font-style:normal}

.heartbeat-callout{background:linear-gradient(135deg,var(--kingdom-bg),transparent);border:1px solid var(--gold);border-radius:8px;padding:12px 14px;margin:14px 0}
.heartbeat-callout h4{color:var(--gold);margin:0 0 8px 0;font-size:13px;letter-spacing:0.05em;font-weight:700}
.heartbeat-callout .heartbeat-body{color:var(--fg);font-size:14px;line-height:1.65;margin:0}
.heartbeat-callout .heartbeat-rule{color:var(--fg-dim);font-size:11px;margin-top:8px;font-style:italic;border-top:1px dashed var(--line);padding-top:6px}

.culture-box-deep{background:var(--cultural-bg);border-left:4px solid var(--cultural);padding:12px 16px;margin:14px 0;border-radius:6px}
.culture-box-deep h4{color:var(--cultural);margin:0 0 8px 0;font-size:13px;letter-spacing:0.05em;text-transform:uppercase}
.culture-box-deep .culture-body{color:var(--fg);font-size:14px;line-height:1.65;white-space:pre-wrap}
.culture-box-deep .culture-sources{color:var(--fg-dim);font-size:11px;margin-top:10px;font-style:italic;border-top:1px dashed var(--line);padding-top:6px}

.amp-text{background:var(--bg-2);border-left:3px solid var(--violet,#9d72c4);padding:12px 14px;border-radius:6px;margin:10px 0;line-height:1.7}
.amp-text-content{color:var(--fg);font-size:15px}
.amp-text-content [bracket]{color:var(--gold);font-style:italic}
.amp-audit{color:var(--fg-dim);font-size:11px;margin-top:8px;border-top:1px dashed var(--line);padding-top:6px;font-style:italic}

.pre-history-modal h3{color:var(--gold);font-size:22px;margin:18px 0 8px 0}
.pre-history-modal h4{color:var(--gold-bright);margin-top:24px;font-size:17px}
.pre-history-modal p{line-height:1.7;margin:10px 0}
.pre-history-modal .ph-rule-note{background:var(--strongs-bg);border-left:3px solid var(--strongs);padding:10px 14px;border-radius:4px;font-size:13px;color:var(--fg-mute);font-style:italic;margin:12px 0}
.pre-history-modal .ph-meaning{background:var(--kingdom-bg);border-left:3px solid var(--gold);padding:10px 14px;border-radius:4px;font-size:14px;margin:12px 0}
.pre-history-modal .ph-meaning::before{content:"WHAT IT MEANS: ";color:var(--gold);font-weight:700;font-size:11px;letter-spacing:0.05em}
.pre-history-modal .ph-sources{color:var(--fg-dim);font-size:12px;font-style:italic;margin-top:10px;border-top:1px dashed var(--line);padding-top:6px}


/* ============================================================
   STORY MODAL (cultural-honesty)
   ============================================================ */
.story-tab{background:var(--bg-3);color:var(--fg-mute);border:1px solid var(--line);padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit;transition:all 0.15s;margin-right:4px;margin-bottom:6px}
.story-tab:hover{border-color:var(--gold);color:var(--fg)}
.story-tab.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:700}
.story-section{line-height:1.7;color:var(--fg)}
.story-section h4{color:var(--gold);margin-top:24px;margin-bottom:8px;font-size:17px;font-weight:700;font-family:var(--font-display,inherit)}
.story-section p{margin:10px 0}
.story-section ul{margin:10px 0;padding-left:24px}
.story-section li{margin:6px 0}
.story-intro{font-size:15px;background:var(--kingdom-bg);border-left:3px solid var(--gold);padding:12px 16px;border-radius:6px;margin-bottom:18px}
.story-source{font-size:12px;color:var(--fg-dim);border-top:1px solid var(--line);padding-top:14px;margin-top:24px;font-style:italic}
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:18px 0}
.people-box{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--people);padding:14px;border-radius:6px}
.people-box h4{margin-top:0;color:var(--people);font-size:15px;font-family:var(--font-display,inherit)}
.people-box p{font-size:13px;line-height:1.55;margin:0}
@media (max-width:600px){.people-grid{grid-template-columns:1fr}}

/* ============================================================
   STRONG'S — how-to box, back button, smart search results
   ============================================================ */
.howto-box{background:var(--strongs-bg);border-left:3px solid var(--strongs);padding:10px 14px;border-radius:6px;margin-bottom:14px}
.howto-box .howto-label{font-weight:700;color:var(--strongs);font-size:12px;letter-spacing:0.05em;margin-bottom:6px}
.strongs-back-btn{background:var(--bg-3);color:var(--fg);border:1px solid var(--line);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;margin-bottom:10px;font-family:inherit}
.strongs-back-btn:hover{border-color:var(--gold);color:var(--gold)}
.strongs-result{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--strongs);padding:10px 14px;border-radius:6px;margin-bottom:8px;transition:all 0.15s}
.strongs-result:hover{border-color:var(--gold);transform:translateX(2px)}
.strongs-clickable{cursor:pointer}

/* ============================================================
   PAGE-TURN ANIMATION
   ============================================================ */
.main{transform-origin:left center;perspective:1500px}
.main.flipping-left{animation:flipLeft 0.55s ease-in-out forwards}
.main.flipping-right{animation:flipRight 0.55s ease-in-out forwards}
.main.appearing{animation:flipIn 0.45s ease-out forwards}
@keyframes flipLeft{0%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(-90deg);opacity:0.3}}
@keyframes flipRight{0%{transform:rotateY(0deg);opacity:1}100%{transform:rotateY(90deg);opacity:0.3}}
@keyframes flipIn{0%{transform:rotateY(45deg);opacity:0.3}100%{transform:rotateY(0deg);opacity:1}}
.swipe-hint{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg-3);color:var(--fg-mute);padding:8px 16px;border-radius:20px;font-size:12px;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:60;border:1px solid var(--line)}
.swipe-hint.show{opacity:0.9}



/* === MODAL SCROLL LOCK (mobile-safe) === */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* preserve scroll position via inline style set in JS */
}
.modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.modal-inner {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.def-popup {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}


/* === PREMIUM MUSIC PLAYER === */
.music-mini{
  position:fixed;bottom:20px;right:20px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:50px;padding:8px 14px;display:flex;align-items:center;gap:10px;z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.music-mini.hidden{display:none;}
.music-full{
  position:fixed;bottom:20px;right:20px;width:340px;max-width:calc(100vw - 24px);
  background:var(--bg-2);border:2px solid var(--gold);border-radius:14px;
  padding:16px;z-index:55;box-shadow:0 20px 60px rgba(0,0,0,0.75);
  max-height:calc(100vh - 60px);overflow-y:auto;
}
.music-full-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.music-tabs{display:flex;gap:4px;margin-bottom:12px;}
.music-tab{
  flex:1;background:var(--bg-3);border:1px solid var(--line);color:var(--fg-mute);
  padding:8px 6px;border-radius:6px;cursor:pointer;font-size:11px;font-family:inherit;
  font-weight:600;
}
.music-tab.active{background:var(--gold);color:#0e0a06;border-color:var(--gold);}
.music-mode{}
.track-info-block{margin-bottom:8px;}
.track-info-name{
  font-size:14px;color:var(--fg);font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;
}
.track-time{font-size:11px;color:var(--fg-mute);font-family:-apple-system,monospace;}
.progress-bar{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;background:var(--bg-3);
  border-radius:2px;outline:none;margin:6px 0 10px;
}
.progress-bar::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--gold);
  border-radius:50%;cursor:pointer;
}
.progress-bar::-moz-range-thumb{
  width:12px;height:12px;background:var(--gold);border-radius:50%;cursor:pointer;border:none;
}
.audio-controls{
  display:flex;justify-content:space-between;align-items:center;gap:4px;margin:6px 0 8px;
}
.player-icon-btn{
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:13px;
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:1;
}
.player-icon-btn:hover{background:var(--gold);color:#0e0a06;border-color:var(--gold);}
.player-icon-btn.active{background:var(--gold);color:#0e0a06;border-color:var(--gold);}
.player-big-btn{width:46px;height:46px;font-size:16px;background:var(--gold);color:#0e0a06;border-color:var(--gold);}
.player-big-btn:hover{opacity:0.85;}
.player-btn{
  background:var(--gold);color:#0e0a06;border:none;width:32px;height:32px;
  border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;
}
.playlist-item{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px;cursor:pointer;
  font-size:12px;color:var(--fg);background:transparent;
}
.playlist-item:hover{background:var(--bg-3);}
.playlist-item.active{background:var(--bg-3);border-left:3px solid var(--gold);font-weight:600;}
.playlist-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#embedFrame iframe{width:100%;border:none;display:block;border-radius:8px;}

@media(max-width:768px){
  .music-mini{right:12px;bottom:12px;}
  .music-mini .player-track{max-width:80px;}
  .music-full{right:8px;left:8px;bottom:8px;width:auto;max-width:none;}
}
/* === APPLE DESIGN OVERHAUL v26 === */

/* ================================================================
   APPLE DESIGN OVERHAUL v26
   - SF Pro font stack (Apple-system + fallbacks)
   - 8pt grid spacing
   - Layered shadows for premium depth
   - Press feedback (scale 0.97 on :active)
   - Apple's standard easing curve: cubic-bezier(0.25, 0.1, 0.25, 1)
   - Backdrop blur for header (frosted glass)
   - Rounded corners following iOS conventions
   ================================================================ */
:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --apple-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Layered shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.12);
  --shadow-4: 0 10px 25px rgba(0,0,0,0.25), 0 25px 50px rgba(0,0,0,0.20);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);
  /* Surface tints (subtle glass effect) */
  --surface-glass: rgba(255,255,255,0.03);
  --surface-elevated: rgba(255,255,255,0.05);
  --surface-active: rgba(255,255,255,0.08);
  --hairline: rgba(255,255,255,0.08);
}

/* Body: Apple font everywhere as default; serif only for verse reading */
body{
  font-family: var(--apple-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Reading area: keep classic serif feel for biblical text */
.verse, .chapter-title, .modal-body p, .pre-history-modal p {
  font-family: var(--font-body, "Iowan Old Style", "Palatino Linotype", Georgia, serif);
  letter-spacing: 0;
}

/* === HEADER: Frosted-glass iOS feel === */
header.app-header {
  background: rgba(20,16,28,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline);
  padding: 12px 16px;
  font-family: var(--apple-font);
  font-weight: 500;
}

/* Premium brand logo */
.brand-logo {
  border-radius: 12px;
  background: linear-gradient(145deg, #d4af37 0%, #f7e07a 38%, #9a6e1e 100%) !important;
  box-shadow:
    0 0 0 1.5px rgba(212,175,55,0.55),
    0 0 14px rgba(212,175,55,0.30),
    0 4px 12px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
  font-family: var(--apple-font);
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 11px;
  color: #1a0e00 !important;
  position: relative;
  overflow: hidden;
}
.brand-logo::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  animation: brand-shimmer 4s ease-in-out infinite;
}
@keyframes brand-shimmer {
  0%,70%  { left: -60%; opacity: 0; }
  72%     { opacity: 1; }
  86%     { left: 130%; opacity: 0; }
  100%    { left: 130%; opacity: 0; }
}
.brand-logo-text { position: relative; z-index: 1; }

.brand-title {
  font-family: var(--apple-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gold) 30%, #f7e07a 65%, #c8952a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-sub {
  font-family: var(--apple-font);
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 600;
  opacity: 0.7;
}

/* Header-actions scroll wrapper + arrow */
.header-actions-wrap {
  position: relative;
  margin-left: auto;
  min-width: 0;
  display: flex;
  overflow: hidden;
}
.header-actions-wrap .header-actions {
  margin-left: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-right: 64px; /* clears the gradient arrow so last button is reachable */
}
.header-actions-wrap .header-actions::-webkit-scrollbar { display: none; }
.header-actions-arrow {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, rgba(14,10,18,0.97) 60%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  pointer-events: none;
  color: var(--gold);
  font-size: 20px;
  font-weight: 700;
  transition: opacity .18s ease;
  z-index: 5;
}
.header-actions-arrow.hidden { opacity: 0; pointer-events: none; }

/* Hide/Show nav toggle — visually distinct */
.nav-hide-btn {
  color: var(--gold) !important;
  border-color: rgba(212,175,55,0.40) !important;
  background: rgba(212,175,55,0.08) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.nav-hide-btn:hover {
  background: rgba(212,175,55,0.18) !important;
  border-color: var(--gold) !important;
}

/* === BUTTONS: iOS-style with depth and press feedback === */
.icon-btn {
  font-family: var(--apple-font);
  font-weight: 590;
  font-size: 13px;
  letter-spacing: -0.01em;
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg);
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 180ms var(--ease-apple), background 180ms var(--ease-apple), box-shadow 180ms var(--ease-apple), border-color 180ms var(--ease-apple);
  box-shadow: var(--shadow-1), var(--shadow-inset);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.icon-btn:hover {
  background: var(--surface-active);
  color: var(--gold);
  border-color: rgba(212,175,55,0.4);
  box-shadow: var(--shadow-2), var(--shadow-inset);
}

.icon-btn:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-1);
}

.icon-btn.active {
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 80%, black));
  color: #0e0a06;
  border-color: var(--gold);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.25);
  font-weight: 700;
}

/* === NAVIGATION BUTTONS: chunkier, more confident === */
.nav-btn {
  font-family: var(--apple-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 78%, black));
  color: #0e0a06;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 180ms var(--ease-apple), box-shadow 180ms var(--ease-apple), filter 180ms var(--ease-apple);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.25);
  -webkit-tap-highlight-color: transparent;
}

.nav-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.25); }
.nav-btn:active { transform: scale(0.97); box-shadow: var(--shadow-1); }
.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* === MODE TOGGLE: segmented control === */
.mode-toggle {
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.mode-toggle button {
  font-family: var(--apple-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  background: transparent;
  border: none;
  color: var(--fg-mute);
  padding: 6px 14px;
  border-radius: 8px;
  transition: all 200ms var(--ease-apple);
}
.mode-toggle button.active {
  background: var(--gold);
  color: #0e0a06;
  box-shadow: var(--shadow-1);
}

/* === PROTOCOL BAR: tighter rule pills === */
.protocol-bar {
  background: rgba(20,16,28,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--hairline);
}
.rule-pill {
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg-mute);
  padding: 5px 11px;
  border-radius: 100px;
  font-family: var(--apple-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: var(--shadow-1);
}

/* === SIDEBAR (chapter list) === */
.sidebar {
  background: rgba(20,16,28,0.4);
  border-right: 0.5px solid var(--hairline);
  padding: 16px 0;
}
.ch-link {
  font-family: var(--apple-font);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 0;
  transition: all 180ms var(--ease-apple);
}
.ch-link:hover {
  background: var(--surface-elevated);
  color: var(--fg);
}
.ch-link.active {
  background: linear-gradient(90deg, rgba(212,175,55,0.15), transparent);
  color: var(--gold);
  border-left-color: var(--gold);
  font-weight: 600;
}

/* === MODAL: premium depth + glass === */
.modal {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-inner {
  background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 90%, black));
  border: 0.5px solid var(--hairline);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,0.08);
  max-width: 760px;
}
.modal-title {
  font-family: var(--apple-font);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--hairline);
}
.modal-body {
  font-family: var(--apple-font);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg);
}
.modal-body h4 {
  font-family: var(--apple-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--gold);
  margin-top: 22px;
  margin-bottom: 10px;
}
.modal-body p {
  font-family: var(--apple-font);
  margin-bottom: 14px;
  line-height: 1.65;
  color: var(--fg);
}
.modal-close {
  font-family: var(--apple-font);
  font-weight: 600;
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 10px;
  transition: all 180ms var(--ease-apple);
  box-shadow: var(--shadow-1);
}
.modal-close:hover { background: var(--surface-active); }
.modal-close:active { transform: scale(0.96); }

/* === CARDS (people-card and similar): elevated surface === */
.people-card {
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  border-left: 3px solid var(--people);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1), var(--shadow-inset);
  transition: transform 180ms var(--ease-apple), box-shadow 180ms var(--ease-apple), background 180ms var(--ease-apple);
}
.people-card:hover {
  background: var(--surface-active);
  box-shadow: var(--shadow-2), var(--shadow-inset);
  transform: translateY(-1px);
}
.people-card:active { transform: scale(0.99); box-shadow: var(--shadow-1); }
.people-card-name {
  font-family: var(--apple-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.people-card-region {
  font-family: var(--apple-font);
  font-size: 12px;
  color: var(--fg-mute);
  margin-top: 4px;
}

/* === STRONGS RESULTS: elevated cards === */
.strongs-result {
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-1), var(--shadow-inset);
  font-family: var(--apple-font);
  transition: all 180ms var(--ease-apple);
}
.strongs-result:hover {
  background: var(--surface-active);
  box-shadow: var(--shadow-2);
}
.strongs-result.strongs-clickable { cursor: pointer; }
.strongs-result.strongs-clickable:active { transform: scale(0.99); }

/* === INPUT FIELDS: iOS-style === */
input[type="text"], input[type="search"], input[type="number"], textarea {
  font-family: var(--apple-font);
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all 180ms var(--ease-apple);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15), 0 0 0 3px rgba(212,175,55,0.18);
}

/* === SELECT (dropdowns) === */
select {
  font-family: var(--apple-font);
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg);
  padding: 9px 32px 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-1), var(--shadow-inset);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23999' d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: all 180ms var(--ease-apple);
}
select:hover { background-color: var(--surface-active); }
select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.18); }

/* === DEEP DEFINITION POPUP === */
.def-popup {
  background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 90%, black));
  border: 0.5px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--apple-font);
}
.def-overlay {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.def-close {
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  color: var(--fg-mute);
  font-size: 16px;
  transition: all 180ms var(--ease-apple);
  box-shadow: var(--shadow-1);
}
.def-close:hover { color: var(--fg); background: var(--surface-active); }
.def-close:active { transform: scale(0.92); }

/* === VERSE COUNTER (verse mode) === */
.verse-counter {
  font-family: var(--apple-font);
  text-align: center;
}
.verse-counter-num {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--gold);
}
.verse-counter-meta {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-dim);
  margin-top: 2px;
  letter-spacing: 0.2px;
}

/* === CHAPTER TITLE === */
.chapter-title {
  font-family: var(--font-display, var(--apple-font));
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--gold);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--hairline);
}

/* === SUGGESTION CHIPS (search modal) === */
.suggestion-chip {
  font-family: var(--apple-font);
  font-weight: 590;
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 180ms var(--ease-apple);
  box-shadow: var(--shadow-1), var(--shadow-inset);
}
.suggestion-chip:hover {
  background: var(--surface-active);
  color: var(--gold);
  border-color: rgba(212,175,55,0.4);
}
.suggestion-chip:active { transform: scale(0.95); }

/* === MUSIC PLAYER (premium look) === */
.player {
  background: rgba(20,16,28,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 0.5px solid var(--hairline);
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: var(--shadow-3);
  font-family: var(--apple-font);
}
.player-track {
  font-family: var(--apple-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.player-icon-btn {
  font-family: var(--apple-font);
  background: transparent;
  border: none;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 180ms var(--ease-apple);
  -webkit-tap-highlight-color: transparent;
}
.player-icon-btn:hover { color: var(--gold); background: var(--surface-elevated); }
.player-icon-btn:active { transform: scale(0.92); }

/* === COMPANION PANEL (cross-source map) === */
.companion-panel {
  border-radius: 14px !important;
  border: 0.5px solid var(--hairline) !important;
  border-left: 3px solid var(--gold) !important;
  background: var(--surface-elevated) !important;
  box-shadow: var(--shadow-1), var(--shadow-inset) !important;
}

/* === SOURCE TAB === */
.source-tab {
  font-family: var(--apple-font);
  font-weight: 600;
  background: var(--surface-elevated);
  border: 0.5px solid var(--hairline);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.2px;
}

/* === FOCUS RING (accessibility) === */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* === SCROLLBARS (subtle, iOS-ish) === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* === TYPOGRAPHY REFINEMENT === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--apple-font);
  letter-spacing: -0.02em;
}
small, .small { font-family: var(--apple-font); font-size: 11px; letter-spacing: 0.2px; }

/* === MOBILE TUNING === */
@media (max-width: 640px) {
  .icon-btn { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  .nav-btn { padding: 11px 18px; font-size: 14px; }
  .modal-inner { padding: 22px 18px; border-radius: 16px; }
  .chapter-title { font-size: 26px; }
  header.app-header { padding: 10px 14px; }
}


/* === SWRV KINGDOM BIBLE — IMMERSIVE LANDING PAGE === */
.splash-cover {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0d1117;
  color: #e6edf3;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: splashFadeIn 400ms ease both;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.splash-cover.dismissed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
}
body.splash-active { overflow: hidden; }

@keyframes splashFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Nav ── */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.landing-brand-group { display: flex; flex-direction: column; gap: 1px; }
.landing-brand-name {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2em;
  color: #d4af37;
  line-height: 1;
}
.landing-brand-domain {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #8b949e;
  text-transform: uppercase;
}
.landing-launch-btn {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  background: transparent;
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.landing-launch-btn:hover,
.landing-launch-btn:active {
  background: #d4af37;
  border-color: #d4af37;
  color: #0d1117;
}

/* ── Scrollable body ── */
.landing-body {
  flex: 1;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

/* Portfolio label */
.landing-portfolio-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b949e;
  margin-bottom: 28px;
  animation: splashFadeUp 500ms ease both;
}

/* ── Hero ── */
.landing-hero {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
  animation: splashFadeUp 550ms ease both;
  animation-delay: 60ms;
}
.landing-hero-text { flex: 1; min-width: 0; }
.landing-headline {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-weight: 900;
  font-size: clamp(52px, 9vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #e6edf3;
  margin: 0 0 20px;
  text-transform: uppercase;
}
.landing-headline-gold { color: #d4af37; display: block; }
.landing-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #8b949e;
  margin: 0 0 28px;
  max-width: 480px;
}
.landing-desc em { color: #c9d1d9; font-style: italic; }
.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.landing-open-btn {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  background: #d4af37;
  color: #0d1117;
  border: none;
  padding: 14px 32px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.landing-open-btn:hover { filter: brightness(1.1); box-shadow: 0 12px 32px rgba(212, 175, 55, 0.45); }
.landing-open-btn:active { transform: scale(0.97); }
.landing-share-btn {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  background: transparent;
  color: #8b949e;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 13px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.landing-share-btn:hover { color: #e6edf3; border-color: rgba(255,255,255,0.3); }

/* ── Phone mockup ── */
.landing-mockup-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}
.landing-phone-frame {
  width: 200px;
  height: 380px;
  border: 7px solid #21262d;
  border-radius: 34px;
  background: #010409;
  box-shadow:
    0 0 0 1px #30363d,
    0 32px 72px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.landing-phone-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #0d1117;
  border-radius: 0 0 12px 12px;
  z-index: 10;
}
.landing-phone-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Sections ── */
.landing-section {
  margin-bottom: 52px;
  animation: splashFadeUp 550ms ease both;
  animation-delay: 120ms;
}
.landing-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 8px;
}
.landing-section-sub {
  font-size: 14px;
  color: #8b949e;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* ── User cards ── */
.landing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.landing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 18px;
  transition: background 160ms ease, border-color 160ms ease;
}
.landing-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(212, 175, 55, 0.3);
}
.landing-card-icon { font-size: 22px; margin-bottom: 10px; }
.landing-card-title {
  font-weight: 700;
  font-size: 14px;
  color: #e6edf3;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.landing-card-body {
  font-size: 13px;
  color: #8b949e;
  line-height: 1.55;
}

/* ── Feature rows ── */
.landing-features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.landing-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.landing-feat:last-child { border-bottom: none; }
.landing-feat-icon { font-size: 20px; flex-shrink: 0; width: 30px; text-align: center; margin-top: 2px; }
.landing-feat > div { flex: 1; }
.landing-feat strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #e6edf3;
  margin-bottom: 3px;
}
.landing-feat p {
  font-size: 13px;
  color: #8b949e;
  margin: 0;
  line-height: 1.55;
}

/* ── Footer ── */
.landing-footer {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-footer-brand {
  font-family: 'Orbitron', 'Rajdhani', monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  color: #d4af37;
}
.landing-footer-sub {
  font-size: 12px;
  color: #8b949e;
  letter-spacing: 0.02em;
}
.landing-footer-link {
  font-size: 13px;
  font-weight: 600;
  color: #d4af37;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 150ms ease;
}
.landing-footer-link:hover { opacity: 0.75; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .landing-body { padding: 32px 16px 60px; }
  .landing-nav { padding: 12px 16px; }
  .landing-brand-name { font-size: 15px; }
  .landing-hero { flex-direction: column; gap: 32px; }
  .landing-mockup-wrap { width: 100%; }
  .landing-phone-frame { width: 170px; height: 320px; }
  .landing-cards { grid-template-columns: 1fr; gap: 10px; }
  .landing-cta-row { flex-direction: column; align-items: flex-start; }
  .landing-open-btn { width: 100%; text-align: center; }
}

/* === SWRV Global Search Drawer === */
.search-drawer{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(14,10,6,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.search-drawer.show{display:flex}
.search-drawer-inner{width:100%;max-width:780px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,0.5);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.search-input-wrap{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--bg-2);gap:10px;flex-shrink:0}
.search-input-icon{font-size:18px;opacity:0.8}
.search-input{flex:1;background:transparent;border:none;outline:none;color:var(--fg);font-size:17px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',inherit;padding:8px 4px;-webkit-appearance:none}
.search-input::placeholder{color:var(--fg-dim);opacity:0.7}
.search-close-btn{background:var(--bg-3);border:1px solid var(--line);color:var(--fg-dim);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.search-close-btn:hover{color:var(--gold);border-color:var(--gold)}
.search-help{padding:18px 18px 20px;overflow-y:auto;flex:1}
.search-help-title{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:700}
.search-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.search-suggestion-chip{background:var(--bg-3);border:1px solid var(--line);color:var(--fg);padding:6px 12px;border-radius:14px;cursor:pointer;font-size:12px;font-family:inherit}
.search-suggestion-chip:hover{background:var(--gold);color:#0e0a06;border-color:var(--gold)}
.search-recent{margin-bottom:18px}
.search-recent-title{font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:700}
.search-recent-items{display:flex;flex-wrap:wrap;gap:6px}
.search-recent-item{background:transparent;border:1px solid var(--line);color:var(--fg-dim);padding:5px 12px;border-radius:14px;cursor:pointer;font-size:12px;font-family:inherit}
.search-recent-item:hover{color:var(--fg);border-color:var(--gold)}
.search-help-foot{font-size:11px;color:var(--fg-dim);line-height:1.6;padding-top:14px;border-top:1px dashed var(--line);margin-top:8px}
.search-results{padding:0 18px 18px;overflow-y:auto;flex:1}
.search-cat-header{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.search-cat-header:first-child{margin-top:0}
.search-cat-count{background:var(--bg-3);padding:1px 8px;border-radius:10px;font-size:10px;color:var(--fg-dim);letter-spacing:0.3px}
.search-result{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);margin-bottom:6px;cursor:pointer;transition:all 0.15s;display:block;text-align:left;width:100%;font-family:inherit;color:var(--fg)}
.search-result:hover{border-color:var(--gold);background:var(--bg-3)}
.search-result-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.search-result-title{color:var(--gold);font-size:14px;font-weight:600;line-height:1.3}
.search-result-cat-badge{font-size:10px;color:var(--fg-dim);background:var(--bg-1);padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:0.4px;flex-shrink:0;font-weight:600}
.search-result-preview{font-size:13px;color:var(--fg);line-height:1.5;margin:4px 0}
.search-result-preview mark{background:var(--gold);color:#0e0a06;padding:0 2px;border-radius:2px;font-weight:600}
.search-result-meta{font-size:11px;color:var(--fg-dim);font-style:italic;margin-top:2px}
.search-no-results{text-align:center;color:var(--fg-dim);padding:30px 20px;font-size:13px;line-height:1.6}
.search-no-results-suggestion{color:var(--gold);text-decoration:underline;cursor:pointer}
.search-loading{text-align:center;color:var(--fg-dim);padding:20px;font-size:12px}
@media (max-width: 600px){
  .search-drawer{padding:0}
  .search-drawer-inner{max-width:100%;height:100%;max-height:100%;border-radius:0;border:none}
  .search-input{font-size:16px}
}

/* === Category filter chips (per spec) === */
.search-filter-bar{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px dashed var(--line);position:sticky;top:0;background:var(--bg-1);padding-top:10px;z-index:2}
.search-filter-chip{background:var(--bg-3);border:1px solid var(--line);color:var(--fg-dim);padding:5px 10px;border-radius:14px;cursor:pointer;font-size:11px;font-family:inherit;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.search-filter-chip:hover{color:var(--fg);border-color:var(--gold)}
.search-filter-chip.active{background:var(--gold);color:#0e0a06;border-color:var(--gold)}
.search-filter-count{font-size:10px;background:rgba(255,255,255,0.15);padding:1px 6px;border-radius:8px;font-weight:600}
.search-filter-chip.active .search-filter-count{background:rgba(14,10,6,0.2);color:#0e0a06}
.search-show-more{display:block;width:100%;text-align:center;padding:8px 12px;margin:4px 0 12px;background:transparent;border:1px dashed var(--line);border-radius:6px;color:var(--gold);cursor:pointer;font-size:12px;font-family:inherit}
.search-show-more:hover{background:var(--bg-2);border-color:var(--gold);border-style:solid}

/* ======================================================================
   SWRV UX FULL PASS — readability, navigation clarity, deep-study cards
   ====================================================================== */
:root{
  --reader-max: 1120px;
  --tap-size: 44px;
}
body{
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.sticky-nav{
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
}
.app-header{
  gap:12px;
  padding:12px 18px;
}
.brand-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  font-size:13px;
  flex:0 0 auto;
}
.brand-title{
  font-size:17px;
  line-height:1.05;
}
.brand-sub{
  font-size:12px;
}
.header-actions{
  gap:8px;
  align-items:center;
}
.mode-toggle{
  min-height:var(--tap-size);
  border-radius:12px;
}
.mode-toggle button{
  min-width:88px;
  padding:11px 15px;
  font-size:14px;
  font-weight:800;
}
.icon-btn,
.ch-nav-btn,
.nav-btn{
  min-height:var(--tap-size);
  border-radius:11px;
  font-size:14px;
}
.study-nav-bar{
  display:grid;
  grid-template-columns:minmax(220px,1.25fr) auto minmax(230px,1fr) minmax(132px,.55fr) auto;
  gap:10px;
  align-items:end;
  padding:12px 18px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.03)),var(--bg-2);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid var(--line);
}
.nav-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.nav-field label{
  color:var(--gold);
  font-size:12px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.9px;
  padding-left:4px;
}
.ch-select{
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border-radius:12px;
  font-size:16px;
  font-weight:650;
  color:var(--fg);
  background:var(--bg-1);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.ch-select:focus{
  outline:2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-color:var(--gold);
}
.verse-select{
  color:var(--gold);
  font-weight:800;
}
.reading-order-btn{
  align-self:end;
  margin-left:0!important;
  font-size:13px!important;
  white-space:nowrap;
  color:var(--gold);
  border-color:rgba(212,175,55,.55);
}
.nav-arrows{
  display:flex;
  gap:8px;
  align-self:end;
}
.nav-arrows .ch-nav-btn{
  min-width:50px;
  font-size:18px;
  font-weight:900;
}
.nav-arrows .ch-reload-btn{
  min-width:unset;
  font-size:12px;
  font-weight:normal;
  padding:4px 9px;
  color:rgba(212,175,55,0.65);
  border-color:rgba(212,175,55,0.3);
}
.main{
  max-width:var(--reader-max);
  padding:24px 34px 96px;
}
.chapter-title{
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:.01em;
  margin-top:8px;
  margin-bottom:18px;
  text-wrap:balance;
}
.chapter-deep-banner{
  margin:0 0 26px;
  padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-left:5px solid var(--gold);
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,175,55,.16), transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.03)),
    var(--bg-2);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}
.deep-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:var(--gold);
  color:#150f07;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.8px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.chapter-deep-banner h2{
  margin:10px 0 6px;
  color:var(--fg);
  font-size:21px;
  line-height:1.25;
}
.chapter-deep-banner p{
  margin:0;
  color:var(--fg-mute);
  font-size:15px;
}
.deep-stat-row{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.deep-stat-row span{
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-3);
  color:var(--fg-mute);
  font-size:12px;
  font-weight:700;
}
.verse{
  margin-bottom:34px;
  padding:18px 0 24px;
  scroll-margin-top:180px;
}
.verse-num{
  font-size:17px;
  min-width:34px;
  margin-right:13px;
}
.verse-text{
  font-size:var(--bible-text-size)!important;
  line-height:var(--bible-line-height)!important;
  letter-spacing:.005em;
}
.definable,
.person-name{
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.verse-highlight{
  animation:swrvVersePulse 1.8s ease-out;
  border-radius:14px;
  padding-left:12px;
  padding-right:12px;
}
@keyframes swrvVersePulse{
  0%{background:rgba(212,175,55,.32);box-shadow:0 0 0 0 rgba(212,175,55,.38)}
  55%{background:rgba(212,175,55,.18);box-shadow:0 0 0 14px rgba(212,175,55,0)}
  100%{background:transparent;box-shadow:none}
}
.sources,.crossrefs,.source-content,.kingdom-lens,.cultural-panel,.translation-flag,.xref-content,.numbering-note{
  margin-left:48px;
}
.source-tab{
  font-size:12px;
  padding:6px 11px;
  border-radius:8px;
}
.kingdom-lens,.cultural-panel,.translation-flag,.source-content{
  border-radius:12px;
  padding:15px 18px;
}
.kingdom-lens-text,.cultural-detail,.flag-note,.source-content{
  font-size:15px;
  line-height:1.7;
}
.universal-study-card{
  margin:14px 0 0 48px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.02)),var(--bg-2);
  overflow:hidden;
}
.universal-study-card summary{
  cursor:pointer;
  list-style:none;
  padding:12px 15px;
  color:var(--gold);
  font-weight:900;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.universal-study-card summary::-webkit-details-marker{display:none}
.universal-study-card summary small{
  color:var(--fg-dim);
  font-weight:650;
  font-size:11px;
  text-align:right;
}
.study-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;
  padding:0 12px 12px;
}
.study-mini-card{
  margin:0 12px 12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:12px;
  background:var(--bg-3);
}
.study-card-grid .study-mini-card{margin:0}
.study-mini-card h4{
  margin:4px 0 6px;
  color:var(--fg);
  font-size:16px;
}
.study-mini-card p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--fg-mute);
}
.mini-card-label{
  color:var(--gold);
  font-size:10px;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.7px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.misunderstand{
  margin-top:8px;
  padding:8px 10px;
  background:rgba(217,119,6,.10);
  border-radius:9px;
  color:var(--fg);
  font-size:13px;
  line-height:1.5;
}
.source-trace{
  margin-top:8px;
  color:var(--fg-dim);
  font-size:11px;
  font-style:italic;
}
.cultural-mini{border-left-color:var(--cultural)}
.original-mini{border-left-color:var(--azure)}
.definition-mini{border-left-color:var(--gold)}
.relation-mini{border-left-color:var(--people)}
.def-popup{
  max-width:min(760px,94vw);
}
.def-word{
  font-size:clamp(25px,4vw,38px);
}
.def-section-text,.def-list li{
  font-size:15px;
  line-height:1.72;
}
.search-input{
  font-size:18px;
  min-height:54px;
}
.search-drawer-inner{
  max-width:min(980px,96vw);
}
@media (max-width: 1020px){
  .study-nav-bar{
    grid-template-columns:1fr 1fr;
  }
  .nav-field-book{grid-column:1 / -1}
  .reading-order-btn{grid-column:1 / 2}
  .nav-field-chapter{grid-column:2 / 3}
  .nav-field-verse{grid-column:1 / 2}
  .nav-arrows{grid-column:2 / 3;justify-self:end}
  .header-actions{width:100%;margin-left:0;justify-content:flex-start}
}
@media (max-width: 680px){
  .app-header{padding:10px 12px}
  .brand-text{min-width:0}
  .brand-title{font-size:15px}
  .brand-sub{font-size:10px}
  .header-actions{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .mode-toggle button{min-width:76px;font-size:13px;padding:9px 12px}
  .icon-btn{font-size:12px;padding:8px 10px;white-space:nowrap}
  .study-nav-bar{
    grid-template-columns:1fr;
    gap:9px;
    padding:10px 12px 12px;
  }
  .reading-order-btn,.nav-field-chapter,.nav-field-verse,.nav-arrows{grid-column:1 / -1}
  .nav-arrows{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr}
  .ch-select{min-height:46px;font-size:15px}
  .main{padding:18px 16px 84px}
  .chapter-title{font-size:31px}
  .verse-text{font-size:var(--bible-text-size)!important;line-height:var(--bible-line-height)!important}
  .sources,.crossrefs,.source-content,.kingdom-lens,.cultural-panel,.translation-flag,.xref-content,.numbering-note,.universal-study-card{margin-left:0}
  .verse-num{display:inline-block;min-width:28px}
  .universal-study-card summary{align-items:flex-start;flex-direction:column}
  .universal-study-card summary small{text-align:left}
}

/* === SWRV complete correction pass: cleaner read mode + richer definition UX === */
.chapter-deep-banner{display:none!important;}
.universal-study-card{margin-top:10px;opacity:.94;}
.universal-study-card:not([open]){background:transparent;border-style:dashed;}
.universal-study-card:not([open]) summary{padding:9px 13px;color:var(--fg-dim);}
.universal-study-card[open]{box-shadow:0 10px 24px rgba(0,0,0,.10);}
.strongs-roots-panel{margin:10px 0 0 48px;border:1px dashed var(--line);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.025);}
.strongs-roots-panel summary{font-size:12px!important;}
.strongs-word-btn{gap:5px;max-width:100%;}
.strongs-word-btn .root-original{font-size:15px;font-weight:700;}
.strongs-word-btn .root-id{font-size:10px;color:var(--fg-dim);font-weight:800;}
.strongs-word-btn .root-gloss{font-size:10px;color:var(--fg-mute);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.strongs-word-btn:hover .root-id,.strongs-word-btn:hover .root-gloss{color:#0e0a06;}
.amp-nuance-panel{margin:10px 0 0 48px;border:1px solid rgba(155,135,210,.45);border-radius:12px;background:rgba(155,135,210,.08);overflow:hidden;}
.amp-nuance-panel summary{cursor:pointer;padding:10px 13px;color:var(--violet);font-weight:900;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;display:flex;justify-content:space-between;gap:10px;}
.amp-nuance-panel summary small{color:var(--fg-dim);font-size:11px;}
.amp-note-text{padding:0 14px 12px;font-size:15px;line-height:1.7;color:var(--fg);}
.lex-link-row{display:block;width:100%;text-align:left;margin:7px 0;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-3);color:var(--fg);cursor:pointer;font-family:inherit;}
.lex-link-row b{display:block;color:var(--gold);margin-bottom:3px;}
.lex-link-row span{display:block;font-size:12px;line-height:1.45;color:var(--fg-mute);}
.lex-link-row:hover{border-color:var(--gold);transform:translateY(-1px);}
@media(max-width:680px){
  .strongs-roots-panel,.amp-nuance-panel{margin-left:0;}
  .strongs-word-btn .root-gloss{max-width:110px;}
}


.search-indexing-note{
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:10px;
  background:rgba(212,175,55,.08);
  color:var(--fg);
  font-size:13px;
  line-height:1.4;
}


/* === SWRV mobile audit pass: compact reading controls === */
.mobile-nav-toggle{display:none}
@media (max-width: 680px){
  .sticky-nav{top:0}
  .app-header{
    padding:8px 10px 6px;
  }
  .logo{width:42px;height:42px;font-size:16px;flex:0 0 42px}
  .header-actions{
    gap:7px;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 2px 4px;
  }
  .header-actions::-webkit-scrollbar{display:none}
  .icon-btn,
  .mode-toggle button{
    min-height:40px;
    padding:8px 12px;
    font-size:14px;
    border-radius:12px;
  }
  .mode-toggle button{min-width:72px}

  .study-nav-bar{
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:7px 10px 8px;
    align-items:end;
    transition:max-height .22s ease, padding .22s ease;
  }
  .mobile-nav-toggle{
    display:flex;
    grid-column:1 / -1;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:42px;
    padding:8px 10px;
    border:1px solid rgba(212,175,55,.45);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(0,0,0,.08)),var(--bg-2);
    color:var(--fg);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-weight:850;
    text-align:left;
  }
  #mobileNavSummary{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:68%;
    color:var(--gold-bright);
  }
  .mobile-nav-cue{
    color:var(--fg-dim);
    font-size:12px;
    white-space:nowrap;
  }
  .nav-field label{
    font-size:10px;
    letter-spacing:1.5px;
    padding-left:2px;
  }
  .ch-select{
    min-height:39px;
    padding:7px 9px;
    border-radius:10px;
    font-size:13px;
    line-height:1.2;
  }
  .nav-field-book{grid-column:1 / 2!important}
  .reading-order-btn{
    grid-column:2 / 3!important;
    min-height:39px!important;
    align-self:end;
    font-size:12px!important;
    padding:7px 8px!important;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-field-chapter{grid-column:1 / 2!important}
  .nav-field-verse{grid-column:2 / 3!important}
  .nav-arrows{
    grid-column:1 / -1!important;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .nav-arrows .ch-nav-btn{
    min-height:40px;
    min-width:0;
    font-size:19px;
  }
  .nav-arrows .ch-reload-btn{
    min-height:unset;
    min-width:unset;
    font-size:12px;
    font-weight:normal;
    padding:4px 9px;
    align-self:center;
    justify-self:start;
  }

  .study-nav-bar.mobile-collapsed{
    display:block;
    padding:6px 10px;
  }
  .study-nav-bar.mobile-collapsed .nav-field,
  .study-nav-bar.mobile-collapsed .reading-order-btn,
  .study-nav-bar.mobile-collapsed .nav-arrows{
    display:none!important;
  }
  .study-nav-bar.mobile-collapsed .mobile-nav-toggle{
    margin:0;
  }

  .main{padding:12px 15px 92px!important}
  .chapter-title{font-size:26px!important;line-height:1.12;margin:12px 0 14px!important}
  .verse{padding:12px 0 20px!important;margin-bottom:22px!important;scroll-margin-top:86px!important}
  .verse-num{font-size:17px;min-width:24px;margin-right:8px}
  .verse-text{font-size:var(--bible-text-size)!important;line-height:var(--bible-line-height)!important}
  .verse-mode-controls{padding:9px!important;gap:8px!important;margin-bottom:14px!important}
  .verse-counter-num{font-size:16px!important}
  .verse-counter-meta{font-size:9px!important}
  .sources{gap:5px;margin-top:8px!important}
  .source-tab{font-size:11px;padding:5px 9px}
  .universal-study-card{margin-top:8px!important}
  .universal-study-card:not([open]) summary{padding:8px 10px!important}
  .strongs-roots-panel{margin-left:0!important}
}

/* === SWRV collapsible sections — keep verses readable, study optional === */
/* All non-verse panels (kingdom lens, cultural context, translation loss,
   plot panels, heartbeat, deep culture, AMP-style, cross-source parallels)
   default closed so the reader sees mostly verse text. Tap the summary to
   open. Keeps each section's existing color theme via the inner styles. */
.collapsible-section{
  margin-top:10px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,0.18);
  background:rgba(0,0,0,0.04);
}
.collapsible-section > summary{
  list-style:none;
  cursor:pointer;
  padding:9px 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.collapsible-section > summary::-webkit-details-marker{display:none}
.collapsible-section > summary::after{
  content:"▾";
  margin-left:auto;
  color:var(--fg-dim);
  font-size:11px;
  transition:transform .15s ease;
}
.collapsible-section[open] > summary::after{transform:rotate(180deg)}
.collapsible-section > summary:hover{background:rgba(212,175,55,0.08)}
.collapsible-section > *:not(summary){padding:0 12px 12px}
.collapsible-section .collapsible-cue{
  font-weight:500;
  font-size:11px;
  color:var(--fg-dim);
  font-style:italic;
}
/* Preserve per-section accent colors that came from the now-detail wrappers */
.collapsible-section.kingdom-lens{border-left:3px solid var(--gold)}
.collapsible-section.cultural-panel{border-left:3px solid #4a7c59}
.collapsible-section.translation-flag{border-left:3px solid #c0392b;background:rgba(192,57,43,0.05)}
.collapsible-section.plot-panel{border-left:3px solid #8e44ad}
.collapsible-section.heartbeat-callout{border-left:3px solid #c0392b}
.collapsible-section.culture-box-deep{border-left:3px solid #2980b9}
.collapsible-section.amp-text{border-left:3px solid var(--strongs)}


/* ============================================================
   SWRV MOBILE READING FLOW + PEOPLE CONTEXT AUDIT FIX
   Goal: keep deep context available without creating a wall between verses.
   ============================================================ */

.verse-context-strip{
  margin:8px 0 0 48px;
  border:1px dashed rgba(139,111,42,.45);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.verse-context-strip > summary{
  list-style:none;
  cursor:pointer;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--gold);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:12px;
  font-weight:850;
}
.verse-context-strip > summary::-webkit-details-marker{display:none}
.verse-context-strip > summary::after{
  content:"▾";
  color:var(--fg-dim);
  font-size:10px;
  margin-left:6px;
}
.verse-context-strip[open] > summary::after{transform:rotate(180deg)}
.verse-context-strip small{color:var(--fg-dim);font-weight:650;font-size:10px;}
.context-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 10px 10px;
}
.context-chip{
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-3);
  color:var(--fg);
  padding:4px 9px;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.context-chip:hover{background:var(--gold);color:#0e0a06;border-color:var(--gold)}
.compact-source-trace{
  margin:0 10px 10px;
  font-size:10px;
  line-height:1.35;
}

/* Make collapsed study/source panels thin so notes do not create huge gaps between verses. */
.amp-nuance-panel,
.universal-study-card,
.collapsible-section,
.strongs-roots-panel,
.verse-context-strip{
  max-width:calc(100% - 48px);
}
.amp-nuance-panel:not([open]) summary,
.universal-study-card:not([open]) summary,
.collapsible-section:not([open]) > summary,
.strongs-roots-panel:not([open]) summary,
.verse-context-strip:not([open]) > summary{
  min-height:0;
}

/* Dense reading mode for phone screens. Context is still present, but skinny. */
@media(max-width:680px){
  .verse{
    margin-bottom:20px;
    padding:10px 0 14px;
  }
  .verse-text{
    font-size:var(--bible-text-size)!important;
    line-height:var(--bible-line-height)!important;
  }
  .verse-num{
    font-size:20px;
    min-width:28px;
    margin-right:8px;
  }
  .sources{
    margin-left:0;
    gap:5px;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .source-tab{
    flex:0 0 auto;
    padding:5px 9px;
    font-size:11px;
    border-radius:999px;
  }
  .source-content,
  .numbering-note,
  .kingdom-lens,
  .cultural-panel,
  .translation-flag,
  .amp-nuance-panel,
  .universal-study-card,
  .verse-context-strip{
    margin-left:0 !important;
    max-width:100% !important;
  }
  .amp-nuance-panel{
    margin-top:7px;
    border-radius:11px;
  }
  .amp-nuance-panel summary{
    padding:7px 10px;
    font-size:12px;
    line-height:1.2;
  }
  .amp-nuance-panel summary small{
    font-size:10px;
  }
  .strongs-roots-panel summary{
    font-size:10.5px !important;
    padding:5px 0 !important;
    line-height:1.25;
  }
  .strongs-roots-words{
    max-height:150px;
    overflow:auto;
  }
  .collapsible-section{
    margin-top:6px;
    border-radius:10px;
  }
  .collapsible-section > summary{
    padding:7px 10px;
    font-size:10.5px;
    letter-spacing:.02em;
    line-height:1.25;
  }
  .collapsible-section .collapsible-cue{
    max-width:58vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .universal-study-card{
    margin-top:7px;
    border-radius:12px;
  }
  .universal-study-card summary{
    padding:8px 10px;
    line-height:1.25;
  }
  .universal-study-card summary span{
    font-size:14px;
  }
  .universal-study-card summary small{
    font-size:10px;
    max-width:48vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .study-card-grid{
    grid-template-columns:1fr;
    gap:7px;
    padding:0 8px 8px;
  }
  .study-mini-card{
    margin:0 8px 8px;
    padding:9px 10px;
    font-size:12px;
    line-height:1.45;
  }
  .study-mini-card h4{
    font-size:13px;
    margin:3px 0 5px;
  }
  .verse-context-strip{
    margin-top:6px;
  }
  .verse-context-strip > summary{
    padding:7px 10px;
    font-size:11px;
    line-height:1.25;
  }
  .context-chip-row{
    gap:5px;
    padding:0 8px 8px;
  }
  .context-chip{
    font-size:10.5px;
    padding:4px 8px;
  }
  .compact-source-trace{
    font-size:9.5px;
    margin:0 8px 8px;
  }
  /* Keep the music player from covering too much scripture on narrow screens. */
  .music-mini{
    transform:scale(.86);
    transform-origin:bottom right;
    right:8px;
    bottom:10px;
  }
}

/* ============================================================
   SWRV READING EXPERIENCE AUDIT FIX
   Goal: study layers are optional, not a wall between verses.
   Reader Focus hides all inline notes/sources so Scripture can be read cleanly.
   Study Mode keeps everything available, but collapsed panels are ultra-thin.
   ============================================================ */
.study-layer-toggle{
  border-color:rgba(212,175,55,.55)!important;
  background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(0,0,0,.08)),var(--bg-2)!important;
  color:var(--gold-bright)!important;
  font-weight:850!important;
}
body.reader-focus .study-layer,
body.reader-focus .sources,
body.reader-focus .source-content,
body.reader-focus .inline-relation-chips,
body.reader-focus .xref-content,
body.reader-focus .xref-content.josephus{
  display:none!important;
}
body.reader-focus .verse{
  margin-bottom:18px!important;
  padding-bottom:18px!important;
}
body.reader-focus .verse-text{
  line-height:var(--bible-line-height)!important;
}
body.reader-focus .definable,
body.reader-focus .person-name{
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
body.reader-focus .chapter-title{
  margin-bottom:10px!important;
}

/* When Study Mode is on, make closed panels feel like skinny taps, not cards. */
body.study-focus .study-layer:not([open]){
  margin-top:4px!important;
  margin-bottom:4px!important;
  padding:0!important;
  border-radius:999px!important;
  min-height:0!important;
  box-shadow:none!important;
}
body.study-focus details.study-layer:not([open]) > summary,
body.study-focus .collapsible-section.study-layer:not([open]) > summary,
body.study-focus .amp-nuance-panel.study-layer:not([open]) > summary,
body.study-focus .universal-study-card.study-layer:not([open]) > summary,
body.study-focus .strongs-roots-panel.study-layer:not([open]) > summary,
body.study-focus .verse-context-strip.study-layer:not([open]) > summary{
  padding:4px 9px!important;
  min-height:24px!important;
  line-height:1.15!important;
  font-size:10px!important;
  letter-spacing:.02em!important;
  border-radius:999px!important;
  align-items:center!important;
}
body.study-focus .study-layer:not([open]) small,
body.study-focus .study-layer:not([open]) .collapsible-cue{
  font-size:9px!important;
  max-width:38vw!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.study-focus .study-layer:not([open]) .kingdom-lens-label,
body.study-focus .study-layer:not([open]) .cultural-label,
body.study-focus .study-layer:not([open]) .flag-label{
  font-size:10px!important;
}
body.study-focus .cross-refs-panel.study-layer:not([open]){
  margin:4px 0!important;
  padding:0!important;
  background:transparent!important;
}
body.study-focus .cross-refs-panel.study-layer:not([open]) > summary{
  padding:4px 9px!important;
}

/* Hide button makes expanded mobile navigation less dominant. */
@media(max-width:680px){
  .study-layer-toggle{
    min-width:88px!important;
    padding:8px 11px!important;
  }
  body.reader-focus .main{
    padding-top:8px!important;
  }
  body.reader-focus .verse{
    padding-top:6px!important;
    padding-bottom:14px!important;
    margin-bottom:14px!important;
  }
  body.reader-focus .verse-text{
    font-size:var(--bible-text-size)!important;
    line-height:var(--bible-line-height)!important;
  }
  body.study-focus .study-layer:not([open]){
    max-width:100%!important;
    margin-top:3px!important;
    margin-bottom:3px!important;
  }
  body.study-focus details.study-layer:not([open]) > summary,
  body.study-focus .collapsible-section.study-layer:not([open]) > summary,
  body.study-focus .amp-nuance-panel.study-layer:not([open]) > summary,
  body.study-focus .universal-study-card.study-layer:not([open]) > summary,
  body.study-focus .strongs-roots-panel.study-layer:not([open]) > summary,
  body.study-focus .verse-context-strip.study-layer:not([open]) > summary{
    padding:3px 8px!important;
    min-height:22px!important;
    font-size:9.5px!important;
  }
  body.study-focus .amp-text-content,
  body.study-focus .plot-plain,
  body.study-focus .heartbeat-body,
  body.study-focus .culture-body,
  body.study-focus .amp-note-text{
    font-size:15px!important;
    line-height:1.55!important;
  }
}

/* ============================================================
   SWRV UX OVERHAUL — Reading Modes + Unified Study Sheet
   ============================================================
   Three-mode reading model: read / study / scholar.
   Read   = clean Bible text only; inline study cards hidden; the small
            [Study] chip is the only inline study affordance.
   Study  = same as Read, but the [Study] chip is more prominent and the
            study panel opens by default on desktop.
   Scholar= inline cards remain visible inline, plus the study sheet.
   The study sheet is one DOM element that renders as a bottom drawer
   on mobile (≤680px) and a side panel on desktop. Tabs source data from
   the existing project globals — no card duplication. */

/* Mode 1 + 2 (Read / Study) — hide ALL inline study-layer content. */
body[data-reading-mode="read"] .study-layer,
body[data-reading-mode="study"] .study-layer{ display:none !important; }
/* Mode 3 (Scholar) — show everything inline. */
body[data-reading-mode="scholar"] .study-layer{ display:revert; }

/* The per-verse Study chip — small, clean, always present. */
.verse-study-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:10px 0 0;
  padding:6px 12px;
  border:1px solid rgba(212,175,55,0.42);
  background:linear-gradient(180deg, rgba(212,175,55,0.12), rgba(0,0,0,0.05));
  color:var(--gold);
  border-radius:999px;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:all .15s ease;
}
.verse-study-chip:hover{ background:rgba(212,175,55,0.22); transform:translateY(-1px); }
.verse-study-chip:active{ transform:translateY(0); }
/* Bookmark chip */
.verse-bm-chip{ color:var(--fg); border-color:rgba(255,255,255,0.28); }
.verse-bm-chip.active{ color:var(--gold); border-color:rgba(212,175,55,0.6); background:rgba(212,175,55,0.12); }
/* Note chip */
.verse-note-chip{ color:var(--fg); border-color:rgba(255,255,255,0.28); }
.verse-note-chip.has-note{ color:#7eb8f7; border-color:rgba(126,184,247,0.55); background:rgba(126,184,247,0.1); }
/* Verse highlight backgrounds */
.verse.verse-hl-yellow{ background:rgba(255,220,50,0.13); border-left:3px solid rgba(255,220,50,0.55); padding-left:8px; }
.verse.verse-hl-green{ background:rgba(80,200,120,0.13); border-left:3px solid rgba(80,200,120,0.55); padding-left:8px; }
.verse.verse-hl-blue{ background:rgba(80,160,255,0.13); border-left:3px solid rgba(80,160,255,0.55); padding-left:8px; }
.verse.verse-hl-pink{ background:rgba(255,100,180,0.13); border-left:3px solid rgba(255,100,180,0.55); padding-left:8px; }
/* Inline highlight color picker */
.hl-picker{ display:flex; align-items:center; gap:10px; padding:8px 0 4px; flex-wrap:wrap; }
.hl-swatch{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .12s,border-color .12s; }
.hl-swatch:hover,.hl-swatch.hl-active{ transform:scale(1.2); border-color:var(--gold); }
.hl-yellow{ background:rgba(255,220,50,0.85); }
.hl-green{ background:rgba(80,200,120,0.85); }
.hl-blue{ background:rgba(80,160,255,0.85); }
.hl-pink{ background:rgba(255,100,180,0.85); }
.hl-{ background:var(--bg-3); border:2px solid var(--line) !important; }
/* Memory modal */
.mem-tab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--fg-mute); font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; padding:6px 14px 8px; transition:color .15s; }
.mem-tab.mem-tab-active{ color:var(--gold); border-bottom-color:var(--gold); }
.mem-item{ background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .15s; }
.mem-item:hover{ border-color:var(--gold); }
.mem-item-ref{ color:var(--gold); font-weight:700; font-size:13px; margin-bottom:4px; }
.mem-item-text{ color:var(--fg-mute); font-size:13px; line-height:1.5; font-style:italic; }

/* Text-selection highlight marks */
mark.text-hl{ background:transparent; color:inherit; border-radius:2px; padding:1px 0; }
mark.text-hl-yellow{ background:rgba(245,208,0,0.42); }
mark.text-hl-red{ background:rgba(255,82,82,0.38); }
mark.text-hl-green{ background:rgba(67,214,138,0.35); }
mark.text-hl-purple{ background:rgba(180,127,255,0.38); }
/* Floating highlight toolbar */
/* Highlight toolbar — styled like iOS native selection menu */
.hl-toolbar{
  position:fixed; z-index:10000; pointer-events:all;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%);
  display:flex; align-items:stretch;
  background:rgba(30,30,32,0.97);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:14px;
  box-shadow:0 6px 28px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  overflow:hidden; white-space:nowrap;
}
.hl-tb-btn{
  display:flex; align-items:center; gap:6px;
  padding:11px 15px;
  background:none; border:none;
  color:#fff; font-size:14px; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  font-weight:500; cursor:pointer; flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.12);
  transition:background .1s;
  -webkit-tap-highlight-color:transparent;
}
.hl-tb-btn:last-child{ border-right:none; }
.hl-tb-btn:active{ background:rgba(255,255,255,0.15); }
.hl-tb-dot{ width:13px; height:13px; border-radius:50%; flex-shrink:0; }
.hl-tb-clear{ display:flex; align-items:center; padding:11px 15px; background:none; border:none; border-left:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); font-size:13px; font-family:-apple-system,BlinkMacSystemFont,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .1s; }
.hl-tb-clear:active{ background:rgba(255,255,255,0.15); }

/* In Scholar mode the chip is still useful (gives quick access to the sheet) but lower-key. */
body[data-reading-mode="scholar"] .verse-study-chip{ opacity:0.7; font-size:11px; }
/* In Read mode the chip is the only inline study control — make it slightly more visible. */
body[data-reading-mode="read"] .verse-study-chip{
  background:linear-gradient(180deg, rgba(212,175,55,0.18), rgba(0,0,0,0.05));
  border-color:rgba(212,175,55,0.55);
}

/* Reading-mode toggle group in the header */
.reading-mode-group{
  display:inline-flex;
  gap:0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-2);
}
.reading-mode-btn{
  border:none !important;
  border-radius:0 !important;
  border-right:1px solid var(--line) !important;
  background:transparent !important;
  padding:6px 12px;
}
.reading-mode-btn:last-child{ border-right:none !important; }
.reading-mode-btn.active{ background:rgba(212,175,55,0.18) !important; color:var(--gold) !important; }

/* When the study sheet is open, dim the rest a touch on mobile (handled below). */

/* ============================================================
   Unified Study Sheet — mobile bottom drawer
   ============================================================ */
.study-sheet{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.study-sheet[aria-hidden="true"]{ display:none; }
.study-sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:auto;
}
.study-sheet.open .study-sheet-backdrop{ opacity:1; }
.study-sheet-panel{
  position:relative;
  pointer-events:auto;
  background:var(--bg-1);
  color:var(--fg);
  width:100%;
  max-width:640px;
  height:78vh;
  border-radius:18px 18px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  transform:translateY(100%);
  transition:transform .26s ease;
  border-top:1px solid rgba(212,175,55,0.4);
}
.study-sheet.open .study-sheet-panel{ transform:translateY(0); }
.study-sheet-handle{
  width:42px; height:5px;
  background:rgba(255,255,255,0.22);
  border-radius:999px;
  margin:8px auto 4px;
}
.study-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px 4px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.study-sheet-ref{
  font-weight:800;
  color:var(--gold);
  font-size:16px;
  letter-spacing:0.02em;
}
.study-sheet-close{
  border:none;
  background:transparent;
  color:var(--fg-dim);
  font-size:22px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:6px;
}
.study-sheet-close:hover{ color:var(--fg); background:rgba(255,255,255,0.06); }
.study-tabs-wrap{
  position:relative;
}
.study-tabs-arrow{
  position:absolute;
  right:0;top:0;bottom:1px;
  width:52px;
  background:linear-gradient(to right, transparent, var(--bg-1) 65%);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:12px;
  pointer-events:none;
  color:var(--gold);
  font-size:22px;
  font-weight:700;
  line-height:1;
  transition:opacity .18s ease;
  z-index:2;
}
.study-tabs-arrow.hidden{ opacity:0; }
.study-sheet-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.study-sheet-tabs::-webkit-scrollbar{ display:none; }
.study-tab{
  flex:0 0 auto;
  border:1.5px solid var(--line);
  background:transparent;
  color:var(--fg-dim);
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.03em;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s ease;
}
.study-tab:hover{ color:var(--fg); border-color:rgba(212,175,55,0.55); background:rgba(212,175,55,0.08); }
.study-tab.active{
  background:rgba(212,175,55,0.28);
  color:var(--gold);
  border-color:rgba(212,175,55,0.7);
  font-weight:700;
}
.study-sheet-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:14px 16px 48px;
  -webkit-overflow-scrolling:touch;
}

/* Sheet content sections */
.sheet-section{
  margin-bottom:12px;
  padding:14px 16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:visible;
}
.sheet-section-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.10em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:10px;
  opacity:0.85;
}
.sheet-text{ font-size:14px; line-height:1.55; color:var(--fg); }
.sheet-warn{
  margin-top:8px;
  padding:8px 10px;
  background:rgba(192,57,43,0.10);
  border-left:3px solid #c0392b;
  border-radius:6px;
  font-size:13px;
}
.sheet-source-trace{
  margin-top:8px;
  font-size:12px;
  font-style:italic;
  color:var(--fg-dim);
}
.sheet-empty{
  padding:20px 16px;
  color:var(--fg-dim);
  font-style:italic;
  text-align:center;
  font-size:13px;
}
.sheet-used{ border-color:rgba(212,175,55,0.45); }
.used-row{ font-size:13px; line-height:1.5; padding:2px 0; }
.used-row b{ color:var(--gold); }
.used-snippet{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.sheet-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.lex-pill{
  border:1px solid rgba(212,175,55,0.35);
  background:rgba(212,175,55,0.10);
  color:var(--gold);
  border-radius:999px;
  padding:5px 11px;
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  transition:all .12s ease;
}
.lex-pill:hover{ background:rgba(212,175,55,0.22); }
.lex-pill-big{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  padding:8px 12px;
  gap:2px;
  border-radius:10px;
  text-align:left;
}
.lex-pill-word{ font-size:16px; font-weight:700; color:var(--fg); }
.lex-pill-id{ font-size:10px; color:var(--gold); letter-spacing:0.04em; }
.lex-pill-gloss{ font-size:11px; color:var(--fg-dim); font-style:italic; }
.sheet-trans{ padding:10px 0; border-bottom:1px dashed var(--line); }
.sheet-trans:last-child{ border-bottom:none; }
.sheet-trans-label{ font-size:11px; font-weight:800; letter-spacing:0.05em; color:var(--gold); margin-bottom:4px; }
.sheet-trans-text{ font-size:14px; line-height:1.55; color:var(--fg); }

/* ============================================================
   Desktop layout — convert bottom sheet to RIGHT side panel
   ============================================================ */
@media (min-width: 900px){
  .study-sheet{ align-items:stretch; justify-content:flex-end; }
  .study-sheet-backdrop{
    background:rgba(0,0,0,0.25);
  }
  .study-sheet-panel{
    width:440px;
    max-width:480px;
    height:100vh;
    border-radius:0;
    border-top:none;
    border-left:1px solid rgba(212,175,55,0.4);
    transform:translateX(100%);
    box-shadow:-20px 0 60px rgba(0,0,0,0.5);
  }
  .study-sheet.open .study-sheet-panel{ transform:translateX(0); }
  .study-sheet-handle{ display:none; }
  /* When the panel is open in desktop study/scholar mode, the main content can shift
     to keep the Bible text comfortably readable next to the panel. */
  body.study-sheet-open .main{ padding-right:460px; transition:padding-right .25s ease; }
}

/* ============================================================
   Layer Filters popover — solid card, theme-safe, backdrop on mobile
   ============================================================
   The earlier panel used var(--bg-1) which was never defined, so the
   parchment background bled through and made every row hard to read.
   This rewrite: explicit solid background, opaque card, full-width
   bottom sheet on mobile with a backdrop, comfortable tap targets,
   high-contrast text, clear hover/active/focus states. */
.layer-filters-popover{
  position:fixed;
  top:72px;
  right:14px;
  z-index:9200;
  width:320px;
  max-width:calc(100vw - 28px);
  /* Solid background — falls back to a real color if --bg-1 isn't set. */
  background:var(--bg-1, var(--bg));
  color:var(--fg);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.15);
  padding:0;
  display:none;
  /* Belt-and-suspenders: explicitly opaque even if a parent has opacity. */
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
}
.layer-filters-popover[aria-hidden="false"],
.layer-filters-popover.open{ display:flex; flex-direction:column; }
/* Backdrop that dims the page behind the panel. Sits between the page
   and the panel so the panel always looks separate from the Bible. */
.layer-filters-popover.open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:-1; /* behind the panel, in front of the page */
  pointer-events:none;
}
/* Make the backdrop interactive on mobile so tapping outside closes. */
.layer-filters-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.50);
  z-index:9150;
  display:none;
}
.layer-filters-backdrop.open{ display:block; }

.layer-filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.layer-filters-head > span{
  font-weight:800;
  color:var(--gold);
  letter-spacing:0.06em;
  font-size:14px;
  text-transform:uppercase;
}
.layer-filters-close{
  border:1px solid var(--line);
  background:var(--bg-3);
  color:var(--fg);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:6px 12px;
  border-radius:8px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.layer-filters-close:hover,
.layer-filters-close:focus-visible{
  background:var(--gold);
  color:var(--bg);
  outline:none;
}
.layer-filters-help{
  font-size:12px;
  color:var(--fg-mute);
  padding:10px 16px 4px;
  line-height:1.45;
}
.layer-filters-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:60vh;
  overflow-y:auto;
  padding:8px 10px;
  background:var(--bg-1, var(--bg));
}
.layer-filter-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--fg);
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:10px;
  min-height:44px; /* Apple HIG comfortable touch target */
  cursor:pointer;
  background:transparent;
  transition:background .12s ease, border-color .12s ease;
  user-select:none;
}
.layer-filter-row:hover{
  background:var(--bg-2);
  border-color:var(--line);
}
.layer-filter-row:focus-within{
  background:var(--bg-2);
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(212,175,55,0.25);
}
/* Selected state: row is highlighted when its checkbox is checked. */
.layer-filter-row:has(input[type="checkbox"]:checked){
  background:rgba(212,175,55,0.10);
  border-color:rgba(212,175,55,0.35);
}
/* Unselected state: subtle muted look. */
.layer-filter-row:not(:has(input[type="checkbox"]:checked)){
  color:var(--fg-dim);
}
.layer-filter-row input[type="checkbox"]{
  accent-color:var(--gold);
  width:20px; height:20px;
  flex:0 0 auto;
  cursor:pointer;
}
.layer-filters-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px 16px 14px;
  border-top:1px solid var(--line);
  background:var(--bg-2);
}
.layer-filters-actions .icon-btn{
  min-height:38px;
  padding:8px 14px;
  font-size:13px;
}

/* ---------- Mobile: bottom sheet with backdrop ---------- */
@media (max-width: 680px){
  .layer-filters-popover{
    /* Slide-up bottom sheet, full width */
    top:auto;
    right:0;
    left:0;
    bottom:0;
    width:100%;
    max-width:100%;
    max-height:85vh;
    border-radius:18px 18px 0 0;
    border:none;
    border-top:3px solid var(--gold);
    box-shadow:0 -16px 50px rgba(0,0,0,0.6);
    transform:translateY(100%);
    transition:transform .25s ease;
  }
  .layer-filters-popover[aria-hidden="false"],
  .layer-filters-popover.open{
    transform:translateY(0);
  }
  .layer-filters-popover.open::before{
    /* The backdrop is rendered by .layer-filters-backdrop on mobile so it
       can receive taps to close. Hide the pseudo to avoid double-darkening. */
    display:none;
  }
  .layer-filters-head{ padding:14px 18px 12px; }
  .layer-filters-list{ max-height:55vh; padding:10px; }
  .layer-filter-row{ font-size:15px; min-height:48px; }
  .layer-filter-row input[type="checkbox"]{ width:22px; height:22px; }
  .layer-filters-actions{ padding:12px 16px calc(env(safe-area-inset-bottom, 12px) + 12px); }
}

/* ============================================================
   Mobile-only tweaks — push the Study sheet above the mini player
   ============================================================ */
@media (max-width: 680px){
  .verse-study-chip{ font-size:13px; padding:7px 14px; }
  .study-sheet-panel{ height:82vh; }
  .study-sheet-tabs{ padding:6px 10px; gap:5px; }
  .study-tab{ padding:7px 12px; font-size:12px; }
  .reading-mode-group{ overflow:hidden; }
  .reading-mode-btn{ padding:6px 8px; font-size:11px; }
}

/* ============================================================
   Contextual word-sense resolver — strict section ordering
   ============================================================ */
.sheet-section-headline{
  font-size:11px !important;
  font-weight:900;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--gold) !important;
  margin-bottom:8px;
}
.sheet-used { border-left:3px solid var(--gold); }
.sheet-sense { border-left:3px solid #3a6b3a; }
.sheet-warn-section { border-left:3px solid #c0392b; background:rgba(192,57,43,0.06); }
.sheet-family { border-left:3px solid #5a4080; }
.sheet-deep { border-left:3px solid #2980b9; }
.sheet-matters { border-left:3px solid var(--gold-bright); }
.used-confidence { font-size:11px; color:var(--fg-mute); font-style:italic; margin-top:4px; }
.used-warn { color:#c0392b; font-weight:700; }
.used-snippet { margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-size:13px; }
.lex-pill-active{
  background:rgba(212,175,55,0.25) !important;
  border-color:var(--gold) !important;
  color:var(--fg) !important;
  font-weight:800;
}

/* ============================================================
   Hide / unhide the Book / Chapter / Verse / Canonical row
   (works at every screen width; user preference persisted) */
.study-nav-bar.nav-fully-hidden{
  display:none !important;
}
.nav-show-chip{
  display:none;
  position:fixed;
  top:64px;
  left:50%;
  transform:translateX(-50%);
  z-index:8500;
  padding:6px 14px;
  min-height:32px;
  border:1px solid var(--gold);
  border-radius:999px;
  background:var(--bg-2);
  color:var(--gold);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.nav-show-chip.visible{ display:inline-flex; align-items:center; gap:6px; }
.nav-show-chip:hover,
.nav-show-chip:focus-visible{
  background:var(--gold);
  color:var(--bg);
  outline:none;
}
@media (max-width: 680px){
  .nav-show-chip{ top:58px; font-size:11px; padding:5px 12px; min-height:30px; }
}
.sheet-sources { border-left:3px solid var(--fg-dim); }

/* === Plain-English headline — lead the definition panel with a clear, simple meaning === */
.plain-section{
  background:rgba(212,175,55,0.10);
  border:1px solid rgba(212,175,55,0.45);
  border-left:4px solid var(--gold);
  border-radius:10px;
}
.plain-section .def-section-label{ color:var(--gold); }
.plain-text{
  font-size:16px;
  line-height:1.55;
  font-weight:600;
  color:var(--fg);
}

/* ============================================================
   CHAPTER INTRO CARDS — story context before each chapter
   ============================================================ */
.chapter-intro-card {
  margin: 0 0 22px 0;
  padding: 18px 20px;
  background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.28);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  line-height: 1.65;
}
.chapter-intro-book {
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(212,175,55,0.25);
  line-height: 1.6;
}
.chapter-intro-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.chapter-intro-text {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.7;
}
/* Hide in scholar mode — scholars know what the chapter is about */
body[data-reading-mode="scholar"] .chapter-intro-card {
  display: none;
}

/* ============================================================
   PLAIN ENGLISH SECTION — always prominent
   ============================================================ */
.plain-section {
  background: rgba(212,175,55,0.10) !important;
  border: 1px solid rgba(212,175,55,0.45) !important;
  border-left: 4px solid var(--gold) !important;
}
.plain-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--fg);
}

/* ============================================================
   FONT SIZE — CSS custom property driven
   ============================================================ */
:root {
  --bible-text-size: 17px;
  --bible-line-height: 1.72;
}
.verse-text, .verse-body { font-size: var(--bible-text-size) !important; line-height: var(--bible-line-height) !important; }
#fontSizeBtn { font-weight: 700; font-size: 12px; min-width: 52px; }

/* ============================================================
   TYPOGRAPHY PANEL — Word/Pages-style picker
   ============================================================ */
.typo-panel{
  position:fixed; bottom:calc(72px + env(safe-area-inset-bottom,0px)); right:16px;
  width:300px; max-width:calc(100vw - 24px);
  background:var(--bg-1,var(--bg)); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.45);
  padding:0 0 12px; z-index:9999; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(0.96);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.typo-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.typo-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px; border-bottom:1px solid var(--line);
}
.typo-panel-title{ font-size:14px; font-weight:700; color:var(--gold); letter-spacing:0.04em; font-family:-apple-system,sans-serif; }
.typo-close{ background:none; border:none; color:var(--fg-dim); font-size:16px; cursor:pointer; padding:2px 6px; border-radius:6px; }
.typo-close:hover{ color:var(--fg); background:rgba(128,128,128,0.15); }
.typo-section-label{ font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-dim); padding:10px 14px 4px; font-family:-apple-system,sans-serif; }
.typo-stepper{
  display:flex; align-items:center; gap:0; margin:0 14px 8px;
  border:1.5px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--bg-2);
}
.typo-step-btn{
  background:none; border:none; color:var(--fg); font-size:22px; font-weight:300;
  padding:6px 16px; cursor:pointer; flex:0 0 auto;
  font-family:-apple-system,sans-serif; transition:background .1s;
  line-height:1; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.typo-step-btn:hover{ background:rgba(212,175,55,0.12); color:var(--gold); }
.typo-size-input{
  flex:1; border:none; background:transparent; text-align:center;
  font-size:22px; font-weight:700; color:var(--gold);
  font-family:-apple-system,sans-serif; outline:none; width:0; min-width:0;
  padding:6px 0;
}
.typo-size-unit{ font-size:12px; color:var(--fg-dim); padding-right:10px; font-family:-apple-system,sans-serif; }
.typo-presets{
  display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 4px;
}
.typo-preset{
  background:transparent; border:1.5px solid var(--line); color:var(--fg-mute);
  padding:5px 10px; border-radius:8px; font-size:12px; font-family:-apple-system,sans-serif;
  font-weight:600; cursor:pointer; transition:all .12s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.typo-preset:hover{ border-color:rgba(212,175,55,0.5); color:var(--fg); }
.typo-preset.active{ background:rgba(212,175,55,0.22); border-color:rgba(212,175,55,0.7); color:var(--gold); }
.typo-families{
  display:flex; flex-direction:column; gap:4px; padding:0 14px;
}
.typo-family-btn{
  background:transparent; border:1.5px solid var(--line); color:var(--fg-mute);
  padding:8px 12px; border-radius:8px; font-size:14px; cursor:pointer;
  text-align:left; transition:all .12s; letter-spacing:0.01em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.typo-family-btn:hover{ border-color:rgba(212,175,55,0.5); color:var(--fg); }
.typo-family-btn.active{ background:rgba(212,175,55,0.18); border-color:rgba(212,175,55,0.6); color:var(--gold); }
@media(max-width:480px){
  .typo-panel{ right:8px; left:8px; width:auto; bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
}

/* ============================================================
   THREAD CHIPS — appear below verse, always visible
   ============================================================ */
.thread-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px 0;
}
.thread-chip {
  background: transparent;
  border: 1px solid;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, opacity 0.15s;
  line-height: 1.3;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-chip:hover, .thread-chip:active { opacity: 0.75; }

/* ============================================================
   THREAD PANEL — opens in the existing def popup
   ============================================================ */
#defPopup.thread-panel { max-width: 520px; }
.thread-panel-inner { padding: 0 0 16px 0; }
.thread-panel-tag {
  display: inline-block;
  border: 1px solid;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.thread-panel-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.3;
  margin: 0 0 10px 0;
}
.thread-panel-plain {
  background: rgba(212,175,55,0.10);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
  line-height: 1.55;
}
.thread-panel-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg);
  margin-bottom: 16px;
}
.thread-panel-body p { margin: 0 0 12px 0; }
.thread-panel-desc {
  font-size: 13px;
  color: var(--fg-dim, #8a7a60);
  margin-bottom: 14px;
  line-height: 1.6;
}
.thread-panel-section { margin-bottom: 14px; }
.thread-panel-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 6px;
}
.thread-panel-sources {
  font-size: 11px;
  color: var(--fg-dim, #8a7a60);
  padding-top: 12px;
  border-top: 1px dashed rgba(212,175,55,0.2);
  margin-top: 12px;
  line-height: 1.5;
}
.thread-panel-deeper {
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.thread-panel-deeper summary { font-size: 12px; font-weight: 700; color: var(--gold); cursor: pointer; }
.thread-panel-deeper-body { font-size: 13px; line-height: 1.7; color: var(--fg); margin-top: 10px; }
.thread-panel-related { margin-top: 18px; border-top: 1px solid rgba(212,175,55,0.2); padding-top: 14px; }
.thread-panel-related-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 8px; }
.thread-nav-pill {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 5px 12px;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 20px;
  font-size: 11px;
  cursor: pointer;
  background: transparent;
  color: var(--fg-dim, #8a7a60);
  transition: all 0.15s;
}
.thread-nav-pill.active, .thread-nav-pill:hover {
  background: rgba(212,175,55,0.15);
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   THREAD BROWSER — category cards and item list
   ============================================================ */
.thread-categories { display: flex; flex-direction: column; gap: 10px; }
.thread-category-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  transition: background 0.15s;
}
.thread-category-card:hover { background: rgba(255,255,255,0.06); }
.thread-category-icon { font-size: 28px; flex-shrink: 0; }
.thread-category-content { flex: 1; min-width: 0; }
.thread-category-label { font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.thread-category-desc { font-size: 12px; color: var(--fg-dim, #8a7a60); line-height: 1.5; margin-bottom: 4px; }
.thread-category-count { font-size: 11px; font-weight: 700; color: var(--fg-dim, #8a7a60); }
.thread-category-arrow { font-size: 22px; font-weight: 300; flex-shrink: 0; }

.thread-browser-list { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; }
.thread-browser-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(212,175,55,0.1);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
}
.thread-browser-item:hover { background: rgba(255,255,255,0.04); }
.thread-browser-num { font-size: 12px; font-weight: 800; min-width: 20px; padding-top: 2px; }
.thread-browser-content { flex: 1; min-width: 0; }
.thread-browser-item-title { font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 3px; }
.thread-browser-item-plain { font-size: 12px; color: var(--fg-dim, #8a7a60); line-height: 1.5; }
.thread-browser-arrow { font-size: 20px; font-weight: 300; padding-top: 2px; }

/* Thread browse button in header */
.thread-browse-btn { font-size: 12px; font-weight: 700; }

/* === IDENTITY UNLOCK MODAL === */
#unlockModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.unlock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.unlock-card {
  position: relative;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 20px;
  padding: 36px 28px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.unlock-badge {
  display: inline-block;
  background: var(--accent, #c9a84c);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
  font-family: 'SF Pro Display', -apple-system, sans-serif;
}
.unlock-headline {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg, #fff);
  margin: 0 0 8px;
  font-family: 'New York', 'SF Pro Display', Georgia, serif;
  line-height: 1.2;
}
.unlock-sub {
  font-size: 15px;
  color: var(--accent, #c9a84c);
  margin: 0 0 16px;
  font-style: italic;
}
.unlock-body {
  font-size: 14px;
  color: var(--fg-dim, rgba(255,255,255,0.65));
  line-height: 1.7;
  margin: 0 0 24px;
}
.unlock-cta {
  display: block;
  background: var(--accent, #c9a84c);
  color: #000;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 12px;
  font-family: 'SF Pro Text', -apple-system, sans-serif;
  transition: opacity 0.2s;
}
.unlock-cta:active { opacity: 0.8; }
.unlock-close {
  background: none;
  border: none;
  color: var(--fg-dim, rgba(255,255,255,0.45));
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  font-family: 'SF Pro Text', -apple-system, sans-serif;
}

/* ============================================================
   SHEET LIST — bullet alignment fix
   ============================================================ */
.sheet-list {
  margin: 4px 0 0 0;
  padding-left: 20px;
  list-style-type: disc;
}
.sheet-list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 6px;
  padding-left: 2px;
}

/* ============================================================
   STUDY SHEET TABS — prevent clip, ensure pill shape
   ============================================================ */
.study-sheet-tabs {
  padding: 8px 14px 8px;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.study-sheet-tabs::before,
.study-sheet-tabs::after {
  content: '';
  flex: 0 0 2px;
}
.study-tab {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   MODAL — X close button at top right
   ============================================================ */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--hairline, var(--line));
}
.modal-header .modal-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1 1 auto;
}
.modal-x-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1;
  padding: 0;
  margin-top: 2px;
}
.modal-x-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); border-color: var(--gold); }

/* ============================================================
   FONT SIZE CONTROLS — floating button + popover
   ============================================================ */
.font-size-btn {
  position: fixed;
  bottom: 80px;
  right: 14px;
  z-index: 200;
  background: var(--bg-2, #1e1a14);
  border: 1px solid var(--line);
  color: var(--fg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transition: all 0.15s;
  font-family: inherit;
}
.font-size-btn:hover { border-color: var(--gold); color: var(--gold); }
.font-size-popover {
  position: fixed;
  bottom: 128px;
  right: 10px;
  z-index: 201;
  background: var(--bg-2, #1e1a14);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
  min-width: 200px;
}
.font-size-popover.open { display: block; }
.font-size-popover-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.font-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.font-size-step {
  background: var(--bg-3, #2a2420);
  border: 1px solid var(--line);
  color: var(--fg);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  flex: 0 0 auto;
  transition: all 0.12s;
  padding: 0;
}
.font-size-step:hover { border-color: var(--gold); color: var(--gold); }
.font-size-current {
  flex: 1 1 auto;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.font-size-reset {
  margin-top: 8px;
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 11px;
  padding: 5px 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.font-size-reset:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   TTS PLAYER BAR
   ============================================================ */
.tts-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--bg-2, #1e1a14);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.tts-bar.active { display: flex; }
.tts-bar-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tts-bar-verse {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--fg-mute);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tts-bar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tts-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  line-height: 1;
}
.tts-btn:hover { border-color: var(--gold); color: var(--gold); }
.tts-btn.tts-play-pause {
  background: var(--gold);
  color: #0e0a06;
  border-color: var(--gold);
  font-size: 18px;
  padding: 7px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.tts-btn.tts-play-pause:hover { background: var(--gold-bright, #f5d060); }
.tts-speed-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-dim);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  min-width: 42px;
  text-align: center;
}
.tts-speed-btn:hover { border-color: var(--gold); color: var(--gold); }
.tts-close-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
}
.tts-bar-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Listen button in chapter title */
.tts-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  vertical-align: middle;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.tts-listen-btn:hover { background: rgba(212,175,55,0.22); }

/* Highlight the verse currently being read */
.verse-tts-active .verse-text {
  background: rgba(212,175,55,0.12);
  border-radius: 4px;
  outline: 1.5px solid rgba(212,175,55,0.4);
}
@media (min-width: 900px) {
  .tts-bar { padding: 12px 24px; }
  .font-size-btn { bottom: 20px; }
  .font-size-popover { bottom: 68px; }
}

/* === Auth header button === */
.auth-header-btn { position: relative; }
.auth-header-btn.signed-in {
  background: rgba(212,175,55,0.12);
  border-color: var(--gold);
  color: var(--gold);
}
.auth-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: #111;
  font-weight: 700;
  font-size: 11px;
}

/* === Resume reading bar === */
.resume-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(20,16,10,0.97);
  border-bottom: 1.5px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
}
.resume-bar-icon { font-size: 18px; flex-shrink: 0; }
.resume-bar-text { flex: 1; color: var(--fg); font-weight: 500; }
.resume-bar-btn {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.resume-bar-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}

/* === Auth modal === */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 10100;
}
.auth-overlay.show { display: block; }
.auth-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10200;
  background: var(--bg-2, var(--bg));
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 32px 28px 28px;
  width: min(90vw, 380px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.auth-modal.show { display: block; }
.auth-modal-x {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.auth-brand {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.auth-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--fg);
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 13px;
  text-align: center;
  color: var(--fg-dim);
  line-height: 1.5;
  margin-bottom: 18px;
}
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 999px;
  background: #fff;
  color: #222;
  border: 1.5px solid #ddd;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s;
}
.auth-google-btn:hover { background: #f5f5f5; }
.auth-divider {
  text-align: center;
  position: relative;
  margin: 14px 0;
  color: var(--fg-dim);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--line);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-divider span { position: relative; padding: 0 8px; }
.auth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: var(--gold); }
.auth-error {
  background: rgba(200,60,60,0.12);
  border: 1px solid rgba(200,60,60,0.3);
  border-radius: 8px;
  color: #e05050;
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.auth-primary-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
  transition: opacity 0.15s;
}
.auth-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-primary-btn:hover:not(:disabled) { opacity: 0.9; }
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--fg-dim);
}
.auth-link-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.account-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
  margin-bottom: 4px;
}
.account-email {
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
  margin-bottom: 8px;
}

/* === Notes tab === */
.notes-tab { padding: 12px 4px; }
.notes-ref-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-dim);
  margin-bottom: 10px;
}
.notes-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 140px;
  outline: none;
  transition: border-color 0.15s;
}
.notes-textarea:focus { border-color: var(--gold); }
.notes-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.notes-save-btn {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.notes-save-btn:disabled { opacity: 0.5; }
.notes-delete-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: none;
  color: #e05050;
  border: 1.5px solid rgba(200,60,60,0.35);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.notes-status {
  font-size: 12px;
  color: var(--gold);
  margin-top: 6px;
  min-height: 18px;
}

/* === Place card map buttons === */
.place-map-row {
  margin: 10px 0 6px;
}
.place-map-note {
  font-size: 11px;
  color: var(--fg-dim);
  font-style: italic;
  margin-bottom: 7px;
  line-height: 1.45;
}
.place-map-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.place-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  background: rgba(212,175,55,0.08);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.place-map-btn:hover, .place-map-btn:active {
  background: rgba(212,175,55,0.22);
}
.place-map-btn.apple {
  border-color: var(--fg-dim);
  color: var(--fg-dim);
  background: rgba(120,120,120,0.07);
}
.place-map-btn.apple:hover, .place-map-btn.apple:active {
  background: rgba(120,120,120,0.16);
}

/* === TTS voice / persona picker === */
.tts-voice-btn {
  background: none;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 6px;
  color: var(--gold);
  font-size: 15px;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: 4px;
  line-height: 1;
}
.tts-voice-btn:hover { background: rgba(212,175,55,0.12); }
.tts-voice-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 12px;
  background: var(--bg-2, #1a1610);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  z-index: 10000;
}
.tts-voice-popover.show { display: block; }

/* Persona picker title */
.tts-persona-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-dim);
  margin-bottom: 10px;
  padding: 0 2px;
}

/* 2-column persona grid */
.tts-persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tts-persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 11px;
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.tts-persona-card:hover {
  border-color: rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.06);
}
.tts-persona-card.active {
  border-color: var(--gold);
  background: rgba(212,175,55,0.12);
}

.tts-persona-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}
.tts-persona-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.tts-persona-card.active .tts-persona-name { color: var(--gold); }
.tts-persona-desc {
  font-size: 10px;
  color: var(--fg-dim);
  line-height: 1.3;
}
.tts-persona-voice {
  font-size: 9px;
  color: rgba(212,175,55,0.5);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}