/* BettrBook+: search, verse of the day, plans, streaks, highlights, cross-references, share images, reader mode, tour, review dashboard */
.round-btn{position:relative}
@media (max-width:430px){
  .appbar{padding-left:10px;padding-right:10px}
  .appbar-actions{gap:6px}
  .appbar .round-btn{width:34px;height:34px}
  .appbar .round-btn svg{width:19px;height:19px}
}
@media (max-width:360px){ .appbar .wordmark{display:none} }
.streak-dot{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ff8a00;color:#fff;font:700 10.5px/17px system-ui,sans-serif;text-align:center}
.streak-dot:empty{display:none}
.streak-dot.done{background:#2bb673}
.review-btn.lit svg{stroke:#b3261e}

/* highlights */
.scripture .v{border-radius:3px;transition:background .2s;cursor:pointer}
.scripture .v.hl-y{--hl:rgba(255,214,10,.38)} .scripture .v.hl-g{--hl:rgba(52,199,89,.26)}
.scripture .v.hl-b{--hl:rgba(64,156,255,.24)} .scripture .v.hl-p{--hl:rgba(255,102,163,.24)}
:root.dark .scripture .v.hl-y{--hl:rgba(255,214,10,.26)} :root.dark .scripture .v.hl-g{--hl:rgba(52,199,89,.24)}
:root.dark .scripture .v.hl-b{--hl:rgba(64,156,255,.26)} :root.dark .scripture .v.hl-p{--hl:rgba(255,102,163,.24)}
.scripture .v.hl{background:var(--hl)}
.scripture .v.picked{outline:2px dashed var(--brand);outline-offset:2px}
.scripture .v.flash-v{animation:flashv 2.4s ease}
/* Inline verse flow (reader, verse of the day): a verse can hold poetry lines. Each continuation line is a full-width inline-block
   (keeps its hanging indent and stays inside the verse's inline box, which a display:block child would split). The highlight, jump flash
   and selection outline are painted on each line's text (.lt), so they cover every line and never spill onto the next verse's number. */
.rd-text .line+.line,.votd-text .line+.line{display:inline-block;width:100%;box-sizing:border-box;padding-left:1.1em;vertical-align:top}
.rd-text .v.hl,.votd-text .v.hl{background:none}
.rd-text .v.hl .lt,.votd-text .v.hl .lt{background:var(--hl)}
.rd-text .lt,.votd-text .lt{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .2s}
.rd-text .v.picked,.votd-text .v.picked{outline:none}
.rd-text .v.picked .lt,.votd-text .v.picked .lt{outline:2px dashed var(--brand);outline-offset:1px}
.rd-text .v.flash-v,.votd-text .v.flash-v{animation:none}
.rd-text .v.flash-v .lt,.votd-text .v.flash-v .lt{animation:flashv 2.4s ease}
@keyframes flashv{0%,40%{background:rgba(27,110,243,.22)}100%{}}
.hl-dot{width:30px;height:30px;border-radius:50%;border:2px solid transparent;flex:none;display:inline-block}
.hl-dot.sm{width:12px;height:12px;vertical-align:-1px;margin-right:5px}
.hl-dot.hl-y{background:#ffd60a}.hl-dot.hl-g{background:#34c759}.hl-dot.hl-b{background:#409cff}.hl-dot.hl-p{background:#ff66a3}
.hl-dot.on{border-color:var(--text);box-shadow:0 0 0 2px var(--card) inset}
.hl-row{display:flex;align-items:center;gap:6px}.hl-row .saved-card{flex:1;min-width:0}.hl-row .hl-dot{width:14px;height:14px}
.hl-del{width:30px;height:30px}.hl-del svg{width:15px;height:15px}
.hl-filters{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}

/* verse action sheet */
.vsheet{position:absolute;z-index:55;top:0;left:8px;max-width:calc(100% - 16px);background:var(--card);border-radius:14px;border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,0,0,.26);padding:2px;animation:vsin .14s ease}
@keyframes vsin{from{opacity:0}}
.vs-h{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;padding-left:8px;min-height:30px}
.vs-ref{font-weight:700;color:var(--brand);padding:6px 0;background:none}
.vs-x{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:none;color:var(--muted)}.vs-x svg{width:16px;height:16px}
.vs-x::after{content:"";position:absolute;inset:-7px}
.vs-row{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}.vs-row::-webkit-scrollbar{display:none}
.vs-colors{display:flex;align-items:center}
.vs-i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:none;color:var(--text)}
.vs-i:hover,.vs-i:focus-visible{background:var(--bubble)}
.vs-i svg{width:21px;height:21px}
.vs-dot .hl-dot{width:26px;height:26px}
.vs-sep{flex:none;width:1px;height:24px;background:var(--line)}
.vs-tip{flex:1;min-width:0;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* several verses: the pop-up docks at the bottom as a selection bar */
.vsheet.vs-multi{width:min(460px,calc(100% - 16px));padding:4px 4px 2px;border-color:var(--brand);box-shadow:0 10px 34px rgba(0,0,0,.32)}
.vs-multi .vs-h{align-items:flex-start;padding-top:4px}
.vs-hd{display:flex;flex-direction:column;min-width:0;gap:1px}
.vs-count{font-size:14px}
.vs-refs{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.vs-multi .vs-ref{padding:2px 0}
.vs-multi .vs-row{justify-content:space-between}

/* verse of the day + plan strip */
.votd-wrap:empty{display:none}
.votd{padding:14px 16px 12px;background:linear-gradient(160deg,rgba(255,196,77,.16),transparent 55%),var(--card)}
.votd-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--gold)}.votd-h .muted{font-weight:600}
.votd-x{margin-left:auto;width:28px;height:28px;background:transparent}.votd-x svg{width:15px;height:15px}
.votd-ref{font-weight:800;font-size:16px;margin:6px 0 4px}
.votd-text .v{display:inline;margin:0}
.votd-label{margin:6px 0 2px;font-size:12px}
.votd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.votd-actions .ghost{padding:8px 12px;font-size:13.5px}
.plan-strip{display:grid;gap:4px;width:100%;text-align:left;padding:10px 16px;margin-top:10px;font-size:13.5px}
.plan-strip .minibar{height:5px}
.feed .card + .card, .votd-wrap + .feed{margin-top:0}
.votd-wrap{display:grid;gap:10px;margin-bottom:10px}
.votd-wrap .plan-strip{margin-top:0}

/* search */
.jump-search{margin:10px 0 4px}
.jump-search:empty{display:none}
.card-ish{border:1px solid var(--line);border-radius:12px;padding:12px}
.ref-hit .rh-top{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.ref-hit .scripture{font-size:calc(16px * var(--scale))}
.rh-label{font-size:12px;margin:2px 0 8px}
.scope-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;margin-top:6px}
.kw-count{margin:2px 0 6px}
.kw-books{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);margin-bottom:6px}
.kw-list{list-style:none;margin:0;padding:0}
.kw-item{display:grid;gap:2px;width:100%;text-align:left;padding:10px 8px;border-radius:10px;border-bottom:1px solid var(--line)}
.kw-item:hover{background:var(--hover)}
.kw-item b{font-size:14px}.kw-t{font-family:var(--serif);font-size:calc(15.5px * var(--scale));line-height:1.45}
.kw-item mark{background:rgba(255,214,10,.45);color:inherit;border-radius:2px;padding:0 1px}
:root.dark .kw-item mark{background:rgba(255,214,10,.3)}
.kw-l{font-size:11px}.kw-l .ver{font-size:9px}
.search-tip{line-height:1.7}

/* reader mode */
.reader{position:absolute;inset:0;z-index:36;display:flex;flex-direction:column;background:var(--card);opacity:0;transform:translateY(12px);transition:opacity .22s,transform .22s}
.reader.show{opacity:1;transform:none}
.reader[data-theme=paper]{--card:#fffdf8;--text:#1d1b17;--muted:#6d665b;--line:#ece5d8;--bubble:#f3eee4;--hover:#efe8da;--gold:#8a6416;--on-gold:#fff;--brand:#1559d6;--brand-fill:#1559d6;--love:#d61f3c;--chip-ai-bg:#e7f0ff;--chip-ai:#1559d6;--chip-pd-bg:#fbf1dc;--chip-pd:#8a6416;color-scheme:light}
.reader[data-theme=sepia]{--card:#f4ecd8;--text:#3b2f1e;--muted:#7a6a52;--line:#e2d6bb;--bubble:#ebe0c6;--hover:#e6dabc;--gold:#8a6416;--on-gold:#fff;--brand:#1559d6;--brand-fill:#1559d6;--love:#d61f3c;--chip-ai-bg:#e7f0ff;--chip-ai:#1559d6;--chip-pd-bg:#fbf1dc;--chip-pd:#8a6416;color-scheme:light}
/* paper/sepia always use the light accents and night the dark ones, whatever the app theme (gold "20", the WEB tag, chips) */
.reader[data-theme=night]{--card:#101114;--text:#d8d6d0;--muted:#8d8b86;--line:#25262b;--bubble:#1d1e22;--hover:#26272c;--gold:#c9a45a;--on-gold:#1b1405;--brand:#7fb0ff;--brand-fill:#2563d0;--love:#ff6b81;--chip-ai-bg:#1d3355;--chip-ai:#8db8ff;--chip-pd-bg:#3d3220;--chip-pd:#e8c27a;color-scheme:dark}
.reader{color:var(--text)}
.rd-bar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 8px;border-bottom:1px solid var(--line)}
.rd-bar .round-btn{width:36px;height:36px;background:var(--bubble);color:var(--text)}
.rd-t{font-weight:800;font-size:13px}
.rd-title{flex:1;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rd-page{max-width:680px;margin:0 auto;padding:22px 22px calc(40px + env(safe-area-inset-bottom))}
.rd-h{font-family:var(--serif);font-weight:600;font-size:30px;margin:6px 0 6px}.rd-h span{color:var(--gold)}
.rd-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;margin-bottom:6px}
.rd-sum{margin-bottom:18px}.rd-label+.rd-text{margin-top:12px}
@media (min-width:900px){.rd-text{font-size:calc(21px * var(--scale))}.rd-h{font-size:36px}}
.rd-text{font-size:calc(19px * var(--scale));line-height:1.75}
.rd-text .v{display:inline;margin:0}.rd-text .v::after{content:" "}
.rd-notice{font-size:11.5px;color:var(--muted);margin:22px 0 0;line-height:1.5}
.rd-foot{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.rd-foot .ghost[disabled]{color:#1e8a55;background:rgba(43,182,115,.15)}
.rd-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.rd-prog{height:3px;background:var(--line)}.rd-prog i{display:block;height:100%;width:0;background:#2bb673;transition:width .8s linear}

/* share image */
.simg-c{width:100%;max-width:360px;display:block;margin:4px auto 10px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18);aspect-ratio:1080/1350;height:auto}
.simg-styles{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.simg-sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line)}.simg-sw.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--card) inset}
.btn-row.wrap{flex-wrap:wrap;justify-content:center}

/* cross-references */
.xr-list{list-style:none;padding:0;margin:8px 0}
.xr-item{display:grid;gap:3px;width:100%;text-align:left;padding:10px 8px;border-radius:10px;border-bottom:1px solid var(--line)}
.xr-item:hover{background:var(--hover)}.xr-item span{font-family:var(--serif);font-size:calc(15px * var(--scale));line-height:1.45;color:var(--text)}
.xr-src{margin-top:14px}

/* your reading (profile) */
.me-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.me-grid{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.me-ring{position:relative;text-align:center}.ring{width:96px;height:96px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}.ring-bg{stroke:var(--bubble)}.ring-fg{stroke:#2bb673;stroke-linecap:round;transition:stroke-dashoffset .6s}
.ring-n{position:absolute;left:0;right:0;top:26px;display:grid;line-height:1.1}.ring-n b{font-size:22px}.ring-n span{font-size:11px;color:var(--muted);padding:0 6px}
.me-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--bubble);border-radius:10px;padding:8px 10px;display:grid}.stat b{font-size:18px}.stat span{font-size:11.5px;color:var(--muted)}
.me-msg{font-weight:600;margin:8px 0 4px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 12px}
.wk{display:grid;justify-items:center;gap:3px;font-size:11px;color:var(--muted)}
.wk i{width:30px;height:30px;border-radius:50%;background:var(--bubble);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--muted)}
.wk.some i{background:rgba(255,138,0,.18);color:#c66a00}.wk.met i{background:#2bb673;color:#fff}
.wk.today span{color:var(--text);font-weight:800}
.me-plans-h{display:flex;justify-content:space-between;align-items:center}
.plan-mini{margin:8px 0 12px}.pm-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.plan-mini .pbar{margin:2px 0 4px}
.pm-today{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chpill{font-size:13px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--bubble)}
.chpill.read{background:rgba(43,182,115,.16);color:#1e8a55}
:root.dark .chpill.read{color:#5fd497}
.plans .plan{margin:10px 0}.plans .plan.active{border-color:rgba(43,182,115,.55)}
.pl-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plans .plan p{margin:6px 0}.plans .pbar{margin:8px 0 4px}
.plans .pl-cats{display:flex;gap:6px;flex-wrap:wrap;background:none;padding:0;margin:16px 0 4px}
.plans .pl-cats button{flex:0 0 auto;padding:8px 13px;border-radius:999px;background:var(--bubble);font-size:13.5px;color:var(--text)}
.plans .pl-cats button.on{background:var(--brand-fill);color:#fff}
.pl-prev{margin-top:8px}.pl-prev summary{cursor:pointer;color:var(--brand);font-size:13px;font-weight:600;padding:4px 0}
.pl-prev ol{list-style:none;margin:6px 0 0;padding:0;max-height:240px;overflow:auto;font-size:13px;border-top:1px solid var(--line)}
.pl-prev li{padding:5px 2px;border-bottom:1px solid var(--line)}.pl-prev li .muted:first-child{display:inline-block;min-width:52px}
.dtoday{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-bottom:8px}
.dt-ring{position:relative;width:56px;height:56px;flex:none}.dt-ring .ring{width:56px;height:56px}.dt-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}
.dt-ring .ring circle{stroke-width:9}
#dsk-today .pbar{margin:6px 0}

/* repost preview */
.rp-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.rp-card .post-head{padding:0 0 6px}
.rp-card .caption{padding:0 0 6px}
.rp-card .embed{margin:4px 0 0}

/* onboarding */
.onb{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.onb.show{opacity:1}
.onb-card{position:relative;width:100%;max-width:520px;max-height:92%;overflow-y:auto;background:var(--card);border-radius:20px 20px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .25s}
.onb.show .onb-card{transform:none}
@media (min-width:600px){ .onb{align-items:center} .onb-card{border-radius:20px} }
.onb-skip{position:absolute;right:18px;top:16px;font-weight:600}
.onb-logo svg{width:56px;height:56px}
.onb h2{margin:10px 0 6px;font-size:22px}
.onb-lead{color:var(--muted);margin:0 0 12px;line-height:1.5}
.onb-list{padding-left:0;list-style:none;display:grid;gap:10px;margin:10px 0 0;font-size:15px}
.onb-tips{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:12px}
.onb-tips li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:6px;font-size:14.5px;line-height:1.4}
.onb-tips li b{width:40px;height:40px;border-radius:12px;background:var(--bubble);display:grid;place-items:center;font-size:17px}
.onb-sample{background:var(--bubble);border-radius:12px;padding:14px;margin:6px 0 14px}.onb-sample .v{display:inline}
.seg{display:flex;background:var(--bubble);border-radius:10px;padding:3px;margin:0 0 10px}
.seg button{flex:1;padding:9px 4px;border-radius:8px;font-weight:600;font-size:13.5px}
.seg button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.onb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--brand);width:18px;border-radius:4px}
.onb .sec-h{margin-top:12px}

/* review dashboard */
.rv-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.rv-tile{background:var(--bubble);border-radius:10px;padding:10px;display:grid}.rv-tile b{font-size:22px}.rv-tile span{font-size:12px;color:var(--muted)}
.rv-tile.hot{background:rgba(224,49,75,.1)}.rv-tile.hot b{color:#e0314b}
.rv-bar{display:grid;grid-template-columns:150px 1fr 28px;align-items:center;gap:8px;font-size:13px;margin:4px 0}
.rv-bar i{height:8px;border-radius:4px;background:var(--brand);display:block;min-width:4px}.rv-bar b{text-align:right}
:root.dark .rq-item{border-color:var(--line)}
:root.dark .rv-text{background:rgba(255,255,255,.04);border-left-color:#555}
:root.dark .pill.edited{background:#1d3355;color:#8db8ff}:root.dark .pill.tabled{background:#4a1f22;color:#ffb4b4}:root.dark .pill.flagged{background:#47361a;color:#ffd38a}

/* dark mode polish */
:root.dark select,:root.dark input,:root.dark textarea{background:var(--bubble);color:var(--text);border-color:var(--line)}
:root.dark .chbtn.read{color:#5fd497}
:root.dark .ver.web{background:#4a4b4d}
:root.dark .reader[data-theme=paper] .ver.web,:root.dark .reader[data-theme=sepia] .ver.web{background:var(--line)}
:root.dark .ver.kjv{background:#4a3d22;color:#f0d9a8}:root.dark .ver.niv{background:#1f3a40;color:#a9dbe5}
:root.dark .votd{background:linear-gradient(160deg,rgba(255,196,77,.1),transparent 55%),var(--card)}
@media (prefers-reduced-motion:reduce){ .reader,.onb,.onb-card,.vsheet{transition:none;animation:none} }
.votd-text .v::after{content:" "}
/* plans in ⭐ Following */
.follow-top{display:grid;gap:10px;margin:0 0 10px}
.follow-top[hidden]{display:none}
.fplan{padding:12px 16px}
.fp-h{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.fp-ic{font-size:20px;line-height:1.2}
.fplan .pm-today{margin:10px 0 4px}
.fplan .btn-row{margin-top:6px}
.fplan-done{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:baseline;width:100%;text-align:left;padding:10px 16px;font-size:14px}
.fp-rows,.fp-sug{list-style:none;margin:8px 0 4px;padding:0}
.fp-rows li,.fp-sug li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.fp-rows li.done{opacity:.75}
.fp-t{min-width:0}
.fp-start .sec-h{margin-top:12px}
.fp-chips{margin-top:6px}
.fp-slim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 14px}
.fp-slim .fp-chips{flex-basis:100%;margin:0}
.fp-slim-acts{display:flex;gap:6px;align-items:center}
.round-btn.sm{width:32px;height:32px;font-size:13px}
.switch-row input[type=checkbox]{flex:none}
.fp-cards #votd:not(.tb-on) .plan-strip{display:none}
/* slim header: search, bell and one avatar menu (Profile, Community, Reviewer dashboard / Admin, Settings, About) */
.appbar{position:relative;z-index:6}
.am-wrap{position:relative}
.avatar-btn{background:var(--brand-fill);color:#fff}
.avatar-btn .av-face{display:grid;place-items:center;font:800 13.5px/1 system-ui,sans-serif;letter-spacing:.02em}
.avatar-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:45;min-width:240px;display:grid;gap:2px;padding:6px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.22);animation:amin .14s ease}
@keyframes amin{from{opacity:0;transform:translateY(-4px)}}
.avatar-menu[hidden]{display:none}
.am-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:10px;background:none;color:var(--text);font-weight:650;font-size:15px;text-align:left}
.am-item:hover,.am-item:focus-visible{background:var(--bubble)}
.am-item svg{width:20px;height:20px;flex:none}
.am-l{flex:1;min-width:0}
.am-sub{font-size:12px;font-weight:700;color:var(--muted)}.am-sub:empty{display:none}
.am-item .streak-dot{position:static}
.am-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--love);color:#fff;font:700 11.5px/20px system-ui,sans-serif;text-align:center}.am-badge:empty{display:none}
#btn-review .am-badge{background:#b3261e}
@media (prefers-reduced-motion:reduce){ .avatar-menu{animation:none} }
/* Verse of the Day, collapsed: one line, height reserved before the app runs (boot script adds .votd-min) */
/* daily Bible question line (trivia.js opens it into a card; its styles are in learn.css, loaded then) */
.tq-line{display:flex;align-items:center;gap:8px;width:100%;height:44px;box-sizing:border-box;padding:0 14px;margin:0;text-align:left;font-size:14px;color:var(--text)}
.tq-line .tq-go{margin-left:auto;color:var(--brand);font-weight:700;white-space:nowrap}
.tq-line.done .tq-go{color:#1d7a3a}:root.dark .tq-line.done .tq-go{color:#7fd69a}
.tq-slot{display:grid}
.votd-strip{display:flex;align-items:center;gap:8px;width:100%;height:48px;box-sizing:border-box;padding:0 14px;margin:0;text-align:left;font-size:14.5px;color:var(--text);background:linear-gradient(100deg,rgba(255,196,77,.16),transparent 60%),var(--card)}
:root.dark .votd-strip{background:linear-gradient(100deg,rgba(255,196,77,.1),transparent 60%),var(--card)}
.votd-strip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.votd-strip .vs-go{color:var(--brand);font-weight:700}
.votd-strip .vs-chev{width:18px;height:18px;margin-left:auto;color:var(--muted)}
.votd:focus{outline:none}
/* whole-Bible progress: profile card + a small ring next to Profile in the avatar menu */
.me-bible{margin:14px 0 4px}.me-bible .pbar{height:8px;border-radius:4px;margin-top:6px}
.am-sub{display:inline-flex;align-items:center;gap:5px}
.am-ring{width:16px;height:16px;border-radius:50%;background:conic-gradient(#2bb673 var(--p,0%),var(--bubble) 0);-webkit-mask:radial-gradient(circle,transparent 4.5px,#000 5px);mask:radial-gradient(circle,transparent 4.5px,#000 5px)}
.vs-row.more{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
/* phones/tablets: the header and the feed chips slide away while you scroll down and come back when you scroll up (or reach the top).
   The header overlays the scroller (fixed height, space reserved by padding) so hiding it never moves the content: no layout shift. */
@media (max-width:1023px){
  :root{--hdr:calc(env(safe-area-inset-top) + 62px)}
  .appbar{position:absolute;top:0;left:0;right:0;height:var(--hdr);box-sizing:border-box;transition:transform .22s ease,box-shadow .22s}
  .scroller{padding-top:var(--hdr);scroll-padding-top:var(--hdr)}
  .feedbar{position:sticky;top:0;z-index:4;border-radius:0;transition:transform .22s ease}   /* sticky offsets count from inside the scroller padding, i.e. just under the header */
  .hdr-away .appbar{transform:translateY(-100%)}
  .hdr-away .feedbar{transform:translateY(calc(-100% - var(--hdr)))}
  .hdr-lift .appbar{box-shadow:0 1px 3px rgba(0,0,0,.12)}
}
@media (max-width:430px){ :root{--hdr:calc(env(safe-area-inset-top) + 52px)} }
@media (max-width:1023px) and (prefers-reduced-motion:reduce){ .appbar,.feedbar{transition:none} }
/* Reflect questions review queue */
.rq-books{margin:8px 0}.rq-books summary{cursor:pointer;margin:4px 0}
.rq-bk{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:8px;font-size:13px;margin:3px 0;width:100%;background:none;border:0;padding:4px 0;color:inherit;text-align:left;cursor:pointer}
.rq-bk.static{cursor:default}.rq-bk b{text-align:right;font-variant-numeric:tabular-nums}
.rq-prog{display:flex;height:8px;border-radius:4px;background:var(--bubble);overflow:hidden}.rq-prog .ok{background:var(--brand)}.rq-prog .no{background:#c9a227}
.rqq .rq-filters select{flex:1;min-width:0}
.rq-range{border:1px dashed rgba(0,0,0,.18);border-radius:10px;padding:8px 10px;margin:8px 0}.rq-range .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.rq-range select{width:auto!important;margin:0 4px!important;padding:4px 6px!important}
.rq-confirm{margin-top:8px;background:rgba(224,49,75,.06);border-radius:8px;padding:8px}
.rq-hd{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rq-hd .rq-open{margin-left:auto}
.rq-q .refl-big{margin:6px 0;font-size:15px;line-height:1.4}
:root.dark .rq-range{border-color:rgba(255,255,255,.2)}
/* ESV section headings and footnotes: reader chapters only */
.rd-text .rd-sh{display:block;font-family:var(--sans,inherit);font-size:calc(15px * var(--scale,1));font-weight:700;line-height:1.35;margin:18px 0 6px;color:var(--text)}
.rd-text .rd-sh:first-child{margin-top:4px}
.rd-text .fn{position:relative;display:inline-block;vertical-align:super;font:600 10.5px/1 var(--sans,system-ui,sans-serif);color:var(--brand);background:none;border:0;padding:0 2px;margin:0 1px;min-width:0;min-height:0;cursor:pointer;border-radius:4px}
.rd-text .fn::after{content:"";position:absolute;inset:-8px -6px}
.rd-text .fn[aria-expanded="true"]{background:var(--brand);color:#fff}
.rd-text .fn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rd-text .fnw{white-space:nowrap}
.fn-pop{position:absolute;left:10px;right:10px;max-width:620px;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;background:var(--card);color:var(--text);border:1px solid var(--line,rgba(0,0,0,.15));border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:10px 12px 12px;max-height:40%;overflow-y:auto}
.fn-pop .fn-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.fn-pop .fn-x{min-width:32px;min-height:32px;border:0;background:none;color:inherit;font-size:16px;cursor:pointer;border-radius:8px}
.fn-pop p{margin:2px 0 0;font-family:var(--serif);font-size:calc(15px * var(--scale,1));line-height:1.45}
/* weekly recap (recap.js) */
.rc{margin:4px 0 14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.rc .hm-head{margin-bottom:8px}.rc .seg{margin:0 0 8px}
.rc-week{margin:4px 0 10px}.wk.fut i{background:transparent;border:1px dashed var(--line)}
.rc-stats{grid-template-columns:repeat(3,1fr)}.rc-stats .stat b small{font-size:.6em;font-weight:600;color:var(--muted)}
.rc-books{margin:8px 0 4px}.rc-msg{margin:8px 0}
.rc-share label{display:block;margin:6px 0}.rc-share textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);resize:vertical}
/* Hot Button issues (hotbutton.js): a red flame in the header that pulses a few times when there's an issue you haven't opened */
.hot-btn svg{fill:#e5322d;stroke:#b3201b;stroke-width:1.2}
.dark .hot-btn svg{fill:#ff5a4f;stroke:#ff8a80}
/* the glow runs until the flame is tapped: a fixed box-shadow on a layer whose opacity/transform animate (compositor only, no repaints) */
.hot-btn.pulse::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 4px rgba(229,50,45,.28),0 0 14px 5px rgba(229,50,45,.5);
  opacity:.2;transform:scale(.92);animation:hbpulse 1.8s ease-in-out infinite;will-change:opacity,transform}
.hot-btn.pulse svg{animation:hbflick 1.8s ease-in-out infinite}
@keyframes hbpulse{0%,100%{opacity:.2;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
@keyframes hbflick{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .hot-btn.pulse::before,.hot-btn.pulse svg{animation:none} .hot-btn.pulse::before{opacity:.7;transform:none} }
#dbtn-hot svg{fill:#e5322d;stroke:#b3201b}
.hb-intro{margin:0 0 10px}
.hb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hb-card{width:100%;text-align:left;display:grid;gap:3px;padding:12px 14px;border-radius:12px;background:var(--bubble);border-left:4px solid #e5322d}
.hb-t{font-weight:700;font-size:15px}
.hb-tags{display:flex;gap:8px;align-items:center;margin-top:2px}.hb-tags .pill{margin-left:0}
.pill.hb-new{background:rgba(229,50,45,.13);color:#b3201b}.dark .pill.hb-new{color:#ff8a80}
.pill.hb-voted{background:rgba(43,182,115,.15);color:#1e8a55}
.hb-manage{margin-top:14px}
.hb-back{display:inline-block;margin-bottom:4px}
.hb-h{margin:4px 0 6px;font-size:19px}
.hb-sum{margin:0 0 4px;line-height:1.45}
.hb-refs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hb-ref{width:100%;min-height:44px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;text-align:left;padding:8px 12px;border-radius:10px;background:var(--bubble)}
.hb-ref b{color:var(--brand);white-space:nowrap}.hb-ref span{color:var(--muted);font-size:13.5px}.hb-ref i{font-style:normal;color:var(--muted);font-size:20px}
@media (max-width:400px){ .hb-ref{grid-template-columns:1fr auto}.hb-ref span{grid-column:1}.hb-ref i{grid-row:1 / span 2;grid-column:2} }
.hb-qq{font-weight:700;font-size:16px;margin:2px 0 8px;padding:0}
.hb-form fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.hb-opt{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);cursor:pointer}
.hb-opt:has(input:checked){border-color:var(--brand);background:rgba(21,89,214,.07)}
.hb-opt input{width:20px;height:20px;margin:0;accent-color:var(--brand-fill)}
.hb-actions{display:flex;gap:14px;align-items:center;margin-top:8px}.hb-actions .primary{padding:10px 22px}
.hb-err:empty{display:none}
.hb-bars{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.hb-bl{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:3px}
.hb-bar{height:10px;border-radius:6px;background:var(--bubble);overflow:hidden}.hb-bar i{display:block;height:100%;background:var(--muted);border-radius:6px}
.hb-bars li.mine .hb-bar i{background:var(--brand-fill)}.hb-you{color:var(--brand);font-weight:700}
.hb-wait{padding:10px 12px;border-radius:10px;background:var(--bubble)}
.hb-foot{margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
.hb-seg{display:flex;gap:6px;margin:8px 0}.hb-seg button{flex:1;padding:8px 6px;border-radius:999px;background:var(--bubble);font-weight:600;font-size:13px}
.hb-seg button[aria-selected="true"]{background:var(--brand-fill);color:#fff}
.hb-ri .hb-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.hb-ri .hb-acts button{padding:8px 12px}
.hb-ed{display:grid;gap:6px}.hb-ed input,.hb-ed textarea{width:100%;font:inherit;padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--text)}
.hb-ed textarea[readonly]{opacity:.7}
.hot-btn{background:rgba(229,50,45,.1)}.hot-btn svg{width:22px;height:22px}

/* theme changes (app Light/Dark/Match device, reader Paper/Sepia/Night): .theme-fade is on <html> (or the reader) for ~0.4s only
   while the theme switches, so colours ease instead of snapping. Colour properties only; nothing on first paint; off with reduced
   motion (app.js never adds it then). Sheets and the reader keep their slide transition alongside. */
.theme-fade,.theme-fade *,.theme-fade *::before,.theme-fade *::after{transition-property:background-color,color,border-color,fill,stroke,box-shadow!important;
  transition-duration:.3s!important;transition-timing-function:ease!important;transition-delay:0s!important}
.theme-fade .sheet,.theme-fade .reader,.reader.theme-fade{transition-property:transform,opacity,background-color,color,border-color!important}
/* Share to everyone: pick verses (next to each other or not) */
.rp-vh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;max-height:150px;overflow-y:auto;padding:2px}
.rp-chip{min-width:44px;height:44px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.rp-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.rp-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rp-vsum{margin:4px 0 0}
.rd-foot .rd-quiz[hidden]{display:none}.rd-foot .rd-quiz{color:var(--brand);font-weight:700}
/* tap targets: the small close buttons keep their look but take a 44px tap */
.votd-x,.fn-pop .fn-x{position:relative}.votd-x::after{content:"";position:absolute;inset:-8px}.fn-pop .fn-x::after{content:"";position:absolute;inset:-6px}
.me-cover-in:empty{aspect-ratio:16/5;border-radius:14px;background:var(--bubble)}.me-addcover{margin-top:2px}
/* streak freeze (2.7.0) */
.me-freeze{display:flex;align-items:center;margin:4px 0 2px;padding:6px 10px;border-radius:10px;background:var(--bubble);border:1px solid color-mix(in srgb,#5aa9e6 35%,transparent);line-height:1.25;font-size:13px;color:var(--muted)}
.me-freeze.used{border-style:dashed}.me-freeze .mf-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wk.frozen i{font-size:13px;background:color-mix(in srgb,#5aa9e6 22%,transparent)}
.hl-sn{width:30px;height:30px}.hl-sn svg{width:15px;height:15px}
.sn-card{margin-top:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);border-left:4px solid #e8c547}.sn-ref{font-weight:700;margin-bottom:6px}.sn-web{margin:0;font-family:Georgia,"Times New Roman",serif;line-height:1.5}.sn-sheet .sn-card{margin:0 0 14px}.sn-sheet textarea{width:100%}