/* Biblos reader — full-screen, mobile-first reading interface */
.bible-scroll-app {
    --bs-bg: #f5f2eb; --bs-surface: #fffdf8; --bs-surface-2: #ece8df;
    --bs-fg: #1a1b18; --bs-muted: #73756f; --bs-accent: #a94f4b;
    --bs-gold: #c19a52; --bs-border: rgba(26,27,24,.14); --bs-font-size: 24px;
    --bs-toolbar-bg: rgba(245,242,235,.78);
    width: 100%; height: 100%; min-height: 520px; position: relative; overflow: hidden;
    display: grid; grid-template-rows: 58px minmax(0,1fr) 68px;
    color: var(--bs-fg); background: var(--bs-bg); border: 0; border-radius: 0;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
}
.bible-scroll-app,.bible-scroll-app *{box-sizing:border-box}
.bible-scroll-app[data-theme="dark"] {
    --bs-bg: #0b120e; --bs-surface: #171817; --bs-surface-2: #101813;
    --bs-fg: #f4f1e9; --bs-muted: #969b95; --bs-accent: #d17b74;
    --bs-gold: #d1aa5c; --bs-border: rgba(233,238,232,.14);
    --bs-toolbar-bg: rgba(11,18,14,.78);
}
.bible-scroll-app button { font: inherit; }
.bs-loading { display: grid; place-items: center; min-height: 100%; color: var(--bs-muted); }

.bs-appbar {
    display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px;
    padding: max(5px, env(safe-area-inset-top)) 18px 5px; background: var(--bs-surface);
    border-bottom: 1px solid rgba(255,255,255,.015); position: relative; z-index: 8;
}
.bs-brand { text-align: center; font-size: 18px; line-height: 1; font-weight: 760; letter-spacing: -.02em; }
.bs-round-btn {
    width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
    color: var(--bs-fg); background: transparent; border: 1px solid var(--bs-border); border-radius: 50%;
    cursor: pointer; font-size: 24px; line-height: 1;
}
.bs-menu-btn { font-size: 17px; letter-spacing: 2px; padding: 0 0 7px 2px; }

.bs-toolbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
    position: absolute; top: 58px; left: 0; right: 0; height: 54px;
    padding: 6px 22px; background: var(--bs-toolbar-bg); z-index: 7;
    border-bottom: 1px solid rgba(255,255,255,.02);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.bs-jump-btn, .bs-tr-btn, .bs-streak-btn { border: 0; background: none; color: var(--bs-fg); cursor: pointer; min-height: 38px; }
