:root{
  --brand:#1559d6; --brand-fill:#1559d6; --on-gold:#fff; --bg:#e9ecf0; --card:#ffffff; --text:#050505; --muted:#65676b; --line:#e4e6eb; --hover:#f2f3f5;
  --line-2:#d9dce2; --card-2:#f4f5f7;
  --bubble:#f0f2f5; --gold:#8a6416; --love:#d61f3c; --chip-ai-bg:#e7f0ff; --chip-ai:#1559d6; --chip-pd-bg:#fbf1dc; --chip-pd:#8a6416;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --scale:1;
}
:root.dark{
  --bg:#131415; --card:#242526; --text:#e4e6eb; --muted:#b0b3b8; --line:#3a3b3c; --hover:#3a3b3c; --bubble:#3a3b3c; --line-2:#46484b; --card-2:#2e2f31;
  --gold:#e0b45e; --chip-ai-bg:#1d3355; --chip-ai:#8db8ff; --chip-pd-bg:#3d3220; --chip-pd:#e8c27a; --brand:#7fb0ff; --brand-fill:#2563d0; --on-gold:#1b1405; --love:#ff6b81;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:var(--sans);color:var(--text);background:#dfe3ea}
:root.dark body{background:#0b0b0c}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:13px;line-height:1.5}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.stage{height:100%;display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:100%;height:100%;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:600px){
  .stage{background:linear-gradient(135deg,#e9edf5,#cfd6e4)}
  :root.dark .stage{background:linear-gradient(135deg,#1a1b1f,#050506)}
  .phone{width:412px;height:min(880px,calc(100vh - 40px));border-radius:44px;
    box-shadow:0 0 0 10px #111,0 0 0 11px #333,0 30px 80px rgba(0,0,0,.35)}
}

/* app bar */
.appbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 14px 6px;background:var(--card)}
.brand{background:none;border:0;padding:0;margin:0;font-family:inherit;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:26px;letter-spacing:-.04em;color:var(--brand)}
.brand svg{width:28px;height:28px;stroke:none}
.appbar-actions{display:flex;gap:8px}
.round-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bubble)}
.round-btn svg{width:21px;height:21px}
.tabbar{flex:none;display:flex;background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:2}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 9px;color:var(--muted);font-weight:600;font-size:14px;border-bottom:3px solid transparent}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab.active svg{fill:currentColor;fill-opacity:.12}
.badge{font-size:11px;background:var(--love);color:#fff;border-radius:9px;padding:1px 6px;font-weight:700}
.badge:empty{display:none}

.scroller{flex:1;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none}
.feed,.saved{display:flex;flex-direction:column;gap:10px;padding:10px 0}
.card{background:var(--card);box-shadow:0 0 0 1px rgba(0,0,0,.035),0 1px 3px rgba(0,0,0,.11)}
:where(:root.dark) .card{box-shadow:0 0 0 1px rgba(255,255,255,.055),0 1px 3px rgba(0,0,0,.5)}
@media (min-width:600px){ .card{border-radius:0} }
.card.pad{padding:14px 16px}
.card.flash{animation:flash 1.4s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:0 1px 2px rgba(0,0,0,.12)}}

/* post */
.post-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.avatar{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,hsl(var(--h,210),62%,52%),hsl(calc(var(--h,210) + 40),60%,38%))}
.post-name{font-weight:700;font-size:15px;line-height:1.2}
[data-bkcard][role="button"]{cursor:pointer}
.post-sub{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}
.post-sub svg{width:12px;height:12px}
.post-sub .ref{font-weight:600;color:var(--muted)}
.post-more{margin-left:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.post-more:hover{background:var(--hover)}
.post-more svg{width:20px;height:20px}
.caption{padding:0 14px 10px;font-size:15px;line-height:1.42}
.ai-tag{display:inline-flex;align-items:center;gap:3px;margin-left:4px;font-size:11px;color:var(--muted);white-space:nowrap}
.ai-tag::before{content:"✦";font-size:9px}

.media{position:relative;background:#000;line-height:0}
.media img,.media video{width:100%;display:block;object-fit:cover;max-height:520px}
.media img{aspect-ratio:var(--ar)}
.media video{aspect-ratio:4/5;background:#111}
.media .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center;transition:opacity .2s,transform .2s;backdrop-filter:blur(4px)}
.media .play svg{width:30px;height:30px;fill:#fff;stroke:none;margin-left:4px}
.media.playing .play{opacity:0;transform:scale(.8);pointer-events:none}
.media .vchip{position:absolute;right:10px;bottom:12px;line-height:1;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:5px 8px;border-radius:6px}
.media .vbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.media .vbar i{display:block;height:100%;width:0;background:var(--brand)}
.credit{padding:6px 14px 0;font-size:11.5px;line-height:1.4;color:var(--muted)}
.credit a{color:var(--muted);text-decoration:underline}
.credit .anim{color:var(--text);font-weight:600}

.passage{margin:10px 14px 0;padding:12px 14px;border-radius:12px;background:var(--bubble)}
.passage-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.ver{font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:5px;text-transform:uppercase}
.ver.web{background:var(--line);color:var(--text)}
.ver.esv{background:var(--gold);color:var(--on-gold)}
.scripture{font-family:var(--serif);font-size:calc(17.5px * var(--scale));line-height:1.55;position:relative}
.scripture.clamp{max-height:calc(17.5px * var(--scale) * 1.55 * 4);overflow:hidden}
.scripture.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6em;background:linear-gradient(transparent,var(--bubble))}
.scripture .v{display:block;margin-bottom:.3em}
.scripture .line{display:inline}
.scripture .line+.line{display:block;padding-left:1.1em}
.scripture sup{font-family:var(--sans);font-size:.62em;font-weight:700;color:var(--gold);margin-right:.25em}
.scripture .esv-mark{font-family:var(--sans);font-size:.75em;color:var(--muted)}
.see-more{font-weight:700;font-size:14px;color:var(--text);margin-top:4px}
.see-more:hover{text-decoration:underline}

.stats{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;font-size:13.5px;color:var(--muted);min-height:38px}
.react-sum{display:flex;align-items:center;gap:6px}
.react-sum .emo{font-size:15px;line-height:1}
.stats .notes-link:hover{text-decoration:underline}
.actions{display:flex;margin:0 10px;border-top:1px solid var(--line);padding:3px 0}
.act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;border-radius:6px;color:var(--muted);font-weight:600;font-size:14px;position:relative;user-select:none;-webkit-user-select:none}
.act:hover{background:var(--hover)}
.act svg{width:20px;height:20px}
.act .emo{font-size:18px;line-height:1}
.act.on.save{color:var(--gold)} .act.on.save svg{fill:currentColor}
.act.r-like{color:var(--brand)} .act.r-like svg{fill:currentColor}
.act.r-love{color:var(--love)} .act.r-amen{color:#c47a12} .act.r-insight{color:var(--brand)} .act.r-moved{color:#3f78b5}
/* reaction icons (heart, like, prayer, sad): the action-button stroke style; filled in the kind's colour when picked */
.r-ic{display:inline-grid;place-items:center;line-height:1;color:inherit;--rc:currentColor}
.r-ic svg{width:1.25em;height:1.25em;display:block}
.r-heart{--rc:var(--love)} .r-like{--rc:var(--brand)} .r-pray{--rc:#c47a12} .r-sad{--rc:#3f78b5}
html.dark .r-pray{--rc:#e8a64a} html.dark .r-sad{--rc:#7fb0e8}
.r-ic.on{color:var(--rc)} .r-ic.on svg .f{fill:currentColor} .r-ic.on svg .k{stroke:var(--card)}
.emo .r-ic svg,.r-ic.emo svg{width:1em;height:1em}
.picker button .r-ic svg{width:30px;height:30px}
.act.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.15)}100%{transform:scale(1)}}
.preview{padding:4px 14px 12px}
.preview .bubble{display:inline-block;max-width:100%;font-size:13.5px;line-height:1.4;background:var(--bubble);border-radius:16px;padding:7px 12px}
.preview .bubble b{display:block;font-size:12.5px}
.preview .bubble span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.preview .view-all{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.preview .view-all:hover{text-decoration:underline}

/* reactions picker */
.picker{position:absolute;z-index:50;display:flex;gap:4px;padding:5px 7px;border-radius:999px;background:var(--card);box-shadow:0 4px 18px rgba(0,0,0,.22);animation:pickin .18s ease}
@keyframes pickin{from{opacity:0;transform:translateY(8px) scale(.9)}}
.picker button{width:42px;height:42px;border-radius:50%;font-size:28px;line-height:1;display:grid;place-items:center;transition:transform .12s;position:relative}
.picker button:hover,.picker button.hot{transform:scale(1.3) translateY(-4px)}
.picker button .tip{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.75);padding:2px 7px;border-radius:9px;opacity:0;white-space:nowrap;pointer-events:none}
.picker button:hover .tip,.picker button.hot .tip{opacity:1}

/* saved */
.saved h2{font-size:19px;margin:0 0 8px}
.saved-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.saved-card{display:flex;gap:12px;align-items:center;padding:8px;border-radius:10px;text-align:left;width:100%}
.saved-card:hover{background:var(--hover)}
.saved-card .thumb{width:64px;height:64px;flex:none;border-radius:8px;object-fit:cover;background:var(--bubble)}
.saved-card .ref{font-weight:700;font-size:14.5px}
.saved-card .snip{font-size:13px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-foot{padding:6px 18px 28px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.linkish{color:var(--brand);font-size:inherit}

/* sheets */
.scrim{position:absolute;inset:0;z-index:38;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;z-index:40;left:0;right:0;bottom:0;height:82%;display:flex;flex-direction:column;background:var(--card);
  border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.sheet.show{transform:none}
.sheet.panel{height:auto;max-height:88%}
.grabber{width:38px;height:4px;border-radius:4px;background:var(--line);margin:8px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:center;position:relative;padding:6px 52px 10px;border-bottom:1px solid var(--line)}
.sheet-head h3{margin:0;font-size:16px;font-weight:700}
.sheet-head .close{position:absolute;right:8px;top:-4px;width:44px;height:44px}
/* close X on sheets and popups: a plain stroke icon like the other buttons (no circle); 44px tap target, a soft tint only on hover/press */
.x-btn{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.x-btn svg{width:22px;height:22px;stroke-width:2}
.x-btn:hover,.x-btn:active{background:var(--hover);color:var(--text)}
.grabber{touch-action:none}
.sheet-body{flex:1;overflow-y:auto;padding:4px 14px 16px;overscroll-behavior:contain}
.sheet-ref{font-size:12.5px;color:var(--muted);padding:10px 0 4px;display:flex;justify-content:space-between;gap:8px}
.ai-banner{margin:6px 0 4px;padding:9px 12px;border-radius:10px;background:var(--chip-ai-bg);font-size:12.5px;line-height:1.45}
.cmt{display:flex;gap:8px;padding:8px 0}
.cmt .avatar{width:34px;height:34px;font-size:15px}
.cmt .body{flex:1;min-width:0}
.cmt .bubble{background:var(--bubble);border-radius:16px;padding:8px 12px;display:inline-block;max-width:100%}
.cmt .who{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmt .txt{font-size:14.5px;line-height:1.45;margin-top:2px}
.cmt .txt blockquote{margin:2px 0 0;font-family:var(--serif);font-size:16px;font-style:italic}
.cmt .src{font-size:11.5px;color:var(--muted);margin-top:4px}
.cmt .cmt-actions{display:flex;gap:14px;padding:3px 12px 0;font-size:12px;color:var(--muted);font-weight:700}
.cmt .cmt-actions button.on{color:var(--brand)}
.cmt .cmt-actions .when{font-weight:400}
.word{margin-top:5px}
.word b{font-family:var(--serif);font-style:italic}
.xref{display:flex;gap:8px;align-items:baseline;margin-top:7px}
.xref-btn{flex:none;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.xref-btn.in-feed{border-color:var(--brand);color:var(--brand)}
.xref-why{font-size:13px;color:var(--muted)}
.chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:999px;text-transform:uppercase}
.chip.ai{background:var(--chip-ai-bg);color:var(--chip-ai)}
.chip.pd{background:var(--chip-pd-bg);color:var(--chip-pd)}
.chip.me{background:var(--line);color:var(--text)}
.composer{display:flex;gap:8px;align-items:center;padding:8px 12px calc(env(safe-area-inset-bottom) + 10px);border-top:1px solid var(--line);background:var(--card)}
.avatar.me{width:32px;height:32px;font-size:10px;background:var(--bubble);color:var(--text)}
.composer input{flex:1;min-width:0;background:var(--bubble);border:0;color:var(--text);border-radius:999px;padding:10px 14px;font-size:14.5px;outline:none}
.post-btn{color:var(--brand);width:36px;height:36px;display:grid;place-items:center}
.post-btn svg{width:22px;height:22px}

.panel-content{padding:14px 2px 10px}
.field-label{font-weight:700;font-size:13px;display:block;margin-bottom:6px}
.token-row{display:flex;gap:8px}
.token-row input,select{flex:1;min-width:0;background:var(--bubble);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font-size:14px;font-family:ui-monospace,Menlo,monospace}
select{flex:none;font-family:var(--sans);padding:7px 10px}
.btn-row{display:flex;gap:8px;margin-top:6px}
.primary{background:var(--brand-fill);color:#fff;font-weight:700;border-radius:8px;padding:10px 16px}
.ghost{background:var(--bubble);border-radius:8px;padding:10px 14px;font-weight:600;font-size:14px}
.ghost.danger{color:#c0263f} :root.dark .ghost.danger{color:#ff8a9a}
.wide{width:100%}
.status{font-size:13px;min-height:18px;margin:10px 0 0}
.status.ok{color:#20a35a}.status.err{color:#e0314b}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.switch-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14.5px}
.switch-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--brand)}
.about h4{margin:18px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.about-logo{display:flex;gap:12px;align-items:center}
.about-logo svg{width:46px;height:46px;flex:none;stroke:none}
.copyright{font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:10px;background:var(--bubble);border-left:3px solid var(--gold)}
.credits{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.credits li{display:flex;gap:10px;align-items:center;font-size:12.5px;line-height:1.4}
.credits img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none}

.toast{position:absolute;z-index:60;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#323436;color:#fff;font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:8px;transition:all .25s;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- v3: modern photo posts ---------- */
.media.photo{background:var(--bubble)}
.media.photo img{aspect-ratio:4/5;max-height:none;width:100%;height:auto;object-fit:cover}
.ai-pill{position:absolute;left:10px;bottom:10px;line-height:1;font-size:11px;font-weight:700;letter-spacing:.01em;color:#fff;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 9px;border-radius:999px}
.post-head .avatar{box-shadow:0 0 0 2px var(--card),0 0 0 4px hsl(var(--h,210),70%,55%)}
.caption{font-size:15px}

/* ---------- v3: reels ---------- */
.reels-strip{display:flex;align-items:center;gap:6px;padding:10px 14px 0;font-size:13px;color:var(--muted)}
.reels-strip svg{width:18px;height:18px;color:#e4405f}
.reels-strip b{color:var(--text)}
.reel-stage{position:relative;overflow:hidden;background:#000;display:flex;justify-content:center;padding:14px 0}
.reel-stage::before{content:"";position:absolute;inset:-30px;background:var(--poster) center/cover;filter:blur(26px) brightness(.55);transform:scale(1.1)}
.reel{position:relative;width:min(74%,300px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);line-height:0}
.reel video{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.reel-top{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;align-items:center;line-height:1}
.reel-badge{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel-badge svg{width:16px;height:16px}
.reel .ai-pill,.viewer .ai-pill{position:static;font-size:10px;padding:5px 8px}
.reel-bottom{position:absolute;left:10px;right:10px;bottom:12px;display:flex;justify-content:space-between;line-height:1;font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.reel-time{background:rgba(0,0,0,.5);padding:4px 6px;border-radius:5px}
.reel .play,.viewer .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(0,0,0,.5);
  display:grid;place-items:center;transition:opacity .2s,transform .2s;backdrop-filter:blur(4px);pointer-events:none}
.reel .play svg,.viewer .play svg{width:28px;height:28px;fill:#fff;stroke:none;margin-left:4px}
.reel.playing .play,.viewer.playing .play{opacity:0;transform:scale(.8)}
.reel .vbar,.viewer .vbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.reel .vbar i,.viewer .vbar i{display:block;height:100%;width:0;background:#fff}
.is-reel .credit{padding-top:8px}

.viewer{position:absolute;inset:0;z-index:35;background:#000;color:#fff;opacity:0;transform:scale(.96);transition:opacity .22s,transform .22s}
.viewer.show{opacity:1;transform:none}
.viewer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 14px 30px;
  background:linear-gradient(rgba(0,0,0,.5),transparent);font-size:18px}
.viewer-top .ai-pill{margin-left:auto}
.vclose{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.15);color:#fff}
.vclose svg{width:22px;height:22px}
.viewer-rail{position:absolute;right:8px;bottom:170px;display:flex;flex-direction:column;gap:16px}
.vact{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;font-size:11.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vact .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.vact svg{width:24px;height:24px}
.vact .emo{font-size:24px;line-height:1}
.vact.on.save svg{fill:#ffd60a;stroke:#ffd60a}
.viewer-info{position:absolute;left:0;right:70px;bottom:0;padding:40px 14px calc(env(safe-area-inset-bottom) + 20px);background:linear-gradient(transparent,rgba(0,0,0,.65))}
.vi-head{display:flex;align-items:center;gap:8px;font-size:14.5px}
.vi-head .avatar{width:32px;height:32px;font-size:11px}
.vi-head span{opacity:.8;font-size:12.5px}
.viewer-info p{margin:8px 0 6px;font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.viewer-info .ai-tag{color:rgba(255,255,255,.75)}
.viewer-info small{font-size:11px;opacity:.75}

/* ---------- v3: comment filters & debates ---------- */
.filters{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:10px 0 8px;background:var(--card);overflow-x:auto;scrollbar-width:none}
.fchip{flex:none;font-size:13.5px;font-weight:700;padding:7px 13px;border-radius:999px;background:var(--bubble);color:var(--text)}
.fchip span{font-weight:600;color:var(--muted);margin-left:2px}
.fchip.on{background:var(--brand-fill);color:#fff}
.fchip.on span{color:rgba(255,255,255,.85)}
.sec-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.debate-banner{margin:6px 0 4px;padding:9px 12px;border-radius:10px;background:var(--chip-pd-bg);font-size:12.5px;line-height:1.45}
.thread{border-bottom:1px solid var(--line);padding-bottom:4px}
.thread:last-child{border-bottom:0}
.cmt.reply{margin-left:42px;position:relative;padding-top:4px}
.cmt.reply::before{content:"";position:absolute;left:-26px;top:-6px;width:18px;height:26px;border-left:2px solid var(--line);border-bottom:2px solid var(--line);border-bottom-left-radius:10px}
.cmt.reply .avatar{width:28px;height:28px;font-size:12px}
.cmt .txt{font-size:14px}
.chip.sm{font-size:9px;padding:1px 5px}
.empty{padding:24px 6px;text-align:center;color:var(--muted);font-size:14px}
.preview-chips{display:flex;gap:6px;margin:0 0 8px;flex-wrap:wrap}
.pchip{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--bubble);color:var(--text)}

.wordmark{font-weight:800;letter-spacing:-.045em;color:var(--brand)}
.wordmark b{font-weight:800;color:#0b3d91}

/* ---- v4: bottom tabs, whole-Bible feed, read/follow/repost ---- */
.tabbar{border-bottom:0;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex-direction:column;gap:2px;font-size:11.5px;padding:7px 0 6px;border-bottom:0;border-top:3px solid transparent;position:relative}
.tab.active{border-top-color:var(--brand)}
.tab .badge{position:absolute;top:3px;left:calc(50% + 6px)}
.feedbar{padding:10px 12px;display:grid;gap:8px}
.modes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.modes button{flex:none;padding:7px 12px;border-radius:18px;background:var(--bubble);font-weight:600;font-size:13.5px;color:var(--text)}
.modes button.on{background:var(--brand-fill);color:#fff}
.progress-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.pbar{flex:1;height:6px;border-radius:3px;background:var(--bubble);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2bb673,var(--brand));transition:width .4s}
#continue-btn{justify-self:start;font-weight:700;color:var(--brand);font-size:13.5px}
.feed-more{text-align:center;color:var(--muted);font-size:13px;padding:4px 16px 14px}
.ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);transition:height .15s}
.ptr.ready{color:var(--brand);font-weight:700}
.textcard{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 18px 16px;color:#fff;
  background:linear-gradient(135deg,hsl(var(--h) 62% 42%),hsl(calc(var(--h) + 40) 70% 28%));position:relative;overflow:hidden}
.textcard::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.tc-ref{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.tc-sum{font-size:14.5px;opacity:.92;margin-top:6px;line-height:1.35}
.follow{margin-left:auto;flex:none;font-size:13px;font-weight:700;color:var(--brand);padding:6px 10px;border-radius:8px;background:var(--bubble)}
.follow.on{color:var(--muted)}
.post-head{gap:10px}
.readmark{display:none;margin-left:6px;color:#fff;background:#2bb673;border-radius:50%;width:15px;height:15px;font-size:10px;line-height:15px;text-align:center;font-weight:800}
.post.is-read .readmark{display:inline-block}
.readbtn{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--muted);padding:3px 8px;border-radius:12px;background:var(--bubble)}
.readbtn.on{color:#1e8a55;background:rgba(43,182,115,.14)}
.react-sum{display:flex;align-items:center}
.act{font-size:12.5px;gap:4px}
.act svg{width:18px;height:18px}
.empty-state{text-align:center;padding:18px 10px}
.empty-state .big{font-size:40px}
.share-list{display:flex;flex-direction:column;gap:10px}
.repost .caption{padding:0 14px 10px}
.embed-wrap{display:block;width:calc(100% - 28px);margin:0 14px 10px;text-align:left;border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:0}
.embed{display:flex;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:10px 0}
.embed-wrap .embed{border:0;margin:0}
.embed img,.embed-tc{width:96px;flex:none;object-fit:cover;min-height:96px}
.embed-tc{display:flex;align-items:flex-end;padding:8px;color:#fff;font-weight:800;font-size:13px;background:linear-gradient(135deg,hsl(var(--h) 62% 42%),hsl(calc(var(--h) + 40) 70% 28%))}
.embed-body{padding:10px 12px;min-width:0}
.embed .ref{font-size:13px;color:var(--brand);font-weight:700}
.embed .snip{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#rp-caption,#jump-q{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:var(--bubble);color:var(--text)}
.primary.wide{width:100%;margin:6px 0}
.jump-progress{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:10px 0}
.book-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.book-open{flex:1;display:grid;grid-template-columns:14px 1fr auto 60px;gap:10px;align-items:center;padding:10px 4px;text-align:left}
.book-open .dot{width:12px;height:12px;border-radius:4px;background:hsl(var(--h) 62% 45%)}
.bn{font-weight:600}.bp{font-size:12.5px;color:var(--muted)}
.minibar{height:4px;background:var(--bubble);border-radius:2px;overflow:hidden}.minibar i{display:block;height:100%;background:#2bb673}
.star{font-size:20px;padding:6px 8px;color:var(--muted)}.star.on{color:#f0a500}
.theme-chips{display:flex;flex-wrap:wrap;gap:6px}
.jump-hit{display:block;width:100%;text-align:left;padding:12px;border-radius:10px;background:var(--bubble);margin-bottom:8px;color:var(--brand)}
.jb-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.chbtn{padding:10px 0;border-radius:8px;background:var(--bubble);font-weight:600}
.chbtn.read{background:rgba(43,182,115,.18);color:#1e8a55}
.chbtn.read::after{content:" ✓";font-size:11px}
/* ---- swipeable Shorts ---- */
.viewer .vscroll{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.viewer .vscroll::-webkit-scrollbar{display:none}
.vslide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;overflow:hidden}
.vslide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vslide.playing .play{opacity:0;transform:scale(.8)}
.vslide .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:.2s;pointer-events:none}
.vslide .play svg{width:28px;height:28px;fill:#fff;stroke:none;margin-left:4px}
.vslide .vbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.vslide .vbar i{display:block;height:100%;width:0;background:#fff}
.viewer-top{z-index:3;pointer-events:none}.viewer-top button{pointer-events:auto}
.vmute{margin-left:auto;font-size:12.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:14px}
.install-btn{font-size:12.5px;font-weight:700;color:#fff;background:var(--brand-fill);padding:7px 10px;border-radius:16px}
.viewer-top .vmute{position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 62px)}
/* ---- Shorts as a left-side panel ---- */
.scroller{touch-action:pan-y}
.viewer{opacity:1;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:8px 0 30px rgba(0,0,0,.35)}
.viewer.show{transform:none}
.viewer.drag{transition:none}
.shorts-hint{position:absolute;left:12px;bottom:calc(env(safe-area-inset-bottom) + 66px);z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.25);background:rgba(20,20,20,.82);color:#fff;font-size:13px;font-weight:700;padding:8px 12px;border-radius:16px;
  opacity:0;transform:translateX(-12px);transition:opacity .4s,transform .4s;pointer-events:none}
.shorts-hint.show{opacity:1;transform:none;animation:nudge 1.4s ease-in-out 2}
@keyframes nudge{50%{transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){ .shorts-hint.show{animation:none} .shorts-hint{transition:opacity .2s} }
.viewer .vscroll{touch-action:pan-y}
/* ---- tab pager ---- */
.scroller{transition:transform .18s ease-out;will-change:transform}
.scroller.drag{transition:none}
/* ---- accounts ---- */
.auth{position:absolute;inset:0;z-index:60;background:var(--bg);overflow-y:auto;padding:56px 18px 30px;display:flex;flex-direction:column;align-items:center}
.auth-x{position:absolute;right:12px;top:12px}
.auth-brand{display:flex;align-items:center;gap:10px}.auth-brand svg{width:44px;height:44px}.auth-brand .wordmark{font-size:34px}
.auth-tag{text-align:center;color:var(--text);font-size:16px;line-height:1.35;max-width:320px;margin:12px 0 18px}
.auth-card{width:100%;max-width:380px;background:var(--card);border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.12);padding:16px;display:grid;gap:10px}
.auth-card input,.pw input{width:100%;box-sizing:border-box;border:1px solid #dddfe2;border-radius:8px;padding:13px 14px;font:inherit;font-size:16px;background:var(--card);color:var(--text)}
.auth-card input:focus,.pw input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(27,110,243,.2)}
.auth-card hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.auth-err{color:#e0314b;font-size:13.5px;margin:0;min-height:0}
.center{text-align:center}
.green{background:#2a7d1b;color:#fff;font-weight:700;border-radius:8px;padding:11px 16px;font-size:16px}
.wide{width:100%}
.account-box .btn-row{display:flex;gap:8px}
.acct{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.pw{margin:8px 0}.pw summary{cursor:pointer;font-weight:600;padding:6px 0}.pw input{margin:6px 0}
.set-h{margin:4px 0 8px}
.modal-wrap{position:absolute;inset:0;z-index:80;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border-radius:14px;padding:18px;max-width:340px}.modal h3{margin:0 0 6px}.modal p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.modal .btn-row{display:flex;gap:8px;justify-content:flex-end}
.admin-box{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);min-width:0}.admin-box>*{min-width:0}
.adm-new{display:grid;gap:6px}.adm-new input,.adm-new select{border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit;background:var(--bubble);color:var(--text)}
/* admin rows: text first, actions wrap below when there's no room (never squeeze the text column) */
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 0;border-bottom:1px solid var(--line)}.adm-row>div{flex:1 1 14rem;min-width:0;overflow-wrap:break-word}
.adm-row .ghost{padding:6px 9px;font-size:12.5px}
.adm-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:0 1 auto!important}
.adm-acts select,#panel-body .adm-acts select{width:auto;max-width:100%;margin:0;padding:6px 8px;font-size:13px;border-radius:8px;border:1px solid var(--line);background:var(--bubble);color:var(--text)}
.adm-user{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.adm-user>.adm-who,.adm-user>.adm-email{grid-column:1}.adm-user>.adm-acts{grid-column:2;grid-row:1/3;justify-content:flex-end}
@media (max-width:560px){.adm-user{grid-template-columns:minmax(0,1fr)}.adm-user>.adm-acts{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:6px}}
.adm-email{display:flex;align-items:baseline;gap:8px;min-width:0;max-width:100%}
.adm-em{flex:0 1 auto;min-width:0;padding:0;background:none;border:0;font:inherit;font-size:13px;color:var(--muted);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.adm-email.strong .adm-em{font-size:15px;font-weight:700;color:var(--text)}
.adm-email.full .adm-em{white-space:normal;overflow-wrap:anywhere}
.adm-emcopy{flex:none;font-size:12.5px}
.sreq-row .adm-email{margin-bottom:2px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;background:var(--bubble);color:var(--muted);margin-left:4px}
.pill.active{background:rgba(43,182,115,.15);color:#1e8a55}.pill.revoked,.pill.expired{background:rgba(224,49,75,.12);color:#e0314b}
.phone{overflow:clip}
.cmt .src a{color:var(--brand,#1b6ef3);text-decoration:underline}
/* ---------- desktop: 3-column layout (>=1024px); phones keep the UI above ---------- */
.dsk-left,.dsk-right,.vnav{display:none}
@media (min-width:1024px){
  .stage{background:var(--bg)!important}
  .phone{width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(0,660px) minmax(280px,1fr);grid-template-rows:auto 1fr;column-gap:28px}
  .appbar{grid-column:1/-1;padding:10px 18px;box-shadow:0 1px 2px rgba(0,0,0,.1);z-index:5}
  .tabbar,#ptr,.shorts-hint{display:none!important}
  .scroller{grid-column:2;grid-row:2;scrollbar-width:thin}
  .card{border-radius:10px!important}
  .dsk-left,.dsk-right{display:block;grid-row:2;overflow-y:auto;padding:16px 8px 24px;scrollbar-width:thin}
  .dsk-left{grid-column:1;justify-self:end;width:100%;max-width:280px;min-width:0}
  .dsk-right{grid-column:3;justify-self:start;width:100%;max-width:320px;min-width:0;display:flex;flex-direction:column;gap:12px}
  .dnav{display:flex;flex-direction:column;gap:2px}
  .dnav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-weight:600;font-size:15px;text-align:left}
  .dnav button:hover,.dfollow:hover,.drow button:hover{background:var(--hover)}
  .dnav button.on{background:var(--hover);color:var(--brand)}
  .dnav svg{width:24px;height:24px;flex:none}
  .dnav hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
  .dh{margin:14px 12px 6px;font-size:15px;color:var(--muted)}
  .dcard .dh{margin:0 0 10px;color:var(--text)}
  .dcard{padding:14px 16px}
  .dfollows{display:flex;flex-direction:column;padding:0 4px}
  .dfollow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;font-weight:600;text-align:left}
  .dfollows .linkish{margin:4px 8px;text-align:left}
  .dot{width:12px;height:12px;border-radius:50%;flex:none;background:hsl(var(--h,210),60%,50%)}
  .drow{display:flex;align-items:center;gap:10px;width:100%;padding:6px 0;font-size:14px}
  .drow .linkish{flex:1;text-align:left;color:var(--text);font-weight:600}
  button.drow span:first-child{flex:1;text-align:left;font-weight:600}
  .drow .minibar{width:80px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.drow .minibar i{display:block;height:100%;background:#2bb673}
  .dtopics{display:flex;flex-wrap:wrap;gap:6px}
  .dkeys{padding:16px 12px}.dkeys kbd{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 4px;background:var(--card)}
  /* notes: right side panel; other panels: centered modal */
  .scrim{position:fixed}
  .sheet{position:fixed;left:auto;top:0;right:0;bottom:0;width:460px;height:100%;border-radius:0;transform:translateX(105%);box-shadow:-8px 0 30px rgba(0,0,0,.2)}
  .sheet .grabber{display:none}
  .sheet-head{padding:14px 52px 12px}.sheet-head .close{top:8px}
  .sheet.panel{left:50%;top:50%;right:auto;bottom:auto;width:min(600px,90vw);height:auto;max-height:84vh;border-radius:14px;
    transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:transform .22s,opacity .22s}
  .sheet.panel.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  /* Shorts: centered 9:16 player */
  .viewer{position:fixed;inset:0;background:rgba(0,0,0,.94);transform:none;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:none}
  .viewer.show{opacity:1;pointer-events:auto}
  .viewer .vscroll{left:50%;right:auto;top:16px;bottom:16px;width:calc((100vh - 32px) * 9 / 16);transform:translateX(-50%);border-radius:14px}
  .viewer-top{background:none}
  .viewer-top .vmute{top:20px;right:24px}
  .vnav{position:absolute;right:calc(50% - (100vh - 32px) * 9 / 32 - 74px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:4}
  .vnav button{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px}
  .vnav button:hover{background:rgba(255,255,255,.3)}
  .auth,.modal-wrap{position:fixed}
}
.read-full{display:block;margin:10px 0 2px;font-weight:700;color:var(--brand);font-size:14px}
.chapter-read .scripture{font-family:var(--serif);font-size:calc(17px * var(--scale));line-height:1.6}
.reel-still{position:relative}.reel-still img{display:block;width:100%;height:auto;object-fit:cover}
.watch-reel{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:13px;padding:7px 12px;border-radius:16px}
.watch-reel svg{width:18px;height:18px}
.viewer-top .vnarr{position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 100px);display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:14px}
.vnarr svg{width:16px;height:16px}.vnarr[aria-pressed="true"]{background:rgba(27,110,243,.85)}
@media (min-width:1024px){.viewer-top .vnarr{top:58px;right:24px}}
.cmt .posted{font-size:12px;color:var(--muted);margin:-1px 0 4px}
/* reviewer tools */
.flag-btn{margin-left:auto;background:none;border:0;color:var(--muted,#888);font:inherit;font-size:12px;cursor:pointer;padding:2px 6px;border-radius:6px}
.flag-btn:hover{color:#c0392b;background:rgba(192,57,43,.08)}
.pill.edited{background:#e8f0fe;color:#1a56b0}.pill.tabled{background:#fdecea;color:#b3261e}.pill.flagged{background:#fff4e0;color:#8a5a00}
.rv-text{margin:8px 0;padding:8px 10px;border-left:3px solid #ccc;background:rgba(0,0,0,.03);white-space:pre-wrap}
.rv-note{margin:6px 0;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.04);font-size:14px}.rv-cmt{margin-left:16px}
#panel-body select,#panel-body textarea,.rq-item textarea{width:100%;box-sizing:border-box;margin:6px 0;font:inherit;padding:8px;border-radius:8px;border:1px solid #ccc}
.rq-item{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:10px;margin:8px 0}.rq-item .row,.rq-filters{display:flex;gap:6px;flex-wrap:wrap}

.viewer.cur-verse .vnarr{visibility:hidden}
.share-verses{margin:8px 16px;padding:8px 12px;border-left:3px solid #c9a227;font-family:Georgia,serif;line-height:1.5}.share-verses sup{opacity:.6;margin-right:2px}.rp-range{margin:8px 0}.rv-tools{display:flex;gap:6px;padding:6px 16px}.right{text-align:right}
/* notifications bell + panel */
.round-btn.bell{position:relative}
.round-btn.bell.lit svg{stroke:var(--brand)}
.bell-count{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--love);color:#fff;font:700 10.5px/17px system-ui,sans-serif;text-align:center}
.bell-count:empty{display:none}
.notif-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 10px}
.notif-top .linkish[disabled]{opacity:.45;pointer-events:none}
.notif{display:flex;gap:10px;width:100%;text-align:left;padding:11px 10px;border-radius:12px;margin-bottom:6px;background:var(--bubble)}
.notif .dot{flex:0 0 9px;height:9px;margin-top:5px;border-radius:50%;background:transparent}
.notif.unread .dot{background:var(--brand)}
.notif .nt{display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.4;min-width:0}
.notif .nt .when{font-size:11.5px;opacity:.65}
.notif-item{margin-bottom:6px;border-radius:12px;background:var(--bubble)}.notif-item .notif{margin-bottom:0;background:none}
.notif-acts{display:flex;gap:8px;padding:0 10px 11px 29px}
.notif:not(.unread) .nt b{font-weight:600;opacity:.85}
/* translation debates, affiliation notes */
.tthread-h{font-size:12px;font-weight:700;color:var(--chip-ai);margin:2px 0 4px 46px}
.tag-notes{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 5px}
.tag-note{font-size:11px;font-weight:600;padding:2px 7px;border-radius:7px;line-height:1.5}
.tag-note.outside{background:#fde8e8;color:#9b1c1c}
.tag-note.disputed{background:#fff1d6;color:#8a5300}
:root.dark .tag-note.outside{background:#4a1f22;color:#ffb4b4}
:root.dark .tag-note.disputed{background:#47361a;color:#ffd38a}
.tcompare{margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:var(--card,rgba(127,127,127,.08));border:1px solid rgba(127,127,127,.18);font-size:12.5px;line-height:1.45}
.tc-h{font-weight:700;font-size:12px;margin-bottom:5px}
.tc-row{display:flex;gap:7px;align-items:flex-start;margin:4px 0}
.tc-row .ver{flex:0 0 auto;margin-top:1px}
.tc-row .tc-t sup{font-size:9px}
.ver.kjv{background:#efe7d9;color:#6b4a14}
.ver.niv{background:#e4eef0;color:#24545e}
.ver.nlt{background:#e9e4f2;color:#4b3779}
.ver.csb{background:#f2e4e4;color:#7a2e2e}
:root.dark .ver.niv{background:#1d3a40;color:#bfe3ea}:root.dark .ver.nlt{background:#33294a;color:#dcd0f5}:root.dark .ver.csb{background:#452626;color:#f3caca}
.scripture.lic{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lic-cite,.lic-cap{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted);margin:6px 0 0}
.lic-cap{font-size:12px}
.push-hint{background:rgba(24,119,242,.08);border:1px solid rgba(24,119,242,.25);border-radius:10px;padding:8px 10px;margin:6px 0 2px;line-height:1.4}
:root.dark .push-hint{background:rgba(45,136,255,.12);border-color:rgba(45,136,255,.3)}
.vp-box{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}.vp-box .status:empty{display:none}
.switch-row .small{font-weight:400}
#panel-body .switch-row select{width:auto;margin:0 0 0 12px}

/* ---------- QA pass (Oct 2026): layout, contrast, focus, tap targets, motion ---------- */
@media (min-width:1024px) and (max-width:1279px){ .phone{column-gap:16px;grid-template-columns:minmax(220px,1fr) minmax(0,640px) minmax(260px,1fr)} }
:root.dark .wordmark b{color:#cfe0ff}
.saved-card .thumb.avatar{background:hsl(var(--h,210),55%,30%);color:#fff;display:grid;place-items:center;font-weight:700}
.viewer-info small{opacity:1;color:rgba(255,255,255,.85)}
.viewer-info a{color:#a9cbff;text-decoration:underline}
footer a,p a,.passage-label a,.credit a,.small a{text-decoration:underline;text-underline-offset:2px}
/* keyboard focus: always visible (WCAG 2.4.7 / 2.4.11) */
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.composer input:focus-visible,.auth-card input:focus-visible,.pw input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.viewer :focus-visible,.reel :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.6)}
.reel .play:focus-visible{opacity:1!important;transform:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sheet:not(.show){visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s,visibility 0s .33s}
/* tap targets: 44px for primary controls, 24px+ for inline text buttons (WCAG 2.5.8) */
.act{min-height:44px}
.modes button,.fchip{min-height:40px}
.follow{min-height:36px;padding:8px 12px;position:relative}
.follow::after{content:"";position:absolute;inset:-4px 0}
.post-btn{min-width:44px;min-height:44px}
.vact,.vclose{min-height:44px;min-width:44px}
.vmute,.viewer-top .vnarr{min-height:40px}
.viewer-top .vnarr{top:calc(env(safe-area-inset-top) + 110px)}
@media (min-width:1024px){.viewer-top .vnarr{top:68px}}
.linkish,.pchip,.flag-btn,button.drow,.drow .linkish,.dfollows .linkish{min-height:28px}
.read-full,.view-all,.readbtn,.notes-link,.cmt .cmt-actions button{min-height:28px;padding-top:4px;padding-bottom:4px}
.passage-label a{display:inline-block;padding:5px 2px;margin:-5px 0}
.pchip{padding-top:6px;padding-bottom:6px}
.update-bar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 70px);transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:12px;
  background:#1c1e21;color:#fff;border-radius:12px;padding:8px 8px 8px 16px;box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:14px;max-width:calc(100vw - 24px)}
.update-bar button{min-height:40px;padding:0 14px;border-radius:8px;background:var(--brand-fill);color:#fff;font-weight:700}
.update-bar button.x{background:none;min-width:40px;padding:0}
.feed[aria-busy]{min-height:150vh}
#ptext:empty::before{content:"\00a0"}
.skel{background:var(--card);border-radius:0;padding:14px 16px;margin-bottom:10px}
.skel i{display:block;height:12px;border-radius:6px;background:var(--line);margin:10px 0}
.skel i.h{width:45%;height:14px}.skel i.b{height:220px;border-radius:8px}.skel i.s{width:70%}
.retry{margin-top:8px;min-height:36px;padding:0 14px;border-radius:8px;background:var(--bubble);font-weight:700;color:var(--text)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
/* compact phone app bar (plus.css shrinks the round buttons to 34px): keep a 40x44 hit area without changing the look */
@media (max-width:430px){ .appbar .round-btn::after{content:"";position:absolute;inset:-5px -3px} }
/* reserve room for content plus.js fills in after the first render (no layout shift): Verse of the Day card and the desktop Today card */
#votd:empty{display:block;min-height:48px;margin-bottom:10px}   /* the top bar (topbar.js, 48px) holds the Verse of the Day, plans, Live it out and notices; reserved before the app runs */
.votd-text{min-height:calc(var(--votd-lines,3) * 1.55em)}.votd-label{min-height:18px}
@media (min-width:1024px){ #dsk-today:empty{min-height:92px} #dsk-progress{display:flow-root;min-height:calc(51.5px + var(--dprog,0) * 28px)} #dsk-books:empty{min-height:240px} #dsk-follows:empty{min-height:65px} }
#ptext{font-variant-numeric:tabular-nums}

/* static first card for a first visit (index.html): paints before the scripts run; app.js replaces it */
.pre-card{display:none}
html.fresh .pre-card{display:block}
html.fresh #feed .skel:first-of-type{display:none}
.pre-poster{width:100%;height:100%;background:#111 var(--poster) center/cover}
.rd-label a{display:inline-block;padding:5px 2px}
/* book introduction card (shell from app.js; its body is filled and styled by extras.js / extras.css) */
.bk-intro{margin:10px 12px 0;border:1px solid var(--line);border-radius:12px;background:var(--bubble)}
.bk-intro>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:48px;cursor:pointer;list-style:none}
.bk-intro>summary::-webkit-details-marker{display:none}
.bk-intro>summary::after{content:"▾";margin-left:6px;color:var(--muted);transition:transform .2s}.bk-intro[open]>summary::after{transform:rotate(180deg)}
.bk-intro .bi-ic{font-size:20px}.bk-intro .bi-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.bk-intro .bi-body{padding:0 14px 12px}
.reader .bk-intro{margin:6px 0 14px}
.off-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:4px;vertical-align:1px}
.pill.sent{background:rgba(27,110,243,.13);color:var(--brand)}.pill.used{background:rgba(43,182,115,.15);color:#1e8a55}
.inv-count{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:6px}
.inv-row{flex-wrap:wrap}.inv-row>div{flex:1 1 100%}
.handle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bubble);border-radius:12px;padding:10px 12px;margin:10px 0 4px}
.handle{font-size:16px;letter-spacing:.01em;overflow-wrap:anywhere}
.handle-row .ghost{background:var(--card)}
/* one compact type badge on reels; the AI disclosure is the credit line, once */
.reel-badge{background:rgba(0,0,0,.5);padding:4px 8px 4px 6px;border-radius:999px;text-shadow:none}
.credit .ai-note{color:var(--text);font-weight:700}
/* collapsed long lists in study notes / debates */
.tmore{display:block;width:100%;min-height:44px;margin:4px 0 10px;border-radius:10px;background:var(--bubble);color:var(--brand);font-weight:700;font-size:14px}
.tmore.reply{width:auto;margin-left:46px;padding:0 14px;min-height:40px;background:none;text-align:left}
.tmore:hover{background:var(--hover)}
/* commentator profile card (app.js showCmtr): bottom sheet on phones, centered card on wider screens */
.who-btn{font:inherit;font-weight:700;color:inherit;padding:0;background:none;border:0;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer;min-height:24px}
.who-btn:hover,.who-btn:focus-visible{color:var(--brand)}
.cmtr-dlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:520px;max-height:85vh;background:var(--bg);color:var(--text);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.cmtr-dlg::backdrop{background:rgba(0,0,0,.4)}
@media (min-width:700px){.cmtr-dlg{margin:auto;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25)}}
.cmtr-in{position:relative;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.cmtr-x{position:absolute;top:6px;right:6px}
.cmtr-top{display:flex;gap:14px;align-items:center;margin:4px 40px 10px 0}.cmtr-top .avatar{width:52px;height:52px;flex:none;font-size:18px}
.cmtr-top h3{margin:0 0 2px;font-size:19px;overflow-wrap:anywhere}.cmtr-yrs{font-weight:600}
.cmtr-trad{margin:8px 0}.cmtr-bio{margin:8px 0;line-height:1.5}.cmtr-src{margin:8px 0}
.cmtr-list{margin-top:12px}.cmtr-chs{display:flex;flex-wrap:wrap;gap:6px}.cmtr-more{display:contents}.cmtr-more[hidden]{display:none}
.cmtr-ch{font-size:13px;padding:6px 10px;border-radius:14px;background:var(--bubble);color:var(--text);border:1px solid var(--line);min-height:32px}
.cmtr-note{margin:12px 0 0}
/* book profile card: a book's avatar is a button that opens its card (extras.js showBookCard) */
.avatar.bk-av{border:0;padding:0;cursor:pointer;font-family:inherit}
.avatar.bk-av:focus-visible{outline:3px solid var(--accent,#2563eb);outline-offset:3px}
.bk-joined{font-size:15px;margin-top:2px}
.bk-ih{margin:14px 0 6px;font-size:17px}
.bi-kv{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 4px}
.bi-kv .bi-k{min-height:32px}
.bi-kv-src{margin-bottom:8px}
/* a person's name that opens their profile card (app.js pname) */
.pf-n{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;border-radius:4px}.pf-n:hover{text-decoration-color:currentColor}.pf-n:focus-visible{outline:2px solid var(--accent,#2b6cff);outline-offset:2px}
/* ---------- shared form fields (2.2.1): one look for every text box, text area and menu in the app ----------
   :is(body,#ff) lifts this above the older per-sheet rules (#panel-body textarea, .adm-new input…), so every field matches. Opt out
   with class="ff-off" (the feed composer's pill keeps its own look). Checkboxes, radios, ranges and file pickers are untouched. */
:root{--ff-bg:#fff;--ff-line:#cfd4dc;--ff-line-h:#aab1bd;--ff-ring:rgba(21,89,214,.22)}
:root.dark{--ff-bg:#2e2f31;--ff-line:#4a4c50;--ff-line-h:#6a6d72;--ff-ring:rgba(127,176,255,.28)}
:is(body,#ff) :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=datetime-local],textarea,select):not(.ff-off):not(.composer *){
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--text);background-color:var(--ff-bg);border:1px solid var(--ff-line);border-radius:12px;
  padding:10px 14px;min-height:44px;box-sizing:border-box;outline:none;box-shadow:none;transition:border-color .15s,box-shadow .15s;max-width:100%}
:is(body,#ff) textarea:not(.ff-off):not(.composer *){min-height:88px;resize:vertical;line-height:1.5}
:is(body,#ff) select:not(.ff-off):not(.composer *){-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
:is(body,#ff) :is(input,textarea,select):not(.ff-off):not(.composer *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover{border-color:var(--ff-line-h)}
:is(body,#ff) :is(input,textarea,select):not(.ff-off):not(.composer *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
:is(body,#ff) :is(input,textarea,select):not(.ff-off):not(.composer *):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus-visible{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ff-ring)}
:is(body,#ff) :is(input,textarea)::placeholder{color:var(--muted);opacity:.85;font-family:var(--sans)}
:is(body,#ff) :is(input,textarea,select):disabled{opacity:.6;cursor:not-allowed}
/* labels right above a field: the same gap everywhere */
:is(body,#ff) label:has(+ :is(input,textarea,select)){display:block;margin:14px 0 6px;font-weight:600;line-height:1.35}
:is(body,#ff) label:first-child:has(+ :is(input,textarea,select)){margin-top:2px}
:is(body,#ff) label + :is(input,textarea,select){margin-top:0}
/* button rows: equal gaps, wrap on narrow screens, same heights */
.btn-row{flex-wrap:wrap;gap:10px;margin-top:10px}
.btn-row>button,.btn-row>.btn,.btn-row>a.ghost{min-height:44px}
.btn-row .small{min-height:36px}
/* Settings: the closing buttons in one tidy grid */
.set-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.set-acts>button{margin:0;min-height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;padding:10px 14px}
.set-acts>.wide{grid-column:1/-1}
.set-acts>.ver-line{grid-column:1/-1;justify-self:center;min-height:32px;margin:2px 0;font-size:13px;color:var(--muted)}
/* menus: room for the chevron even where an older rule sets its own padding */
:is(body,#ff) :is(select,#ff):not(.ff-off):not(.composer *){padding-right:38px}
.cg-add-by{margin-top:16px;padding-top:4px}

#dark-sched{flex-wrap:wrap;row-gap:4px}.ds-hint{flex-basis:100%}.ds-times{display:flex;align-items:center;gap:6px;flex-shrink:0}.ds-times input[type=time]{width:auto;min-width:96px;margin:0}
/* Settings hub (3.0.4): grouped rows that open one sub-page each, with a ‹ Settings back button; every target is at least 44px */
.set-root{margin:-4px -14px -16px;padding:12px 14px 20px;background:var(--bg);min-height:100%}
.set-group{background:var(--card);border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.035),0 1px 3px rgba(0,0,0,.11);margin:0 0 14px;overflow:hidden}
.set-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;background:none;border:0;border-top:1px solid var(--line);text-align:left;color:var(--text);font:inherit;cursor:pointer}
.set-row:first-child{border-top:0}
.set-row:hover{background:var(--hover)}
.set-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.set-ic{flex:none;width:28px;font-size:22px;text-align:center;line-height:1}
.set-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.set-t b{font-size:15px}
.set-t .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-chev{flex:none;color:var(--muted);font-size:20px;line-height:1}
.set-me{min-height:64px}
.set-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand-fill);color:#fff;font-weight:700;font-size:15px}
.set-out{display:block;width:100%;min-height:48px;margin:0 0 8px;border-radius:12px;background:var(--card)}
.set-foot{margin:4px 2px 0}
.set-page{background:var(--card);border-radius:14px;padding:6px 14px 14px;box-shadow:0 0 0 1px rgba(0,0,0,.035),0 1px 3px rgba(0,0,0,.11)}
.set-back{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 8px 0 0;margin:0 0 4px;background:none;border:0;color:var(--brand);font:inherit;font-weight:600;cursor:pointer}
.set-link{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:var(--bubble);border:0;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.set-page .switch-row{min-height:48px;gap:12px}
.set-page .switch-row input[type=checkbox]{flex:none;width:28px;height:28px;margin:8px}
#panel-body .set-page select,.set-page input[type=time]{min-height:44px}
.set-page .linkish,.set-page details>summary{min-height:44px;display:inline-flex;align-items:center}
.set-page details>summary{display:flex}
.set-page .handle-row button,.set-page .btn-row button,.set-page .set-acts>button,.set-page button.ghost,.set-page button.primary{min-height:44px}
.set-page .set-acts>.ver-line{min-height:44px}
.set-page>.set-h:first-of-type{margin-top:6px}
.set-root [hidden]{display:none!important}
/* Highlights (3.0.5): color chips on one row, the list in one rounded card, one ⋯ per row, 🔍 in the header */
.you-sech .you-find{margin-left:auto;width:44px;height:44px;font-size:18px}
.hl-card{background:none;box-shadow:none;border:0;padding-left:0;padding-right:0}
.hl-card>.lib-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hl-card .hl-filters{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px}
.hl-card .fchip{min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line)}
.hl-card .fchip.on{background:var(--brand-fill);border-color:transparent}
.hl-card .hl-chip .hl-dot{margin:0}
#hl-list{background:var(--card);border-radius:16px;padding:0 6px 0 14px;border:1px solid var(--line)}
#hl-list:empty{display:none}
#hl-list>li{position:relative}
#hl-list>li+li{border-top:1px solid var(--line)}
#hl-list .hl-row{align-items:center}
#hl-list .snip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;display:block}
#hl-list .hl-note{color:var(--text);font-style:italic}
.hl-more{width:44px;height:44px;flex:none;font-size:20px;line-height:1;border-radius:12px}
.hl-menu{position:absolute;right:4px;top:calc(100% - 8px);z-index:20;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.hl-menu button{min-height:44px;text-align:left;padding:0 14px;border-radius:10px;font-weight:600;color:var(--text);background:none}
.hl-menu button:hover,.hl-menu button:focus-visible{background:var(--bubble)}
.hl-menu .danger{color:#d33}
#hl-list .hl-row>.saved-card{flex:1 1 auto;min-width:0;overflow:hidden}
#hl-list .hl-row>.saved-card>div{flex:1;min-width:0}
#hl-list{grid-template-columns:minmax(0,1fr)}#hl-list>li{min-width:0;max-width:100%}