/* Readable paragraphs and touch navigation on phones, tablets and the web. */
:root{--heart-ink:#173c50;--heart-paper:#f8fafb}
html{scroll-padding-bottom:100px}body{background:var(--heart-paper)}
#content p,.scripture-text p,.heart-context p,#content .note,#content .bilingual{ text-align:justify;text-align-last:start;line-height:1.95;overflow-wrap:break-word }
#content h2{font-size:clamp(25px,5vw,36px);line-height:1.4}#content h3{font-size:21px;line-height:1.5}
button{white-space:normal;overflow-wrap:anywhere;min-height:44px}select,input{color:var(--heart-ink);background:#fff;font-size:16px;max-width:100%}
.heart-stage-label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#526a78;margin-bottom:20px}
.heart-stage-label select{width:100%;padding:12px;border:1px solid #c8d7df;border-radius:12px}
.heart-story{max-width:820px;margin:auto}.heart-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.heart-more button{padding:20px 12px;text-align:center}
.heart-search-row{display:flex;gap:8px;align-items:center}.heart-search-row input{min-width:0;flex:1}.heart-results-list{display:flex;flex-wrap:wrap;gap:8px}.heart-search-hit{padding:16px 0;border-bottom:1px solid #d5e0e7}.heart-search-hit p{margin:8px 0}
.heart-context{margin-top:24px;border:1px solid #c8d7df;border-radius:14px;padding:18px}.heart-context summary{font-weight:700;cursor:pointer;min-height:32px}.heart-context button{margin:4px}
#tabs button.active{background:var(--heart-ink);color:white}body:not([data-heart-tab="intro"]) .intro{display:none}
.bj-audio{font-size:14px;padding:12px!important;gap:8px!important}.bj-audio button,.bj-audio label,.bj-audio select{font-size:14px!important}.bj-audio strong{font-size:16px!important}
@media(max-width:700px){
 header{padding:8px 16px;justify-content:flex-end}header .brand{display:none}header select{padding:7px 12px;min-width:130px}
 main{padding:16px 16px 105px!important;width:100%;max-width:100%;box-sizing:border-box}
 .intro{display:block!important;margin:0 0 20px!important}.intro h1{font-size:30px!important;line-height:1.45}.intro #subtitle{font-size:17px;line-height:1.8}.intro .meta{font-size:13px}.intro figure{margin:16px 0}.intro img{width:100%;max-height:180px;object-fit:cover}.intro figcaption{font-size:12px}
 body:not([data-heart-tab="intro"]) .intro{display:none!important}
 #tabs{position:fixed;bottom:0;inset-inline:0;z-index:30;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;background:#f8fafb;border-top:1px solid #d1dfe6;padding:8px 8px calc(8px + env(safe-area-inset-bottom));margin:0!important}
 #tabs button{font-family:system-ui,sans-serif;font-size:12px!important;min-width:0;padding:10px 3px!important;border:0;border-radius:10px;min-height:46px}
 .panel,.reading{padding:20px 17px!important;border-radius:18px!important;min-height:0!important}#content p{font-size:18px;margin-block:0 20px}.layout{display:flex!important;flex-direction:column;gap:12px}.layout>article{width:auto}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .controls{gap:8px;align-items:center}.controls button{font-size:14px;padding:10px 12px}.people{gap:7px}.people button,.chip{font-size:14px!important}footer{font-size:12px}
 dialog{width:calc(100% - 24px)!important;max-width:100%;max-height:88dvh;padding:20px!important;box-sizing:border-box}.reader-toolbar{display:flex;flex-wrap:wrap}.reader-toolbar label{flex:1 1 100px}.scripture-text p{font-size:19px}
 .bj-audio{border-radius:14px!important;margin:12px 0!important}.bj-audio small{font-size:12px!important}
}

/* Compact reader: one play/pause toggle, stop, language and speed. */
.bj-audio{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;padding:7px!important;min-height:44px;box-sizing:border-box;font-family:system-ui,sans-serif}
.bj-audio button{flex:0 0 44px;width:44px;min-height:44px;padding:0!important;font-size:20px!important;line-height:1}
.bj-audio label{margin:0;min-width:0;display:flex;align-items:center}
.bj-audio .bj-language{flex:1}.bj-audio .bj-rate{flex:0 0 76px}
.bj-audio select{width:100%;min-height:44px;padding:4px!important;font-family:system-ui,sans-serif;font-size:14px!important}
.bj-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#footer{display:none!important}
.heart-story-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin:0 0 18px}

/* Start and Journey stories: scroll sideways, then tap a story. */
.heart-list-label{font:14px/1.5 system-ui,sans-serif!important;color:#526a78;margin-bottom:8px!important}
.heart-story-list{display:flex!important;flex-direction:row!important;gap:8px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow-x:auto;overscroll-behavior-inline:contain;padding:4px 2px 10px;margin:0 0 20px;scroll-snap-type:x proximity}
.heart-story-list button{flex:0 0 auto!important;max-width:260px;min-width:100px;min-height:48px;padding:10px 14px!important;font:14px/1.4 system-ui,sans-serif!important;white-space:normal;scroll-snap-align:center;background:#fff;border:1px solid #c8d7df;border-radius:12px;text-align:start;color:#173c50}
.heart-story-list button.active{background:#173c50;color:#fff;border-color:#173c50}
.heart-story-list button .number{font:inherit;display:inline;margin-inline-end:6px}
.heart-story-list button span{color:inherit}
.layout>.heart-story-list{grid-column:1/-1}
@media(min-width:701px){body[data-heart-tab="journey"] .layout{display:flex;flex-direction:column}body[data-heart-tab="journey"] .layout>article{width:auto}}

/* All destinations remain visible in a sideways-scrolling footer. */
#tabs{position:fixed;bottom:0;inset-inline:0;z-index:30;display:flex!important;overflow-x:auto;overscroll-behavior-inline:contain;gap:6px;background:#f8fafb;border-top:1px solid #d1dfe6;padding:8px 8px calc(8px + env(safe-area-inset-bottom));margin:0!important;box-sizing:border-box;max-width:100%}
#tabs button{flex:0 0 auto!important;min-width:76px;max-width:180px;font:13px/1.4 system-ui,sans-serif!important;padding:10px 14px!important;min-height:46px;border:0;border-radius:10px;white-space:nowrap;overflow-wrap:normal}
main{padding-bottom:110px!important}.heart-book-part{border-top:1px solid #d6e0e7;padding:16px 0;margin-top:12px}.heart-book-part h3{margin:0 0 10px}.heart-book-part .ref{margin:0!important;font-size:14px!important}.heart-reader-book{background:#edf4f7;border:1px solid #c4d6df;border-radius:12px;padding:14px;margin:12px 0}.heart-reader-book summary{font-weight:700;cursor:pointer}.heart-reader-book p,.heart-book-part p{line-height:1.85;text-align:justify;text-align-last:start}

/* Prevent the base reader's wrapped tabs from disabling horizontal scrolling. */
#tabs{flex-wrap:nowrap!important;width:100%;min-width:0;max-width:100vw;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x;-webkit-overflow-scrolling:touch}
#tabs button{flex-shrink:0!important;touch-action:pan-x}

.heart-subject-bar{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:.5rem 0 1rem;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.heart-subject-bar button{flex:0 0 auto;white-space:nowrap}