.bs-jump-btn { justify-self: start; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.bs-jump-icon { font-size: 24px; transform: rotate(90deg); }
.bs-tr-btn {
    min-width: 132px; padding: 6px 34px 6px 20px; border: 1px solid var(--bs-border); border-radius: 999px;
    font-weight: 750; letter-spacing: .1em; position: relative;
}
.bs-tr-btn::after { content: '⌄'; position: absolute; right: 15px; top: 5px; font-size: 18px; }
.bs-streak-btn { justify-self: end; color: var(--bs-muted); font-weight: 700; white-space: nowrap; }
.bs-streak-btn span::before { content: ''; display: inline-block; width: 5px; height: 23px; margin-right: 10px; border-radius: 4px; background: var(--bs-gold); vertical-align: -6px; }

.bs-feed { grid-row: 2; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bs-feed::-webkit-scrollbar { display: none; }
.bs-verse-card {
    min-height: 100%; padding: clamp(38px,7vh,72px) clamp(30px,7vw,74px) 28px;
    scroll-snap-align: start; scroll-snap-stop: always; position: relative;
    display: flex; flex-direction: column; justify-content: center;
}
.bs-verse-ref { color: var(--bs-accent); font-size: 16px; line-height: 1.3; font-weight: 760; letter-spacing: .02em; margin: 0 66px 30px 0; }
.bs-verse-text {
    max-width: 720px; margin: 0 70px 0 0; color: var(--bs-fg);
    font-family: Georgia, "Times New Roman", serif; font-size: clamp(var(--bs-font-size), 5.5vw, 48px);
    font-weight: 400; line-height: 1.34; letter-spacing: -.025em;
}
.bs-verse-text .bs-empty { color: var(--bs-muted); font-size: .8em; }
.bs-long-verse { justify-content:center; padding-top:22px; padding-bottom:22px; }
.bs-long-verse .bs-verse-ref { margin-bottom:14px; }
.bs-long-verse .bs-verse-text { font-size:max(21px,calc(var(--bs-font-size) * .94));line-height:1.18;letter-spacing:-.02em; }
.bs-long-verse .bs-translation-name { margin-top:14px; }
.bs-long-verse .bs-swipe-hint { display:none; }
.bs-translation-name { margin: 30px 70px 0 0; color: var(--bs-muted); font-size: 12px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.bs-verse-actions {
    position: absolute; right: 20px; top: 50%; transform: translateY(-38%);
    display: flex; flex-direction: column; gap: 13px;
}
.bs-icon-btn {
    width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
    color: var(--bs-fg); background: transparent; border: 1px solid var(--bs-border); border-radius: 50%;
    cursor: pointer; font-size: 20px;
}
.bs-icon-btn svg{display:block;width:25px;height:25px}
.bs-icon-btn:hover { background: var(--bs-surface); }
.bs-icon-btn.active { color: var(--bs-accent); border-color: var(--bs-accent); }
.bs-swipe-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: var(--bs-muted); font-size: 13px; white-space: nowrap; }
.bs-swipe-hint span { display: inline-block; width: 32px; height: 1px; margin: 0 12px 4px 0; background: var(--bs-border); }
.bs-next-chapter{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}

@media (max-width: 699px) {
    .bs-verse-text { font-size: clamp(calc(var(--bs-font-size) + 3px),7.4vw,34px); line-height: 1.32; }
    .bs-long-verse .bs-verse-text { font-size: max(22.5px,calc(var(--bs-font-size) * .94)); line-height: 1.16; }
}

.bs-bottom-nav {
    display: grid; grid-template-columns: repeat(5,1fr); align-items: stretch;
    padding: 7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    grid-row: 3; background: var(--bs-surface-2); border-top: 1px solid var(--bs-border); position: relative; z-index: 8;
}
.bs-tab-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; border: 0; background: none; color: var(--bs-muted); font-size: 11px; font-weight: 650; cursor: pointer; }
.bs-tab-icon { width: 25px; height: 25px; display: grid; place-items: center; line-height: 1; }
.bs-tab-icon svg { display: block; width: 25px; height: 25px; }
.bs-tab-label { line-height: 1; }
.bs-tab-btn.active { color: var(--bs-accent); }

.bs-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding-top: 30px; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.bs-modal[hidden] { display: none; }
.bs-modal-card { width: 100%; max-height: 88%; display: flex; flex-direction: column; position: relative; color: var(--bs-fg); background: var(--bs-surface); border: 1px solid var(--bs-border); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 70px rgba(0,0,0,.3); animation: bs-slide-up .22s ease-out; }
@keyframes bs-slide-up { from { transform: translateY(36px); opacity: .4; } }
.bs-modal-body { width:100%;min-width:0;overflow-x:hidden;overflow-y:auto;padding:26px 22px max(34px,env(safe-area-inset-bottom)); }
.bs-modal-body h3 { margin: 0 46px 20px 0; font-size: 20px; }
.bs-modal-close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--bs-border); border-radius: 50%; background: var(--bs-surface-2); color: var(--bs-fg); cursor: pointer; }
.bs-list { display: flex; flex-direction: column; gap: 9px; }
.bs-list-item { width: 100%; padding: 14px 15px; text-align: left; color: var(--bs-fg); background: var(--bs-surface-2); border: 1px solid var(--bs-border); border-radius: 12px; cursor: pointer; }
.bs-list-item.active { border-color: var(--bs-accent); }
.bs-list-item > span:last-child { float: right; color: var(--bs-muted); }
.bs-muted { color: var(--bs-muted); font-size: .88em; }
.bs-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--bs-border); }
.bs-setting-row strong, .bs-setting-row span { display: block; }
.bs-setting-row > div > span { margin-top: 3px; color: var(--bs-muted); font-size: 13px; }
.bs-theme-switch { width: 52px; height: 30px; flex: 0 0 auto; padding: 3px; border: 0; border-radius: 999px; background: var(--bs-surface-2); box-shadow: inset 0 0 0 1px var(--bs-border); cursor: pointer; }
.bs-theme-switch span { width: 24px; height: 24px; border-radius: 50%; background: var(--bs-muted); transition: transform .2s,background .2s; }
.bs-theme-switch.active { background: var(--bs-accent); }
.bs-theme-switch.active span { background: #fff; transform: translateX(22px); }
.bs-font-controls { display: flex; align-items: center; gap: 7px; }
.bs-font-controls button { width: 38px; height: 34px; padding: 0; border: 1px solid var(--bs-border); border-radius: 9px; background: var(--bs-surface-2); color: var(--bs-fg); cursor: pointer; }
.bs-font-controls output { min-width: 24px; color: var(--bs-muted); text-align: center; font-size: 13px; }
.bs-menu-section { margin-top: 28px !important; }

.bs-book-grid { width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px; }
.bs-book-btn,.bs-ch-btn { min-width:0;padding:10px 5px;overflow-wrap:anywhere;white-space:normal;color:var(--bs-fg);background:var(--bs-surface-2);border:1px solid var(--bs-border);border-radius:9px;cursor:pointer; }
.bs-book-btn.active,.bs-ch-btn.active { color: #fff; background: var(--bs-accent); border-color: var(--bs-accent); }
.bs-ch-grid { width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px; }
.bs-picker-back{margin:0 0 18px;padding:8px 0;border:0;background:none;color:var(--bs-accent);font-weight:700;cursor:pointer}
.bs-search-input { width: 100%; padding: 13px 14px; margin-bottom: 14px; color: var(--bs-fg); background: var(--bs-surface-2); border: 1px solid var(--bs-border); border-radius: 12px; font-size: 16px; }
.bs-search-results { display: flex; flex-direction: column; gap: 8px; }
.bs-saved-row { display: flex; align-items: center; justify-content: space-between; }
.bs-saved-go,.bs-link-btn { border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.bs-progress { display: inline-block; width: 120px; height: 7px; overflow: hidden; vertical-align: middle; border-radius: 9px; background: var(--bs-border); }
.bs-progress span { display: block; height: 100%; background: var(--bs-accent); }
.bs-btn { padding: 10px 16px; border: 0; border-radius: 9px; background: var(--bs-accent); color: #fff; cursor: pointer; }
.bs-plan-today { padding: 15px; margin-bottom: 16px; border-radius: 12px; background: var(--bs-surface-2); }
.bs-streak { text-align: center; font-weight: 650; }

@media (min-width: 700px) {
    .bible-scroll-app { grid-template-rows: 58px minmax(0,1fr) 68px; }
    .bs-appbar,.bs-toolbar,.bs-bottom-nav { padding-left: max(28px,calc((100% - 820px)/2)); padding-right: max(28px,calc((100% - 820px)/2)); }
    .bs-verse-card { padding-left: max(64px,calc((100% - 760px)/2)); padding-right: max(100px,calc((100% - 760px)/2)); }
    .bs-verse-actions { right: max(30px,calc((100% - 900px)/2)); }
    .bs-modal { align-items: center; padding: 28px; }
    .bs-modal-card { max-width: 650px; max-height: 84%; border-radius: 24px; }
    .bs-book-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
    .bs-long-verse .bs-verse-text{font-size:clamp(var(--bs-font-size),5.5vw,48px);line-height:1.34;letter-spacing:-.025em}
}
@media (max-height: 650px) {
    .bible-scroll-app { grid-template-rows: 54px minmax(0,1fr) 60px; }
    .bs-toolbar { top: 54px; height: 50px; }
    .bs-appbar { padding-top: 7px; padding-bottom: 7px; }
    .bs-round-btn { width: 42px; height: 42px; }
    .bs-verse-card { padding-top: 24px; padding-bottom: 24px; }
    .bs-verse-ref { margin-bottom: 15px; }
    .bs-translation-name { margin-top: 16px; }
    .bs-swipe-hint { display: none; }
}