{"id":10,"date":"2026-06-27T08:34:40","date_gmt":"2026-06-27T08:34:40","guid":{"rendered":"https:\/\/exploretheword.app\/?page_id=10"},"modified":"2026-06-27T08:34:43","modified_gmt":"2026-06-27T08:34:43","slug":"home-2","status":"publish","type":"page","link":"https:\/\/exploretheword.app\/?page_id=10","title":{"rendered":"home"},"content":{"rendered":"<input type=\"hidden\" id=\"dd-auth-nonce\" value=\"fc32d5052f\"><script>\n    window.ddAppConfig = window.ddAppConfig || {};\n    window.ddAppConfig.ajaxUrl = \"https:\/\/exploretheword.app\/wp-admin\/admin-ajax.php\";\n    window.ddAppConfig.isLoggedIn = false;\n    window.ddAppConfig.state = {};\n    window.ddAppConfig.stateNonce = \"e72e3fbbd8\";\n    window.ddAppConfig.userDataVersion = \"0\";\n<\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/state.js?v=4.99.46\"><\/script>\n\n<style>\n\/* --- LOADED: 1-base.css --- *\/\n\/* 1-base.css *\/\n\n\/* ---------------------------------------------------------------------------\n   THEME OVERRIDE: strip inherited link underlines.\n   Some themes add `text-decoration: underline` to every <a>, which draws a line\n   under feed cards (each card is a link) and links throughout the app. Remove it\n   on the app's own surfaces only. The #dd-workspace id keeps this specific enough\n   to beat a theme's `.class a` rule. The dotted study-note indicator uses\n   border-bottom rather than text-decoration, so it is left intact.\n   --------------------------------------------------------------------------- *\/\n#dd-workspace a,\n#dd-workspace a:hover,\n#dd-workspace a:focus,\n.dd-apple-workspace a,\n.dd-apple-workspace a:hover,\n.dd-today-read a,\n.dd-today-read a:hover,\n.dd-feed a,\n.dd-feed-card,\n.dd-feed-card:hover {\n    text-decoration: none !important;\n}\n\nbody.dd-bible-app-body {\n    background-color: #F4F5F7 !important;\n    background-image:\n        radial-gradient(at 0% 0%, rgba(0, 122, 255, 0.06) 0px, transparent 50%),\n        radial-gradient(at 100% 0%, rgba(90, 200, 250, 0.06) 0px, transparent 50%),\n        radial-gradient(at 100% 100%, rgba(0, 122, 255, 0.04) 0px, transparent 50%),\n        radial-gradient(at 0% 100%, rgba(90, 200, 250, 0.04) 0px, transparent 50%) !important;\n    background-attachment: fixed !important;\n}\n\n.dd-apple-workspace {\n    max-width: 1200px !important;\n    margin: 0 auto !important;\n    padding: 160px 5vw 120px 5vw !important;\n    font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important;\n    color: #1D1D1F !important;\n    box-sizing: border-box;\n    -webkit-font-smoothing: antialiased;\n}\n\n.dd-apple-pane { display: none; animation: ddAppleFade 0.5s ease forwards; }\n.dd-apple-pane.active { display: block; }\n@keyframes ddAppleFade { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\n\n.dd-apple-workspace.hide-strongs .dd-apple-strongs { display: none !important; }\n.dd-apple-workspace.hide-xrefs .dd-apple-xref-wrapper, .dd-apple-workspace.hide-xrefs .dd-apple-xref-sup { display: none !important; }\n\n\n\/* --- LOADED: 2-header.css --- *\/\n\/* 2-header.css *\/\na:focus, button:focus { outline: none !important; }\n\n\/* STRICT VISIBILITY CLASSES *\/\n.dd-hide-on-mobile { display: flex !important; }\n.dd-hide-on-desktop { display: none !important; }\n.dd-desktop-only { display: flex !important; }\n.dd-mobile-only { display: none !important; }\n\n\/* ==========================================\n   REMOVED BACK BUTTON GLOBALLY\n   ========================================== *\/\n.dd-desktop-back-btn { display: none !important; }\n\n\/* ==========================================\n   HAMBURGER MENU & DRAWER\n   ========================================== *\/\n.dd-hamburger-btn {\n    background: transparent !important; border: none !important; color: #1D1D1F !important;\n    padding: 8px !important; margin: 0 !important; cursor: pointer !important;\n    display: flex !important; align-items: center !important; justify-content: center !important;\n    border-radius: 8px !important; transition: background 0.2s !important; outline: none !important;\n}\n.dd-hamburger-btn:hover { background: rgba(0,0,0,0.05) !important; }\n\n.dd-side-menu-overlay {\n    position: fixed !important; top: 0 !important; left: 0 !important;\n    width: 100vw !important; height: 100vh !important;\n    background: rgba(0,0,0,0.4) !important; z-index: 999999 !important;\n    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;\n}\n.dd-side-menu-overlay.active { opacity: 1; visibility: visible; }\n\n.dd-side-menu-drawer {\n    position: fixed !important; top: 0 !important; left: -300px !important;\n    width: 280px !important; height: 100vh !important;\n    background: #FFFFFF !important; z-index: 1000000 !important;\n    box-shadow: 4px 0 24px rgba(0,0,0,0.1) !important;\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    display: flex !important; flex-direction: column !important; overflow-y: auto !important;\n}\n.dd-side-menu-drawer.active { transform: translateX(300px) !important; }\n\n.dd-side-menu-header { padding: 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid #e5e5ea !important; }\n.dd-side-menu-title { font-size: 18px !important; font-weight: 700 !important; color: #1D1D1F !important; font-family: -apple-system, sans-serif !important; margin: 0 !important; }\n.dd-side-menu-close { background: #F2F2F7 !important; border: none !important; width: 32px !important; height: 32px !important; border-radius: 16px !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; color: #86868B !important; transition: all 0.2s !important; padding: 0 !important; }\n.dd-side-menu-close:hover { background: #E5E5EA !important; color: #1D1D1F !important; }\n\n.dd-side-menu-links { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }\n.dd-side-menu-link { padding: 14px 16px !important; border-radius: 12px !important; text-decoration: none !important; color: #1D1D1F !important; font-size: 16px !important; font-weight: 600 !important; font-family: -apple-system, sans-serif !important; transition: background 0.2s !important; display: block !important; }\n.dd-side-menu-link:hover { background: #F2F2F7 !important; color: #007AFF !important; }\n\n\/* DESKTOP HEADER (Forced Flexbox) *\/\n.dd-apple-header {\n    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;\n    width: 100% !important; height: 84px !important;\n    background: rgba(255, 255, 255, 0.8) !important;\n    backdrop-filter: blur(24px) saturate(200%) !important; -webkit-backdrop-filter: blur(24px) saturate(200%) !important;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;\n    z-index: 9998 !important; margin: 0 !important; padding: 0 40px !important;\n    display: flex !important; justify-content: space-between !important; align-items: center !important;\n    box-sizing: border-box !important;\n}\n\n.dd-apple-header-left { flex: 1; display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 8px !important; }\n.dd-apple-header-right { flex: 1; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 16px !important; }\n\n\/* MOBILE ACTION ICONS (Settings & Search) *\/\n.dd-mobile-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; }\n.dd-action-btn { background: transparent !important; border: none !important; padding: 8px !important; margin: 0 !important; color: #007AFF !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; transition: background-color 0.2s ease !important; outline: none !important; }\n.dd-action-btn:hover { background-color: rgba(0, 122, 255, 0.1) !important; }\n.dd-action-btn svg { width: 22px !important; height: 22px !important; stroke-width: 2.2px !important; }\n\n\/* PERFECTLY CENTERED LOGO *\/\n.dd-apple-header-center {\n    position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;\n    display: flex !important; justify-content: center !important; align-items: center !important; white-space: nowrap !important; gap: 10px !important;\n    overflow: visible !important;\n}\n\n.dd-apple-title {\n    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;\n    font-family: -apple-system, sans-serif !important; font-size: 24px !important; font-weight: 700 !important;\n    letter-spacing: -0.015em !important; color: #1D1D1F !important; margin: 0 !important; line-height: 1 !important;\n    overflow: visible !important;\n}\n\n.dd-apple-title svg {\n    width: 44px !important;\n    height: 44px !important;\n    stroke-width: 2.75px !important;\n    color: #007AFF !important;\n    display: block !important;\n    flex-shrink: 0 !important;\n    overflow: visible !important;\n}\n\n.dd-apple-title-text, .dd-apple-title-sub { display: inline-block !important; transform: translateY(-2px) !important; }\n.dd-apple-title-divider { color: #D1D1D6 !important; font-weight: 300 !important; margin: 0 4px !important; display: inline-block !important; transform: translateY(-2px) !important; }\n.dd-apple-title-sub { color: #86868B !important; font-weight: 600 !important; font-size: 24px !important; }\n\n\/* DESKTOP TAB MENU *\/\n.dd-desktop-menu {\n    display: flex !important; gap: 4px !important; align-items: center !important;\n    background: rgba(118, 118, 128, 0.12) !important; padding: 4px !important;\n    border-radius: 10px !important; margin: 0 !important; border: none !important;\n}\n.dd-apple-tab {\n    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;\n    padding: 6px 16px !important; font-family: -apple-system, sans-serif !important;\n    font-size: 14px !important; font-weight: 600 !important; color: #515154 !important;\n    border-radius: 8px !important; transition: all 0.2s ease !important;\n    cursor: pointer !important; text-decoration: none !important; user-select: none !important; white-space: nowrap !important;\n}\n.dd-apple-tab:hover { color: #1D1D1F !important; }\n.dd-apple-tab.active { background: #FFFFFF !important; color: #1D1D1F !important; box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04) !important; }\n\n\/* RESPONSIVE LOGIC (Tablet) *\/\n@media (max-width: 1050px) {\n    .dd-apple-header { padding: 0 16px !important; height: 64px !important; }\n    .dd-apple-header-center { position: static !important; transform: none !important; flex: 0 0 auto !important; width: auto !important; }\n    .dd-apple-title-text, .dd-apple-title-divider, .dd-apple-title-sub { display: none !important; }\n}\n\n\/* NATIVE BOTTOM TAB BAR FOR MOBILE *\/\n@media (max-width: 850px) {\n    body { padding-bottom: 90px !important; }\n\n    .dd-hide-on-mobile { display: none !important; }\n    .dd-hide-on-desktop { display: flex !important; }\n    .dd-desktop-only { display: none !important; }\n    .dd-mobile-only { display: flex !important; }\n\n    .dd-apple-header {\n        background: rgba(250, 250, 252, 0.95) !important;\n        border: none !important; border-bottom: none !important; box-shadow: none !important;\n        height: 64px !important; outline: none !important;\n    }\n\n    .dd-mobile-bottom-bar {\n        position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;\n        width: 100vw !important; height: auto !important;\n        background: rgba(250, 250, 252, 0.95) !important;\n        backdrop-filter: blur(25px) saturate(200%) !important; -webkit-backdrop-filter: blur(25px) saturate(200%) !important;\n        border-top: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 0 !important;\n        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) 10px !important;\n        justify-content: space-around !important; align-items: flex-start !important;\n        margin: 0 !important; z-index: 999999 !important;\n    }\n    \n    \/* With the back button removed, we perfectly split the width into 4 (25% each) *\/\n    .dd-mobile-bottom-bar .dd-apple-tab {\n        flex: 1 !important; flex-direction: column !important; gap: 4px !important;\n        background: transparent !important; box-shadow: none !important;\n        padding: 0 !important;\n    }\n    .dd-mobile-bottom-bar .dd-apple-tab svg { width: 22px !important; height: 22px !important; stroke-width: 1.5px !important; display: block !important; margin: 0 auto !important; }\n    .dd-mobile-bottom-bar .dd-apple-tab span { font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; display: block !important; text-align: center !important; }\n    .dd-mobile-bottom-bar .dd-apple-tab.active { color: #007AFF !important; }\n    .dd-mobile-bottom-bar .dd-apple-tab:not(.active) { color: #8E8E93 !important; }\n}\n\n\/* --- LOADED: 3-components.css --- *\/\n\/* 3-components.css *\/\n.dd-apple-form-grid { display: flex; gap: 24px; align-items: flex-end; margin: 0 auto 80px auto; flex-wrap: wrap; max-width: 1000px; justify-content: center; }\n.dd-apple-input-wrap { display: flex; flex-direction: column; gap: 10px; }\n.dd-apple-input-wrap.button-wrap { justify-content: flex-end; }\n.dd-apple-label { font-family: -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #86868B !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-left: 8px !important; }\n\n.dd-apple-input, .dd-apple-select {\n    background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;\n    border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.02) !important;\n    padding: 0 24px !important; border-radius: 16px !important; font-family: -apple-system, sans-serif !important; font-size: 18px !important;\n    font-weight: 500 !important; color: #1D1D1F !important; outline: none !important; transition: all 0.3s ease !important; width: 100% !important; box-sizing: border-box !important; min-height: 60px !important; height: auto !important; line-height: normal !important;\n}\n.dd-apple-input:focus, .dd-apple-select:focus { background: rgba(255, 255, 255, 0.8) !important; border-color: #007AFF !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important; }\n.dd-apple-input::placeholder { color: #86868B !important; opacity: 0.7 !important; font-weight: 400 !important; }\n.dd-apple-select { appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; background-image: url('data:image\/svg+xml;utf8,<svg fill=\"none\" stroke=\"%2386868B\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" height=\"18\" viewBox=\"0 0 24 24\" width=\"18\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>') !important; background-repeat: no-repeat !important; background-position: right 20px top 50% !important; padding-right: 56px !important; }\n\n.dd-apple-btn { background: rgba(0, 122, 255, 0.9) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.2) !important; min-height: 60px !important; padding: 0 40px !important; border-radius: 16px !important; font-family: -apple-system, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 6px 20px rgba(0, 122, 255, 0.25) !important; white-space: nowrap !important; }\n.dd-apple-btn:hover { background: rgba(0, 98, 204, 0.95) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0, 122, 255, 0.35) !important; }\n\n.dd-apple-btn-icon { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.8) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.02) !important; min-height: 60px !important; width: 60px !important; border-radius: 16px !important; color: #86868B !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; padding: 0 !important; flex-shrink: 0; }\n\n.dd-apple-switch { position: relative; display: inline-block; width: 52px; height: 32px; }\n.dd-apple-switch input { opacity: 0; width: 0; height: 0; }\n.dd-apple-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E5E5EA; transition: .3s; border-radius: 32px; box-sizing: border-box; }\n.dd-apple-slider:before { position: absolute; content: \"\"; height: 24px; width: 24px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }\n.dd-apple-switch input:checked + .dd-apple-slider { background-color: #34C759; }\n.dd-apple-switch input:checked + .dd-apple-slider:before { transform: translateX(20px); }\n\n\/* Dashboard Cards *\/\n.dd-apple-dashboard { padding: 10px 0 60px 0 !important; display: flex !important; flex-direction: column !important; gap: 48px !important; max-width: 1000px !important; margin: 0 auto !important; font-family: -apple-system, BlinkMacSystemFont, sans-serif !important; }\n.dd-apple-section-title { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #1D1D1F !important; margin: 0 0 20px 4px !important; }\n.dd-apple-card { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(20px) saturate(150%) !important; border-radius: 28px !important; padding: 32px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(255,255,255,0.7) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; transition: all 0.4s !important; text-decoration: none !important; }\n.dd-apple-card:hover { background: rgba(255, 255, 255, 0.8) !important; transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important; border-color: rgba(255,255,255,1) !important; }\n\n\/* Search Layout *\/\n.dd-apple-topic-header { display: flex; align-items: center; gap: 16px; margin-bottom: 48px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; padding-bottom: 32px !important; }\n.dd-apple-topic-header h2 { font-size: 40px !important; font-weight: 700 !important; color: #86868B !important; margin: 0 !important;}\n.dd-apple-topic-header h2 span { color: #1D1D1F !important; font-weight: 800 !important; text-transform: capitalize !important;}\n.dd-apple-result-item { margin-bottom: 70px !important; }\n.dd-apple-result-ref { font-size: 18px !important; font-weight: 600 !important; color: #007AFF !important; margin-bottom: 12px !important; cursor: pointer !important; display: inline-block !important; }\n.dd-apple-result-text { font-size: 24px !important; line-height: 1.7 !important; color: #1D1D1F !important; }\n.dd-apple-highlight { background: rgba(0, 122, 255, 0.15) !important; color: #1D1D1F !important; font-weight: 600 !important; border-radius: 6px !important; padding: 2px 6px !important; }\n\n.dd-apple-loader { text-align: center; padding: 100px 0; color: #86868B; font-size: 20px !important; font-weight: 500 !important; display: none; }\n.dd-apple-loader.active { display: block; animation: applePulse 1.5s infinite; }\n@keyframes applePulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }\n\n\n\/* --- LOADED: 4-reading.css --- *\/\n\/* 4-reading.css *\/\n.dd-apple-results-area { max-width: 1100px; margin: 0 auto; position: relative; }\n\n\/* =========================================================\n   RESPONSIVE READING TITLE\n   ========================================================= *\/\n.dd-apple-reading-title { \n    display: flex; \n    align-items: center; \n    justify-content: center; \n    gap: clamp(8px, 2vw, 20px) !important; \n    font-family: -apple-system, sans-serif !important; \n    font-size: clamp(24px, 6vw, 52px) !important; \n    font-weight: 700 !important; \n    letter-spacing: -0.025em !important; \n    margin: 0 0 80px 0 !important; \n    color: #1D1D1F !important; \n    white-space: nowrap !important;\n    flex-wrap: nowrap !important;\n    max-width: 100% !important;\n}\n\n.dd-apple-reading-title span {\n    white-space: nowrap !important;\n    overflow: hidden !important;\n    text-overflow: ellipsis !important;\n}\n\n.dd-apple-reading-title .dd-apple-nav-arrow svg {\n    width: clamp(24px, 5vw, 34px) !important;\n    height: clamp(24px, 5vw, 34px) !important;\n}\n\n\/* =========================================================\n   BASE ARROWS\n   This keeps the top arrows next to the book name exactly as they were\n   ========================================================= *\/\n.dd-apple-nav-arrow { background: transparent !important; border: none !important; color: #1D1D1F !important; cursor: pointer !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0; }\n.dd-apple-nav-arrow:hover { color: #007AFF !important; transform: scale(1.15) !important; }\n\n.dd-apple-reading-body {\n    font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Display\", sans-serif !important;\n    font-size: 24px !important;\n    line-height: 2.1 !important;\n    color: #2C2C2E !important;\n    text-align: left !important;\n    max-width: 960px !important;\n    margin: 0 auto !important;\n}\n\n.dd-verse-wrap {\n    display: block !important;\n    margin-bottom: 36px !important;\n    padding-left: 0 !important;\n    transition: all 0.4s ease;\n    position: relative;\n}\n\n\/* =========================================================\n   TEMPORARY HIGHLIGHT FLASH\n   ========================================================= *\/\n.dd-verse-target-highlight {\n    animation: ddHighlighterPulse 3s ease-out forwards;\n    border-radius: 4px !important;\n    padding: 4px 10px !important;\n    margin: -4px -10px 32px -10px !important;\n    border: none !important;\n    box-shadow: none !important;\n    display: block !important;\n}\n\n@keyframes ddHighlighterPulse {\n    0% { background-color: rgba(255, 214, 10, 0.8); }\n    60% { background-color: rgba(255, 214, 10, 0.3); }\n    100% { background-color: transparent; }\n}\n\n.dd-apple-vnum {\n    font-family: -apple-system, sans-serif !important; font-size: 14px !important; font-weight: 800 !important;\n    color: #007AFF !important; vertical-align: super !important; position: relative !important; top: -2px !important;\n    margin-right: 10px !important; margin-left: 0 !important; user-select: none !important; display: inline-block !important; letter-spacing: 0.05em !important;\n}\n\n\/* =========================================================\n   ENHANCED STUDY NOTE INDICATORS\n   ========================================================= *\/\n.dd-apple-has-note {\n    text-decoration: none !important;\n    color: inherit !important;\n    display: inline !important;\n    border-bottom: 2px dotted rgba(0, 122, 255, 0.35) !important;\n    padding-bottom: 2px !important;\n    transition: all 0.2s ease !important;\n}\n\n.dd-apple-has-note:hover {\n    color: #007AFF !important;\n    border-bottom: 2px dotted #007AFF !important;\n    background-color: rgba(0, 122, 255, 0.04) !important;\n}\n\n.dd-apple-note-icon {\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    vertical-align: middle !important;\n    margin-right: 3px !important;\n    margin-left: 0px !important;\n    width: 28px !important;\n    height: 28px !important;\n    min-width: 28px !important;\n    background-color: #007AFF !important;\n    padding: 5px !important;\n    border-radius: 7px !important;\n    box-sizing: border-box !important;\n    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25) !important;\n    position: relative !important;\n    top: -1px !important;\n    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;\n}\n.dd-apple-note-icon svg, .dd-apple-note-svg {\n    width: 18px !important;\n    height: 18px !important;\n    display: block !important;\n    fill: none !important;\n    stroke: #FFFFFF !important;\n}\n.dd-apple-note-icon path, .dd-apple-note-icon rect, .dd-apple-note-icon circle, .dd-apple-note-icon line {\n    stroke: #FFFFFF !important;\n    fill: none !important;\n}\n\n\/* Inline content icons: sermon \/ marking \/ devotional \/ image *\/\n.dd-apple-content-icon {\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    vertical-align: middle !important;\n    margin-right: 3px !important;\n    margin-left: 0px !important;\n    width: 28px !important;\n    height: 28px !important;\n    min-width: 28px !important;\n    padding: 5px !important;\n    border-radius: 7px !important;\n    box-sizing: border-box !important;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;\n    position: relative !important;\n    top: -1px !important;\n    cursor: pointer !important;\n    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;\n}\n.dd-apple-content-icon:hover { transform: translateY(-1px) !important; }\n.dd-apple-content-icon svg { width: 18px !important; height: 18px !important; display: block !important; }\n.dd-apple-content-icon i { display: block !important; line-height: 1 !important; font-size: 18px !important; }\n\n\/* Gap before verse text \u2014 applies whether there is one icon or several *\/\n.dd-text-inner { margin-left: 6px !important; }\n\n\/* Count pill on top-right of a content icon, shown when there is more than one *\/\n.dd-apple-content-icon .dd-icon-count {\n    position: absolute !important;\n    top: -6px !important;\n    right: -6px !important;\n    min-width: 16px !important;\n    height: 16px !important;\n    padding: 0 4px !important;\n    border-radius: 99px !important;\n    background: #1D1D1F !important;\n    color: #FFFFFF !important;\n    font-size: 10px !important;\n    font-weight: 800 !important;\n    line-height: 16px !important;\n    text-align: center !important;\n    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.25) !important;\n    box-sizing: border-box !important;\n    pointer-events: none !important;\n}\n\n\/* =========================================================\n   MODERN, SIMPLE, RIGHT-ALIGNED ARROWS (BOTTOM ONLY)\n   ========================================================= *\/\n\n\/* Target the wrapper that is NOT the first child (the bottom one) *\/\ndiv#dd-app-read-results > div:has(.dd-apple-nav-arrow):not(:first-child) {\n    display: flex !important;\n    justify-content: flex-end !important;\n    align-items: center !important;\n    gap: 15px !important;\n    width: 100% !important;\n    padding: 40px 0 80px 0 !important;\n    margin-top: 40px !important;\n    border-top: 1px solid rgba(0,0,0,0.08) !important;\n    \/* Hide any text labels to keep it simple *\/\n    font-size: 0 !important;\n    color: transparent !important;\n}\n\n\/* Style the bottom arrows as modern circular buttons *\/\ndiv#dd-app-read-results > div:has(.dd-apple-nav-arrow):not(:first-child) .dd-apple-nav-arrow {\n    width: 48px !important;\n    height: 48px !important;\n    background: rgba(118, 118, 128, 0.12) !important;\n    color: #1D1D1F !important;\n    border-radius: 50% !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n    transition: all 0.2s ease !important;\n}\n\ndiv#dd-app-read-results > div:has(.dd-apple-nav-arrow):not(:first-child) .dd-apple-nav-arrow:hover {\n    background: #007AFF !important;\n    color: #FFFFFF !important;\n    transform: scale(1.1) !important;\n}\n\n\/* Center the SVG icons in the bottom buttons *\/\ndiv#dd-app-read-results > div:has(.dd-apple-nav-arrow):not(:first-child) .dd-apple-nav-arrow svg {\n    width: 24px !important;\n    height: 24px !important;\n    stroke-width: 2.5px !important;\n    margin: 0 !important;\n}\n\n\/* =========================================================\n   INLINE METADATA (STRONGS & CROSS-REFERENCES)\n   ========================================================= *\/\n\n\/* Strong's Numbers - Modern Pill Design *\/\n.dd-apple-strongs {\n    display: inline-flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    font-size: 11px !important;\n    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;\n    font-weight: 700 !important;\n    color: #86868B !important; \/* Native subtle gray *\/\n    background-color: #F2F2F7 !important; \/* Light interface gray *\/\n    padding: 2px 6px !important;\n    margin: 0 4px !important;\n    border-radius: 6px !important; \/* Smooth pill shape *\/\n    cursor: pointer !important;\n    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    vertical-align: middle !important;\n    letter-spacing: 0.04em !important;\n    user-select: none !important;\n    text-decoration: none !important;\n}\n\n.dd-apple-strongs:hover,\n.dd-apple-strongs:active {\n    background-color: #007AFF !important; \/* Apple Blue *\/\n    color: #FFFFFF !important;\n    transform: scale(1.05) !important;\n    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25) !important;\n}\n\n\/* Cross References - Massive, Modern, Bold Letters *\/\n.dd-apple-xref-sup {\n    display: inline-block !important;\n    font-family: -apple-system, sans-serif !important;\n    font-size: 18px !important; \/* Dramatically larger *\/\n    font-weight: 900 !important; \/* Maximum boldness *\/\n    color: #007AFF !important; \/* Classic link blue *\/\n    \n    \/* OVERRIDE NATIVE SUPERSCRIPT SHRINKING *\/\n    vertical-align: super !important;\n    position: relative !important;\n    top: 0 !important;\n    line-height: 0 !important;\n    \n    margin-left: 3px !important;\n    margin-right: 3px !important;\n    cursor: pointer !important;\n    padding: 4px !important;\n    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    font-style: normal !important; \/* Force no italics *\/\n    opacity: 1 !important;\n    text-decoration: none !important;\n    background: transparent !important;\n    border: none !important;\n    box-shadow: none !important;\n}\n\n.dd-apple-xref-sup:hover {\n    color: #0056b3 !important;\n    transform: scale(1.2) translateY(-1px) !important;\n}\n\n.dd-apple-xref-wrapper {\n    display: inline-flex !important;\n    align-items: center !important;\n    gap: 2px !important;\n    margin-left: 4px !important;\n}\n\n\/* =========================================================\n   NUCLEAR FIX: PREVENT TAB FLICKER & OVERLAP\n   ========================================================= *\/\n.dd-apple-workspace .dd-apple-pane {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0;\n}\n\n.dd-apple-workspace .dd-apple-pane.active {\n    display: block !important;\n    visibility: visible !important;\n    animation: ddApplePaneFadeIn 0.3s ease forwards !important;\n}\n\n@keyframes ddApplePaneFadeIn {\n    0% { opacity: 0; transform: translateY(8px); }\n    100% { opacity: 1; transform: translateY(0); }\n}\n\n\/* --- LOADED: 5-modals.css --- *\/\n\/* 5-modals.css *\/\n.dd-tooltip-target { position: relative !important; cursor: pointer !important; }\n\n\/* New Free-Floating Tooltip Style *\/\n.dd-apple-tooltip {\n    position: absolute; background: rgba(29, 29, 31, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;\n    border: 1px solid rgba(255,255,255,0.1) !important; color: #FFFFFF !important; padding: 14px 18px !important; border-radius: 14px !important;\n    font-family: -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 500 !important;\n    line-height: 1.5 !important; white-space: pre-wrap !important; width: max-content !important; max-width: 320px !important;\n    box-shadow: 0 16px 40px rgba(0,0,0,0.3) !important; z-index: 9999999 !important; pointer-events: none !important; text-align: left !important;\n}\n\n\/* Close Button Fixed Top Right *\/\n.dd-apple-round-close { \n    background: rgba(0,0,0,0.05) !important; border: none !important; width: 36px !important; height: 36px !important; \n    border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; \n    cursor: pointer !important; color: #000000 !important; transition: background 0.3s ease !important; padding: 0 !important; \n    margin: 0 !important; flex-shrink: 0 !important; align-self: flex-start !important; \n}\n.dd-apple-round-close:hover { background: rgba(0,0,0,0.1) !important; }\n\n\/* Cross Reference Modal *\/\n#dd-xref-modal { \n    position: fixed; bottom: 40px; right: 40px; \n    background: #FFFFFF !important; \/* Pure, crisp white *\/\n    border: 1px solid rgba(0,0,0,0.06) !important; \n    border-radius: 24px !important; \n    box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.04) !important; \n    padding: 24px !important; width: 360px !important; z-index: 999999 !important; display: none; \n    transform: translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); \n}\n#dd-xref-modal.active { display: block; transform: translateY(0); opacity: 1; }\n.dd-xref-popup-title { font-family: -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #1D1D1F !important; margin-bottom: 20px !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; }\n.dd-xref-popup-list { display: flex !important; flex-direction: column !important; gap: 8px !important; max-height: 350px; overflow-y: auto; padding-right: 8px; }\n.dd-xref-item { font-family: -apple-system, sans-serif !important; font-size: 16px !important; color: #1D1D1F !important; background: rgba(255,255,255,0.6) !important; border: 1px solid rgba(255,255,255,0.4) !important; padding: 12px 16px !important; border-radius: 12px !important; font-weight: 500 !important; cursor: pointer !important; display: flex !important; align-items: center !important; transition: all 0.2s ease !important; }\n.dd-xref-item:hover { background: rgba(255,255,255,0.9) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; color: #007AFF !important; }\n\n\/* Ultra-Light Modal Overlays (White Frost) *\/\n.dd-note-modal-overlay { \n    position: fixed; top: 0; left: 0; right: 0; bottom: 0; \n    background: rgba(255, 255, 255, 0.75) !important; \/* Bright, sheer white *\/\n    backdrop-filter: blur(16px) saturate(120%) !important;\n    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;\n    z-index: 9999999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; padding: 30px; \n}\n.dd-note-modal-overlay.active { opacity: 1; }\n\n.dd-note-modal-content { \n    background: #FFFFFF !important; \/* Pure, crisp white *\/\n    border: 1px solid rgba(0,0,0,0.06) !important; \n    width: 100%; max-width: 850px; max-height: 85vh; border-radius: 32px; \n    box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.04) !important; \n    display: flex; flex-direction: column; transform: translateY(20px) scale(0.98); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; \n}\n.dd-note-modal-overlay.active .dd-note-modal-content { transform: translateY(0) scale(1); }\n\n\/* Lock Header and Pin Close Button *\/\n.dd-note-modal-header { \n    padding: 32px 48px 24px 48px; display: flex; justify-content: space-between; align-items: flex-start !important; \n    border-bottom: 1px solid rgba(0,0,0,0.04) !important; \n}\n.dd-note-modal-header h3 { \n    margin: 0 !important; padding-right: 20px !important; line-height: 1.2 !important; \n    font-family: -apple-system, sans-serif; font-size: 32px; font-weight: 700; color: #1D1D1F; letter-spacing: -0.01em; \n}\n\n\/* Modal Body Text Constraints *\/\n.dd-note-modal-body { padding: 32px 48px; overflow-y: auto; font-family: -apple-system, sans-serif; font-size: 22px; line-height: 1.7; color: #1D1D1F !important; }\n.dd-note-modal-body p { margin-bottom: 24px; color: #1D1D1F !important; }\n.dd-changelog-content { color: #1D1D1F !important; }\n\n\/* --- LOADED: 6-mobile.css --- *\/\n\/* 6-mobile.css - CLEAN & STRUCTURALLY SOUND MOBILE APP LAYOUT *\/\n\nbody.dd-bible-app-body { overscroll-behavior-y: none; }\n\n@media screen and (max-width: 768px) {\n    \/* 0. FIX THE 'TRANSFORM TRAP' FOR FIXED ELEMENTS *\/\n    .dd-apple-workspace .dd-apple-pane,\n    .dd-apple-workspace .dd-apple-pane.active {\n        transform: none !important;\n        animation: none !important; \n    }\n    .dd-apple-workspace .dd-apple-pane { opacity: 0; display: none !important; }\n    .dd-apple-workspace .dd-apple-pane.active { opacity: 1; display: block !important; }\n\n    \/* 1. FLEX HEADER OVERRIDE TO DESTROY OLD GRID *\/\n    div.dd-apple-header {\n        display: flex !important;\n        flex-direction: row !important;\n        justify-content: space-between !important;\n        align-items: center !important;\n        height: 64px !important;\n        padding: 0 16px !important;\n        background: rgba(250, 250, 252, 0.95) !important;\n        backdrop-filter: blur(25px) saturate(200%) !important;\n        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;\n        border-bottom: none !important;\n        box-shadow: none !important;\n        position: fixed !important;\n        top: 0 !important;\n        left: 0 !important;\n        width: 100% !important;\n        z-index: 9999 !important;\n    }\n    div.dd-apple-header-left { flex: 1 !important; display: flex !important; justify-content: flex-start !important; grid-column: unset !important; grid-row: unset !important; }\n    div.dd-apple-header-center { flex: 0 0 auto !important; position: static !important; transform: none !important; grid-column: unset !important; grid-row: unset !important; width: auto !important; display: flex !important; overflow: visible !important; }\n    div.dd-apple-header-right { flex: 1 !important; display: flex !important; justify-content: flex-end !important; grid-column: unset !important; grid-row: unset !important; width: auto !important; }\n\n    h2.dd-apple-title { font-size: 24px !important; margin: 0 !important; gap: 10px !important; display: flex !important; align-items: center !important; overflow: visible !important; }\n    h2.dd-apple-title svg { width: 48px !important; height: 48px !important; margin: 0 !important; overflow: visible !important; }\n\n    \/* 2. WORKSPACE PADDING *\/\n    .dd-apple-workspace {\n        padding-top: 100px !important; \n        padding-bottom: 90px !important;\n        padding-left: 20px !important;\n        padding-right: 20px !important;\n    }\n\n    \/* 3. BOTTOM SHEET MODALS *\/\n    .dd-note-modal-overlay { align-items: flex-end !important; padding: 0 !important; }\n    .dd-note-modal-content {\n        border-radius: 24px 24px 0 0 !important; margin: 0 !important; width: 100% !important; max-height: 85vh !important;\n        transform: translateY(100%) !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n        box-sizing: border-box !important;\n    }\n    .dd-note-modal-overlay.active .dd-note-modal-content { transform: translateY(0) !important; }\n    .dd-note-modal-header { padding: 24px 24px 16px 24px !important; }\n    .dd-note-modal-header h3 { font-size: 24px !important; }\n    .dd-note-modal-body { font-size: 18px !important; padding: 16px 24px 40px 24px !important; }\n\n    #dd-xref-modal {\n        bottom: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; border-radius: 24px 24px 0 0 !important;\n        padding: 24px 24px calc(24px + env(safe-area-inset-bottom)) 24px !important; transform: translateY(100%) !important;\n        box-sizing: border-box !important; \n        max-width: 100vw !important; \n    }\n    #dd-xref-modal.active { transform: translateY(0) !important; }\n\n    \/* 4. COMPONENT SCALING FOR MOBILE *\/\n    .dd-apple-form-grid { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 40px; }\n    .dd-apple-input-wrap { width: 100% !important; margin-right: 0 !important; box-sizing: border-box !important; }\n    \n    .dd-apple-reading-title { font-size: 34px !important; margin-bottom: 40px !important; }\n    .dd-apple-reading-body { font-size: 20px !important; line-height: 1.9 !important; }\n    .dd-verse-wrap { margin-bottom: 28px !important; }\n    .dd-verse-target-highlight { padding: 8px 14px !important; margin: -8px -14px 20px -14px !important; border-radius: 6px !important; }\n    .dd-apple-topic-header h2 { font-size: 32px !important; }\n\n    \/* 5. FORCE READ BUTTON TO FULL WIDTH *\/\n    .dd-apple-form-grid .dd-apple-input-wrap.button-wrap {\n        display: grid !important;\n        grid-template-columns: 1fr !important; \n        width: 100% !important;\n        margin-top: 10px !important;\n        gap: 0 !important;\n    }\n    .dd-apple-input-wrap.button-wrap button.dd-apple-btn {\n        width: 100% !important;\n        justify-self: stretch !important; \n        min-height: 56px !important;\n        margin: 0 !important;\n    }\n\n    \/* 6. DISABLE TOOLTIPS ON MOBILE *\/\n    .dd-tooltip-target::after,\n    .dd-tooltip-target::before,\n    [data-tooltip]::after,\n    [data-tooltip]::before,\n    body .dd-apple-tooltip {\n        display: none !important;\n        opacity: 0 !important;\n        visibility: hidden !important;\n    }\n\n    \/* 7. BOTTOM BAR BUTTON CONTRAST *\/\n    .dd-mobile-bottom-bar .dd-apple-tab {\n        color: #1D1D1F !important; \/* Apple's standard dark gray\/black *\/\n    }\n    .dd-mobile-bottom-bar .dd-apple-tab svg {\n        stroke: #1D1D1F !important; \/* Matches icon to text *\/\n    }\n    \n    \/* Keep the active tab a distinct color (Standard iOS Blue) *\/\n    .dd-mobile-bottom-bar .dd-apple-tab.active {\n        color: #007AFF !important; \n    }\n    .dd-mobile-bottom-bar .dd-apple-tab.active svg {\n        stroke: #007AFF !important;\n    }\n}\n\n<\/style>\n\n<style>\n    @keyframes ddApplePulse {\n        0% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4); }\n        70% { box-shadow: 0 0 0 8px rgba(0, 122, 255, 0); }\n        100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); }\n    }\n    .dd-active-plan-pill {\n        animation: ddApplePulse 2s infinite;\n        border: 2px solid #007AFF !important;\n    }\n    \n    @media (min-width: 851px) {\n        .dd-apple-header-right .dd-mobile-actions {\n            display: none !important;\n        }\n    }\n\n    .dd-desktop-back-btn { display: none !important; }\n\n    \/* ==========================================\n       HAMBURGER & AVATAR MENUS\n       ========================================== *\/\n    .dd-hamburger-btn {\n        background: transparent !important; border: none !important; color: #1D1D1F !important;\n        padding: 8px !important; margin: 0 !important; cursor: pointer !important;\n        display: flex !important; align-items: center !important; justify-content: center !important;\n        border-radius: 8px !important; transition: background 0.2s !important; outline: none !important;\n    }\n    .dd-hamburger-btn:hover { background: rgba(0,0,0,0.05) !important; }\n\n    \/* Avatar Button *\/\n    .dd-avatar-btn {\n        width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: #F2F2F7;\n        cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;\n        margin-left: 12px; transition: all 0.2s ease; overflow: hidden; color: #86868B;\n    }\n    .dd-avatar-btn:hover { border-color: #007AFF; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15); }\n    .dd-avatar-initial { font-weight: 800; color: #007AFF; font-size: 16px; font-family: -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }\n    .dd-avatar-btn.logged-in { background: #EAF2FF; }\n\n    .dd-side-menu-overlay {\n        position: fixed !important; top: 0 !important; left: 0 !important;\n        width: 100vw !important; height: 100vh !important;\n        background: rgba(0,0,0,0.4) !important; z-index: 999999 !important;\n        opacity: 0; visibility: hidden; transition: opacity 0.3s ease;\n    }\n    .dd-side-menu-overlay.active { opacity: 1; visibility: visible; }\n\n    \/* Left Drawer (Hamburger) *\/\n    .dd-side-menu-drawer {\n        position: fixed !important; top: 0 !important; left: -300px !important;\n        width: 280px !important; height: 100vh !important;\n        background: #FFFFFF !important; z-index: 1000000 !important;\n        box-shadow: 4px 0 24px rgba(0,0,0,0.1) !important;\n        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n        display: flex !important; flex-direction: column !important; overflow-y: auto !important;\n    }\n    .dd-side-menu-drawer.active { transform: translateX(300px) !important; }\n\n    \/* Right Drawer (Account) *\/\n    .dd-account-drawer {\n        position: fixed !important; top: 0 !important; right: -380px !important;\n        width: 100% !important; max-width: 360px !important; height: 100vh !important;\n        background: #F5F5F7 !important; z-index: 1000000 !important;\n        box-shadow: -4px 0 30px rgba(0,0,0,0.1) !important;\n        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n        display: flex !important; flex-direction: column !important; overflow-y: auto !important;\n    }\n    .dd-account-drawer.active { transform: translateX(-380px) !important; }\n\n    .dd-side-menu-header { padding: 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; background: #ffffff !important; }\n    .dd-side-menu-title { font-size: 18px !important; font-weight: 700 !important; color: #1D1D1F !important; font-family: -apple-system, sans-serif !important; margin: 0 !important; }\n    .dd-side-menu-close { background: #F2F2F7 !important; border: none !important; width: 32px !important; height: 32px !important; border-radius: 16px !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; color: #86868B !important; transition: all 0.2s !important; padding: 0 !important; }\n    .dd-side-menu-close:hover { background: #E5E5EA !important; color: #1D1D1F !important; }\n\n    .dd-side-menu-links { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }\n    .dd-side-menu-link { padding: 14px 16px !important; border-radius: 12px !important; text-decoration: none !important; color: #1D1D1F !important; font-size: 16px !important; font-weight: 600 !important; font-family: -apple-system, sans-serif !important; transition: background 0.2s !important; display: block !important; }\n    .dd-side-menu-link:hover { background: #F2F2F7 !important; color: #007AFF !important; }\n<\/style>\n\n<div id=\"dd-workspace\" class=\"dd-apple-workspace\">\n    \n    <!-- THE FIX: INJECTED SECURITY NONCE FOR CLOUD SYNC -->\n    <input type=\"hidden\" id=\"dd-auth-nonce\" value=\"fc32d5052f\">\n    \n    <div class=\"dd-apple-header\">\n        \n        <div class=\"dd-apple-header-left\">\n            <button class=\"dd-hamburger-btn\" aria-label=\"Menu\" onclick=\"ddToggleSideMenu()\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" stroke=\"currentColor\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\n                    <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line>\n                    <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line>\n                <\/svg>\n            <\/button>\n        <\/div>\n        \n        <div class=\"dd-apple-header-center\">\n            <h2 class=\"dd-apple-title\">\n                <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 44px !important; height: 44px !important; stroke-width: 2.75px !important; overflow: visible !important; box-sizing: border-box;\">\n                    <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path>\n                    <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path>\n                <\/svg>\n                <span class=\"dd-apple-title-text\">Explore the Word<\/span>\n                <span class=\"dd-apple-title-divider\">|<\/span>\n                <span class=\"dd-apple-title-sub\">Today<\/span>\n            <\/h2>\n        <\/div>\n        \n        <div class=\"dd-apple-header-right\" style=\"display: flex; align-items: center;\">\n            \n            <div class=\"dd-desktop-menu dd-hide-on-mobile\" style=\"display: flex; align-items: center;\">\n                <a href=\"https:\/\/exploretheword.app\/bible\/?tab=home\" class=\"dd-apple-tab active\">Today<\/a>\n                <a href=\"https:\/\/exploretheword.app\/bible\/?tab=read\" class=\"dd-apple-tab \">Read<\/a>\n                <a href=\"https:\/\/exploretheword.app\/bible\/?tab=notes\" class=\"dd-apple-tab \">Study<\/a>\n                <a href=\"https:\/\/exploretheword.app\/bible\/?tab=sermons\" class=\"dd-apple-tab \">Sermons<\/a>\n            <\/div>\n\n            \n            <button class=\"dd-avatar-btn \" aria-label=\"Account\" onclick=\"ddToggleAccountMenu()\">\n                                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display: flex; align-items: center; justify-content: center;\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                            <\/button>\n            \n        <\/div>\n    <\/div>\n    \n    <div class=\"dd-mobile-bottom-bar dd-hide-on-desktop\">\n        <a href=\"https:\/\/exploretheword.app\/bible\/?tab=home\" class=\"dd-apple-tab active\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path><polyline points=\"9 22 9 12 15 12 15 22\"><\/polyline><\/svg>\n            <span>Today<\/span>\n        <\/a>\n        <a href=\"https:\/\/exploretheword.app\/bible\/?tab=read\" class=\"dd-apple-tab \">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>\n            <span>Read<\/span>\n        <\/a>\n        <a href=\"https:\/\/exploretheword.app\/bible\/?tab=notes\" class=\"dd-apple-tab \">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"><\/path><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"><\/path><\/svg>\n            <span>Study<\/span>\n        <\/a>\n        <a href=\"https:\/\/exploretheword.app\/bible\/?tab=sermons\" class=\"dd-apple-tab \">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polygon points=\"10 8 16 12 10 16 10 8\"><\/polygon><\/svg>\n            <span>Sermons<\/span>\n        <\/a>\n    <\/div>\n\n    <div id=\"dd-pane-home\" class=\"dd-apple-pane active\">\n        \n<style>\n    \/* =========================================================\n       DYNAMIC DASHBOARD CARD STYLES\n       ========================================================= *\/\n    .dd-reading-card-blue, .dd-reading-card-blue:hover { background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%) !important; color: white !important; border: none !important; transition: background 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease !important; }\n    .dd-reading-card-completed, .dd-reading-card-completed:hover { background: linear-gradient(135deg, #5E5CE6 0%, #4B49B8 100%) !important; color: white !important; border: none !important; transition: background 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease !important; }\n    .dd-reading-btn-blue { color: #007AFF !important; }\n    .dd-reading-btn-completed { color: #5E5CE6 !important; }\n\n    \/* =========================================================\n       VERSE OF THE DAY CARD\n       ========================================================= *\/\n    .dd-votd-card { background: #FFFFFF; border: 1px solid rgba(0,0,0,0.06); border-radius: 24px; padding: 40px 48px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }\n    .dd-votd-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.06); }\n    .dd-votd-quote-mark { position: absolute; top: 20px; left: 30px; font-size: 140px; font-family: Georgia, serif; color: rgba(0, 122, 255, 0.05); line-height: 1; user-select: none; pointer-events: none; }\n    .dd-votd-text { font-family: ui-serif, Georgia, serif; font-size: 26px; line-height: 1.6; color: #1D1D1F; margin-bottom: 24px; position: relative; z-index: 2; }\n    .dd-votd-footer { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; border-top: 1px solid rgba(0,0,0,0.04); padding-top: 24px; }\n    .dd-votd-ref-text { font-family: -apple-system, sans-serif; font-size: 16px; font-weight: 700; color: #007AFF; text-transform: uppercase; letter-spacing: 0.08em; }\n    .dd-votd-action { background: rgba(0, 122, 255, 0.08); color: #007AFF; font-family: -apple-system, sans-serif; font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 99px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; border: none; }\n    .dd-votd-action:hover { background: rgba(0, 122, 255, 0.15); transform: scale(0.98); }\n\n    \/* =========================================================\n       CUSTOM DEVOTIONAL ROW CARD\n       ========================================================= *\/\n    .dd-devo-row-card { display: flex !important; flex-direction: row !important; padding: 0 !important; overflow: hidden !important; text-decoration: none !important; align-items: stretch !important; min-height: 140px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0,0,0,0.04); }\n    .dd-devo-row-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }\n    .dd-devo-row-img { flex: 0 0 180px; background: #F2F2F7; position: relative; }\n    .dd-devo-row-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }\n    .dd-devo-row-content { flex: 1; padding: 28px 36px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }\n\n    \/* =========================================================\n       RECENT SERMONS CARDS\n       ========================================================= *\/\n    .dd-dash-sermon-card { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 20px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-decoration: none; overflow: hidden; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease; }\n    .dd-dash-sermon-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }\n    .dd-dash-sermon-img { width: 100%; aspect-ratio: 16\/9; background-color: #F5F5F7; border-bottom: 1px solid rgba(0,0,0,0.04); background-size: cover; background-position: center; position: relative; }\n    .dd-dash-sermon-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }\n    .dd-dash-sermon-meta { font-size: 11px; font-weight: 700; color: #86868B; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-family: -apple-system, sans-serif; }\n    .dd-dash-sermon-title { font-family: -apple-system, sans-serif; font-size: 18px; font-weight: 800; color: #1D1D1F; margin: 0 0 6px 0; line-height: 1.25; letter-spacing: -0.01em; }\n    .dd-dash-sermon-passage { font-size: 14px; color: #515154; margin: 0; font-weight: 500; font-family: -apple-system, sans-serif; line-height: 1.4; }\n\n    \/* =========================================================\n       STUDY NOTES GRID\n       ========================================================= *\/\n    .dd-notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\n    .dd-note-widget { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding: 28px !important; height: 100%; box-sizing: border-box; text-decoration: none; }\n    .dd-note-widget-top { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }\n    .dd-note-icon { color: #86868B; opacity: 0.8; }\n    .dd-note-tag { font-family: -apple-system, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #86868B; }\n    .dd-note-title { font-family: -apple-system, sans-serif; font-size: 22px; font-weight: 700; color: #1D1D1F; letter-spacing: -0.015em; margin-bottom: 12px; line-height: 1.2; }\n    .dd-note-excerpt { font-family: -apple-system, sans-serif; font-size: 16px; color: #515154; line-height: 1.6; flex-grow: 1; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }\n    .dd-note-footer { display: flex; align-items: center; gap: 6px; font-family: -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #007AFF; margin-top: auto; }\n    .dd-note-footer svg { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }\n    .dd-note-widget:hover .dd-note-footer svg { transform: translateX(4px); }\n\n    \/* =========================================================\n       PLAN SELECTION DROPDOWN\n       ========================================================= *\/\n    .dd-plan-dropdown { position: absolute; top: 30px; right: 0; background: #FFFFFF; border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 100; min-width: 210px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(0,0,0,0.05); }\n    .dd-plan-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }\n    .dd-plan-option { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-family: -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #1D1D1F; border-radius: 8px; cursor: pointer; transition: background 0.2s ease; }\n    .dd-plan-option:hover { background: #F2F2F7; }\n    .dd-plan-option.active-plan { color: #007AFF; background: rgba(0, 122, 255, 0.1); }\n    \n    \/* =========================================================\n       NEW LEADERBOARD STYLES (FULL WIDTH)\n       ========================================================= *\/\n    .dd-leaderboard-wrap { background: #ffffff; border-radius: 24px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 40px rgba(0,0,0,0.03); padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; }\n    .dd-leaderboard-wrap:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.06); }\n    \n    .dd-leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }\n    .dd-leaderboard-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #F9F9FB; border: 1px solid rgba(0,0,0,0.03); border-radius: 14px; transition: background 0.2s; }\n    .dd-leaderboard-row:hover { background: #F2F2F7; }\n    \n    .dd-leaderboard-row:nth-child(1) { background: #FFFAF0; border-color: rgba(255, 149, 0, 0.2); }\n    .dd-leaderboard-row:nth-child(2) { background: #F5F5F7; border-color: rgba(142, 142, 147, 0.2); }\n    .dd-leaderboard-row:nth-child(3) { background: #FAF5F0; border-color: rgba(166, 124, 82, 0.2); }\n\n    .dd-leaderboard-rank { width: 24px; font-size: 14px; font-weight: 800; color: #86868B; }\n    .dd-leaderboard-row:nth-child(1) .dd-leaderboard-rank { color: #FF9500; font-size: 16px; }\n    .dd-leaderboard-row:nth-child(2) .dd-leaderboard-rank { color: #8E8E93; }\n    .dd-leaderboard-row:nth-child(3) .dd-leaderboard-rank { color: #A67C52; }\n\n    .dd-leaderboard-user { font-weight: 600; color: #1D1D1F; font-size: 15px; }\n    .dd-leaderboard-streak { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #FF9500; font-size: 15px; }\n\n    .dd-leaderboard-logged-out { display: flex; align-items: center; justify-content: space-between; padding: 32px 40px; background: linear-gradient(135deg, #FFFFFF 0%, #F9F9FB 100%); gap: 24px; }\n    .dd-leaderboard-lo-content { display: flex; align-items: center; gap: 20px; }\n    .dd-leaderboard-lo-icon { width: 64px; height: 64px; background: #FFF0E5; color: #FF9500; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n    .dd-leaderboard-lo-title { font-size: 20px; font-weight: 800; color: #1D1D1F; margin: 0 0 4px 0; letter-spacing: -0.01em; }\n    .dd-leaderboard-lo-desc { font-size: 15px; color: #86868B; margin: 0; line-height: 1.4; }\n    .dd-leaderboard-lo-btn { background: #007AFF !important; color: #fff !important; padding: 14px 32px !important; border-radius: 99px !important; border: none !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important; box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25) !important; transition: transform 0.2s, background 0.2s !important; height: auto !important; }\n    .dd-leaderboard-lo-btn:hover { transform: scale(0.98) !important; background: #0066CC !important; }\n\n    \/* Modern leaderboard with avatars *\/\n    .dd-lb-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 22px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); padding: 10px; display: flex; flex-direction: column; gap: 4px; }\n    .dd-lb-empty { padding: 28px; text-align: center; color: #86868B; font-size: 14px; }\n    .dd-lb-row { display: grid; grid-template-columns: 26px 44px 1fr auto; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 16px; transition: background 0.2s; }\n    .dd-lb-row:hover { background: #F7F7FA; }\n    .dd-lb-me { background: #F0F7FF; }\n    .dd-lb-medal-1 { background: linear-gradient(90deg, #FFFBF0, #fff); }\n    .dd-lb-medal-2 { background: linear-gradient(90deg, #F6F6F8, #fff); }\n    .dd-lb-medal-3 { background: linear-gradient(90deg, #FBF5EF, #fff); }\n    .dd-lb-rank { font-size: 15px; font-weight: 800; color: #C7C7CC; text-align: center; }\n    .dd-lb-medal-1 .dd-lb-rank { color: #FFB000; }\n    .dd-lb-medal-2 .dd-lb-rank { color: #A8A8AD; }\n    .dd-lb-medal-3 .dd-lb-rank { color: #C08A4E; }\n    .dd-lb-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }\n    .dd-lb-initial { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; }\n    .dd-lb-medal-1 .dd-lb-avatar { box-shadow: 0 0 0 2px #FFB000; }\n    .dd-lb-medal-2 .dd-lb-avatar { box-shadow: 0 0 0 2px #C5C5CA; }\n    .dd-lb-medal-3 .dd-lb-avatar { box-shadow: 0 0 0 2px #D2A878; }\n    .dd-lb-name { font-size: 16px; font-weight: 600; color: #1D1D1F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .dd-lb-you { font-size: 11px; font-weight: 800; color: #007AFF; background: rgba(0,122,255,0.1); padding: 2px 8px; border-radius: 99px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.04em; }\n    .dd-lb-streak { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #FF9500; font-size: 16px; }\n    .dd-lb-streak svg { color: #FF9500; }\n    @media (max-width: 600px) { .dd-lb-row { grid-template-columns: 22px 38px 1fr auto; gap: 10px; padding: 10px 12px; } .dd-lb-avatar { width: 38px; height: 38px; } .dd-lb-initial { font-size: 16px; } }\n\n    \/* =========================================================\n       VIDEO DEVOTIONAL PLAYLIST STYLES\n       ========================================================= *\/\n    .dd-video-playlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }\n    .dd-playlist-card { cursor: pointer; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,0.06); transition: all 0.2s; text-decoration: none; display: flex; flex-direction: column; }\n    .dd-playlist-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }\n    .dd-playlist-thumb { width: 100%; aspect-ratio: 16\/9; background: #000; background-size: cover; background-position: center; position: relative; }\n    .dd-playlist-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.3); }\n    .dd-playlist-title { padding: 12px 16px; font-family: -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #1D1D1F; line-height: 1.3; }\n\n    @media (max-width: 900px) { .dd-notes-grid, .dd-video-playlist-grid { grid-template-columns: repeat(2, 1fr); } }\n    @media (max-width: 600px) {\n        .dd-votd-card { padding: 30px 24px; }\n        .dd-votd-text { font-size: 22px; }\n        .dd-votd-quote-mark { font-size: 100px; top: 10px; left: 10px; }\n        .dd-votd-footer { flex-direction: column; align-items: flex-start; gap: 16px; }\n        .dd-votd-action { width: 100%; justify-content: center; }\n        .dd-devo-row-card { flex-direction: column !important; }\n        .dd-devo-row-img { width: 100%; height: 180px; flex: none; }\n        .dd-devo-row-content { padding: 24px; }\n        .dd-notes-grid { grid-template-columns: 1fr; }\n        .dd-video-playlist-grid { grid-template-columns: 1fr; }\n        \n        .dd-leaderboard-wrap { padding: 20px; }\n        .dd-leaderboard-logged-out { flex-direction: column; text-align: center; padding: 24px; }\n        .dd-leaderboard-lo-content { flex-direction: column; gap: 16px; }\n        .dd-leaderboard-lo-btn { width: 100%; }\n        .dd-leaderboard-row { padding: 12px; }\n    }\n<\/style>\n\n<div class=\"dd-apple-dashboard\">\n\n    <div>\n        <div class=\"dd-apple-section-title\">Reading Leaderboard<\/div>\n        <div class=\"dd-lb-card\">\n                            <div class=\"dd-lb-empty\">No reading streaks yet. Be the first to start a plan!<\/div>\n                    <\/div>\n    <\/div>\n    \n\n\n    <div style=\"margin-top: 35px;\">\n        \n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/unpkg.com\/@phosphor-icons\/web@2.1.1\/src\/fill\/style.css\">\n<style>\n    \/* Section header with a colored icon badge to separate sections *\/\n    .dd-section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px 0; }\n    .dd-section-head .dd-apple-section-title { margin: 0 !important; }\n    .dd-section-ic {\n        width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;\n        display: inline-flex; align-items: center; justify-content: center;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    }\n    .dd-section-ic svg { width: 21px; height: 21px; display: block; }\n    .dd-section-ic-devo { background: linear-gradient(135deg, #FF9F0A, #FF6B00); color: #fff; }\n    .dd-section-ic-read { background: linear-gradient(135deg, #007AFF, #0056D6); color: #fff; }\n    .dd-section-ic-feed { background: linear-gradient(135deg, #34C759, #248A3D); color: #fff; }\n    .dd-today-read { max-width: 100%; }\n    \/* Reading overview video \u2014 clean facade (poster + play) that loads the\n       player only when tapped, so it stays light and uncluttered. *\/\n    .dd-tr-ov { position: relative; width: 100%; aspect-ratio: 16 \/ 9; border-radius: 16px; overflow: hidden; margin: 14px 0 4px; background: linear-gradient(135deg, #3A3A4E, #1D1D2B); background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(0,0,0,0.16); }\n    .dd-tr-ov::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.15)); }\n    .dd-tr-ov-btn { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: space-between; padding: 18px; gap: 12px; text-align: left; }\n    .dd-tr-ov-meta { display: flex; flex-direction: column; gap: 3px; }\n    .dd-tr-ov-eyebrow { color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }\n    .dd-tr-ov-cta { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }\n    .dd-tr-ov-play { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.96); color: #1D1D2B; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: transform 0.18s ease; }\n    .dd-tr-ov-btn:hover .dd-tr-ov-play { transform: scale(1.06); }\n    .dd-tr-ov-play svg { width: 24px; height: 24px; margin-left: 2px; }\n    .dd-tr-ov.playing::after, .dd-tr-ov.playing .dd-tr-ov-btn { display: none; }\n    .dd-tr-ov iframe, .dd-tr-ov video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }\n    .dd-tr-ov-link { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 4px; color: #5E5CE6; font-weight: 700; text-decoration: none; }\n    .dd-tr-ov-link .dd-tr-ov-play { width: 30px; height: 30px; box-shadow: none; background: #EEF0FB; color: #5E5CE6; }\n    .dd-tr-ov-link .dd-tr-ov-play svg { width: 15px; height: 15px; }\n    .dd-tr-readhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }\n    .dd-tr-sub { font-size: 16px; color: #515154; margin: 0; line-height: 1.4; }\n    .dd-tr-plan-name { font-size: 13px; color: #86868B; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }\n    .dd-tr-plan-login { text-transform: none; letter-spacing: 0; font-weight: 600; color: #86868B; }\n    .dd-tr-plan-login .dd-tr-hint-link { color: #007AFF; text-decoration: none; font-weight: 700; cursor: pointer; }\n    .dd-tr-plan-login .dd-tr-hint-link:hover { text-decoration: underline; }\n    .dd-tr-divider { height: 1px; background: rgba(0,0,0,0.08); border: none; margin: 24px 0; }\n    .dd-tr-devo-eyebrow { color: #FF9500; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }\n    .dd-tr-devo-img { width: 100%; aspect-ratio: 16 \/ 9; object-fit: cover; object-position: center; border-radius: 16px; margin-bottom: 16px; display: block; background: #F2F2F7; }\n    .dd-tr-devo-img-wrap { position: relative; margin-bottom: 16px; }\n    .dd-tr-devo-img-wrap .dd-tr-devo-img { margin-bottom: 0; }\n    .dd-tr-date-glass {\n        position: absolute;\n        top: 14px;\n        right: 14px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        min-width: 58px;\n        padding: 10px 14px;\n        border-radius: 16px;\n        background: rgba(255, 255, 255, 0.18);\n        backdrop-filter: blur(18px) saturate(160%);\n        -webkit-backdrop-filter: blur(18px) saturate(160%);\n        border: 1px solid rgba(255, 255, 255, 0.35);\n        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4);\n        color: #fff;\n        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);\n        line-height: 1;\n    }\n    .dd-tr-date-glass .dd-tr-date-day { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }\n    .dd-tr-date-glass .dd-tr-date-mo { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-top: 3px; opacity: 0.95; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }\n    .dd-tr-devo-title { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: #1D1D1F; }\n    .dd-tr-keyverse { margin: 18px 0 24px; padding: 28px 32px; background: linear-gradient(135deg, #EAF2FF 0%, #F4F8FE 100%); border-radius: 20px; position: relative; overflow: hidden; }\n    .dd-tr-keyverse::before { content: '\\201C'; position: absolute; top: 6px; right: 22px; font-family: Georgia, 'Times New Roman', serif; font-size: 120px; line-height: 1; color: rgba(0,122,255,0.10); pointer-events: none; user-select: none; }\n    .dd-tr-kv-label { position: relative; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #007AFF; margin-bottom: 12px; }\n    .dd-tr-kv-text { position: relative; font-size: 22px; line-height: 1.6; color: #1D1D1F; font-weight: 500; font-style: italic; margin: 0; }\n    .dd-tr-kv-ref { position: relative; margin-top: 16px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #007AFF; }\n    .dd-tr-devo-body { font-size: 17px; line-height: 1.7; color: #3A3A3C; transition: max-height 0.45s ease; overflow: hidden; }\n    .dd-tr-devo-body p { margin: 0 0 16px; }\n    .dd-tr-devo-body img { max-width: 100%; height: auto; border-radius: 12px; }\n    .dd-tr-devo-body.collapsed { max-height: 130px; position: relative; }\n    .dd-tr-devo-body.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(transparent, #FFFFFF); pointer-events: none; }\n    .dd-tr-readmore { background: none; border: none; color: #007AFF; font-weight: 700; font-size: 15px; cursor: pointer; padding: 10px 0 0; font-family: inherit; }\n    .dd-tr-readmore:hover, .dd-tr-readmore:focus, .dd-tr-readmore:active { background: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; outline: none !important; transform: none !important; color: #007AFF !important; }\n    .dd-tr-book { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 2px; color: #1D1D1F; }\n    .dd-tr-book:first-of-type { margin-top: 8px; }\n    .dd-tr-chap { font-size: 13px; font-weight: 800; color: #86868B; text-transform: uppercase; letter-spacing: 0.07em; margin: 24px 0 16px; }\n    .dd-tr-verse { font-size: 21px; line-height: 1.9; margin: 0 0 16px; cursor: pointer; color: #1D1D1F; }\n    \/* Subtle verse numbers: muted, lighter, superscript-style *\/\n    .dd-tr-vnum { display: inline-block; font-weight: 700; font-size: 12px; color: #B0B0B8; margin-right: 9px; min-width: 13px; vertical-align: 2px; }\n    .dd-apple-content-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 6px; width: 22px; height: 22px; min-width: 22px; padding: 4px; border-radius: 6px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0,0,0,0.18); position: relative; top: -2px; cursor: pointer; }\n    .dd-apple-content-icon svg { width: 14px; height: 14px; display: block; }\n    .dd-apple-content-icon i { display: block; line-height: 1; font-size: 14px; }\n\n    \/* Book header (no per-book check now \u2014 kept simple) *\/\n    .dd-tr-book-row { margin: 36px 0 2px; }\n    .dd-tr-book-row:first-of-type { margin-top: 8px; }\n    .dd-tr-book { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: #1D1D1F; }\n\n    .dd-tr-err { color: #FF3B30; font-weight: 600; padding: 8px 0; }\n    .dd-tr-hint { text-align: center; color: #C7C7CC; font-size: 13px; font-weight: 600; margin: 4px 0 24px; }\n\n    \/* Today's Reading collapses just like the devotional body: a fixed height\n       with a soft fade, expanded by the Continue Reading toggle. *\/\n    .dd-tr-readbody { transition: max-height 0.45s ease; overflow: hidden; }\n    .dd-tr-readbody.collapsed { max-height: 320px; position: relative; }\n    .dd-tr-readbody.collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 90px; background: linear-gradient(transparent, #F4F5F7); pointer-events: none; }\n    .dd-tr-actions-row { display: flex; align-items: center; gap: 24px; margin: 14px 0 8px; flex-wrap: wrap; }\n    .dd-tr-toggle-btn {\n        display: inline-flex; align-items: center;\n        background: none; border: 0; padding: 0; color: #007AFF;\n        font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit;\n    }\n    .dd-tr-toggle-btn:hover { text-decoration: underline; }\n    .dd-tr-summary-btn {\n        display: inline-flex; align-items: center;\n        background: none; border: 0; padding: 0; color: #007AFF;\n        font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit;\n    }\n    .dd-tr-summary-btn:hover { text-decoration: underline; }\n\n    \/* Summary modal *\/\n    .dd-summary-overlay {\n        position: fixed; inset: 0; z-index: 100000;\n        background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);\n        display: none; align-items: center; justify-content: center; padding: 20px;\n    }\n    .dd-summary-overlay.open { display: flex; }\n    .dd-summary-modal {\n        background: #fff; border-radius: 20px; width: 100%; max-width: 560px;\n        max-height: 82vh; overflow-y: auto; padding: 24px 26px;\n        box-shadow: 0 24px 70px rgba(0,0,0,0.3);\n        animation: ddSummaryIn 0.22s cubic-bezier(0.16,1,0.3,1);\n    }\n    @keyframes ddSummaryIn { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }\n    .dd-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n    .dd-summary-title { font-size: 22px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.01em; }\n    .dd-summary-close { background: #F2F2F7; border: 0; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #3A3A3C; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }\n    .dd-summary-close:hover { background: #E5E5EA; }\n    .dd-summary-sub { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #007AFF; margin: 4px 0 16px; }\n    .dd-summary-body { font-size: 17px; line-height: 1.7; color: #2A2A2C; }\n    .dd-summary-body p { margin: 0 0 14px; }\n    .dd-summary-body p:last-child { margin-bottom: 0; }\n    .dd-summary-body ul, .dd-summary-body ol { margin: 0 0 14px; padding-left: 22px; }\n    .dd-summary-body li { margin: 0 0 6px; }\n    .dd-summary-body strong, .dd-summary-body b { font-weight: 800; color: #1D1D1F; }\n    .dd-summary-body u { text-decoration-color: #007AFF; text-underline-offset: 3px; }\n    .dd-summary-body em, .dd-summary-body i { font-style: italic; }\n    .dd-summary-body h2, .dd-summary-body h3, .dd-summary-body h4 { font-weight: 800; color: #1D1D1F; margin: 18px 0 8px; letter-spacing: -0.01em; }\n    .dd-summary-body h2 { font-size: 20px; }\n    .dd-summary-body h3 { font-size: 18px; }\n    .dd-summary-body a { color: #007AFF; text-decoration: none; font-weight: 600; }\n    .dd-summary-body a:hover { text-decoration: underline; }\n    .dd-summary-body blockquote { margin: 14px 0; padding: 8px 0 8px 16px; border-left: 3px solid #D1D1D6; color: #515154; font-style: italic; }\n    .dd-tr-action-slot { display: inline-flex; align-items: center; }\n    .dd-tr-action-slot[hidden] { display: none; }\n    .dd-tr-hint-link { color: #007AFF; text-decoration: none; font-weight: 700; cursor: pointer; }\n    .dd-tr-hint-link:hover { text-decoration: underline; }\n\n    \/* \"Mark as Read\" \u2014 simple left-aligned text action, same size as Show Less *\/\n    .dd-tr-done-btn {\n        display: inline-flex; align-items: center; gap: 9px;\n        background: none; border: 0; padding: 0; color: #34C759;\n        font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit;\n    }\n    .dd-tr-done-btn .dd-tr-done-check {\n        display: inline-flex; align-items: center; justify-content: center;\n        width: 20px; height: 20px; border-radius: 50%;\n        border: 2px solid rgba(52,199,89,0.55); color: transparent; transition: all 0.2s ease;\n    }\n    .dd-tr-done-btn.done .dd-tr-done-check { background: #34C759; border-color: #34C759; color: #fff; }\n    .dd-plan-login-text { font-size: 15px; font-weight: 600; color: #86868B; text-align: left; }\n    .dd-plan-login-text a { color: #007AFF; text-decoration: none; font-weight: 700; }\n\n    \/* When the day's reading is marked complete, the Today's Reading book icon\n       becomes a green check. *\/\n    .dd-section-ic-read .dd-read-ic-check { display: none; }\n    .dd-today-read.reading-complete .dd-section-ic-read { background: linear-gradient(135deg, #34C759, #248A3D); }\n    .dd-today-read.reading-complete .dd-section-ic-read .dd-read-ic-book { display: none; }\n    .dd-today-read.reading-complete .dd-section-ic-read .dd-read-ic-check { display: block; }\n<\/style>\n\n<div class=\"dd-today-read\">\n\n    \n    \n        <div class=\"dd-section-head\">\n        <span class=\"dd-section-ic dd-section-ic-read\"><svg class=\"dd-read-ic-book\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg><svg class=\"dd-read-ic-check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/span>\n        <div class=\"dd-apple-section-title\">Today's Reading<\/div>\n    <\/div>\n    <div class=\"dd-tr-readhead\">\n        <p class=\"dd-tr-sub\">1 Kings 10-11 &amp; Acts 8:26-40<\/p>\n        <span class=\"dd-tr-plan-name\">Traditional Plan &middot; <span class=\"dd-tr-plan-login\"><a href=\"javascript:void(0);\" class=\"dd-tr-hint-link\" onclick=\"ddToggleAccountMenu(); setTimeout(function(){ ddToggleAuthView('login'); }, 300);\">Log in<\/a> to change the reading plan<\/span><\/span>\n    <\/div>\n\n    \n    <div class=\"dd-tr-readbody collapsed\" id=\"dd-tr-readbody\"><div class=\"dd-tr-book-row\"><h2 class=\"dd-tr-book\">1 Kings<\/h2><\/div><h3 class=\"dd-tr-chap\">Chapter 10<\/h3><p class=\"dd-tr-err\">Could not load 1 Kings 10.<\/p><h3 class=\"dd-tr-chap\">Chapter 11<\/h3><p class=\"dd-tr-err\">Could not load 1 Kings 11.<\/p><div class=\"dd-tr-book-row\"><h2 class=\"dd-tr-book\">Acts<\/h2><\/div><h3 class=\"dd-tr-chap\">Chapter 8<\/h3><p class=\"dd-tr-err\">Could not load Acts 8.<\/p><\/div><div class=\"dd-tr-actions-row\"><button type=\"button\" class=\"dd-tr-toggle-btn\" id=\"dd-tr-read-toggle\" onclick=\"ddToggleReading()\">Continue Reading<\/button><span class=\"dd-tr-action-slot\" id=\"dd-tr-action-slot\" hidden><div class=\"dd-plan-login-text\"><a href=\"javascript:void(0);\" onclick=\"ddToggleAccountMenu(); setTimeout(function(){ ddToggleAuthView('login'); }, 300);\">Login<\/a> to record your reading<\/div><\/span><\/div><\/div>\n\n\n\n<script>\n(function () {\n    window.ddAppConfig = window.ddAppConfig || {};\n    ddAppConfig.ajaxUrl = ddAppConfig.ajaxUrl || \"https:\/\/exploretheword.app\/wp-admin\/admin-ajax.php\";\n    var ddTRNonce = \"fc32d5052f\";\n\n    \/\/ \u2500\u2500 Reading summary modal \u2500\u2500\n    window.ddOpenSummary = function () {\n        var o = document.getElementById('dd-summary-overlay');\n        if (!o) return;\n        \/\/ Move the overlay to <body> so a transformed\/filtered ancestor in the\n        \/\/ app shell does not trap position:fixed and push it off-centre.\n        if (o.parentNode !== document.body) { document.body.appendChild(o); }\n        o.classList.add('open');\n        document.body.style.overflow = 'hidden';\n    };\n    window.ddCloseSummary = function () {\n        var o = document.getElementById('dd-summary-overlay');\n        if (o) { o.classList.remove('open'); document.body.style.overflow = ''; }\n    };\n    document.addEventListener('keydown', function (e) {\n        if (e.key === 'Escape') {\n            var o = document.getElementById('dd-summary-overlay');\n            if (o && o.classList.contains('open')) { ddCloseSummary(); }\n        }\n    });\n\n    \/\/ \u2500\u2500 Today's Reading expand\/collapse (same behaviour as the devotional) \u2500\u2500\n    window.ddToggleReading = function () {\n        var b = document.getElementById('dd-tr-readbody');\n        var t = document.getElementById('dd-tr-read-toggle');\n        var slot = document.getElementById('dd-tr-action-slot');\n        if (!b || !t) return;\n        if (b.classList.contains('collapsed')) {\n            b.style.maxHeight = b.scrollHeight + 'px';\n            b.classList.remove('collapsed');\n            t.textContent = 'Show Less';\n            if (slot) slot.hidden = false;\n        } else {\n            b.classList.add('collapsed');\n            b.style.maxHeight = '';\n            t.textContent = 'Continue Reading';\n            if (slot) slot.hidden = true;\n            if (t.scrollIntoView) { t.scrollIntoView({ block: 'center', behavior: 'smooth' }); }\n        }\n    };\n\n    window.ddToggleDevo = function () {\n        var b = document.getElementById('dd-devo-body'), t = document.getElementById('dd-devo-toggle');\n        if (!b || !t) return;\n        if (b.classList.contains('collapsed')) { b.style.maxHeight = b.scrollHeight + 'px'; b.classList.remove('collapsed'); t.textContent = 'Show Less'; }\n        else { b.classList.add('collapsed'); b.style.maxHeight = ''; t.textContent = 'Read Full Devotional'; }\n    };\n\n    \/\/ \u2500\u2500 Reading overview: load the player only when the user taps play \u2500\u2500\n    window.ddPlayOverview = function () {\n        var box = document.getElementById('dd-tr-ov');\n        if (!box || box.classList.contains('playing')) return;\n        var type = box.getAttribute('data-type');\n        var src = box.getAttribute('data-embed');\n        if (!src) return;\n        var el;\n        if (type === 'file') {\n            el = document.createElement('video');\n            el.setAttribute('controls', '');\n            el.setAttribute('autoplay', '');\n            el.setAttribute('playsinline', '');\n            el.src = src;\n        } else {\n            el = document.createElement('iframe');\n            el.setAttribute('src', src);\n            el.setAttribute('title', 'Reading overview');\n            el.setAttribute('frameborder', '0');\n            el.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');\n            el.setAttribute('allowfullscreen', '');\n        }\n        box.classList.add('playing');\n        box.appendChild(el);\n    };\n\n    \/\/ \u2500\u2500 Whole-day reading completion (one button at the end) \u2500\u2500\n    var ddTodayKey = 'dd_today_done_' + \"heartlightotandnt\" + '_' + \"2026-06-27\";\n    var ddReadingSynced = false;\n    var ddServerCompleted = false;\n    var ddTRLoggedIn = false;\n\n    function ddIsDone() {\n        if (ddServerCompleted) return true;\n        try { return localStorage.getItem(ddTodayKey) === '1'; } catch (e) { return false; }\n    }\n    function ddSetDoneLocal(v) {\n        try { v ? localStorage.setItem(ddTodayKey, '1') : localStorage.removeItem(ddTodayKey); } catch (e) {}\n    }\n    function ddPaintDone(btn, isDone) {\n        if (!btn) btn = document.getElementById('dd-tr-done-btn');\n        if (!btn) return;\n        var label = btn.querySelector('.dd-tr-done-label');\n        if (isDone) { btn.classList.add('done'); if (label) label.textContent = 'Completed'; }\n        else { btn.classList.remove('done'); if (label) label.textContent = 'Mark as Read'; }\n        \/\/ Reveal\/hide the check on the reading's book header(s)\n        var read = document.querySelector('.dd-today-read');\n        if (read) { read.classList.toggle('reading-complete', !!isDone); }\n    }\n\n    function ddSyncStreak() {\n        if (ddReadingSynced) return;\n        ddReadingSynced = true;\n        var fd = new FormData();\n        fd.append('action', 'dd_sync_reading_streak');\n        fd.append('security', ddTRNonce);\n        fetch(ddAppConfig.ajaxUrl, { method: 'POST', body: fd })\n            .then(function (r) { return r.json(); })\n            .then(function (res) {\n                \/\/ Live-update the Reading Plan completion bar in the account\n                \/\/ settings panel so it reflects today's progress without a reload.\n                if (res && res.success && res.data && typeof res.data.plan_pct !== 'undefined') {\n                    var pctEl  = document.getElementById('dd-plan-progress-pct');\n                    var fillEl = document.getElementById('dd-plan-progress-fill');\n                    var subEl  = document.getElementById('dd-plan-progress-sub');\n                    if (pctEl)  pctEl.textContent  = res.data.plan_pct + '%';\n                    if (fillEl) fillEl.style.width = res.data.plan_pct + '%';\n                    if (subEl)  subEl.textContent   = res.data.plan_days + ' of ' + res.data.plan_total + ' days';\n                }\n            })\n            .catch(function () {});\n    }\n\n    window.ddToggleReadingDone = function (btn) {\n        var nowDone = !btn.classList.contains('done');\n        ddPaintDone(btn, nowDone);\n        ddSetDoneLocal(nowDone);\n        if (nowDone) { ddSyncStreak(); }\n    };\n\n    function ddTRInit() {\n        if (ddTRLoggedIn && ddIsDone()) {\n            \/\/ Paint the completed state (header check + Completed button) but keep\n            \/\/ the reading collapsed so it always starts small with the expand\n            \/\/ button showing.\n            ddPaintDone(null, true);\n            ddReadingSynced = true; \/\/ already recorded; don't double-count\n        }\n    }\n    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', ddTRInit); }\n    else { ddTRInit(); }\n})();\n<\/script>\n    <\/div>\n\n    \n\n\n    \n<style>\n    .dd-section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px 0; }\n    .dd-section-head .dd-apple-section-title { margin: 0 !important; }\n    .dd-section-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }\n    .dd-section-ic svg { width: 21px; height: 21px; display: block; }\n    .dd-section-ic-feed { background: linear-gradient(135deg, #34C759, #248A3D); color: #fff; }\n    .dd-feed { display: flex; flex-direction: column; gap: 10px; }\n    .dd-feed-more-group { display: flex; flex-direction: column; gap: 10px; }\n    .dd-feed-empty { padding: 30px; text-align: center; color: #86868B; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); font-size: 15px; }\n    .dd-feed-card { background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 14px; box-shadow: 0 3px 12px rgba(0,0,0,0.03); padding: 12px 16px; display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }\n    a.dd-feed-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }\n    .dd-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }\n    .dd-feed-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; }\n    .dd-feed-meta { flex: 1; min-width: 0; }\n    .dd-feed-line { font-size: 14px; color: #1D1D1F; line-height: 1.3; }\n    .dd-feed-line b { font-weight: 700; }\n    .dd-feed-action { color: #86868B; font-weight: 500; }\n    .dd-feed-time { font-size: 11px; color: #A1A1A6; margin-top: 1px; }\n    .dd-feed-private { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #FF9500; background: #FFF3E0; padding: 2px 7px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }\n    .dd-feed-ref { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #007AFF; margin-bottom: 6px; }\n    .dd-feed-body { font-size: 15px; line-height: 1.45; color: #2A2A2C; }\n    .dd-feed-snippet-highlight { background: linear-gradient(transparent 55%, #FFE39A 55%); padding: 0 2px; }\n    .dd-feed-snippet-underline { text-decoration: underline; text-decoration-color: #FF3B30; text-decoration-thickness: 2px; text-underline-offset: 3px; }\n    .dd-feed-snippet-note { font-style: italic; color: #3A3A3C; }\n    .dd-feed-title { font-size: 16px; font-weight: 700; color: #1D1D1F; line-height: 1.3; margin: 1px 0; }\n    .dd-feed-excerpt { font-size: 14px; line-height: 1.45; color: #6E6E73; }\n    .dd-feed-row-body { display: flex; align-items: center; gap: 14px; }\n    .dd-feed-row-text { flex: 1; min-width: 0; }\n    .dd-feed-side-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block; }\n    .dd-feed-ic-sermon { background: #5E5CE6; }\n    .dd-feed-ic-study { background: #34C759; }\n    .dd-feed-ic-marking { background: #FF9500; }\n    \/* Show more card *\/\n    .dd-feed-showmore { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-family: inherit; color: #007AFF; font-weight: 700; font-size: 15px; padding: 13px 16px; }\n    .dd-feed-showmore:hover { background: #F7FAFF; box-shadow: 0 8px 20px rgba(0,0,0,0.06); transform: translateY(-2px); }\n<\/style>\n\n<div style=\"margin-top: 35px;\">\n    <div class=\"dd-section-head\">\n        <span class=\"dd-section-ic dd-section-ic-feed\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg><\/span>\n        <div class=\"dd-apple-section-title\">Community Feed<\/div>\n    <\/div>\n    <div class=\"dd-feed\">\n                    <div class=\"dd-feed-empty\">Nothing here yet. Highlights, notes, sermons and markings will show up in your feed.<\/div>\n        \n                    <\/div>\n\n    <script>\n    if (typeof window.ddFeedShowMore !== 'function') {\n        window.ddFeedShowMore = function () {\n            var g = document.getElementById('dd-feed-more-group');\n            var b = document.getElementById('dd-feed-showmore');\n            if (g) { g.hidden = false; }\n            if (b) { b.parentNode.removeChild(b); }\n        };\n    }\n    <\/script>\n<\/div>\n\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n<script>\n    function ddInitLucide() {\n        if (typeof lucide !== 'undefined') {\n            lucide.createIcons();\n        } else {\n            setTimeout(ddInitLucide, 100);\n        }\n    }\n    ddInitLucide();\n\n    var ddServerToday = \"2026-06-27\";\n    var ddCurrentPlan = \"heartlightotandnt\";\n    var ddServerCompleted = false;\n    var isLoggedIn = false;\n\n    if (!ddState.getItem('dd_bible_plan_backup')) {\n        ddState.setItem('dd_bible_plan_backup', ddCurrentPlan);\n    }\n    \n    \/\/ If the server says we completed it, force the local storage to match (syncing down)\n    if (ddServerCompleted) {\n        var localPlans = JSON.parse(ddState.getItem('ddBibleCompletedPlans') || '{}');\n        if (localPlans[ddCurrentPlan] !== ddServerToday) {\n            localPlans[ddCurrentPlan] = ddServerToday;\n            ddState.setItem('ddBibleCompletedPlans', JSON.stringify(localPlans));\n        }\n    }\n\n    document.addEventListener('click', function(event) {\n        var dropdown = document.getElementById('dd-home-plan-dropdown');\n        if (dropdown && dropdown.classList.contains('active') && !event.target.closest('#dd-home-plan-dropdown') && !event.target.closest('button')) {\n            dropdown.classList.remove('active');\n        }\n    });\n\n    function ddAppChangeHomePlan(plan) {\n        var d = new Date();\n        d.setTime(d.getTime() + (365*24*60*60*1000));\n        document.cookie = \"dd_bible_plan=\" + plan + \";expires=\" + d.toUTCString() + \";path=\/;SameSite=Lax\";\n        ddState.setItem('dd_bible_plan_backup', plan);\n        \n        const nonceEl = document.getElementById('dd-auth-nonce');\n        \n        if (isLoggedIn && nonceEl) {\n            const formData = new FormData();\n            formData.append('action', 'dd_save_user_plan');\n            formData.append('plan', plan);\n            formData.append('security', nonceEl.value);\n            \n            fetch(ddAppConfig.ajaxUrl, { method: 'POST', body: formData })\n                .then(() => location.reload())\n                .catch(() => location.reload());\n        } else {\n            location.reload();\n        }\n    }\n\n    function ddAppCheckPlanCompletion() {\n        var completedPlans = JSON.parse(ddState.getItem('ddBibleCompletedPlans') || '{}');\n        var card = document.getElementById('dd-dashboard-reading-card');\n        \n        if (card && (completedPlans[ddCurrentPlan] === ddServerToday || ddServerCompleted)) {\n            card.classList.remove('dd-reading-card-blue');\n            card.classList.add('dd-reading-card-completed');\n            \n            var titleEl = card.querySelector('.dd-apple-card-title');\n            if(titleEl) titleEl.innerHTML = 'Reading Complete! \ud83c\udf89';\n            \n            var excerptEl = card.querySelector('.dd-apple-card-excerpt');\n            if(excerptEl) excerptEl.innerHTML = 'You have successfully finished today\u2019s reading schedule. Great job!';\n            \n            var btnEl = card.querySelector('button.dd-apple-btn');\n            if(btnEl) {\n                btnEl.innerHTML = 'Review Reading';\n                btnEl.classList.remove('dd-reading-btn-blue');\n                btnEl.classList.add('dd-reading-btn-completed');\n            }\n            \n            var tagEl = card.querySelector('.dd-apple-card-tag');\n            if(tagEl) {\n                tagEl.innerHTML = 'Reading Schedule &bull; Completed';\n            }\n\n            \/\/ --- SYNC STREAK TO SERVER ---\n            \/\/ Only sync if the server doesn't already know we finished it\n            const nonceEl = document.getElementById('dd-auth-nonce');\n            if (nonceEl && !ddServerCompleted && !sessionStorage.getItem('dd_streak_synced_' + ddServerToday)) {\n                const formData = new FormData();\n                formData.append('action', 'dd_sync_reading_streak');\n                formData.append('security', nonceEl.value);\n\n                fetch(ddAppConfig.ajaxUrl, { method: 'POST', body: formData })\n                    .then(r => r.json())\n                    .then(res => {\n                        if (res.success) {\n                            sessionStorage.setItem('dd_streak_synced_' + ddServerToday, 'true');\n                        }\n                    }).catch(() => {});\n            }\n        }\n    }\n\n    document.addEventListener('DOMContentLoaded', ddAppCheckPlanCompletion);\n    ddAppCheckPlanCompletion();\n<\/script>\n    <\/div>\n    \n    <div id=\"dd-pane-read\" class=\"dd-apple-pane \">\n        \n<div class=\"dd-apple-form-grid\">\n    \n    <div class=\"dd-apple-input-wrap\" style=\"flex: 2.5; min-width: 200px;\">\n        <label class=\"dd-apple-label\">Book<\/label>\n        <select id=\"dd-app-read-book\" class=\"dd-apple-select\">\n            <optgroup label=\"Old Testament\">\n                                    <option value=\"Genesis\"  selected='selected'>Genesis<\/option>\n                                    <option value=\"Exodus\" >Exodus<\/option>\n                                    <option value=\"Leviticus\" >Leviticus<\/option>\n                                    <option value=\"Numbers\" >Numbers<\/option>\n                                    <option value=\"Deuteronomy\" >Deuteronomy<\/option>\n                                    <option value=\"Joshua\" >Joshua<\/option>\n                                    <option value=\"Judges\" >Judges<\/option>\n                                    <option value=\"Ruth\" >Ruth<\/option>\n                                    <option value=\"1 Samuel\" >1 Samuel<\/option>\n                                    <option value=\"2 Samuel\" >2 Samuel<\/option>\n                                    <option value=\"1 Kings\" >1 Kings<\/option>\n                                    <option value=\"2 Kings\" >2 Kings<\/option>\n                                    <option value=\"1 Chronicles\" >1 Chronicles<\/option>\n                                    <option value=\"2 Chronicles\" >2 Chronicles<\/option>\n                                    <option value=\"Ezra\" >Ezra<\/option>\n                                    <option value=\"Nehemiah\" >Nehemiah<\/option>\n                                    <option value=\"Esther\" >Esther<\/option>\n                                    <option value=\"Job\" >Job<\/option>\n                                    <option value=\"Psalm\" >Psalm<\/option>\n                                    <option value=\"Proverbs\" >Proverbs<\/option>\n                                    <option value=\"Ecclesiastes\" >Ecclesiastes<\/option>\n                                    <option value=\"Song of Solomon\" >Song of Solomon<\/option>\n                                    <option value=\"Isaiah\" >Isaiah<\/option>\n                                    <option value=\"Jeremiah\" >Jeremiah<\/option>\n                                    <option value=\"Lamentations\" >Lamentations<\/option>\n                                    <option value=\"Ezekiel\" >Ezekiel<\/option>\n                                    <option value=\"Daniel\" >Daniel<\/option>\n                                    <option value=\"Hosea\" >Hosea<\/option>\n                                    <option value=\"Joel\" >Joel<\/option>\n                                    <option value=\"Amos\" >Amos<\/option>\n                                    <option value=\"Obadiah\" >Obadiah<\/option>\n                                    <option value=\"Jonah\" >Jonah<\/option>\n                                    <option value=\"Micah\" >Micah<\/option>\n                                    <option value=\"Nahum\" >Nahum<\/option>\n                                    <option value=\"Habakkuk\" >Habakkuk<\/option>\n                                    <option value=\"Zephaniah\" >Zephaniah<\/option>\n                                    <option value=\"Haggai\" >Haggai<\/option>\n                                    <option value=\"Zechariah\" >Zechariah<\/option>\n                                    <option value=\"Malachi\" >Malachi<\/option>\n                            <\/optgroup>\n            <optgroup label=\"New Testament\">\n                                    <option value=\"Matthew\">Matthew<\/option>\n                                    <option value=\"Mark\">Mark<\/option>\n                                    <option value=\"Luke\">Luke<\/option>\n                                    <option value=\"John\">John<\/option>\n                                    <option value=\"Acts\">Acts<\/option>\n                                    <option value=\"Romans\">Romans<\/option>\n                                    <option value=\"1 Corinthians\">1 Corinthians<\/option>\n                                    <option value=\"2 Corinthians\">2 Corinthians<\/option>\n                                    <option value=\"Galatians\">Galatians<\/option>\n                                    <option value=\"Ephesians\">Ephesians<\/option>\n                                    <option value=\"Philippians\">Philippians<\/option>\n                                    <option value=\"Colossians\">Colossians<\/option>\n                                    <option value=\"1 Thessalonians\">1 Thessalonians<\/option>\n                                    <option value=\"2 Thessalonians\">2 Thessalonians<\/option>\n                                    <option value=\"1 Timothy\">1 Timothy<\/option>\n                                    <option value=\"2 Timothy\">2 Timothy<\/option>\n                                    <option value=\"Titus\">Titus<\/option>\n                                    <option value=\"Philemon\">Philemon<\/option>\n                                    <option value=\"Hebrews\">Hebrews<\/option>\n                                    <option value=\"James\">James<\/option>\n                                    <option value=\"1 Peter\">1 Peter<\/option>\n                                    <option value=\"2 Peter\">2 Peter<\/option>\n                                    <option value=\"1 John\">1 John<\/option>\n                                    <option value=\"2 John\">2 John<\/option>\n                                    <option value=\"3 John\">3 John<\/option>\n                                    <option value=\"Jude\">Jude<\/option>\n                                    <option value=\"Revelation\">Revelation<\/option>\n                            <\/optgroup>\n        <\/select>\n    <\/div>\n    \n    <div class=\"dd-apple-input-wrap\" style=\"flex: 1; min-width: 80px;\">\n        <label class=\"dd-apple-label\">Chapter<\/label>\n        <select id=\"dd-app-read-chap\" class=\"dd-apple-select\"><\/select>\n    <\/div>\n\n    <div class=\"dd-apple-input-wrap\" style=\"flex: 1.5; min-width: 110px;\">\n        <label class=\"dd-apple-label\">Verse<\/label>\n        <select id=\"dd-app-read-verse\" class=\"dd-apple-select\"><\/select>\n    <\/div>\n\n    <div class=\"dd-apple-input-wrap button-wrap\" style=\"flex: 1; min-width: 220px; flex-direction: row !important; gap: 10px; align-items: stretch;\">\n        <button class=\"dd-apple-btn\" onclick=\"ddAppLoadChapter(false)\" style=\"flex: 1; width: auto !important; padding: 0 16px !important;\">Read<\/button>\n        \n        <a href=\"?tab=search\" title=\"Search the Bible\" class=\"dd-hide-on-mobile\" style=\"flex: 0 0 54px; width: 54px !important; min-width: 54px !important; padding: 0 !important; margin: 0; background: rgba(118, 118, 128, 0.12) !important; border: none !important; border-radius: 12px !important; color: #1D1D1F !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; text-decoration: none !important; outline: none !important; transition: background 0.2s;\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1D1D1F\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0 !important; min-width: 24px !important; display: block !important;\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line>\n            <\/svg>\n        <\/a>\n\n        <button onclick=\"ddShowOptionsModal()\" title=\"Reading Options\" class=\"dd-hide-on-mobile\" style=\"flex: 0 0 54px; width: 54px !important; min-width: 54px !important; padding: 0 !important; margin: 0; background: rgba(118, 118, 128, 0.12) !important; border: none !important; border-radius: 12px !important; color: #1D1D1F !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important; outline: none !important; transition: background 0.2s; box-sizing: border-box !important;\">\n            <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#1D1D1F\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0 !important; display: block !important;\">\n                <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n                <path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"><\/path>\n            <\/svg>\n        <\/button>\n    <\/div>\n\n<\/div>\n\n<script>\n(function() {\n    const ddBibleStructure = {\n        \"Genesis\": [31,25,24,26,32,22,24,22,29,32,32,20,18,24,21,16,27,33,38,18,34,24,20,67,34,35,46,22,35,43,55,32,20,31,29,43,36,30,23,23,57,38,34,34,28,34,31,22,33,26],\n        \"Exodus\": [22,25,22,31,23,30,25,32,35,29,10,51,22,31,27,36,16,27,25,26,36,31,33,18,40,37,21,43,46,38,18,35,23,35,35,38,29,31,43,38],\n        \"Leviticus\": [17,16,17,35,19,30,38,36,24,20,47,8,59,57,33,34,16,30,37,27,24,33,44,23,55,46,34],\n        \"Numbers\": [54,34,51,49,31,27,89,26,23,36,35,16,33,45,41,50,13,32,22,29,35,41,30,25,18,65,23,31,40,16,54,42,56,29,34,13],\n        \"Deuteronomy\": [46,37,29,49,33,25,26,20,29,22,32,32,18,29,23,22,20,22,21,20,23,30,26,22,19,19,26,68,29,20,30,52,29,12],\n        \"Joshua\": [18,24,17,24,15,27,26,35,27,43,23,24,33,15,63,10,18,28,51,9,45,34,16,33],\n        \"Judges\": [36,23,31,24,31,40,25,35,57,18,40,15,25,20,20,31,13,31,30,48,25],\n        \"Ruth\": [22,23,18,22],\n        \"1 Samuel\": [28,36,21,22,12,21,17,22,27,27,15,25,23,52,35,23,58,30,24,42,15,23,29,22,44,25,12,25,11,31,13],\n        \"2 Samuel\": [27,32,39,12,25,23,29,18,13,19,27,31,39,33,37,23,29,33,43,26,22,51,39,25],\n        \"1 Kings\": [53,46,28,34,18,38,51,66,28,29,43,33,34,31,34,34,24,46,21,43,29,53],\n        \"2 Kings\": [18,25,27,44,27,33,20,29,37,36,21,21,25,29,38,20,41,37,37,21,26,20,37,20,30],\n        \"1 Chronicles\": [54,55,24,43,26,81,40,40,44,14,47,40,14,17,29,43,27,17,19,8,30,19,32,31,31,32,34,21,30],\n        \"2 Chronicles\": [17,18,17,22,14,42,22,18,31,19,23,16,22,15,19,14,19,34,11,37,20,12,21,27,28,23,9,27,36,27,21,33,25,33,27,23],\n        \"Ezra\": [11,70,13,24,17,22,28,36,15,44],\n        \"Nehemiah\": [11,20,32,23,19,19,73,18,38,39,36,47,31],\n        \"Esther\": [22,23,15,17,14,14,10,17,32,3],\n        \"Job\": [22,13,26,21,27,30,21,22,35,22,20,25,28,22,35,22,16,21,29,29,34,30,17,25,6,14,23,28,25,31,40,22,33,37,16,33,24,41,30,24,34,17],\n        \"Psalm\": [6,12,8,8,12,10,17,9,20,18,7,8,6,7,5,11,15,50,14,9,13,31,6,10,22,12,14,9,11,12,24,11,22,22,28,12,40,22,13,17,13,11,5,26,17,11,9,14,20,23,19,9,6,7,23,13,11,11,17,12,8,12,11,10,13,20,7,35,36,5,24,20,28,23,10,12,20,72,13,19,16,8,18,12,13,17,7,18,52,17,16,15,5,23,11,13,12,9,9,5,8,28,22,35,45,48,43,13,31,7,10,10,9,8,18,19,2,29,176,7,8,9,4,8,5,6,5,6,8,8,3,18,3,3,21,26,9,8,24,13,10,7,12,15,21,10,20,14,9,6],\n        \"Proverbs\": [33,22,35,27,23,35,27,36,18,32,31,28,25,35,33,33,28,24,29,30,31,29,35,34,28,28,27,28,27,33,31],\n        \"Ecclesiastes\": [18,26,22,16,20,12,29,17,18,20,10,14],\n        \"Song of Solomon\": [17,17,11,16,16,13,13,14],\n        \"Isaiah\": [31,22,26,6,30,13,25,22,21,34,16,6,22,32,9,14,14,7,25,6,17,25,18,23,12,21,13,29,24,33,9,20,24,17,10,22,38,22,8,31,29,25,28,28,25,13,15,22,26,11,23,15,12,17,13,12,21,14,21,22,11,12,19,12,25,24],\n        \"Jeremiah\": [19,37,25,31,31,30,34,22,26,25,23,17,27,22,21,21,27,23,15,18,14,30,40,10,38,24,22,17,32,24,40,44,26,22,19,32,21,28,18,16,18,22,13,30,5,28,7,47,39,46,64,34],\n        \"Lamentations\": [22,22,66,22,22],\n        \"Ezekiel\": [28,10,27,17,17,14,27,18,11,22,25,28,23,23,8,63,24,32,14,49,32,31,49,27,17,21,36,26,21,26,18,32,33,31,15,38,28,23,29,49,26,20,27,31,25,24,23,35],\n        \"Daniel\": [21,49,30,37,31,28,28,27,27,21,45,13],\n        \"Hosea\": [11,23,5,19,15,11,16,14,17,15,12,14,16,9],\n        \"Joel\": [20,32,21],\n        \"Amos\": [15,16,15,13,27,14,17,14,15],\n        \"Obadiah\": [21],\n        \"Jonah\": [17,10,10,11],\n        \"Micah\": [16,13,12,13,15,16,20],\n        \"Nahum\": [15,13,19],\n        \"Habakkuk\": [17,20,19],\n        \"Zephaniah\": [18,15,20],\n        \"Haggai\": [15,23],\n        \"Zechariah\": [21,13,10,14,11,15,14,23,17,12,17,14,9,21],\n        \"Malachi\": [14,17,18,6],\n        \"Matthew\": [25,23,17,25,48,34,29,34,38,42,30,50,58,36,39,28,27,35,30,34,46,46,39,51,46,75,66,20],\n        \"Mark\": [45,28,35,41,43,56,37,38,50,52,33,44,37,72,47,20],\n        \"Luke\": [80,52,38,44,39,49,50,56,62,42,54,59,35,35,32,31,37,43,48,47,38,71,56,53],\n        \"John\": [51,25,36,54,47,71,53,59,41,42,57,50,38,31,27,33,26,40,42,31,25],\n        \"Acts\": [26,47,26,37,42,15,60,40,43,48,30,25,52,28,41,40,34,28,41,38,40,30,35,27,27,32,44,31],\n        \"Romans\": [32,29,31,25,21,23,25,39,33,21,36,21,14,23,33,27],\n        \"1 Corinthians\": [31,16,23,21,13,20,40,13,27,33,34,31,13,40,58,24],\n        \"2 Corinthians\": [24,17,18,18,21,18,16,24,15,18,33,21,14],\n        \"Galatians\": [24,21,29,31,26,18],\n        \"Ephesians\": [23,22,21,32,33,24],\n        \"Philippians\": [30,30,21,23],\n        \"Colossians\": [29,23,25,18],\n        \"1 Thessalonians\": [10,20,13,18,28],\n        \"2 Thessalonians\": [12,17,18],\n        \"1 Timothy\": [20,15,16,16,25,21],\n        \"2 Timothy\": [18,26,17,22],\n        \"Titus\": [16,15,15],\n        \"Philemon\": [25],\n        \"Hebrews\": [14,18,19,16,14,20,28,13,28,39,40,29,25],\n        \"James\": [27,26,18,17,20],\n        \"1 Peter\": [25,25,22,19,14],\n        \"2 Peter\": [21,22,18],\n        \"1 John\": [10,29,24,21,21],\n        \"2 John\": [13],\n        \"3 John\": [14],\n        \"Jude\": [25],\n        \"Revelation\": [20,29,22,11,14,17,17,13,21,11,19,17,18,20,8,21,18,24,21,15,27,21]\n    };\n\n    const bookSelect = document.getElementById('dd-app-read-book');\n    const chapSelect = document.getElementById('dd-app-read-chap');\n    const verseSelect = document.getElementById('dd-app-read-verse');\n\n    \/\/ Restore memory on tab open\n    let savedBook = ddState.getItem('ddBibleBook');\n    let savedChap = ddState.getItem('ddBibleChap');\n    let savedVerse = ddState.getItem('ddBibleVerse');\n\n    if (savedBook && bookSelect) {\n        bookSelect.value = savedBook;\n    }\n\n    function updateChapters() {\n        if (!bookSelect || !chapSelect) return;\n        const selectedBook = bookSelect.value;\n        const maxChaps = (ddBibleStructure[selectedBook] || [1]).length;\n        \n        let currentChap = savedChap || chapSelect.value || 1;\n        savedChap = null;\n\n        chapSelect.innerHTML = '';\n        for (let i = 1; i <= maxChaps; i++) {\n            chapSelect.options.add(new Option(i, i));\n        }\n        \n        chapSelect.value = (currentChap <= maxChaps) ? currentChap : 1;\n        updateVerses();\n    }\n\n    function updateVerses() {\n        if (!bookSelect || !chapSelect || !verseSelect) return;\n        const selectedBook = bookSelect.value;\n        const chapsArray = ddBibleStructure[selectedBook] || [1];\n        const cIndex = (parseInt(chapSelect.value, 10) || 1) - 1;\n        let maxVerses = 176;\n        \n        if (cIndex >= 0 && cIndex < chapsArray.length) {\n            maxVerses = chapsArray[cIndex];\n        }\n        \n        let currentVerse = savedVerse !== null ? savedVerse : verseSelect.value;\n        savedVerse = null;\n        \n        verseSelect.innerHTML = '<option value=\"\">Whole Chapter<\/option>';\n        for (let i = 1; i <= maxVerses; i++) {\n            verseSelect.options.add(new Option(i, i));\n        }\n\n        verseSelect.value = (currentVerse <= maxVerses) ? currentVerse : '';\n    }\n\n    \/\/ Manual Input saves to memory immediately\n    if (bookSelect) bookSelect.addEventListener('change', function() {\n        updateChapters();\n        ddState.setItem('ddBibleBook', bookSelect.value);\n        ddState.setItem('ddBibleChap', chapSelect.value);\n        if (verseSelect && verseSelect.value) {\n            ddState.setItem('ddBibleVerse', verseSelect.value);\n        } else {\n            ddState.removeItem('ddBibleVerse');\n        }\n    });\n    \n    if (chapSelect) chapSelect.addEventListener('change', function() {\n        updateVerses();\n        ddState.setItem('ddBibleBook', bookSelect.value);\n        ddState.setItem('ddBibleChap', chapSelect.value);\n        if (verseSelect && verseSelect.value) {\n            ddState.setItem('ddBibleVerse', verseSelect.value);\n        } else {\n            ddState.removeItem('ddBibleVerse');\n        }\n    });\n\n    if (verseSelect) verseSelect.addEventListener('change', function() {\n        if (verseSelect.value) {\n            ddState.setItem('ddBibleVerse', verseSelect.value);\n        } else {\n            ddState.removeItem('ddBibleVerse');\n        }\n    });\n\n    \/\/ Run initial population\n    updateChapters();\n\n    \/\/ ==========================================\n    \/\/ THE OMNIPRESENT WATCHER (V2)\n    \/\/ ==========================================\n    let lastSeenScreenBook = '';\n    let lastSeenScreenChap = '';\n\n    setInterval(function() {\n        let titleSpan = document.querySelector('.dd-apple-reading-title span');\n        if (titleSpan && titleSpan.innerText) {\n            let text = titleSpan.innerText.trim();\n            \n            \/\/ Extracts the Book (Match 1) and Chapter (Match 2) from the text\n            let match = text.match(\/^(.*?)\\s+(\\d+)$\/);\n            if (match) {\n                let screenBook = match[1];\n                let screenChap = match[2];\n                \n                \/\/ ONLY react if the screen itself just changed to a *new* chapter.\n                \/\/ This stops it from fighting your manual dropdown changes.\n                if (screenBook !== lastSeenScreenBook || screenChap !== lastSeenScreenChap) {\n                    \n                    lastSeenScreenBook = screenBook;\n                    lastSeenScreenChap = screenChap;\n                    \n                    \/\/ If the screen shows a new chapter, lock that reality into memory\n                    if (ddState.getItem('ddBibleBook') !== screenBook || ddState.getItem('ddBibleChap') !== screenChap) {\n                        \n                        ddState.setItem('ddBibleBook', screenBook);\n                        ddState.setItem('ddBibleChap', screenChap);\n                        ddState.removeItem('ddBibleVerse');\n                        \n                        \/\/ Sync dropdowns\n                        if (bookSelect && bookSelect.value !== screenBook) {\n                            bookSelect.value = screenBook;\n                            updateChapters();\n                        }\n                        if (chapSelect && chapSelect.value !== screenChap) {\n                            chapSelect.value = screenChap;\n                            updateVerses();\n                        }\n                        if (verseSelect) {\n                            verseSelect.value = '';\n                        }\n                    }\n                }\n            }\n        }\n    }, 500);\n\n    \/\/ Boot up the chapter initially \u2014 only when actually on the Read tab\n    setTimeout(function() {\n        var initTab = (typeof ddState !== 'undefined') ? ddState.getItem('ddBibleActiveTab') : null;\n        var urlTab = new URLSearchParams(window.location.search).get('tab');\n        if ((urlTab === 'read' || urlTab === null) && initTab !== 'home' && initTab !== 'notes' && initTab !== 'sermons' && initTab !== 'search') {\n            if (typeof ddAppLoadChapter === 'function') {\n                ddAppLoadChapter(false);\n            }\n        }\n    }, 50);\n})();\n<\/script>\n\n<div class=\"dd-apple-results-area\">\n    <div id=\"dd-app-read-loader\" class=\"dd-apple-loader\">Loading Text...<\/div>\n    <div id=\"dd-app-read-content\"><\/div>\n<\/div>\n\n<div id=\"dd-note-modal\" class=\"dd-note-modal-overlay\">\n    <div class=\"dd-note-modal-content\">\n        <div class=\"dd-note-modal-header\" style=\"justify-content: flex-end; padding: 20px 25px 0 25px; border-bottom: none;\">\n            <button class=\"dd-apple-round-close\" onclick=\"ddCloseVerseModal()\">\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n            <\/button>\n        <\/div>\n        \n        <style>\n            .dd-modern-commentary-body-app p { margin-bottom: 24px; }\n            .dd-modern-commentary-body-app h2,\n            .dd-modern-commentary-body-app h3 {\n                font-family: -apple-system, sans-serif; font-weight: 700; color: #1D1D1F;\n                margin-top: 40px; margin-bottom: 15px; letter-spacing: -0.02em;\n            }\n            .dd-modern-commentary-body-app h2 { font-size: 28px; }\n            .dd-modern-commentary-body-app h3 { font-size: 24px; }\n        <\/style>\n        \n        <div id=\"dd-note-modal-body\" class=\"dd-note-modal-body\" style=\"padding: 0 40px 50px 40px; text-align: center;\">\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function ddShowVerseDetails(book, chap, verse) {\n        var modal = document.getElementById('dd-note-modal');\n        var body = document.getElementById('dd-note-modal-body');\n        \n        body.innerHTML = '<div class=\"dd-apple-loader active\" style=\"display:block; padding: 60px 0;\">Loading Details...<\/div>';\n        modal.classList.add('active');\n        modal.style.display = 'flex';\n\n        var fd = new URLSearchParams();\n        fd.append('action', 'dd_app_verse_details');\n        fd.append('book', book);\n        fd.append('chapter', chap);\n        fd.append('verse', verse);\n\n        var ajaxUrl = (typeof dd_ajax !== 'undefined' && dd_ajax.url) ? dd_ajax.url : 'https:\/\/exploretheword.app\/wp-admin\/admin-ajax.php';\n\n        fetch(ajaxUrl, {\n            method: 'POST',\n            headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n            body: fd.toString()\n        })\n        .then(function(res) { return res.json(); })\n        .then(function(res) {\n            if(res.success) {\n                body.innerHTML = res.data.html;\n            } else {\n                body.innerHTML = '<div style=\"color:#FF3B30; padding:40px;\">Error: ' + res.data + '<\/div>';\n            }\n        }).catch(function() {\n            body.innerHTML = '<div style=\"color:#FF3B30; padding:40px;\">Failed to connect to the server.<\/div>';\n        });\n    }\n\n    function ddCloseVerseModal() {\n        var modal = document.getElementById('dd-note-modal');\n        modal.classList.remove('active');\n        setTimeout(function() {\n            modal.style.display = 'none';\n        }, 400);\n    }\n    \n    document.addEventListener('DOMContentLoaded', function() {\n        var modal = document.getElementById('dd-note-modal');\n        if (modal) {\n            modal.addEventListener('click', function(e) {\n                if (e.target === modal) {\n                    ddCloseVerseModal();\n                }\n            });\n        }\n    });\n<\/script>\n        <div id=\"dd-app-read-results\" class=\"dd-apple-results-area\" style=\"margin-top:40px;\"><\/div>\n        <div id=\"dd-app-read-loader\" class=\"dd-apple-loader\">Loading chapter...<\/div>\n    <\/div>\n    \n    <div id=\"dd-pane-search\" class=\"dd-apple-pane \">\n        \n<style>\n    \/* Desktop default layout *\/\n    .dd-apple-form-grid { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }\n    .dd-apple-input-wrap { display: flex; flex-direction: column; }\n    .dd-apple-label { font-size: 13px; font-weight: 600; color: #1D1D1F; margin-bottom: 6px; }\n    .dd-apple-select, .dd-apple-input { padding: 10px 14px; border-radius: 8px; border: 1px solid #c3c4c7; font-size: 15px; width: 100%; box-sizing: border-box; }\n    .dd-apple-btn { background: #007AFF; color: #fff; padding: 10px 24px; border-radius: 8px; border: none; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s; height: 42px; }\n    .dd-apple-btn:hover { background: #0056b3; }\n\n    \/* Topic Pills *\/\n    .dd-search-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; width: 100%; }\n    .dd-search-topic-pill { padding: 8px 16px; background: #F2F2F7; color: #1D1D1F; border-radius: 100px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; outline: none; }\n    .dd-search-topic-pill:hover { background: #E5E5EA; transform: translateY(-2px); }\n    .dd-search-topic-pill.active { background: #1D1D1F; color: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }\n\n    \/* Mobile overrides *\/\n    @media (max-width: 768px) {\n        .dd-apple-form-grid { flex-direction: column; align-items: stretch; gap: 12px; }\n        .dd-apple-input-wrap { flex: 1 1 100% !important; min-width: 100% !important; }\n        .dd-apple-btn { width: 100%; margin-top: 5px; }\n        .dd-search-topics { margin-top: 10px; gap: 6px; }\n        .dd-search-topic-pill { padding: 10px 14px; font-size: 14px; \/* Slightly larger tap target for thumbs *\/ }\n    }\n<\/style>\n\n<div class=\"dd-apple-form-grid\">\n    \n    <div class=\"dd-apple-input-wrap\" style=\"flex: 1.5; min-width: 220px;\">\n        <label class=\"dd-apple-label\">Filter Search<\/label>\n        <select id=\"dd-app-search-filter\" class=\"dd-apple-select\">\n            <option value=\"all\" style=\"font-weight: bold; color: #007AFF;\" selected>Everything<\/option>\n            <option value=\"topics\">Topics Only<\/option>\n        <\/select>\n    <\/div>\n\n    <div class=\"dd-apple-input-wrap\" style=\"flex: 3; min-width: 350px;\">\n        <label class=\"dd-apple-label\">Keyword or Passage<\/label>\n        <input type=\"text\" id=\"dd-app-search-input\" class=\"dd-apple-input\" placeholder=\"Search topics, text, or reference (e.g. Faith or John 3)...\" autocomplete=\"off\">\n    <\/div>\n\n    <div class=\"dd-apple-input-wrap button-wrap\">\n        <button class=\"dd-apple-btn\" onclick=\"ddTriggerManualSearch()\">Search<\/button>\n    <\/div>\n\n    \n<\/div>\n\n<div class=\"dd-apple-results-area\" style=\"margin-top: 30px;\">\n    <div id=\"dd-app-search-loader\" class=\"dd-apple-loader\" style=\"display:none;\">Searching...<\/div>\n    <div id=\"dd-app-search-content\"><\/div>\n    <div id=\"dd-app-search-pagination\"><\/div>\n<\/div>\n\n<script>\n\/\/ Handle clicking a topic pill\nfunction ddTriggerTopicSearch(btn, topicName) {\n    \/\/ Reset all pills\n    document.querySelectorAll('.dd-search-topic-pill').forEach(function(p) {\n        p.classList.remove('active');\n    });\n    \/\/ Highlight the clicked pill\n    btn.classList.add('active');\n    \n    \/\/ Force the filter to \"all\" (Everything)\n    document.getElementById('dd-app-search-filter').value = 'all';\n    \n    \/\/ Fill the input with the topic name\n    document.getElementById('dd-app-search-input').value = topicName;\n    \n    \/\/ Trigger the existing search pipeline\n    if (typeof ddAppSearch === 'function') {\n        ddAppSearch(1);\n    }\n}\n\n\/\/ Handle clicking the main search button or pressing enter\nfunction ddTriggerManualSearch() {\n    \/\/ Deselect pills since the user is typing a custom query\n    document.querySelectorAll('.dd-search-topic-pill').forEach(function(p) {\n        p.classList.remove('active');\n    });\n    if (typeof ddAppSearch === 'function') {\n        ddAppSearch(1);\n    }\n}\n\n\/\/ Listen for enter key on the input field\ndocument.getElementById('dd-app-search-input').addEventListener('keypress', function(e) {\n    if (e.key === 'Enter') {\n        e.preventDefault();\n        ddTriggerManualSearch();\n    }\n});\n\n\/\/ Restore last search state if it exists\ndocument.addEventListener('DOMContentLoaded', function() {\n    var savedHtml = ddState.getItem('ddAppSearch_html');\n    var savedQuery = ddState.getItem('ddAppSearch_query');\n    \n    if (savedHtml && savedQuery) {\n        document.getElementById('dd-app-search-input').value = savedQuery;\n        \n        var savedFilter = ddState.getItem('ddAppSearch_filter');\n        if (savedFilter) {\n            document.getElementById('dd-app-search-filter').value = savedFilter;\n        }\n        \n        document.getElementById('dd-app-search-content').innerHTML = savedHtml;\n        \n        var savedPag = ddState.getItem('ddAppSearch_pagination');\n        if (savedPag) {\n            document.getElementById('dd-app-search-pagination').innerHTML = savedPag;\n        }\n\n        \/\/ Re-highlight the pill if the saved query matches one\n        document.querySelectorAll('.dd-search-topic-pill').forEach(function(p) {\n            if(p.getAttribute('data-topic') === savedQuery) {\n                p.classList.add('active');\n            }\n        });\n    }\n});\n<\/script>        <div id=\"dd-app-search-results\" class=\"dd-apple-results-area\" style=\"margin-top:40px;\"><\/div>\n        <div id=\"dd-app-search-loader\" class=\"dd-apple-loader\">Searching text...<\/div>\n    <\/div>\n\n    <div id=\"dd-pane-notes\" class=\"dd-apple-pane \">\n        \n<style>\n    .dd-study-dashboard { padding-bottom: 60px; }\n    \n    \/* SECTION HEADINGS *\/\n    .dd-study-section-title {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        font-size: 24px;\n        font-weight: 800;\n        color: #1D1D1F;\n        letter-spacing: -0.02em;\n        margin: 50px 0 24px 0;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    .dd-study-subtitle {\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 13px;\n        font-weight: 700;\n        color: #8E8E93;\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n        margin: 0 0 16px 0;\n    }\n    \n    \/* ========================================================\n       MODERN FLAT LIST VIEWS (Replaces Cards entirely)\n       ======================================================== *\/\n\n    \/* ===== VAULT: My Saved Items ===== *\/\n    .dd-vault-wrap { margin-bottom: 0; }\n    .dd-vault-toolbar {\n        display: flex; align-items: center; gap: 10px;\n        background: #fff; border: 1px solid #E5E5EA; border-radius: 14px;\n        padding: 10px 14px; margin-bottom: 16px; gap: 12px;\n    }\n    .dd-vault-search-icon { color: #8E8E93; flex-shrink: 0; }\n    .dd-vault-search {\n        flex: 1; border: none; outline: none; font-size: 15px;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        color: #1D1D1F; background: transparent;\n    }\n    .dd-vault-search::placeholder { color: #C7C7CC; }\n    .dd-vault-filters {\n        display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;\n    }\n    .dd-vf {\n        font-size: 13px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        padding: 6px 14px; border-radius: 99px; border: 1.5px solid #E5E5EA;\n        background: #fff; color: #515154; cursor: pointer; transition: all 0.15s;\n        white-space: nowrap;\n    }\n    .dd-vf.active { background: #1D1D1F; color: #fff; border-color: #1D1D1F; }\n    .dd-vf-note.active  { background: #FF9500; border-color: #FF9500; }\n    .dd-vf-hl.active    { background: #FFCC00; border-color: #FFCC00; color: #1D1D1F; }\n    .dd-vf-ul.active    { background: #FF3B30; border-color: #FF3B30; }\n    .dd-vf-bmark.active { background: #007AFF; border-color: #007AFF; }\n\n    .dd-vault-sort {\n        font-size: 13px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        padding: 6px 14px; border-radius: 99px; border: 1.5px solid #E5E5EA;\n        background: #fff; color: #515154; cursor: pointer; transition: all 0.15s;\n        display: flex; align-items: center; gap: 6px; margin-left: auto;\n    }\n    .dd-vault-sort.active-sort { background: #F2F2F7; border-color: #C7C7CC; }\n\n    .dd-vault-list { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid #E5E5EA; background: #fff; }\n    .dd-vault-item {\n        display: flex; align-items: center; gap: 14px;\n        padding: 14px 18px; border-bottom: 1px solid #F2F2F7;\n        cursor: pointer; transition: background 0.12s; text-decoration: none;\n    }\n    .dd-vault-item:last-child { border-bottom: none; }\n    .dd-vault-item:hover { background: #FAFAFC; }\n    .dd-vault-pip {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n    }\n    .dd-vault-type-icon {\n        width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;\n        display: flex; align-items: center; justify-content: center;\n    }\n    .dd-vault-ref {\n        font-size: 15px; font-weight: 700; color: #1D1D1F;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        flex: 1; min-width: 0;\n    }\n    .dd-vault-preview {\n        font-size: 13px; color: #8E8E93; margin-top: 1px; white-space: nowrap;\n        overflow: hidden; text-overflow: ellipsis; max-width: 240px;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n    \/* Topics browser *\/\n    .dd-topics-bar { margin: 4px 0 18px; }\n    .dd-topics-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }\n    .dd-topics-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #86868B; }\n    .dd-topics-clear { background: none; border: 0; color: #007AFF; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }\n    .dd-topics-chips { display: flex; flex-wrap: wrap; gap: 8px; }\n    .dd-topic-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E5E5EA; border-radius: 99px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: #1D1D1F; cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s; }\n    .dd-topic-chip:hover { border-color: #C7C7CC; background: #FAFAFC; }\n    .dd-topic-chip.active { background: #007AFF; border-color: #007AFF; color: #fff; }\n    .dd-topic-chip-ct { font-size: 11px; font-weight: 700; opacity: 0.6; }\n    .dd-topic-chip.active .dd-topic-chip-ct { opacity: 0.85; }\n    \/* Per-item tags *\/\n    .dd-vault-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }\n    .dd-vault-tag { display: inline-flex; align-items: center; gap: 3px; background: #F0F0F4; color: #515154; font-size: 11px; font-weight: 600; padding: 3px 4px 3px 9px; border-radius: 99px; cursor: pointer; }\n    .dd-vault-tag:hover { background: #E5E5EA; }\n    .dd-vault-tag-x { border: 0; background: none; color: #A1A1A6; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 3px; border-radius: 50%; }\n    .dd-vault-tag-x:hover { color: #FF3B30; }\n    .dd-vault-tag-add { border: 1px dashed #C7C7CC; background: none; color: #86868B; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; cursor: pointer; font-family: inherit; }\n    .dd-vault-tag-add:hover { color: #007AFF; border-color: #007AFF; }\n    .dd-vault-tag-newinput { border: 1px solid #007AFF; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-family: inherit; width: 100px; outline: none; }\n    .dd-vault-badge {\n        font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;\n        padding: 3px 7px; border-radius: 5px; flex-shrink: 0;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n    .dd-vault-date {\n        font-size: 12px; color: #C7C7CC; flex-shrink: 0; white-space: nowrap;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n    .dd-vault-del {\n        flex-shrink: 0; background: none; border: none; cursor: pointer;\n        color: #C7C7CC; padding: 4px; border-radius: 6px; transition: all 0.15s;\n        display: flex; align-items: center; justify-content: center;\n    }\n    .dd-vault-del:hover { color: #FF3B30; background: rgba(255,59,48,0.08); }\n    .dd-vault-empty {\n        text-align: center; padding: 48px 20px; color: #8E8E93;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px;\n    }\n    .dd-vault-count {\n        font-size: 13px; font-weight: 600; color: #8E8E93;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        margin-bottom: 10px;\n    }\n    .dd-vault-paginate {\n        display: flex; align-items: center; justify-content: center; gap: 8px;\n        padding: 16px 0 0; flex-wrap: wrap;\n    }\n    .dd-vault-pg {\n        font-size: 13px; font-weight: 600; padding: 6px 14px;\n        border-radius: 8px; border: 1.5px solid #E5E5EA;\n        background: #fff; color: #515154; cursor: pointer;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        transition: all 0.15s;\n    }\n    .dd-vault-pg:hover { border-color: #C7C7CC; background: #F2F2F7; }\n    .dd-vault-pg.current { background: #1D1D1F; color: #fff; border-color: #1D1D1F; }\n    .dd-vault-pg:disabled { opacity: 0.35; cursor: default; }\n\n    \/* TOPICAL \/ COMM (unchanged) *\/\n    .dd-topical-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }\n    .dd-topical-card {\n        background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 12px;\n        padding: 24px; text-decoration: none !important; display: flex;\n        flex-direction: column; transition: all 0.2s ease;\n    }\n    .dd-topical-card:hover { border-color: #C7C7CC; background: #FAFAFC; }\n    .dd-topical-icon-wrap { width: 40px; height: 40px; background: rgba(94, 92, 230, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #5E5CE6; }\n    .dd-topical-title { font-family: -apple-system, sans-serif; font-size: 18px; font-weight: 700; color: #1D1D1F; margin-bottom: 8px; line-height: 1.3; }\n    .dd-topical-excerpt { font-family: -apple-system, sans-serif; font-size: 14px; color: #86868B; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px; flex-grow: 1; }\n    .dd-topical-read-btn { display: inline-flex; align-items: center; gap: 6px; font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 700; color: #5E5CE6; text-transform: uppercase; letter-spacing: 0.05em; border: none; background: transparent; padding: 0; }\n\n    .dd-comm-library-wrap { display: flex; flex-direction: column; gap: 12px; }\n    .dd-comm-book-group { background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E5EA; overflow: hidden; transition: all 0.2s ease; }\n    .dd-comm-book-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: transparent; border: none; cursor: pointer; text-align: left; }\n    .dd-comm-book-toggle:hover { background: #FAFAFC; }\n    .dd-book-title-wrap { display: flex; align-items: center; gap: 12px; }\n    .dd-book-icon { width: 32px; height: 32px; background: rgba(0, 122, 255, 0.08); color: #007AFF; border-radius: 8px; display: flex; align-items: center; justify-content: center; }\n    .dd-book-name { font-family: -apple-system, sans-serif; font-size: 16px; font-weight: 700; color: #1D1D1F; }\n    .dd-book-meta-wrap { display: flex; align-items: center; gap: 12px; }\n    .dd-book-count { background: #F2F2F7; color: #515154; font-family: -apple-system, sans-serif; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }\n    .dd-chevron { color: #C7C7CC; transition: transform 0.2s ease; }\n    .dd-comm-book-group.active { border-color: #C7C7CC; margin: 8px 0; }\n    .dd-comm-book-group.active .dd-chevron { transform: rotate(90deg); color: #007AFF; }\n    .dd-comm-book-group.active .dd-book-count { background: rgba(0,122,255,0.1); color: #007AFF; }\n    .dd-comm-list-collapse { display: none; border-top: 1px solid #E5E5EA; background: #FAFAFC; }\n    .dd-comm-book-group.active .dd-comm-list-collapse { display: block; }\n    .dd-comm-item { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 20px 64px; border-bottom: 1px solid #E5E5EA; transition: background 0.2s ease; }\n    .dd-comm-item:last-child { border-bottom: none; }\n    .dd-comm-item:hover { background: #FFFFFF; }\n    .dd-comm-item-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n    .dd-comm-item-title { font-family: -apple-system, sans-serif; font-size: 15px; font-weight: 700; color: #1D1D1F; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }\n    .dd-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; }\n    .dd-badge-note { background: rgba(255, 149, 0, 0.1); color: #FF9500; }\n    .dd-badge-bmark { background: rgba(0, 122, 255, 0.1); color: #007AFF; }\n    .dd-badge-hl { background: rgba(52, 199, 89, 0.1); color: #34C759; }\n    .dd-comm-item-note-preview { font-family: -apple-system, sans-serif; font-size: 14px; color: #86868B; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n    .dd-comm-actions { display: flex; align-items: center; gap: 16px; }\n    .dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; border: none; }\n    .dd-btn svg { width: 14px; height: 14px; }\n    .dd-btn-ghost { background: transparent; color: #8E8E93; }\n    .dd-btn-ghost:hover { color: #1D1D1F; background: #E5E5EA; }\n    .dd-btn-primary { background: rgba(0, 122, 255, 0.1); color: #007AFF; }\n    .dd-btn-primary:hover { background: rgba(0, 122, 255, 0.15); }\n    .dd-empty-library { text-align: center; padding: 60px 20px; background: #FFFFFF; border-radius: 16px; border: 1px dashed rgba(0,0,0,0.1); }\n    .dd-empty-library svg { color: #D1D1D6; margin-bottom: 16px; }\n    .dd-empty-library h3 { font-family: -apple-system, sans-serif; font-size: 18px; font-weight: 700; color: #1D1D1F; margin: 0 0 8px 0; }\n    .dd-empty-library p { font-family: -apple-system, sans-serif; font-size: 15px; color: #86868B; margin: 0; }\n    @media (max-width: 768px) {\n        .dd-comm-item { padding-left: 24px; }\n        .dd-vault-preview { display: none; }\n        .dd-vault-date { display: none; }\n    }\n\n<\/style>\n\n<div class=\"dd-study-dashboard\">\n\n    \n    <!-- ============================================== -->\n    <!-- SECTION 3: TOPICAL STUDIES                     -->\n    <!-- ============================================== -->\n    <h2 class=\"dd-study-section-title\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5E5CE6\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>\n        Topical Studies\n    <\/h2>\n    \n            <div class=\"dd-empty-library\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"><\/circle><polyline points=\"21 15 16 10 5 21\"><\/polyline><\/svg>\n            <h3>No Topical Studies Yet<\/h3>\n            <p>Studies you publish in the WordPress admin will appear here.<\/p>\n        <\/div>\n    \n    <!-- ============================================== -->\n    <!-- SECTION 4: VERSE-BY-VERSE COMMENTARIES         -->\n    <!-- ============================================== -->\n    <h2 class=\"dd-study-section-title\" style=\"margin-top: 60px;\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#007AFF\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"><\/line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"><\/line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"><\/line><\/svg>\n        Verse-by-Verse Library\n    <\/h2>\n    \n            <div class=\"dd-empty-library\">\n            <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg>\n            <h3>No Commentaries Yet<\/h3>\n            <p>Your verse-by-verse notes will automatically organize here by book.<\/p>\n        <\/div>\n    \n    <script>\n    \/\/ Helper function for navigating from the My Notebook string references\n    function ddAppJumpToRefString(refString) {\n        \/\/ Simple regex to parse strings like \"John 3:16\"\n        const match = refString.match(\/^([\\d\\s]*[a-zA-Z\\.]+)\\s+(\\d+)(?::(\\d+))?\/);\n        if (match && typeof ddAppJumpToRef === 'function') {\n            const book = match[1].trim();\n            const chap = match[2];\n            const verse = match[3] ? match[3] : '';\n            ddAppJumpToRef(book, chap, verse);\n        }\n    }\n    <\/script>\n<\/div>\n    <\/div>\n    \n    <div id=\"dd-pane-sermons\" class=\"dd-apple-pane \">\n        <style>\n    \/* =========================================\n       1. SERIES CARDS (Cinematic Apple TV Style)\n       ========================================= *\/\n    .dd-ios-series-card {\n        position: relative; display: flex; flex-direction: column; justify-content: flex-end;\n        border-radius: 20px; overflow: hidden; text-decoration: none;\n        background: #1D1D1F; box-shadow: 0 6px 20px rgba(0,0,0,0.06);\n        border: 1px solid rgba(255,255,255,0.08); \n        transform: translateZ(0); \n        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;\n        box-sizing: border-box; \n    }\n    \n    .dd-ios-series-card:hover {\n        transform: translateY(-4px) scale(1.01);\n        box-shadow: 0 14px 36px rgba(0,0,0,0.15);\n        z-index: 20;\n    }\n    \n    .dd-ios-series-bg {\n        position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n        background-size: cover; background-position: center;\n        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    \n    .dd-ios-series-card:hover .dd-ios-series-bg {\n        transform: scale(1.05);\n    }\n    \n    .dd-ios-series-grad {\n        position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);\n        z-index: 1; pointer-events: none;\n    }\n    \n    .dd-ios-series-content {\n        position: relative; z-index: 2; padding: 24px;\n        display: flex; flex-direction: column; gap: 6px;\n    }\n    \n    .dd-ios-series-pill {\n        align-self: flex-start; background: rgba(255,255,255,0.2); \n        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\n        padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #FFF;\n        text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;\n    }\n    \n    .dd-ios-series-title {\n        color: #FFF; font-size: 20px; font-weight: 800; margin: 0;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        line-height: 1.2; letter-spacing: -0.01em; \n    }\n    \n    .dd-ios-series-meta {\n        color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n\n    \/* =========================================\n       2. SERMON CARDS (Premium Large Vertical)\n       ========================================= *\/\n    .dd-clean-card {\n        display: flex; flex-direction: column;\n        background: #FFFFFF; border-radius: 24px;\n        border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.03);\n        text-decoration: none; overflow: hidden;\n        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;\n    }\n    .dd-clean-card:hover {\n        transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n    }\n    \n    .dd-clean-card-img-wrap {\n        width: 100%; aspect-ratio: 16\/9; \n        background-color: #F5F5F7; border-bottom: 1px solid rgba(0,0,0,0.04);\n        background-size: cover; background-position: center; position: relative;\n    }\n    \n    .dd-clean-card-info { \n        display: flex; flex-direction: column; justify-content: center;\n        padding: 24px; \n    }\n    .dd-clean-meta { \n        font-size: 12px; font-weight: 700; color: #86868B; text-transform: uppercase; \n        letter-spacing: 0.06em; margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; \n    }\n    .dd-clean-title { \n        font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; font-weight: 800; \n        color: #1D1D1F; margin: 0 0 6px 0; line-height: 1.25; letter-spacing: -0.01em; \n    }\n    .dd-clean-passage { \n        font-size: 15px; color: #515154; margin: 0; font-weight: 500; font-family: -apple-system, sans-serif; line-height: 1.4;\n    }\n\n    \/* =========================================\n       3. GRID & LAYOUT\n       ========================================= *\/\n    .dd-sermons-container {\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .dd-h-scroll { \n        display: flex; \n        gap: 24px; \n        overflow-x: auto; \n        padding-top: 10px;\n        padding-bottom: 40px;\n        width: 100%;\n        box-sizing: border-box; \n        scroll-snap-type: x mandatory; \n        -webkit-overflow-scrolling: touch; \n        scroll-behavior: smooth; \n        scrollbar-width: none; \n    }\n    .dd-h-scroll::-webkit-scrollbar { display: none; }\n    \n    .dd-h-scroll .dd-ios-series-card { \n        flex: 0 0 calc(33.333% - 16px); \n        aspect-ratio: 16\/10; \n        scroll-snap-align: start; \n        box-sizing: border-box;\n    }\n    \n    .dd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; padding: 10px; margin: -10px; }\n    \n    .dd-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 35px 0 15px 0; }\n    .dd-section-title { font-size: 22px; font-weight: 800; color: #1D1D1F; font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; letter-spacing: -0.01em; }\n    .dd-view-all-link { font-size: 14px; font-weight: 600; color: #007AFF; text-decoration: none; font-family: -apple-system, sans-serif; transition: opacity 0.2s; }\n    .dd-view-all-link:hover { opacity: 0.7; }\n\n    \/* Responsive Adjustments *\/\n    @media (max-width: 1024px) {\n        .dd-h-scroll .dd-ios-series-card { flex: 0 0 calc(50% - 12px); } \n    }\n\n    @media (max-width: 600px) {\n        .dd-grid { grid-template-columns: 1fr; }\n        .dd-clean-card { border-radius: 20px; }\n        .dd-clean-card-info { padding: 20px; }\n        .dd-h-scroll .dd-ios-series-card { flex: 0 0 100%; }\n    }\n\n    \/* =========================================\n       4. HERO SERMON (Widescreen Breakout - Taller)\n       ========================================= *\/\n    .dd-sermon-hero {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n        height: 520px !important; \n        min-height: 520px !important;\n        border-radius: 24px;\n        overflow: hidden;\n        text-decoration: none;\n        margin-bottom: 40px;\n        background: #000;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n        transform: translateZ(0);\n        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;\n        \n        \/* The Breakout: Pulls the image wider than the grid *\/\n        margin-left: -40px;\n        margin-right: -40px;\n    }\n    \n    .dd-sermon-hero:hover {\n        transform: translateY(-4px) scale(1.005);\n        box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    }\n    \n    \/* LAYER 0: Fallback Background Image *\/\n    .dd-sermon-hero-bg {\n        position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n        background-size: cover; background-position: center;\n        opacity: 0.9; \n        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n        z-index: 0;\n    }\n\n    \/* LAYER 1: The Video *\/\n    .dd-sermon-hero-video {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover; \n        z-index: 1; \/* STRICTLY above the background image *\/\n        opacity: 0; \n        animation: fadeInHeroVideo 4s ease-in-out forwards; \n        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n\n    @keyframes fadeInHeroVideo {\n        0% { opacity: 0; }\n        100% { opacity: 1; }\n    }\n    \n    .dd-sermon-hero:hover .dd-sermon-hero-bg,\n    .dd-sermon-hero:hover .dd-sermon-hero-video {\n        transform: scale(1.03); \n    }\n    \n    \/* LAYER 2: The Gradient Overlay *\/\n    .dd-sermon-hero-overlay {\n        position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n        z-index: 5; \n        pointer-events: none;\n        background: \n            linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, transparent 85%),\n            linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 40%, transparent 85%);\n    }\n    \n    \/* LAYER 3: The Text Content *\/\n    .dd-sermon-hero-content {\n        position: relative;\n        z-index: 10; \n        padding: 40px 40px 50px 80px; \n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 10px;\n        max-width: 800px;\n    }\n    \n    .dd-sermon-hero-pill {\n        background: rgba(255,255,255,0.2); \n        backdrop-filter: blur(10px); \n        -webkit-backdrop-filter: blur(10px);\n        color: #FFF;\n        padding: 6px 14px;\n        border-radius: 8px;\n        font-size: 12px;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.06em;\n        margin-bottom: 4px;\n    }\n    \n    .dd-sermon-hero-title {\n        color: #FFF;\n        font-size: 42px;\n        font-weight: 800;\n        margin: 0;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        line-height: 1.1;\n        letter-spacing: -0.03em;\n    }\n    \n    .dd-sermon-hero-meta {\n        color: rgba(255,255,255,0.7);\n        font-size: 16px;\n        font-weight: 500;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        display: flex;\n        align-items: center;\n    }\n    \n    .dd-hero-mobile-line {\n        display: none;\n    }\n\n    @media (max-width: 768px) {\n        .dd-sermon-hero { \n            min-height: 520px; \n            margin-left: -15px; \n            margin-right: -15px;\n        }\n        .dd-sermon-hero-content { padding: 24px 24px 30px 35px; } \n        .dd-sermon-hero-title { font-size: 32px; }\n        \n        \/* Forces the Preacher and Verses to stack neatly on mobile *\/\n        .dd-sermon-hero-meta {\n            flex-direction: column !important;\n            align-items: flex-start !important;\n            gap: 6px !important;\n        }\n        \n        \/* Hides the dot on mobile *\/\n        .dd-sermon-hero-meta .dd-hero-separator {\n            display: none !important;\n        }\n        \n        \/* Shows the clean horizontal line on mobile *\/\n        .dd-hero-mobile-line {\n            display: block !important;\n            width: 24px !important;\n            height: 2px !important;\n            background: rgba(255,255,255,0.3) !important;\n            border-radius: 2px;\n            margin: 2px 0 !important;\n        }\n    }\n<\/style><script>\n\/\/ ==============================================\n\/\/ SMART INFINITE AUTO-SCROLLER FOR SERIES CARDS\n\/\/ ==============================================\ndocument.addEventListener('DOMContentLoaded', function() {\n    const scroller = document.getElementById('dd-series-scroller');\n    if (!scroller) return;\n\n    \/\/ 1. Clone the children to create the infinite repeating effect\n    const originalCards = Array.from(scroller.children);\n    if (originalCards.length > 0) {\n        \/\/ Clone the entire set of cards to provide a long runway\n        originalCards.forEach(card => {\n            const clone = card.cloneNode(true);\n            scroller.appendChild(clone);\n        });\n    }\n\n    let autoScrollInterval;\n    let isHovered = false;\n\n    const startAutoScroll = () => {\n        autoScrollInterval = setInterval(() => {\n            if (isHovered) return;\n\n            const firstCard = scroller.querySelector('.dd-ios-series-card');\n            if (!firstCard) return;\n\n            const cardWidth = firstCard.offsetWidth + 24; \/\/ Card width + 24px gap\n            \n            \/\/ Calculate where the \"cloned\" section starts\n            const halfScrollWidth = scroller.scrollWidth \/ 2;\n\n            \/\/ If we have scrolled into the cloned section, instantly reset to the start\n            \/\/ then immediately smooth scroll to the next item so it feels seamless\n            if (scroller.scrollLeft >= halfScrollWidth - cardWidth) {\n                scroller.scrollTo({ left: 0, behavior: 'instant' });\n                \n                \/\/ Tiny timeout to let the browser process the instant jump before moving again\n                setTimeout(() => {\n                    scroller.scrollTo({ left: scroller.scrollLeft + cardWidth, behavior: 'smooth' });\n                }, 50);\n            } else {\n                scroller.scrollTo({ left: scroller.scrollLeft + cardWidth, behavior: 'smooth' });\n            }\n        }, 3500); \/\/ 3.5 seconds between slides\n    };\n\n    \/\/ Pause auto-scroll on hover or touch\n    scroller.addEventListener('mouseenter', () => isHovered = true);\n    scroller.addEventListener('mouseleave', () => isHovered = false);\n\n    scroller.addEventListener('touchstart', () => isHovered = true, {passive: true});\n    scroller.addEventListener('touchend', () => {\n        setTimeout(() => { isHovered = false; }, 2000);\n    }, {passive: true});\n\n    startAutoScroll();\n});\n<\/script>\n    <style>\n        @media (max-width: 767px) {\n            \/* Force YouTube embeds to scale up and cover portrait mobile screens *\/\n            .dd-sermon-hero-video iframe {\n                transform: scale(3.5) !important;\n            }\n            \/* Zoom in standard HTML5 video on mobile *\/\n            .dd-sermon-hero-video video {\n                transform: scale(1.5) !important; \n            }\n            \/* Hide desktop arrows on mobile devices *\/\n            .dd-desktop-arrow {\n                display: none !important;\n            }\n        }\n        \n        \/* 3-Column Grid Override *\/\n        .dd-3-col-grid {\n            display: grid !important;\n            grid-template-columns: repeat(3, 1fr) !important;\n            gap: 24px !important;\n        }\n        @media (max-width: 1024px) {\n            .dd-3-col-grid {\n                grid-template-columns: repeat(2, 1fr) !important;\n            }\n        }\n        @media (max-width: 767px) {\n            .dd-3-col-grid {\n                grid-template-columns: 1fr !important;\n            }\n        }\n\n        \/* Hide Scrollbars for horizontal scrollers *\/\n        .dd-h-scroll,\n        #dd-devo-scroll {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n        }\n        .dd-h-scroll::-webkit-scrollbar,\n        #dd-devo-scroll::-webkit-scrollbar {\n            display: none;\n        }\n\n        \/* Container Mask for the Fade Effect *\/\n        .dd-scroll-container-outer {\n            position: relative;\n        }\n\n        \/* The Subtle Right-Side Fade *\/\n        @media (min-width: 768px) {\n            .dd-scroll-mask {\n                position: absolute;\n                top: 0;\n                right: 0;\n                bottom: 0;\n                width: 100px;\n                background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);\n                pointer-events: none;\n                z-index: 5;\n            }\n        }\n\n        \/* Styling for the Navigation Arrows *\/\n        .dd-desktop-arrow {\n            background: rgba(255, 255, 255, 0.9);\n            backdrop-filter: blur(12px);\n            -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(0,0,0,0.1);\n            width: 44px;\n            height: 44px;\n            border-radius: 50%;\n            color: #1D1D1F;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n            transition: all 0.2s ease;\n            outline: none;\n        }\n\n        .dd-desktop-arrow:hover {\n            background: #FFF;\n            transform: translateY(-50%) scale(1.05) !important;\n        }\n    <\/style>\n\n    <div id=\"dd-sermon-hero-wrap\" style=\"display: block;\">\n\n    \n    <\/div> \n    \n    <div id=\"dd-series-scroller-wrap\" style=\"display: block;\">\n\n    \n    <div class=\"dd-section-header\">\n        <h3 class=\"dd-section-title\">Sermon Series<\/h3>\n            <\/div>\n\n            <div style=\"background: #F5F5F7; border: 1px dashed rgba(0,0,0,0.1); border-radius: 14px; padding: 40px; text-align: center; margin-bottom: 20px;\">\n            <h3 style=\"margin: 0 0 10px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; color: #1D1D1F;\">No Series Yet<\/h3>\n            <p style=\"margin: 0; color: #86868B; font-family: -apple-system, sans-serif;\">Create a series in the WordPress editor to see it appear here!<\/p>\n        <\/div>\n        \n    <\/div> \n\n    \n    \n    <div class=\"dd-section-header\" style=\"align-items: center; flex-wrap: wrap; gap: 15px;\">\n        <h3 class=\"dd-section-title\">Messages Library<\/h3>\n        \n        <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\n            <a href=\"https:\/\/podcasts.apple.com\/ca\/podcast\/kitchener-baptist-church-sermons\/id1895478781\" target=\"_blank\" style=\"display: inline-flex; align-items: center; background: #000000; color: #FFFFFF; padding: 7px 16px 7px 12px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(255,255,255,0.1); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;\" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 16px rgba(0,0,0,0.15)';\" onmouseout=\"this.style.transform='none'; this.style.boxShadow='none';\">\n                <svg viewBox=\"0 0 384 512\" width=\"22\" height=\"22\" fill=\"currentColor\" style=\"margin-right: 10px; margin-bottom: 2px;\">\n                    <path d=\"M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z\"\/>\n                <\/svg>\n                <div style=\"display: flex; flex-direction: column; align-items: flex-start; justify-content: center;\">\n                    <span style=\"font-size: 10px; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; opacity: 0.9; margin-bottom: 3px;\">Listen on<\/span>\n                    <span style=\"font-size: 16px; font-weight: 600; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.02em;\">Apple Podcasts<\/span>\n                <\/div>\n            <\/a>\n\n            <a href=\"https:\/\/open.spotify.com\/show\/033eSQcwPgKDtaqiN4VZcY\" target=\"_blank\" style=\"display: inline-flex; align-items: center; background: #000000; color: #FFFFFF; padding: 7px 16px 7px 12px; border-radius: 8px; text-decoration: none; border: 1px solid rgba(255,255,255,0.1); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;\" onmouseover=\"this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 16px rgba(0,0,0,0.15)';\" onmouseout=\"this.style.transform='none'; this.style.boxShadow='none';\">\n                <svg viewBox=\"0 0 496 512\" width=\"22\" height=\"22\" fill=\"#1ED760\" style=\"margin-right: 10px; margin-bottom: 2px;\">\n                    <path d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-14.3 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.6-74.4-44.1-167.3-50.8-246.7-28.9-5.9 1.6-11.1 2.3-14.9 2.3-11.4 0-18.2-9.8-18.2-19.2 0-11 5.9-15.5 15.8-18.1 90.4-24.6 192.3-16.5 277.7 34 6.8 4.1 11.4 9.8 11.4 18.2 0 10.4-8.8 16.3-22.8 16.3zm27.8-71.1c-6.1 0-10.8-2.6-15.2-5.4-87.2-54.6-200.4-60.2-291.6-32.9-7.5 2.3-14.3 3.3-19.2 3.3-14.3 0-23.4-12.8-23.4-23.4 0-12.5 7.2-18.1 18.9-21.8 103.5-32.1 229.4-26.2 328.7 31.8 8.5 5.1 14.3 11.4 14.3 22.8 0 13.7-11.4 25.6-22.5 25.6z\"\/>\n                <\/svg>\n                <div style=\"display: flex; flex-direction: column; align-items: flex-start; justify-content: center;\">\n                    <span style=\"font-size: 10px; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; opacity: 0.9; margin-bottom: 3px;\">Listen on<\/span>\n                    <span style=\"font-size: 16px; font-weight: 600; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.02em;\">Spotify<\/span>\n                <\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n    \n    \n<style>\n    \/* =========================================\n       MODERN FILTER TOOLBAR\n       ========================================= *\/\n    .dd-sermon-filter-bar {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        background: rgba(255, 255, 255, 0.85);\n        backdrop-filter: blur(30px) saturate(200%);\n        -webkit-backdrop-filter: blur(30px) saturate(200%);\n        padding: 8px;\n        border-radius: 20px;\n        border: 1px solid rgba(0,0,0,0.05);\n        box-shadow: 0 4px 24px rgba(0,0,0,0.04);\n        margin-bottom: 30px;\n        gap: 8px;\n        transition: all 0.3s ease;\n    }\n\n    .dd-filter-group {\n        position: relative;\n        flex: 1 1 200px;\n        display: flex;\n        align-items: center;\n        background: #F5F5F7;\n        border-radius: 14px;\n        transition: all 0.2s ease;\n        border: 1px solid transparent;\n    }\n\n    \/* Seamless focus states *\/\n    .dd-filter-group:focus-within {\n        background: #FFFFFF;\n        border-color: #007AFF;\n        box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);\n    }\n\n    .dd-filter-search-icon {\n        position: absolute;\n        left: 14px;\n        color: #86868B;\n        width: 18px;\n        height: 18px;\n        pointer-events: none;\n        transition: color 0.2s ease;\n    }\n    \n    .dd-filter-group:focus-within .dd-filter-search-icon {\n        color: #007AFF;\n    }\n\n    .dd-filter-chevron {\n        position: absolute;\n        right: 14px;\n        color: #86868B;\n        width: 14px;\n        height: 14px;\n        pointer-events: none;\n    }\n\n    .dd-filter-input, .dd-filter-select {\n        width: 100%;\n        background: transparent;\n        border: none;\n        padding: 14px 16px;\n        font-size: 15px;\n        color: #1D1D1F;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-weight: 500;\n        outline: none;\n        appearance: none;\n        box-sizing: border-box;\n        cursor: pointer;\n    }\n\n    .dd-filter-input {\n        padding-left: 42px;\n        cursor: text;\n    }\n\n    .dd-filter-input::placeholder {\n        color: #86868B;\n        font-weight: 400;\n    }\n\n    \/* THE CLEAR BUTTON (Hidden by default) *\/\n    .dd-filter-clear-btn {\n        display: none; \/* Controlled via JS *\/\n        align-items: center;\n        gap: 6px;\n        background: #FFEBEA;\n        color: #FF3B30;\n        border: none;\n        padding: 0 18px;\n        height: 48px;\n        border-radius: 14px;\n        font-size: 14px;\n        font-weight: 700;\n        font-family: -apple-system, sans-serif;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        flex-shrink: 0;\n    }\n\n    .dd-filter-clear-btn:hover {\n        background: #FFD2CF;\n        transform: scale(0.98);\n    }\n\n    .dd-no-results {\n        grid-column: 1 \/ -1;\n        background: #F5F5F7;\n        border: 1px dashed rgba(0,0,0,0.1);\n        border-radius: 16px;\n        padding: 60px 20px;\n        text-align: center;\n    }\n\n    @media (max-width: 768px) {\n        .dd-sermon-filter-bar { border-radius: 16px; flex-direction: column; background: transparent; box-shadow: none; border: none; padding: 0; gap: 10px; }\n        .dd-filter-group { flex: 1 1 100%; width: 100%; }\n        .dd-filter-clear-btn { width: 100%; justify-content: center; }\n    }\n<\/style>\n\n<div class=\"dd-sermon-filter-bar\">\n    <div class=\"dd-filter-group\">\n        <svg class=\"dd-filter-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n        <input type=\"text\" id=\"dd-filter-keyword\" class=\"dd-filter-input\" placeholder=\"Search messages...\" value=\"\">\n    <\/div>\n\n    <div class=\"dd-filter-group\">\n        <select id=\"dd-filter-topic\" class=\"dd-filter-select\">\n            <option value=\"\">All Topics<\/option>\n                    <\/select>\n        <svg class=\"dd-filter-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n    <\/div>\n\n    <div class=\"dd-filter-group\">\n        <select id=\"dd-filter-book\" class=\"dd-filter-select\">\n            <option value=\"\">All Books<\/option>\n                            <option value=\"Genesis\" >Genesis<\/option>\n                            <option value=\"Exodus\" >Exodus<\/option>\n                            <option value=\"Leviticus\" >Leviticus<\/option>\n                            <option value=\"Numbers\" >Numbers<\/option>\n                            <option value=\"Deuteronomy\" >Deuteronomy<\/option>\n                            <option value=\"Joshua\" >Joshua<\/option>\n                            <option value=\"Judges\" >Judges<\/option>\n                            <option value=\"Ruth\" >Ruth<\/option>\n                            <option value=\"1 Samuel\" >1 Samuel<\/option>\n                            <option value=\"2 Samuel\" >2 Samuel<\/option>\n                            <option value=\"1 Kings\" >1 Kings<\/option>\n                            <option value=\"2 Kings\" >2 Kings<\/option>\n                            <option value=\"1 Chronicles\" >1 Chronicles<\/option>\n                            <option value=\"2 Chronicles\" >2 Chronicles<\/option>\n                            <option value=\"Ezra\" >Ezra<\/option>\n                            <option value=\"Nehemiah\" >Nehemiah<\/option>\n                            <option value=\"Esther\" >Esther<\/option>\n                            <option value=\"Job\" >Job<\/option>\n                            <option value=\"Psalm\" >Psalm<\/option>\n                            <option value=\"Proverbs\" >Proverbs<\/option>\n                            <option value=\"Ecclesiastes\" >Ecclesiastes<\/option>\n                            <option value=\"Song of Solomon\" >Song of Solomon<\/option>\n                            <option value=\"Isaiah\" >Isaiah<\/option>\n                            <option value=\"Jeremiah\" >Jeremiah<\/option>\n                            <option value=\"Lamentations\" >Lamentations<\/option>\n                            <option value=\"Ezekiel\" >Ezekiel<\/option>\n                            <option value=\"Daniel\" >Daniel<\/option>\n                            <option value=\"Hosea\" >Hosea<\/option>\n                            <option value=\"Joel\" >Joel<\/option>\n                            <option value=\"Amos\" >Amos<\/option>\n                            <option value=\"Obadiah\" >Obadiah<\/option>\n                            <option value=\"Jonah\" >Jonah<\/option>\n                            <option value=\"Micah\" >Micah<\/option>\n                            <option value=\"Nahum\" >Nahum<\/option>\n                            <option value=\"Habakkuk\" >Habakkuk<\/option>\n                            <option value=\"Zephaniah\" >Zephaniah<\/option>\n                            <option value=\"Haggai\" >Haggai<\/option>\n                            <option value=\"Zechariah\" >Zechariah<\/option>\n                            <option value=\"Malachi\" >Malachi<\/option>\n                            <option value=\"Matthew\" >Matthew<\/option>\n                            <option value=\"Mark\" >Mark<\/option>\n                            <option value=\"Luke\" >Luke<\/option>\n                            <option value=\"John\" >John<\/option>\n                            <option value=\"Acts\" >Acts<\/option>\n                            <option value=\"Romans\" >Romans<\/option>\n                            <option value=\"1 Corinthians\" >1 Corinthians<\/option>\n                            <option value=\"2 Corinthians\" >2 Corinthians<\/option>\n                            <option value=\"Galatians\" >Galatians<\/option>\n                            <option value=\"Ephesians\" >Ephesians<\/option>\n                            <option value=\"Philippians\" >Philippians<\/option>\n                            <option value=\"Colossians\" >Colossians<\/option>\n                            <option value=\"1 Thessalonians\" >1 Thessalonians<\/option>\n                            <option value=\"2 Thessalonians\" >2 Thessalonians<\/option>\n                            <option value=\"1 Timothy\" >1 Timothy<\/option>\n                            <option value=\"2 Timothy\" >2 Timothy<\/option>\n                            <option value=\"Titus\" >Titus<\/option>\n                            <option value=\"Philemon\" >Philemon<\/option>\n                            <option value=\"Hebrews\" >Hebrews<\/option>\n                            <option value=\"James\" >James<\/option>\n                            <option value=\"1 Peter\" >1 Peter<\/option>\n                            <option value=\"2 Peter\" >2 Peter<\/option>\n                            <option value=\"1 John\" >1 John<\/option>\n                            <option value=\"2 John\" >2 John<\/option>\n                            <option value=\"3 John\" >3 John<\/option>\n                            <option value=\"Jude\" >Jude<\/option>\n                            <option value=\"Revelation\" >Revelation<\/option>\n                    <\/select>\n        <svg class=\"dd-filter-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n    <\/div>\n\n    <button id=\"dd-filter-clear-btn\" class=\"dd-filter-clear-btn\" type=\"button\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n        Clear\n    <\/button>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const searchInput = document.getElementById('dd-filter-keyword');\n    const topicSelect = document.getElementById('dd-filter-topic');\n    const bookSelect  = document.getElementById('dd-filter-book');\n    const clearBtn    = document.getElementById('dd-filter-clear-btn');\n    \n    const grid        = document.getElementById('dd-recent-sermons-grid');\n    const loadBtn     = document.getElementById('dd-load-more-btn');\n    const loadBtnContainer = document.getElementById('dd-load-more-container');\n    const heroSection = document.getElementById('dd-sermon-hero-wrap');\n    const seriesSection = document.getElementById('dd-series-scroller-wrap');\n\n    let debounceTimer;\n    let isFetching = false; \/\/ State lock to prevent double-clicks\n\n    updateClearButtonVisibility(); \/\/ Run on load to show clear button if active\n\n    function updateClearButtonVisibility() {\n        const hasActiveFilter = searchInput.value.trim() !== '' || topicSelect.value !== '' || bookSelect.value !== '';\n        clearBtn.style.display = hasActiveFilter ? 'inline-flex' : 'none';\n    }\n\n    function fetchSermons(page = 1, isLoadMore = false) {\n        if (isFetching) return;\n        isFetching = true;\n\n        const keyword = encodeURIComponent(searchInput.value.trim());\n        const topic   = encodeURIComponent(topicSelect.value);\n        const book    = encodeURIComponent(bookSelect.value);\n\n        const isFiltering = keyword !== '' || topic !== '' || book !== '';\n        \n        if (heroSection) heroSection.style.display = isFiltering ? 'none' : 'block';\n        if (seriesSection) seriesSection.style.display = isFiltering ? 'none' : 'block';\n\n        if (!isLoadMore) {\n            grid.style.opacity = '0.4';\n            grid.style.pointerEvents = 'none';\n        } else if (loadBtn) {\n            loadBtn.innerText = 'Loading...';\n            loadBtn.style.opacity = '0.7';\n            loadBtn.style.pointerEvents = 'none';\n        }\n\n        const ajaxUrl = window.location.origin + window.location.pathname +\n            '?tab=sermons&s_ajax_page=' + page +\n            '&s_keyword=' + keyword +\n            '&s_topic=' + topic +\n            '&s_book=' + book;\n\n        fetch(ajaxUrl)\n        .then(response => response.text())\n        .then(html => {\n            isFetching = false;\n            const parser = new DOMParser();\n            const doc = parser.parseFromString(html, 'text\/html');\n            const newCards = doc.querySelectorAll('a.dd-clean-card');\n            \n            if (!isLoadMore) {\n                grid.innerHTML = '';\n                grid.style.opacity = '1';\n                grid.style.pointerEvents = 'auto';\n            }\n\n            if (newCards.length > 0) {\n                newCards.forEach(card => grid.appendChild(card));\n                \n                if (loadBtnContainer && loadBtn) {\n                    loadBtn.setAttribute('data-page', page);\n                    loadBtn.innerText = 'Load More Sermons';\n                    loadBtn.style.opacity = '1';\n                    loadBtn.style.pointerEvents = 'auto';\n                    loadBtnContainer.style.display = newCards.length < 12 ? 'none' : 'flex';\n                }\n            } else {\n                if (!isLoadMore) {\n                    grid.innerHTML = `\n                        <div class=\"dd-no-results\">\n                            <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#D1D1D6; margin-bottom:15px;\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><\/svg>\n                            <h3 style=\"margin: 0 0 8px; font-family: -apple-system, sans-serif; color: #1D1D1F; font-size: 20px;\">No messages found<\/h3>\n                            <p style=\"margin: 0; color: #86868B; font-family: -apple-system, sans-serif; font-size: 15px;\">Try adjusting your search or clearing the filters.<\/p>\n                        <\/div>`;\n                }\n                \n                \/\/ Safely reset button state if it returns 0 cards\n                if (loadBtn) {\n                    loadBtn.innerText = 'Load More Sermons';\n                    loadBtn.style.opacity = '1';\n                    loadBtn.style.pointerEvents = 'auto';\n                }\n                if (loadBtnContainer) loadBtnContainer.style.display = 'none';\n            }\n        })\n        .catch(err => {\n            console.error('Filter Error:', err);\n            isFetching = false;\n            \/\/ Gracefully reset the button on error\n            if (loadBtn) {\n                loadBtn.innerText = 'Error - Try Again';\n                loadBtn.style.opacity = '1';\n                loadBtn.style.pointerEvents = 'auto';\n            }\n        });\n    }\n\n    searchInput.addEventListener('input', () => {\n        updateClearButtonVisibility();\n        clearTimeout(debounceTimer);\n        debounceTimer = setTimeout(() => fetchSermons(1, false), 400);\n    });\n\n    topicSelect.addEventListener('change', () => {\n        updateClearButtonVisibility();\n        fetchSermons(1, false);\n    });\n\n    bookSelect.addEventListener('change', () => {\n        updateClearButtonVisibility();\n        fetchSermons(1, false);\n    });\n\n    clearBtn.addEventListener('click', () => {\n        searchInput.value = '';\n        topicSelect.value = '';\n        bookSelect.value = '';\n        updateClearButtonVisibility();\n        fetchSermons(1, false);\n    });\n\n    if (loadBtn) {\n        loadBtn.addEventListener('click', function(e) {\n            e.preventDefault(); \/\/ Prevents the button from attempting to submit the page!\n            if (isFetching) return;\n            const nextPage = parseInt(this.getAttribute('data-page')) + 1;\n            fetchSermons(nextPage, true);\n        });\n    }\n});\n<\/script>\n\n    <div class=\"dd-grid dd-3-col-grid\" id=\"dd-recent-sermons-grid\">\n\n    <\/div> \n        <style>\n        .dd-bulletproof-btn {\n            min-width: 240px;\n            background: #007AFF;\n            color: #FFF;\n            border: none;\n            outline: none !important;\n            padding: 14px 32px;\n            font-size: 16px;\n            font-weight: 700;\n            border-radius: 99px;\n            cursor: pointer;\n            font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n            box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25);\n            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;\n            user-select: none !important;\n            -webkit-user-select: none !important;\n            -moz-user-select: none !important;\n            -webkit-tap-highlight-color: transparent !important;\n            -webkit-tap-highlight-color: rgba(0,0,0,0) !important;\n            -webkit-touch-callout: none !important;\n        }\n\n        @media (hover: hover) {\n            .dd-bulletproof-btn:hover {\n                transform: translateY(-2px);\n                box-shadow: 0 12px 28px rgba(0, 122, 255, 0.35);\n            }\n        }\n\n        .dd-bulletproof-btn:focus,\n        .dd-bulletproof-btn:active {\n            outline: none !important;\n            background: #006ce0;\n        }\n        \n        .dd-bulletproof-btn::-moz-focus-inner {\n            border: 0;\n        }\n    <\/style>\n\n    <div id=\"dd-load-more-container\" style=\"display: none; justify-content: center; padding: 50px 0 100px 0;\">\n        <button type=\"button\" id=\"dd-load-more-btn\" data-page=\"1\" class=\"dd-bulletproof-btn\">\n            Load More Sermons\n        <\/button>\n    <\/div>    <\/div>\n    \n    \n<div style=\"text-align: center; padding: 50px 20px 10px 20px; color: #8E8E93; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; font-size: 14px; line-height: 1.6; clear: both;\">\n    <a href=\"\/changelog\/\" style=\"color: #007AFF; text-decoration: none; font-weight: 600; margin-bottom: 8px; display: inline-block; transition: opacity 0.2s;\" onmouseover=\"this.style.opacity='0.7'\" onmouseout=\"this.style.opacity='1'\">View Release Notes<\/a><br>\n    &copy; 2026 Kitchener Baptist Church<br>\n    Explore the Word App\n<\/div>\n\n    <div id=\"dd-side-menu-overlay\" class=\"dd-side-menu-overlay\" onclick=\"ddToggleSideMenu()\"><\/div>\n    <div id=\"dd-side-menu-drawer\" class=\"dd-side-menu-drawer\">\n        <div class=\"dd-side-menu-header\">\n            <h3 class=\"dd-side-menu-title\">Menu<\/h3>\n            <button class=\"dd-side-menu-close\" onclick=\"ddToggleSideMenu()\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\n                <\/svg>\n            <\/button>\n        <\/div>\n                <div style=\"padding: 20px 24px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; gap: 14px; background: #FAFAFC;\">\n            <div style=\"width: 46px; height: 46px; border-radius: 50%; background: #EAF2FF; border: 2px solid rgba(0,122,255,0.15); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;\">\n                                    <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#8E8E93\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                            <\/div>\n            <div style=\"flex:1;min-width:0;\">\n                                    <div style=\"font-size:15px;font-weight:700;color:#1D1D1F;font-family:-apple-system,sans-serif;\">Guest<\/div>\n                    <button onclick=\"ddToggleSideMenu();ddToggleAuthView('login');\" style=\"font-size:12px;color:#007AFF;font-family:-apple-system,sans-serif;font-weight:600;background:none;border:none;padding:0;cursor:pointer;margin-top:2px;\">Sign in to your account \u2192<\/button>\n                            <\/div>\n                    <\/div>\n        <div class=\"dd-side-menu-links\">\n                            <div style=\"padding: 20px 16px; color: #86868B; font-family: -apple-system, sans-serif; font-size: 14px; text-align: center;\">\n                    You can add links to this menu in the WordPress Admin under Settings > App Menu.\n                <\/div>\n                    <\/div>\n    <\/div>\n\n    <div id=\"dd-account-overlay\" class=\"dd-side-menu-overlay\" onclick=\"ddToggleAccountMenu()\"><\/div>\n    <div id=\"dd-account-drawer\" class=\"dd-account-drawer\">\n        <div class=\"dd-side-menu-header\">\n            <h3 class=\"dd-side-menu-title\">My Account<\/h3>\n            <button class=\"dd-side-menu-close\" onclick=\"ddToggleAccountMenu()\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\n                <\/svg>\n            <\/button>\n        <\/div>\n        <div style=\"padding: 24px;\">\n            <style>\n    \/* Drawer Base Reset - Strict Box Sizing prevents horizontal scroll bleed *\/\n    .dd-account-wrap { font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif; padding-bottom: 40px; box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: hidden; }\n    .dd-account-wrap *, .dd-account-wrap *::before, .dd-account-wrap *::after { box-sizing: border-box !important; }\n    \n    \/* Login & Register Cards *\/\n    .dd-auth-card { background: #ffffff; border-radius: 20px; padding: 24px 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); }\n    .dd-auth-title { margin: 0 0 6px 0; font-size: 22px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.02em; }\n    .dd-auth-sub { margin: 0 0 20px 0; font-size: 14px; color: #86868B; line-height: 1.4; }\n    .dd-auth-input { width: 100%; padding: 12px; border: 1px solid #D1D1D6; border-radius: 10px; font-size: 15px; margin-top: 6px; transition: border-color 0.2s; background: #fafafa; }\n    .dd-auth-input:focus { border-color: #007AFF; outline: none; background: #ffffff; }\n    .dd-auth-label { display: block; font-size: 13px; font-weight: 600; color: #1D1D1F; }\n    .dd-auth-btn { width: 100%; max-width: 100%; background: #007AFF; color: #ffffff; border: none; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.2s, background 0.2s; margin-top: 10px; }\n    .dd-auth-btn:hover { transform: scale(0.98); background: #0066CC; }\n    .dd-auth-toggle { text-align: center; margin: 20px 0 0 0; font-size: 14px; color: #86868B; }\n    .dd-auth-toggle span { color: #007AFF; cursor: pointer; font-weight: 600; }\n\n    \/* Logged In Dashboard *\/\n    .dd-dash-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; background: #ffffff; padding: 20px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }\n    .dd-dash-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, #007AFF, #5AC8FA); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }\n    .dd-dash-greeting { margin: 0; font-size: 18px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.01em; }\n    .dd-dash-email { margin: 2px 0 0 0; font-size: 13px; color: #86868B; word-break: break-all; }\n    \n    .dd-dash-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }\n    .dd-dash-card { background: #ffffff; border: 1px solid #E5E5EA; border-radius: 16px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; display: flex; align-items: flex-start; gap: 16px; width: 100%; max-width: 100%; }\n    .dd-dash-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); border-color: #D1D1D6; }\n    .dd-dash-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }\n    \n    .dd-icon-blue { background: #EAF2FF; color: #007AFF; }\n    .dd-icon-orange { background: #FFF0E5; color: #FF9500; }\n    .dd-icon-green { background: #EBF7EE; color: #34C759; }\n    .dd-icon-purple { background: #F3EBFB; color: #AF52DE; }\n\n    \/* Reading plan segmented control *\/\n    .dd-plan-seg { display: flex; gap: 4px; background: #F2F2F7; border-radius: 12px; padding: 4px; }\n    .dd-plan-seg-btn {\n        flex: 1; border: none; background: transparent; cursor: pointer;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 13px; font-weight: 700; color: #515154; padding: 9px 6px;\n        border-radius: 9px; transition: all 0.18s ease; white-space: nowrap;\n    }\n    .dd-plan-seg-btn.active { background: #FFFFFF; color: #1D1D1F; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }\n    .dd-plan-seg-btn:disabled { opacity: 0.5; cursor: default; }\n\n    \/* Reading plan progress *\/\n    .dd-plan-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }\n    .dd-plan-progress-label { font-size: 13px; font-weight: 600; color: #86868B; }\n    .dd-plan-progress-pct { font-size: 15px; font-weight: 800; color: #AF52DE; }\n    .dd-plan-progress-track { width: 100%; height: 8px; background: #ECECF0; border-radius: 99px; overflow: hidden; }\n    .dd-plan-progress-fill { height: 100%; background: linear-gradient(90deg, #AF52DE, #5E5CE6); border-radius: 99px; transition: width 0.4s ease; }\n    .dd-plan-progress-sub { font-size: 12px; color: #A1A1A6; margin-top: 6px; }\n\n    .dd-dash-card-title { font-size: 16px; font-weight: 700; color: #1D1D1F; margin: 0 0 4px 0; }\n    .dd-dash-card-desc { font-size: 13px; color: #86868B; margin: 0; line-height: 1.4; }\n\n    \/* Fixed Logout Button - Now styled identically to the cards *\/\n    .dd-logout-btn { display: flex; width: 100%; align-items: center; justify-content: center; background: #ffffff; border: 1px solid #E5E5EA; color: #FF3B30; text-decoration: none; font-weight: 600; padding: 16px 20px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }\n    .dd-logout-btn:hover { background: #FFEDF0; border-color: #FFEDF0; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }\n<\/style>\n\n<div class=\"dd-account-wrap\">\n    \n            \n        <!-- Hidden Security Context Token -->\n        <input type=\"hidden\" id=\"dd-auth-nonce\" value=\"fc32d5052f\">\n\n        <!-- LOGIN VIEW -->\n        <div id=\"dd-auth-login-view\" class=\"dd-auth-card\">\n            <h3 class=\"dd-auth-title\">Sign In<\/h3>\n            <p class=\"dd-auth-sub\">Access your personal insights across all your devices.<\/p>\n            \n            <div id=\"dd-login-error\" style=\"display: none; background: #FFEDF0; color: #FF3B30; padding: 12px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; font-weight: 500;\"><\/div>\n\n            <div style=\"margin-bottom: 16px;\">\n                <label class=\"dd-auth-label\">Username or Email<\/label>\n                <input type=\"text\" id=\"dd-log-user\" class=\"dd-auth-input\" placeholder=\"Enter your username\">\n            <\/div>\n            <div style=\"margin-bottom: 24px;\">\n                <label class=\"dd-auth-label\">Password<\/label>\n                <input type=\"password\" id=\"dd-log-pass\" class=\"dd-auth-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n            <\/div>\n            \n            <button onclick=\"ddSubmitAppLogin()\" class=\"dd-auth-btn\">Sign In<\/button>\n            \n            <p class=\"dd-auth-toggle\">Don't have an account? <span onclick=\"ddToggleAuthView('register')\">Create yours<\/span><\/p>\n        <\/div>\n\n        <!-- REGISTRATION VIEW -->\n        <div id=\"dd-auth-register-view\" class=\"dd-auth-card\" style=\"display: none;\">\n            <h3 class=\"dd-auth-title\">Create Account<\/h3>\n            <p class=\"dd-auth-sub\">Synchronize your bookmarks and study history.<\/p>\n            \n            <div id=\"dd-reg-error\" style=\"display: none; background: #FFEDF0; color: #FF3B30; padding: 12px; border-radius: 10px; font-size: 13px; margin-bottom: 20px; font-weight: 500;\"><\/div>\n\n            <div style=\"margin-bottom: 16px;\">\n                <label class=\"dd-auth-label\">Username<\/label>\n                <input type=\"text\" id=\"dd-reg-user\" class=\"dd-auth-input\" placeholder=\"Choose a username\">\n            <\/div>\n            <div style=\"margin-bottom: 16px;\">\n                <label class=\"dd-auth-label\">Email Address<\/label>\n                <input type=\"email\" id=\"dd-reg-email\" class=\"dd-auth-input\" placeholder=\"you@example.com\">\n            <\/div>\n            <div style=\"margin-bottom: 24px;\">\n                <label class=\"dd-auth-label\">Password<\/label>\n                <input type=\"password\" id=\"dd-reg-pass\" class=\"dd-auth-input\" placeholder=\"Create a strong password\">\n            <\/div>\n            \n            <button onclick=\"ddSubmitAppRegistration()\" class=\"dd-auth-btn\">Create Account<\/button>\n            \n            <p class=\"dd-auth-toggle\">Already have an account? <span onclick=\"ddToggleAuthView('login')\">Sign in<\/span><\/p>\n        <\/div>\n\n    <\/div>\n\n<script>\n\/\/ Save the selected reading plan to the user's account (logged-in only),\n\/\/ then reload so the Today tab and progress reflect the new plan.\nif (typeof window.ddAccountSetPlan !== 'function') {\nwindow.ddAccountSetPlan = function(plan, btn) {\n    var card = btn.closest('.dd-plan-settings-card');\n    if (card && card.getAttribute('data-saving') === '1') return;\n    if (btn.classList.contains('active')) return; \/\/ already on this plan\n\n    \/\/ Visual feedback\n    if (card) {\n        card.setAttribute('data-saving', '1');\n        card.querySelectorAll('.dd-plan-seg-btn').forEach(function(b) {\n            b.classList.toggle('active', b === btn);\n            b.disabled = true;\n        });\n    }\n\n    var nonceEl = document.getElementById('dd-auth-nonce') || document.getElementById('dd-modal-auth-nonce');\n    var ajaxUrl = (typeof ddAppConfig !== 'undefined' && ddAppConfig.ajaxUrl) ? ddAppConfig.ajaxUrl : '\/wp-admin\/admin-ajax.php';\n\n    if (!nonceEl) { location.reload(); return; }\n\n    \/\/ Keep the Today tab's cookie in sync as well\n    var d = new Date();\n    d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));\n    document.cookie = \"dd_bible_plan=\" + plan + \";expires=\" + d.toUTCString() + \";path=\/;SameSite=Lax\";\n\n    var fd = new FormData();\n    fd.append('action', 'dd_save_user_plan');\n    fd.append('plan', plan);\n    fd.append('security', nonceEl.value);\n\n    fetch(ajaxUrl, { method: 'POST', body: fd })\n        .then(function(r) { return r.json(); })\n        .then(function() { location.reload(); })\n        .catch(function() { location.reload(); });\n};\n}\n<\/script>\n        <\/div>\n    <\/div>\n\n    <script>\n        function ddToggleSideMenu() {\n            var overlay = document.getElementById('dd-side-menu-overlay');\n            var drawer = document.getElementById('dd-side-menu-drawer');\n            \/\/ Close account menu if open\n            document.getElementById('dd-account-overlay').classList.remove('active');\n            document.getElementById('dd-account-drawer').classList.remove('active');\n            \n            overlay.classList.toggle('active');\n            drawer.classList.toggle('active');\n        }\n\n        function ddToggleAccountMenu() {\n            var overlay = document.getElementById('dd-account-overlay');\n            var drawer = document.getElementById('dd-account-drawer');\n            \/\/ Close hamburger menu if open\n            document.getElementById('dd-side-menu-overlay').classList.remove('active');\n            document.getElementById('dd-side-menu-drawer').classList.remove('active');\n            \n            overlay.classList.toggle('active');\n            drawer.classList.toggle('active');\n        }\n    <\/script>\n\n<\/div>\n\n\n<style>\n\/* =========================================================\n   READING HISTORY FAB & PANEL (MODERNIZED)\n   ========================================================= *\/\n.dd-history-fab {\n    position: fixed !important;\n    bottom: 30px !important;\n    left: 30px !important;\n    width: 56px !important;\n    height: 56px !important;\n    border-radius: 50% !important;\n    \n    \/* Blue Glassmorphism Effect *\/\n    background: rgba(0, 122, 255, 0.75) !important; \n    backdrop-filter: blur(20px) saturate(180%) !important;\n    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;\n    color: #FFFFFF !important; \n    border: 1px solid rgba(255, 255, 255, 0.3) !important; \n    box-shadow: 0 12px 30px rgba(0, 122, 255, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;\n    \n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    cursor: pointer !important;\n    z-index: 2147483647 !important; \/* MAX Z-INDEX: Guarantees it shows above the Notes tab *\/\n    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    padding: 0 !important;\n}\n\n.dd-history-fab:hover {\n    transform: translateY(-4px) !important;\n    background: rgba(0, 122, 255, 0.9) !important; \n    box-shadow: 0 16px 40px rgba(0, 122, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;\n    color: #FFFFFF !important;\n}\n\n\/* Overlay is completely hidden\/disabled on desktop *\/\n.dd-history-overlay {\n    display: none !important;\n}\n\n.dd-history-panel {\n    position: fixed;\n    bottom: 100px;\n    left: 30px;\n    width: 340px;\n    background: rgba(255, 255, 255, 0.95);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 24px;\n    box-shadow: 0 24px 48px rgba(0,0,0,0.12);\n    z-index: 2147483647; \/* MAX Z-INDEX *\/\n    display: flex;\n    flex-direction: column;\n    transform: translateY(20px) scale(0.95);\n    opacity: 0;\n    visibility: hidden;\n    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    transform-origin: bottom left;\n}\n\n.dd-history-panel.active {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n    visibility: visible;\n}\n\n.dd-history-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 24px 24px 16px 24px;\n}\n\n.dd-history-panel-header h3 {\n    margin: 0 !important;\n    font-family: -apple-system, sans-serif !important;\n    font-size: 18px !important;\n    font-weight: 700 !important;\n    color: #1D1D1F !important;\n    letter-spacing: -0.02em;\n}\n\n.dd-history-close-btn {\n    width: 34px !important;\n    height: 34px !important;\n    min-width: 0 !important;\n    border-radius: 50% !important;\n    background: #F2F2F7 !important;\n    border: none !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    cursor: pointer !important;\n    color: #86868B !important;\n    transition: all 0.2s ease !important;\n    padding: 0 !important;\n    margin: 0 !important;\n}\n.dd-history-close-btn:hover {\n    background: #E5E5EA !important;\n    color: #1D1D1F !important;\n    transform: scale(1.05) !important;\n}\n\n\/* --- NEW GRID LAYOUT --- *\/\n.dd-history-list {\n    padding: 0 20px 24px 20px;\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    overflow-y: auto;\n    flex: 1;\n}\n\n.dd-history-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 12px;\n    border-radius: 18px;\n    background: #F9F9FB;\n    border: 1px solid #E5E5EA;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-decoration: none !important;\n}\n\n.dd-history-item:hover {\n    background: #F2F2F7;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n}\n\n.dd-history-item-icon {\n    width: 44px;\n    height: 44px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 12px;\n}\n\n.dd-history-item-text {\n    font-family: -apple-system, sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    color: #2C2C2E;\n    text-align: center;\n    line-height: 1.3;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    width: 100%;\n}\n\n\/* Icon Color Themes *\/\n.dd-theme-sermon { background: rgba(255, 45, 85, 0.1); color: #FF2D55; }\n.dd-theme-study { background: rgba(0, 122, 255, 0.1); color: #007AFF; }\n.dd-theme-bible { background: rgba(134, 134, 139, 0.1); color: #86868B; }\n\n\/* Hide class for scroll detection *\/\n.dd-fab-hide-mobile {\n    transform: translateY(150px) !important;\n    opacity: 0 !important;\n    pointer-events: none !important;\n}\n\n\/* =========================================================\n   MOBILE BOTTOM SHEET & OVERLAY\n   ========================================================= *\/\n@media (max-width: 850px) {\n    .dd-history-overlay {\n        display: block !important;\n        position: fixed !important;\n        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;\n        background: rgba(0, 0, 0, 0.25) !important;\n        z-index: 2147483646 !important;\n        opacity: 0;\n        visibility: hidden;\n        transition: all 0.3s ease !important;\n    }\n    .dd-history-overlay.active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    \/* Force History FAB above the bottom menu *\/\n    .dd-history-fab {\n        top: auto !important; \n        bottom: calc(100px + env(safe-area-inset-bottom)) !important;    \n        left: 16px !important;\n        width: 48px !important;  \n        height: 48px !important;\n    }\n\n    \/* Force Scroll-To-Top FAB to match on mobile *\/\n    #dd-scroll-to-top {\n        bottom: calc(100px + env(safe-area-inset-bottom)) !important;\n        right: 16px !important;\n        width: 48px !important;\n        height: 48px !important;\n    }\n\n    .dd-history-panel {\n        bottom: 0 !important;\n        left: 0 !important;\n        top: auto !important;\n        width: 100% !important;\n        height: 60vh !important;\n        max-height: 60vh !important;\n        border-radius: 24px 24px 0 0 !important;\n        transform: translateY(100%) !important;\n        transform-origin: bottom center !important;\n        border: none !important;\n        border-top: 1px solid rgba(0,0,0,0.08) !important;\n        box-shadow: 0 -15px 40px rgba(0,0,0,0.12) !important;\n    }\n    .dd-history-panel.active { transform: translateY(0) !important; }\n    \n    .dd-history-list { \n        padding-bottom: 80px !important; \n        overflow-y: auto !important;\n    }\n}\n<\/style>\n\n<div id=\"dd-history-overlay\" class=\"dd-history-overlay\" onclick=\"ddModernToggleHistory()\"><\/div>\n\n<button id=\"dd-history-fab\" class=\"dd-history-fab\" onclick=\"ddModernToggleHistory()\" title=\"Reading History\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M3 3v5h5\"><\/path>\n        <path d=\"M3.05 13A9 9 0 1 0 6 5.3L3 8\"><\/path>\n        <polyline points=\"12 7 12 12 15 15\"><\/polyline>\n    <\/svg>\n<\/button>\n\n<div id=\"dd-history-panel\" class=\"dd-history-panel\">\n    <div class=\"dd-history-panel-header\">\n        <h3>Recent Places<\/h3>\n        <button class=\"dd-history-close-btn\" onclick=\"ddModernToggleHistory()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n        <\/button>\n    <\/div>\n    <div id=\"dd-history-list\" class=\"dd-history-list\"><\/div>\n<\/div>\n\n<script>\nfunction ddModernAddHistory(title, url, type) {\n    var history = JSON.parse(localStorage.getItem('ddGlobalHistory') || '[]');\n    history = history.filter(function(item) { return item.title !== title; });\n    history.unshift({ title: title, url: url, type: type });\n    \n    \/\/ STRICT CAP AT 8 ITEMS\n    if (history.length > 8) history.pop(); \n    \n    localStorage.setItem('ddGlobalHistory', JSON.stringify(history));\n    \n    var panel = document.getElementById('dd-history-panel');\n    if (panel && panel.classList.contains('active')) {\n        ddModernRenderHistory();\n    }\n}\n\nfunction ddModernToggleHistory() {\n    var panel = document.getElementById('dd-history-panel');\n    var overlay = document.getElementById('dd-history-overlay');\n    \n    if (panel.classList.contains('active')) {\n        panel.classList.remove('active');\n        if (overlay) overlay.classList.remove('active');\n    } else {\n        ddModernRenderHistory();\n        panel.classList.add('active');\n        if (overlay) overlay.classList.add('active');\n    }\n}\n\nfunction ddModernRenderHistory() {\n    var list = document.getElementById('dd-history-list');\n    list.innerHTML = '';\n    \n    var history = JSON.parse(localStorage.getItem('ddGlobalHistory') || '[]');\n\n    \/\/ Only show passages of scripture, notes, and sermons.\n    \/\/ Exclude topical studies and anything else.\n    history = history.filter(function(item) {\n        var t = (item.type || '').toLowerCase();\n        \/\/ Drop malformed bible refs whose verse is non-numeric (e.g. \"John 3:tooltip\")\n        if (t === 'bible' && item.title && item.title.indexOf(':') !== -1) {\n            var versePart = item.title.split(':').pop();\n            if (!\/^\\d+$\/.test(versePart.trim())) return false;\n        }\n        if (t === 'bible' || t === 'sermon' || t === 'sermons' || t === 'commentary' || t === 'note' || t === 'notes') {\n            return true;\n        }\n        return false;\n    });\n    \n    if (history.length === 0) {\n        list.innerHTML = '<div style=\"grid-column: 1 \/ -1; padding:20px; text-align:center; color:#86868B; font-family:-apple-system,sans-serif; font-size:14px;\">Your recent reading locations will appear here.<\/div>';\n        return;\n    }\n    \n    history.forEach(function(item) {\n        var a = document.createElement('a');\n        a.className = 'dd-history-item';\n        a.href = item.url;\n        \n        var iconBgClass = '';\n        var svgStr = '';\n        \n        \/\/ Match icon design and container shape based on type\n        if (item.type === 'sermon' || (item.url && item.url.includes('sermon'))) {\n            iconBgClass = 'dd-theme-sermon';\n            svgStr = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21\"><\/polygon><\/svg>';\n        } else if (item.type === 'commentary' || (item.url && (item.url.includes('study') || item.url.includes('commentary')))) {\n            iconBgClass = 'dd-theme-study';\n            svgStr = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"><\/path><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"><\/path><\/svg>';\n        } else {\n            iconBgClass = 'dd-theme-bible';\n            svgStr = '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line><\/svg>';\n        }\n            \n        \/\/ Construct the item: Icon in the uniform container on top, text below\n        a.innerHTML = '<div class=\"dd-history-item-icon ' + iconBgClass + '\">' + svgStr + '<\/div>' + \n                      '<span class=\"dd-history-item-text\">' + item.title + '<\/span>';\n        \n        a.onclick = function(e) {\n            if (item.type === 'bible' && typeof ddAppJumpToRef === 'function' && window.location.pathname.includes('\/bible')) {\n                e.preventDefault();\n                ddModernToggleHistory();\n                \n                var parts = item.title.split(' ');\n                var chapVerse = parts.pop();\n                var book = parts.join(' ');\n                var chap = chapVerse;\n                var verse = '';\n                \n                if (chapVerse.includes(':')) {\n                    var cv = chapVerse.split(':');\n                    chap = cv[0];\n                    verse = cv[1];\n                }\n                \n                ddAppJumpToRef(book, chap, verse);\n            }\n        };\n        \n        list.appendChild(a);\n    });\n}\n<\/script>\n<div id=\"dd-xref-modal\">\n    <div class=\"dd-xref-popup-title\">\n        Cross References\n        <button class=\"dd-apple-round-close\" onclick=\"ddCloseXrefModal()\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>\n    <\/div>\n    <div id=\"dd-xref-modal-content\" class=\"dd-xref-popup-list\"><\/div>\n<\/div>\n\n<div id=\"dd-note-modal\" class=\"dd-note-modal-overlay\">\n    <div class=\"dd-note-modal-content\">\n        <div class=\"dd-note-modal-header\">\n            <h3 id=\"dd-note-modal-title\">Study Note<\/h3>\n            <button class=\"dd-apple-round-close\" onclick=\"ddCloseNoteModal()\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>\n        <\/div>\n        <div id=\"dd-note-modal-body\" class=\"dd-note-modal-body\"><\/div>\n    <\/div>\n<\/div>\n\n<div id=\"dd-options-modal\" class=\"dd-note-modal-overlay\">\n    <div class=\"dd-note-modal-content\" style=\"max-width: 400px;\">\n        <div class=\"dd-note-modal-header\">\n            <h3 style=\"font-size: 20px;\">Reading Options<\/h3>\n            <button class=\"dd-apple-round-close\" onclick=\"ddCloseOptionsModal()\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>\n        <\/div>\n        <div class=\"dd-note-modal-body\" style=\"padding: 24px 40px; display: flex; flex-direction: column; gap: 20px;\">\n            \n            <label style=\"display:flex; flex-direction:column; gap:12px; font-size:16px; font-weight:600; color:#1D1D1F; cursor:default;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n                    <span>Text Size<\/span>\n                    <span id=\"dd-text-size-display\" style=\"color:#007AFF; font-size:15px; background:rgba(0,122,255,0.1); padding:2px 8px; border-radius:12px;\">100%<\/span>\n                <\/div>\n                <div style=\"display:flex; align-items:center; gap:10px;\">\n                    <span style=\"font-size:14px; color:#86868B; font-weight:bold;\">A<\/span>\n                    <input type=\"range\" id=\"dd-text-size-slider\" min=\"100\" max=\"200\" step=\"10\" value=\"100\" oninput=\"ddAppChangeTextSize(this.value)\" style=\"flex:1; accent-color:#007AFF; cursor:pointer;\">\n                    <span style=\"font-size:20px; color:#1D1D1F; font-weight:bold;\">A<\/span>\n                <\/div>\n            <\/label>\n            <div style=\"height: 1px; background: #F2F2F7; width: 100%;\"><\/div>\n            \n            <label style=\"display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#1D1D1F; cursor:pointer;\">\n                <span>Show Strong's Numbers<\/span>\n                <div class=\"dd-apple-switch\">\n                    <input type=\"checkbox\" id=\"dd-toggle-strongs\" onchange=\"ddAppToggleStrongs(this.checked)\" checked>\n                    <span class=\"dd-apple-slider\"><\/span>\n                <\/div>\n            <\/label>\n            <div style=\"height: 1px; background: #F2F2F7; width: 100%;\"><\/div>\n            <label style=\"display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#1D1D1F; cursor:pointer;\">\n                <span>Show Cross References<\/span>\n                <div class=\"dd-apple-switch\">\n                    <input type=\"checkbox\" id=\"dd-toggle-xrefs\" onchange=\"ddAppToggleXrefs(this.checked)\" checked>\n                    <span class=\"dd-apple-slider\"><\/span>\n                <\/div>\n            <\/label>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div id=\"dd-strongs-modal\" class=\"dd-note-modal-overlay\">\n    <div class=\"dd-note-modal-content\" style=\"max-width: 500px;\">\n        <div class=\"dd-note-modal-header\">\n            <h3 style=\"font-size: 20px; color: #86868B;\">Strong's Dictionary<\/h3>\n            <button class=\"dd-apple-round-close\" onclick=\"ddCloseStrongsModal()\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg><\/button>\n        <\/div>\n        <div id=\"dd-strongs-modal-body\" class=\"dd-note-modal-body\" style=\"padding: 24px 40px;\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ THE FIX 1: Merge config instead of overwriting, ensuring the login state is preserved\n    window.ddAppConfig = window.ddAppConfig || {};\n    window.ddAppConfig.ajaxUrl = \"https:\/\/exploretheword.app\/wp-admin\/admin-ajax.php\";\n    window.ddAppConfig.homeUrl = \"https:\/\/exploretheword.app\/\";\n    window.ddAppConfig.isLoggedIn = false;\n    window.ddAppConfig.state = {};\n    window.ddAppConfig.stateNonce = \"e72e3fbbd8\";\n    \n    window.addEventListener('DOMContentLoaded', function() {\n        setTimeout(function() {\n            \/\/ Derive the visible tab from the active content pane (not the URL) so\n            \/\/ the nav highlight can never disagree with the content on screen.\n            var activePane = document.querySelector('.dd-apple-pane.active');\n            var currentTab = activePane ? (activePane.id.replace('dd-pane-', '') || 'home') : 'home';\n\n            var desktopTabs = document.querySelectorAll('.dd-desktop-menu .dd-apple-tab');\n            var mobileTabs = document.querySelectorAll('.dd-mobile-bottom-bar .dd-apple-tab');\n            \n            [...desktopTabs, ...mobileTabs].forEach(function(tab) {\n                tab.classList.remove('active');\n                var href = tab.getAttribute('href') || '';\n                if (href.indexOf('tab=' + currentTab) !== -1) {\n                    tab.classList.add('active');\n                }\n            });\n        }, 50);\n    });\n\n    document.addEventListener('click', function(e) {\n        var tab = e.target.closest('.dd-desktop-menu a.dd-apple-tab, .dd-mobile-bottom-bar a.dd-apple-tab');\n        if (!tab) return;\n\n        var href = tab.getAttribute('href');\n        if (!href || href.startsWith('javascript:')) return;\n\n        var urlObj;\n        try { urlObj = new URL(href, window.location.origin); }\n        catch(err) { return; }\n\n        var targetTab = urlObj.searchParams.get('tab');\n        var validTabs = ['home', 'read', 'search', 'notes', 'sermons'];\n        if (!targetTab || !validTabs.includes(targetTab)) return;\n\n        e.preventDefault();\n\n        var currentUrlParams = new URLSearchParams(window.location.search);\n        var currentTab = currentUrlParams.get('tab');\n        \n        if (!currentTab) {\n            var path = window.location.pathname.toLowerCase();\n            if (path.includes('sermon')) currentTab = 'sermons';\n            else if (path.includes('study') || path.includes('commentary')) currentTab = 'notes';\n            else currentTab = 'home';\n        }\n\n        if (currentTab !== targetTab && validTabs.includes(currentTab)) {\n            var currentUrl = window.location.href;\n            if (currentUrl && currentUrl.indexOf('http') === 0) {\n                ddState.setItem('dd_tab_state_' + currentTab, currentUrl);\n            }\n        }\n\n        if (currentTab === targetTab) {\n            ddState.removeItem('dd_tab_state_' + targetTab);\n            window.location.href = href;\n        } else {\n            var savedState = ddState.getItem('dd_tab_state_' + targetTab);\n            \n            if (savedState && savedState !== 'null' && savedState.indexOf('http') === 0 && savedState !== window.location.href) {\n                var isValidState = false;\n                try {\n                    var savedUrlObj = new URL(savedState);\n                    var savedTabParam = savedUrlObj.searchParams.get('tab');\n                    var savedPath = savedUrlObj.pathname.toLowerCase();\n                    \n                    if (savedTabParam === targetTab) {\n                        isValidState = true;\n                    } else if (!savedTabParam) {\n                        if (targetTab === 'sermons' && savedPath.includes('sermon')) isValidState = true;\n                        if (targetTab === 'notes' && (savedPath.includes('study') || savedPath.includes('commentary'))) isValidState = true;\n                    }\n                } catch(err) {}\n\n                if (isValidState) {\n                    window.location.href = savedState;\n                    return;\n                }\n            }\n            window.location.href = href;\n        }\n    });\n\n    function ddAppChangeTextSize(value) {\n        var display = document.getElementById('dd-text-size-display');\n        if (display) display.innerText = value + '%';\n        \n        var scale = parseInt(value) \/ 100;\n        document.documentElement.style.setProperty('--dd-text-scale', scale);\n        \n        var styleEl = document.getElementById('dd-dynamic-text-size');\n        if (!styleEl) {\n            styleEl = document.createElement('style');\n            styleEl.id = 'dd-dynamic-text-size';\n            document.head.appendChild(styleEl);\n        }\n        \n        styleEl.innerHTML = `\n            .dd-apple-reading-body,\n            #dd-app-search-results .dd-verse-text,\n            .dd-modern-commentary-body p,\n            #dd-note-modal-body p {\n                font-size: calc(20px * ` + scale + `) !important;\n            }\n            .dd-mark-custom i, .dd-mark-custom span { font-size: 11px !important; }\n            .dd-verse-wrap { display: block !important; margin-bottom: calc(28px * ` + scale + `) !important; }\n            .dd-apple-vnum, .dd-apple-vnum * { font-size: calc(14px * ` + scale + `) !important; }\n            .dd-apple-xref-wrapper, .dd-apple-xref-sup {\n                font-size: calc(18px * ` + scale + `) !important; line-height: 0 !important;\n                vertical-align: super !important; position: relative !important; top: 0 !important;\n            }\n            .dd-strongs-word { font-size: calc(11px * ` + scale + `) !important; }\n            .dd-apple-reading-title * { font-size: inherit !important; line-height: inherit !important; }\n        `;\n        \n        ddState.setItem('ddGlobalTextSize', value);\n\n        \/\/ THE FIX 2: Trigger the cloud sync function when the slider moves\n        if (typeof ddAppSyncSettingsToServer === 'function') {\n            ddAppSyncSettingsToServer('ddBibleFontSize', value);\n        }\n    }\n\n    window.addEventListener('DOMContentLoaded', function() {\n        \/\/ THE FIX 3: Properly load the user's saved text size from the database on page load\n        var savedSize = 100;\n        if (typeof ddAppConfig !== 'undefined' && ddAppConfig.settings && ddAppConfig.settings.fontSize) {\n            savedSize = ddAppConfig.settings.fontSize;\n        } else {\n            savedSize = ddState.getItem('ddGlobalTextSize') || ddState.getItem('ddBibleFontSize') || 100;\n        }\n        \n        var slider = document.getElementById('dd-text-size-slider');\n        if (slider) {\n            slider.value = savedSize;\n            ddAppChangeTextSize(savedSize);\n        }\n    });\n<\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/globals.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/navigation.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/preferences.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/modals.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/reader.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/search.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/interactions.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/app-auth.js?v=1782566178\"><\/script>\n<script src=\"https:\/\/exploretheword.app\/wp-content\/plugins\/daily-devotionals\/includes\/bible-app\/js\/init.js?v=1782566178\"><\/script>\n\n<input type=\"hidden\" id=\"dd-modal-auth-nonce\" value=\"fc32d5052f\">\n\n<style>\n    \/* \u2500\u2500 Overlay \u2500\u2500 *\/\n    .dd-note-overlay {\n        display: none; position: fixed; inset: 0;\n        background: rgba(0,0,0,0.45);\n        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);\n        z-index: 10999998 !important;\n    }\n\n    \/* \u2500\u2500 Modal shell \u2500\u2500 *\/\n    .dd-note-modal-container {\n        display: none; position: fixed;\n        top: 50%; left: 50%; transform: translate(-50%, -50%);\n        width: 92%; max-width: 620px; max-height: 88vh;\n        background: #ffffff;\n        border-radius: 22px;\n        box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);\n        z-index: 10999999 !important;\n        flex-direction: column;\n        overflow: hidden;\n    }\n\n    \/* \u2500\u2500 Header \u2500\u2500 *\/\n    .dd-note-header {\n        padding: 20px 22px 18px;\n        border-bottom: 1px solid rgba(0,0,0,0.07);\n        display: flex; justify-content: space-between; align-items: center;\n        background: #FAFAFC;\n        gap: 12px;\n    }\n    .dd-note-meta { min-width: 0; }\n    .dd-note-meta h3 {\n        margin: 0 0 2px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 19px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.02em;\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .dd-note-meta p {\n        margin: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 13px; color: #8E8E93; font-weight: 500;\n    }\n    .dd-note-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }\n\n    \/* \u2500\u2500 Header buttons \u2500\u2500 *\/\n    .dd-btn-static {\n        padding: 9px 18px; border-radius: 11px;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px; font-weight: 600; cursor: pointer; border: none;\n        transition: background 0.15s, transform 0.1s, box-shadow 0.15s;\n        white-space: nowrap;\n    }\n    .dd-btn-static:active { transform: scale(0.96); }\n    .dd-btn-cancel { background: #E9E9EF; color: #3A3A3C; }\n    .dd-btn-cancel:hover { background: #DCDCE0; }\n    .dd-btn-save {\n        background: #007AFF; color: #fff;\n        box-shadow: 0 4px 14px rgba(0,122,255,0.28);\n    }\n    .dd-btn-save:hover { background: #0071EB; box-shadow: 0 6px 18px rgba(0,122,255,0.35); }\n    .dd-btn-delete {\n        background: rgba(255,59,48,0.08); color: #FF3B30;\n        border: 1.5px solid rgba(255,59,48,0.18);\n    }\n    .dd-btn-delete:hover { background: rgba(255,59,48,0.15); border-color: rgba(255,59,48,0.3); }\n\n    \/* \u2500\u2500 Tag row \u2500\u2500 *\/\n    .dd-note-tags-wrap {\n        padding: 12px 22px; border-bottom: 1px solid rgba(0,0,0,0.06);\n        display: flex; align-items: center; flex-wrap: wrap; gap: 6px;\n        background: #fff; min-height: 50px;\n    }\n    .dd-tag-pill {\n        display: inline-flex; align-items: center; gap: 5px;\n        background: rgba(0,122,255,0.1); color: #007AFF;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 12px; font-weight: 600;\n        padding: 4px 10px; border-radius: 99px;\n    }\n    .dd-tag-pill button {\n        background: none; border: none; color: #007AFF; cursor: pointer;\n        font-size: 14px; line-height: 1; padding: 0; opacity: 0.6;\n        transition: opacity 0.15s;\n    }\n    .dd-tag-pill button:hover { opacity: 1; }\n    .dd-tag-input {\n        border: none; outline: none; background: transparent;\n        font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px; color: #3A3A3C; flex-grow: 1; min-width: 140px;\n    }\n    .dd-tag-input::placeholder { color: #C7C7CC; }\n    .dd-note-tag-add {\n        width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;\n        border: 1px dashed #C7C7CC; background: none; color: #007AFF;\n        font-size: 18px; line-height: 1; cursor: pointer; padding: 0;\n        display: inline-flex; align-items: center; justify-content: center;\n        transition: border-color 0.15s, background 0.15s;\n    }\n    .dd-note-tag-add:hover { border-color: #007AFF; background: rgba(0,122,255,0.07); }\n\n    \/* \u2500\u2500 Formatting toolbar \u2500\u2500 *\/\n    .dd-note-toolbar {\n        padding: 10px 22px; border-bottom: 1px solid rgba(0,0,0,0.06);\n        display: flex; gap: 4px; align-items: center; background: #FAFAFC;\n    }\n    .dd-tool-btn {\n        background: transparent; border: none;\n        width: 34px; height: 34px; border-radius: 8px;\n        display: inline-flex; align-items: center; justify-content: center;\n        cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px; color: #3A3A3C;\n        transition: background 0.15s, color 0.15s;\n    }\n    .dd-tool-btn:hover { background: rgba(0,0,0,0.07); color: #1D1D1F; }\n    .dd-tool-btn:active { background: rgba(0,0,0,0.12); }\n    .dd-tool-btn b { font-weight: 800; font-size: 15px; }\n    .dd-tool-btn i { font-style: italic; font-size: 15px; }\n    .dd-tool-sep { width: 1px; height: 22px; background: rgba(0,0,0,0.1); margin: 0 4px; }\n\n    \/* \u2500\u2500 Editor \u2500\u2500 *\/\n    .dd-note-editor-area {\n        flex-grow: 1; overflow-y: auto;\n        padding: 22px;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        font-size: 16px; line-height: 1.75; color: #1D1D1F;\n        outline: none; min-height: 220px; background: #fff;\n        caret-color: #007AFF;\n    }\n    .dd-note-editor-area:empty:before {\n        content: attr(placeholder); color: #C7C7CC; pointer-events: none;\n    }\n    .dd-note-editor-area:focus { background: #fff; }\n<\/style>\n\n<div id=\"dd-advanced-note-overlay\" class=\"dd-note-overlay\" onclick=\"ddCloseAdvancedNoteModal()\"><\/div>\n\n<div id=\"dd-advanced-note-modal\" class=\"dd-note-modal-container\">\n\n    <div class=\"dd-note-header\">\n        <div class=\"dd-note-meta\">\n            <h3 id=\"dd-adv-note-title\">Edit Note<\/h3>\n            <p id=\"dd-adv-note-ref\">Verse reference loading...<\/p>\n        <\/div>\n        <div class=\"dd-note-actions\">\n            <button class=\"dd-btn-static dd-btn-delete\" id=\"dd-adv-note-delete-btn\" onclick=\"ddDeleteAdvancedNote()\" style=\"display:none;\">Delete<\/button>\n            <button class=\"dd-btn-static dd-btn-cancel\" onclick=\"ddCloseAdvancedNoteModal()\">Cancel<\/button>\n            <button class=\"dd-btn-static dd-btn-save\" onclick=\"ddSaveAdvancedNote()\">Save Note<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"dd-note-tags-wrap\" id=\"dd-note-tags-wrap\">\n        <div id=\"dd-tag-pills\"><\/div>\n        <input type=\"text\" id=\"dd-note-tag-input\" class=\"dd-tag-input\" placeholder=\"Add a topic or tag\u2026\">\n        <button type=\"button\" class=\"dd-note-tag-add\" id=\"dd-note-tag-add\" title=\"Add topic or tag\" onclick=\"ddNoteAddTagFromInput()\">+<\/button>\n    <\/div>\n\n    <div class=\"dd-note-toolbar\">\n        <button class=\"dd-tool-btn\" title=\"Bold\" onclick=\"document.execCommand('bold',false,null)\"><b>B<\/b><\/button>\n        <button class=\"dd-tool-btn\" title=\"Italic\" onclick=\"document.execCommand('italic',false,null)\"><i>I<\/i><\/button>\n        <button class=\"dd-tool-btn\" title=\"Underline\" onclick=\"document.execCommand('underline',false,null)\" style=\"text-decoration:underline;font-size:14px;font-weight:600;\">U<\/button>\n        <div class=\"dd-tool-sep\"><\/div>\n        <button class=\"dd-tool-btn\" title=\"Bullet list\" onclick=\"document.execCommand('insertUnorderedList',false,null)\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"9\" y1=\"6\" x2=\"20\" y2=\"6\"\/><line x1=\"9\" y1=\"12\" x2=\"20\" y2=\"12\"\/><line x1=\"9\" y1=\"18\" x2=\"20\" y2=\"18\"\/><circle cx=\"4\" cy=\"6\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"4\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"4\" cy=\"18\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n        <\/button>\n        <button class=\"dd-tool-btn\" title=\"Clear formatting\" onclick=\"document.execCommand('removeFormat',false,null)\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 7V4h16v3\"\/><path d=\"M9 20h6\"\/><path d=\"M12 4v16\"\/><line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"3\" stroke=\"#FF3B30\"\/><\/svg>\n        <\/button>\n    <\/div>\n\n    <div id=\"dd-note-editor-area\" class=\"dd-note-editor-area\" contenteditable=\"true\" placeholder=\"Start typing your insights\u2026\"><\/div>\n\n<\/div>\n\n<script>\n    var ddTargetNoteRef = '';\n    var ddModalCurrentTags = [];\n\n    function ddOpenAdvancedNoteModal(reference, existingHtml = '', existingTags = []) {\n        ddTargetNoteRef = reference;\n        ddModalCurrentTags = Array.isArray(existingTags) ? existingTags.slice() : [];\n\n        document.getElementById('dd-adv-note-ref').innerText = reference;\n        document.getElementById('dd-note-editor-area').innerHTML = existingHtml;\n\n        const delBtn = document.getElementById('dd-adv-note-delete-btn');\n        if (delBtn) delBtn.style.display = (existingHtml && existingHtml.trim() !== '') ? 'inline-block' : 'none';\n\n        ddRenderTagPills();\n\n        document.getElementById('dd-advanced-note-overlay').setAttribute('style', 'display:block !important;');\n        document.getElementById('dd-advanced-note-modal').setAttribute('style', 'display:flex !important;');\n\n        setTimeout(function() { document.getElementById('dd-note-editor-area').focus(); }, 150);\n    }\n\n    function ddCloseAdvancedNoteModal() {\n        document.getElementById('dd-advanced-note-overlay').setAttribute('style', 'display:none !important;');\n        document.getElementById('dd-advanced-note-modal').setAttribute('style', 'display:none !important;');\n    }\n\n    \/* \u2500\u2500 Tag pill rendering \u2500\u2500 *\/\n    function ddRenderTagPills() {\n        var container = document.getElementById('dd-tag-pills');\n        if (!container) return;\n        container.innerHTML = ddModalCurrentTags.map(function(tag, i) {\n            return '<span class=\"dd-tag-pill\">' + ddEscH(tag) +\n                   '<button type=\"button\" onclick=\"ddRemoveTag(' + i + ')\" title=\"Remove\">\u00d7<\/button><\/span>';\n        }).join('');\n    }\n    function ddRemoveTag(idx) {\n        ddModalCurrentTags.splice(idx, 1);\n        ddRenderTagPills();\n    }\n    function ddEscH(s) {\n        return String(s).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;');\n    }\n\n    \/* \u2500\u2500 Add one or more tags (comma-separated), like WordPress categories \u2500\u2500 *\/\n    function ddNoteCommitTags(raw) {\n        String(raw).split(',').forEach(function(p) {\n            var val = p.trim();\n            if (!val) return;\n            var dupe = ddModalCurrentTags.some(function(t){ return t.toLowerCase() === val.toLowerCase(); });\n            if (!dupe) ddModalCurrentTags.push(val);\n        });\n        ddRenderTagPills();\n    }\n    function ddNoteAddTagFromInput() {\n        var tagInput = document.getElementById('dd-note-tag-input');\n        if (!tagInput) return;\n        ddNoteCommitTags(tagInput.value);\n        tagInput.value = '';\n        tagInput.focus();\n    }\n\n    \/* \u2500\u2500 Tag input: Enter or comma to add, Backspace to remove last \u2500\u2500 *\/\n    document.addEventListener('DOMContentLoaded', function() {\n        var tagInput = document.getElementById('dd-note-tag-input');\n        if (!tagInput) return;\n        tagInput.addEventListener('keydown', function(e) {\n            if (e.key === 'Enter' || e.key === ',') {\n                e.preventDefault();\n                ddNoteCommitTags(tagInput.value);\n                tagInput.value = '';\n            } else if (e.key === 'Backspace' && tagInput.value === '' && ddModalCurrentTags.length) {\n                e.preventDefault();\n                ddModalCurrentTags.pop();\n                ddRenderTagPills();\n            }\n        });\n        \/\/ Catch pasted \"a, b, c\" \u2014 commit everything before the trailing comma.\n        tagInput.addEventListener('input', function() {\n            if (tagInput.value.indexOf(',') > -1) {\n                var parts = tagInput.value.split(',');\n                var last = parts.pop();\n                ddNoteCommitTags(parts.join(','));\n                tagInput.value = last;\n            }\n        });\n    });\n\n    \/* \u2500\u2500 Remove note icon from reader \u2500\u2500 *\/\n    function ddRemoveMyNoteIcon(ref) {\n        if (!ref) return;\n        var verses = document.querySelectorAll('.dd-verse');\n        for (var i = 0; i < verses.length; i++) {\n            var el = verses[i];\n            if (el.getAttribute('data-ref') !== ref) continue;\n            var icons = el.querySelectorAll('.dd-my-note-icon');\n            for (var j = 0; j < icons.length; j++) {\n                if (icons[j].parentNode) icons[j].parentNode.removeChild(icons[j]);\n            }\n            var anchor = el.querySelector('a.dd-apple-has-note');\n            if (anchor && !anchor.querySelector('.dd-apple-note-icon')) {\n                var inner = anchor.querySelector('.dd-text-inner');\n                if (inner) anchor.parentNode.insertBefore(inner, anchor);\n                if (anchor.parentNode) anchor.parentNode.removeChild(anchor);\n            }\n        }\n    }\n\n    \/* \u2500\u2500 Delete note \u2500\u2500 *\/\n    function ddDeleteAdvancedNote() {\n        if (!confirm('Are you sure you want to delete this note?')) return;\n        const nonceEl = document.getElementById('dd-modal-auth-nonce') || document.getElementById('dd-auth-nonce');\n        const nonce = nonceEl ? nonceEl.value : '';\n        const formData = new FormData();\n        formData.append('action', 'dd_delete_user_interaction');\n        formData.append('security', nonce);\n        formData.append('interaction_type', 'note');\n        formData.append('reference', ddTargetNoteRef);\n        ddCloseAdvancedNoteModal();\n        fetch(ddAppConfig.ajaxUrl, { method: 'POST', body: formData })\n            .then(res => res.json())\n            .then(data => {\n                if (data.success) {\n                    Object.keys(sessionStorage).forEach(function(key) {\n                        if (key.indexOf('dd_bible_cache_') === 0) sessionStorage.removeItem(key);\n                    });\n                    if (typeof ddAppLoadChapter === 'function' && document.getElementById('dd-app-read-content')) {\n                        ddRemoveMyNoteIcon(ddTargetNoteRef);\n                    } else {\n                        var u = new URL(window.location.href);\n                        u.searchParams.set('nocache', Date.now());\n                        window.location.replace(u.toString());\n                    }\n                } else { alert('Error deleting data.'); }\n            }).catch(() => alert('Network error.'));\n    }\n\n    \/* \u2500\u2500 Save note \u2500\u2500 *\/\n    function ddSaveAdvancedNote() {\n        const nonceEl = document.getElementById('dd-modal-auth-nonce') || document.getElementById('dd-auth-nonce');\n        const nonce = nonceEl ? nonceEl.value : '';\n        const editorArea = document.getElementById('dd-note-editor-area');\n        const editorHtml = editorArea.innerHTML;\n        const plainText  = editorArea.innerText.trim();\n        const hasImages  = editorHtml.indexOf('<img') !== -1;\n        const isDelete   = (plainText === '' && !hasImages);\n\n        const formData = new FormData();\n        formData.append('security', nonce);\n        formData.append('interaction_type', 'note');\n        formData.append('reference', ddTargetNoteRef);\n        formData.append('note_tags', JSON.stringify(ddModalCurrentTags));\n\n        if (isDelete) {\n            formData.append('action', 'dd_delete_user_interaction');\n        } else {\n            formData.append('action', 'dd_save_user_interaction');\n            formData.append('note_text', editorHtml);\n        }\n\n        ddCloseAdvancedNoteModal();\n        fetch(ddAppConfig.ajaxUrl, { method: 'POST', body: formData })\n            .then(res => res.json())\n            .then(data => {\n                if (data.success) {\n                    \/\/ Update the Notes tab vault list immediately\n                    if (typeof window.ddVaultAddItem === 'function') {\n                        window.ddVaultAddItem(ddTargetNoteRef, isDelete ? '' : editorHtml, isDelete);\n                    }\n                    Object.keys(sessionStorage).forEach(function(key) {\n                        if (key.indexOf('dd_bible_cache_') === 0) sessionStorage.removeItem(key);\n                    });\n                    if (typeof ddAppLoadChapter === 'function' && document.getElementById('dd-app-read-content')) {\n                        if (isDelete) { ddRemoveMyNoteIcon(ddTargetNoteRef); }\n                        else { ddAppLoadChapter(false); }\n                    } else {\n                        var u = new URL(window.location.href);\n                        u.searchParams.set('nocache', Date.now());\n                        window.location.replace(u.toString());\n                    }\n                } else { alert('Error saving data.'); }\n            }).catch(() => alert('Network error.'));\n    }\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/exploretheword.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":1,"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/exploretheword.app\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/exploretheword.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}