/* v2-p17: SWISS EDITORIAL. Off-white, huge black Inter, hairline + 2px rules, black + #3B3FD8 only, square edges. */
html.p17.v2 { --bg: #FFFFFF; --paper: #FFFFFF; --paper-2: #EAE7E1; --ink: #111; --muted: #555; --line: #111; --rule: #111;
  --accent: #3B3FD8; --accent-soft: rgba(59,63,216,.1); --select: #EAE7E1; --select-edge: #3B3FD8; --pop: #3B3FD8; --brass: #3B3FD8; --gold: #3B3FD8; --hx-indigo: #3B3FD8;
  --r-card: 0px; --display: "Inter", system-ui, sans-serif; }
html.p17.v2[data-theme="dark"] { --bg: #0B0B0B; --paper: #0B0B0B; --paper-2: #1A1A1A; --ink: #FFFFFF; --muted: #A8A6A2; --line: #FFFFFF; --rule: #FFFFFF;
  --accent: #A9A6FF; --accent-soft: rgba(169,166,255,.18); --select: #1A1A1A; --select-edge: #A9A6FF; --pop: #A9A6FF; }
html.p17.v2 body, html.p17.v2 main, html.p17.v2 .hx, html.p17.v2 .v2-sheet, html.p17.v2 .v2-sheet-body { background: var(--bg) !important; color: var(--ink); }
html.p17.v2 body { font-family: Inter, system-ui, sans-serif; }

/* square + flat everywhere */
html.p17.v2 :is(button, .p12-card, .v2-card, .hx-pick, .hx-pick-main, .hx-pick-plan, .v2-st-card, .v2-rt-card, .hx-mini, .p13-chip, .p12-chips button, .v2-lib-chips button, .hx-xsearch input, .hx-xfind, .p12-search, .p12-filter, .v2-sheet, .p12-img, .v2-plan-mini, .p14-req, .v2-seg, .v2-seg button, input, select, textarea, .p13-placard, .p11-card, .v2-week-day i) { border-radius: 0 !important; }
html.p17.v2 :is(.p12-card, .v2-card, .hx-pick, .v2-st-card, .v2-rt-card, .p13-placard, .p11-card, .p14-req, .v2-plan-mini, .v2-sheet) { box-shadow: none !important; }
html.p17.v2 .v2-sheet { border-top: 2px solid var(--rule) !important; }
html.p17.v2 .v2-grab { border-radius: 0 !important; background: var(--ink) !important; height: 3px !important; }
html.p17.v2 :is(h1, h2, h3, .tx-title, .v2-sheet-head h2) { font-family: Inter, system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: -.035em !important; color: var(--ink); }
html.p17.v2 .tx-title { font-size: 44px !important; line-height: .92 !important; padding-bottom: 12px; border-bottom: 2px solid var(--rule); }
html.p17.v2 :is(.hx-eyebrow, .v2-eyebrow, .hx-sec-h, .hx-sec h2, .v2-lib-sec h3, .v2-st-h, .p13-cat) { font: 600 10px/1.3 Inter, sans-serif !important; letter-spacing: 2px !important; text-transform: uppercase !important; }

/* top bar + tabs */
html.p17.v2 header.top { background: var(--bg) !important; border-bottom: 2px solid var(--rule); box-shadow: none !important; backdrop-filter: none !important; }
html.p17.v2 .v2-icon { border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html.p17.v2 .v2-tabs { left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: auto !important; max-width: none !important; border-radius: 0 !important; background: var(--bg) !important; border-top: 2px solid var(--rule) !important; box-shadow: none !important; padding: 0 0 env(safe-area-inset-bottom) !important; display: flex !important; gap: 0 !important; height: auto !important; backdrop-filter: none !important; }
html.p17.v2 .v2-tabs button { flex: 1; display: flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 !important; border-radius: 0 !important; border-right: 1px solid var(--rule) !important; background: none !important; color: var(--ink) !important; box-shadow: none !important; transform: none !important; }
html.p17.v2 .v2-tabs button:last-child { border-right: 0 !important; }
html.p17.v2 .v2-tabs button svg { display: none !important; }
html.p17.v2 .v2-tabs button span { display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; opacity: 1 !important; }
html.p17.v2 .v2-tabs button[aria-current="page"] { background: var(--accent) !important; color: #fff !important; }
html.p17.v2 .p12-tabdot { display: none !important; }
@media (min-width: 900px) { html.p17.v2 .v2-tabs { position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; flex-direction: row !important; border-right: 0 !important; }
  html.p17.v2 .v2-tabs button { flex: 1 !important; width: auto !important; height: auto !important; }
  html.p17.v2 body { padding-left: 0 !important; } html.p17.v2 header.top { left: 0 !important; }
  html.p17.v2 body { padding-bottom: 60px !important; } }

/* HOME */
html.p17.v2 .p12-head { display: block !important; padding-top: calc(var(--sat, 0px) + 18px) !important; }
html.p17.v2 .p12-hello { width: 100%; }
html.p17.v2 .p12-avatar { position: absolute; right: 22px; top: calc(var(--sat, 0px) + 54px); border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; }
html.p17.v2 .p17-mast { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
html.p17.v2 .p17-logo { display: inline-flex; gap: 3px; } .p17-logo i { width: 4px; background: var(--accent); }
html.p17.v2 .p17-logo b { width: 2.4ch; font: 900 11px/10px Inter, sans-serif; letter-spacing: 1px; word-spacing: 100vw; color: var(--ink); }
html.p17.v2 .p17-no { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
html.p17.v2 .hx-greet { font: 900 52px/.9 Inter, sans-serif !important; letter-spacing: -.05em !important; color: var(--ink) !important; margin: 0 0 14px !important; text-shadow: none !important; }
html.p17.v2 .p17-name { color: var(--accent); }
html.p17.v2 .p12-head .hx-date { display: none; }
html.p17.v2 .p12-head::after { content: ""; display: block; border-top: 2px solid var(--rule); }
html.p17.v2 .p12-searchrow { padding-top: 0 !important; }
html.p17.v2 .p12-search { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; padding-left: 0 !important; }
html.p17.v2 .p12-filter { background: var(--ink) !important; box-shadow: none !important; }
html.p17.v2 .hx-sec > :first-child, html.p17.v2 .hx-sec-head { border-bottom: 0; }
html.p17.v2 .hx-pick { background: none !important; border: 0 !important; padding: 0 !important; }
html.p17.v2 .hx-pick-main { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: 14px; align-items: start; background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 14px 0 !important; color: var(--ink) !important; text-align: left; }
html.p17.v2 .p17-big { grid-row: 1 / span 4; font: 900 68px/.82 Inter, sans-serif; letter-spacing: -.07em; color: var(--ink); }
html.p17.v2 .hx-pick-main > :not(.p17-big) { grid-column: 2; }
html.p17.v2 .hx-pick-main strong { font: 800 22px/1.15 Inter, sans-serif !important; letter-spacing: -.02em; color: var(--ink) !important; }
html.p17.v2 .hx-pick-main small { color: var(--muted) !important; }
html.p17.v2 .hx-pick-main .hx-go { color: var(--accent) !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; background: none !important; padding: 4px 0 0 !important; }
html.p17.v2 .hx-prog { background: var(--paper-2) !important; border-radius: 0 !important; height: 3px !important; } html.p17.v2 .hx-prog i { background: var(--accent) !important; border-radius: 0 !important; }
html.p17.v2 .hx-pick-plan { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 12px 0 !important; color: var(--ink) !important; }
html.p17.v2 .p16-choose { width: 100%; margin: 14px 0; background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; border-radius: 0 !important; padding: 14px; }
html.p17.v2 .p16-choose strong { font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; } html.p17.v2 .p16-choose small { color: inherit; opacity: .65; }
html.p17.v2 .p16-choose-ic { display: none; } html.p17.v2 .p16-arr { color: inherit !important; font-size: 22px; }
html.p17.v2 .hx-votd.p12-votd { background: none !important; border: 0 !important; border-bottom: 2px solid var(--rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 0 16px !important; color: var(--ink) !important; }
html.p17.v2 .hx-votd .hx-eyebrow { color: var(--accent) !important; }
html.p17.v2 .hx-votd blockquote { font-family: var(--scripture) !important; font-weight: 600; font-size: 21px !important; line-height: 1.25 !important; color: var(--ink) !important; }
html.p17.v2 .hx-votd .hx-pill { background: none !important; color: var(--accent) !important; padding: 0 !important; border: 0 !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; }
html.p17.v2 .v2-week, html.p17.v2 .hx-week { border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html.p17.v2 .v2-week-day.done i, html.p17.v2 .v2-week-day.on i { background: var(--ink) !important; }
.p17-tl { display: block; width: calc(100% - 44px); max-width: 676px; margin: 0 auto; padding: 12px 0 14px; border: 0; border-bottom: 2px solid var(--rule); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.p17-bars { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 8px 0 4px; }
.p17-bars i { flex: 1; background: var(--ink); transform-origin: bottom; animation: p17bar .6s cubic-bezier(.2,.9,.3,1.2) backwards; }
.p17-bars i.on { background: var(--accent); }
.p17-bars i:nth-child(3n) { animation-delay: .05s; } .p17-bars i:nth-child(3n+1) { animation-delay: .1s; }
@keyframes p17bar { from { transform: scaleY(0); } }
.p17-tlk { display: flex; justify-content: space-between; font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p17-red { color: var(--accent); }
html.p17.v2 .hx-minigrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; border-top: 2px solid var(--rule); }
html.p17.v2 .hx-mini { background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; padding: 12px 10px 14px 0 !important; color: var(--ink) !important; min-height: 0 !important; text-align: left; display: block !important; }
html.p17.v2 .hx-mini:nth-child(odd) { border-right: 1px solid var(--rule) !important; } html.p17.v2 .hx-mini:nth-child(even) { padding-left: 10px !important; }
html.p17.v2 .hx-mini-ic { display: none !important; }
html.p17.v2 .hx-mini strong { display: block; font: 600 10px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; }
html.p17.v2 .hx-mini small, html.p17.v2 .hx-mini span:last-child { display: block; font: 800 16px Inter, sans-serif !important; color: var(--ink) !important; margin-top: 6px; letter-spacing: -.01em; }

/* image cards -> editorial plates */
html.p17.v2 .p12-card { border: 0 !important; border-top: 2px solid var(--rule) !important; background: none !important; }
html.p17.v2 .p12-chips button, html.p17.v2 .v2-lib-chips button, html.p17.v2 .p13-chip { background: none !important; border: 1px solid var(--rule) !important; color: var(--ink) !important; font: 600 10px Inter, sans-serif !important; letter-spacing: 1.5px !important; text-transform: uppercase; box-shadow: none !important; }
html.p17.v2 :is(.p12-chips, .v2-lib-chips) button[aria-pressed="true"], html.p17.v2 .p13-chip.on { background: var(--ink) !important; color: var(--bg) !important; }
html.p17.v2 .p13-wax, html.p17.v2 .p15-tag { border-radius: 0 !important; }
/* lists + rows (explore, sheets) */
html.p17.v2 :is(.xp-row, .hx-xrow, .v2-row, .v2-plan-mini) { border-radius: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; }
html.p17.v2 :is(.xp-ic, .hx-xrow-ic) { border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; }
html.p17.v2 .v2-ov-start, html.p17.v2 .v2-st-go { border-radius: 0 !important; background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; font: 600 12px Inter, sans-serif !important; letter-spacing: 2px; text-transform: uppercase; }
html.p17.v2 .v2-st-card, html.p17.v2 .v2-rt-card { border: 1px solid var(--rule) !important; }
html.p17.v2 .v2-today { border-radius: 0 !important; border: 0 !important; border-top: 2px solid var(--rule) !important; border-bottom: 1px solid var(--rule) !important; box-shadow: none !important; background: none !important; }
/* reader stays calm: serif scripture, but rules + red verse numbers */
html.p17.v2 .verse-num, html.p17.v2 sup.vn { color: var(--accent) !important; }
/* splash fits: off-white / black */
html.p17 #v2-splash { background: #FFFFFF !important; } html.p17[data-theme="dark"] #v2-splash { background: #0B0B0B !important; }
html.p17.v2.v2-home-on:not(.hx-scrolled) header.top { opacity: 0; pointer-events: none; }
html.p17.v2 .p12-avatar { top: calc(var(--sat, 0px) + 14px) !important; width: 40px !important; height: 40px !important; }
html.p17.v2 .p17-mast { padding-right: 56px; }
html.p17.v2 .v2-week-day i { background: none !important; border: 1px solid var(--rule) !important; }
html.p17.v2 .v2-week-day.today i { outline: 0 !important; border: 2px solid var(--accent) !important; }
html.p17.v2 .p12-head :is(.p13-iconbtn, .p13-theme, [id^="p13-"]) { border-radius: 0 !important; box-shadow: none !important; }
html.p17.v2 .p12-hello .p13-wordmark { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* p18: full-screen Read chooser */
.p18 { position: fixed; inset: 0; z-index: 900; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg, #FFFFFF); color: var(--ink, #111); font-family: Inter, system-ui, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.25,1.1); }
.p18.in { opacity: 1; transform: none; }
html.p18-on body { overflow: hidden; }
.p18-in { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 40px); }
.p18-top { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.p18-x { width: 44px; height: 44px; flex: none; border: 2px solid var(--ink); background: none; color: var(--ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; }
.p18-kick { display: block; font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.p18-title { margin: 4px 0 0; font: 900 40px/.92 Inter, sans-serif !important; letter-spacing: -.04em !important; }
.p18-cont { display: flex !important; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 0; background: var(--ink) !important; color: var(--bg) !important; text-align: left; font: inherit; cursor: pointer; }
.p18-cont .p18-num { font: 900 44px/.85 Inter, sans-serif; letter-spacing: -.06em; }
.p18-cont > span:nth-child(2) { flex: 1; } .p18-cont strong { display: block; font: 800 19px Inter, sans-serif; } .p18-cont .hx-eyebrow { color: inherit !important; opacity: .7; }
.p18-cont .hx-ch-go { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.p18-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 0; border: 2px solid var(--ink); }
.p18-seg button { border: 0; background: none; color: var(--ink); padding: 12px 4px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.p18-seg button + button { border-left: 2px solid var(--ink); }
.p18-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.p18-find { width: 100%; margin: 12px 0 4px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 500 17px Inter, sans-serif; border-radius: 0; outline: none; }
.p18-grp { margin-top: 22px; }
.p18-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 24px/1 Inter, sans-serif !important; letter-spacing: -.03em !important; }
.p18-h small { font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); }
.p18-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
.p18-book { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding: 12px 6px 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background .12s, color .12s; }
.p18-book:hover, .p18-book:active { background: var(--ink); color: var(--bg); }
.p18-ab { font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); width: 3.4ch; }
.p18-book strong { font: 800 16px/1.2 Inter, sans-serif; letter-spacing: -.01em; }
.p18-book small { font: 600 11px Inter, sans-serif; opacity: .6; font-variant-numeric: tabular-nums; }
.p18-empty { margin: 24px 0; font-weight: 600; }
.p18-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); max-width: 560px; margin: 22px auto 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.p18-chs button { aspect-ratio: 1; border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 800 20px Inter, sans-serif; letter-spacing: -.02em; cursor: pointer; border-radius: 0 !important; transition: background .12s, color .12s; }
.p18-chs button:hover, .p18-chs button:active { background: var(--accent); color: #fff; }
.p18-ov { display: block; margin: 20px auto 0; border: 0; background: none; color: var(--accent); font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .p18 { transition: none; } }
.p18 .p18-book.hx-ch-book { display: grid !important; grid-template-columns: 3.6ch 1fr auto !important; gap: 10px !important; padding: 13px 8px 13px 0 !important; min-height: 0 !important; border: 0 !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important; }
.p18 .p18-grid { column-gap: 18px; }
.p18 .p18-book.hx-ch-book:hover { background: var(--ink) !important; color: var(--bg) !important; }
.p18 .p18-chs.hx-ch-chapters { gap: 0 !important; padding: 0 !important; background: none !important; }
.p18 .p18-chs.hx-ch-chapters button { border: 0 !important; border-right: 1px solid var(--ink) !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important; min-height: 0 !important; animation: none !important; }
.p18 .p18-chs.hx-ch-chapters button:hover { background: var(--accent) !important; color: #fff !important; }
/* p19 Church History */
.p19 { font-family: Inter, system-ui, sans-serif; color: var(--ink); }
.p19-k { display: block; font: 600 10px/1.4 Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.p19-red { color: var(--accent); }
.p19-lede { font-size: 14px; color: var(--muted); padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin: 0; }
.p19-eras { list-style: none; margin: 0; padding: 0; }
.p19-era { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; width: 100%; padding: 16px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.p19-n { font: 900 48px/.8 Inter, sans-serif; letter-spacing: -.06em; min-width: 1.4em; }
.p19-et strong { display: block; font: 800 19px/1.15 Inter, sans-serif; letter-spacing: -.02em; margin: 3px 0 4px; }
.p19-et small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p19-era .p19-k { color: var(--accent); } .p19-ar { font-size: 20px; color: var(--accent); }
.p19-era:active { background: var(--paper-2); }
.p19-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.p19-big { font: 900 76px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); }
.p19-h { margin: 4px 0 0; font: 900 26px/1 Inter, sans-serif !important; letter-spacing: -.03em; }
.p19-sum { font-size: 16px; line-height: 1.5; margin: 14px 0; }
.p19-why { border-left: 4px solid var(--accent); padding: 2px 0 2px 12px; } .p19-why p { margin: 4px 0 0; font-weight: 600; line-height: 1.45; }
.p19-sh { margin: 24px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; }
.p19-tl { list-style: none; margin: 0; padding: 0; }
.p19-ev { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.p19-date { font: 800 13px/1.25 Inter, sans-serif; color: var(--accent); }
.p19-ev strong { font: 800 16px/1.25 Inter, sans-serif; } .p19-ev p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; } .p19-sig { color: var(--muted); }
.p19-deb { display: inline-block; margin-left: 8px; padding: 2px 6px; vertical-align: 2px; border: 1px solid var(--accent); color: var(--accent); font: 600 9px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.p19-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 16px; }
.p19-person { padding: 10px 0; border-bottom: 1px solid var(--ink); } .p19-person strong { font: 800 15px Inter, sans-serif; } .p19-person p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.p19-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p19-ref { border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 7px 10px; font: 700 13px Inter, sans-serif; cursor: pointer; }
.p19-ref:hover, .p19-ref:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.p19-src { margin: 20px 0 0; font-size: 12.5px; line-height: 1.6; } .p19-src .p19-k { display: inline; } .p19-src a { color: var(--ink); }
.p19-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 10px; border-top: 2px solid var(--ink); }
.p19-nav button { border: 0; background: none; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 6px 0; max-width: 40%; text-align: left; }
.p19-nav button:last-child { text-align: right; }
.p19-read { margin-top: 22px; padding: 16px; background: var(--ink); color: var(--bg); }
.p19-read .p19-k { color: inherit; opacity: .7; } .p19-read strong { display: block; font: 900 22px/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 6px 0; }
.p19-by { font-size: 12.5px; opacity: .8; } .p19-read p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; }
.p19-lead { font-weight: 700; font-size: 18px !important; letter-spacing: -.01em; }
.p19-homecard { display: grid; gap: 4px; width: 100%; padding: 16px; margin: 0 0 14px; border: 0; border-left: 6px solid var(--accent); background: var(--ink); color: var(--bg); text-align: left; font: inherit; cursor: pointer; }
.hx-body > .p19-homecard { width: calc(100% - 44px); max-width: 676px; margin: 14px auto; display: grid; }
.p19-homecard .p19-k { color: inherit; opacity: .7; } .p19-homecard strong { font: 900 22px/1.05 Inter, sans-serif; letter-spacing: -.03em; } .p19-homecard .p19-ar { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: inherit; }
.p19-cards { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin: 10px -20px 0; padding: 0 20px; border-bottom: 1px solid var(--ink); touch-action: pan-x pan-y; }
.p19-card { flex: 0 0 78%; scroll-snap-align: start; display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px 0; margin-right: 16px; border: 0; border-right: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.p19-cn { font: 900 56px/.8 Inter, sans-serif; letter-spacing: -.06em; }
.p19-card strong { font: 800 19px/1.15 Inter, sans-serif; letter-spacing: -.02em; } .p19-card p { margin: 0; font-size: 14px; line-height: 1.45; }
.p19-card .p19-ar { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.p19-strip { display: flex; overflow-x: auto; margin-top: 12px; border-top: 2px solid var(--ink); touch-action: pan-x pan-y; }
.p19-tick { flex: 1 0 64px; display: grid; justify-items: start; gap: 6px; padding: 0 6px 8px 0; border: 0; background: none; color: var(--ink); font: 700 12px Inter, sans-serif; cursor: pointer; }
.p19-tick i { width: 2px; height: 16px; background: var(--ink); } .p19-tick.on i { width: 8px; height: 26px; background: var(--accent); } .p19-tick.on { color: var(--accent); }
.p19-tlnote { min-height: 44px; margin: 4px 0 0; padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 14px; line-height: 1.45; }
.p19-tlnote:empty::before { content: "Tap a year."; color: var(--muted); }
.p19-zrow { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; }
.p19-z { width: 36px; height: 36px; margin-left: 6px; border: 2px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 700 18px/1 Inter, sans-serif; cursor: pointer; }
.p19-tree { overflow: auto; border: 1px solid var(--ink); max-height: 460px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.p19-tree-svg { display: block; transition: width .25s ease, height .25s ease; }
.p19-edge { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.p19-node rect { fill: var(--bg); stroke: var(--ink); stroke-width: 2; } .p19-node.link { cursor: pointer; } .p19-node.link:hover rect { fill: var(--accent); stroke: var(--accent); }
.p19-node .t { font: 800 13px Inter, sans-serif; fill: var(--ink); } .p19-node .d { font: 600 10px Inter, sans-serif; letter-spacing: 1px; fill: var(--accent); }
.p19-node.link:hover .t, .p19-node.link:hover .d { fill: #fff; }
.p19-tree-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.p19-ppl, .p19-qs { list-style: none; margin: 0; padding: 0; }
.p19-ppl li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ink); }
.p19-pn { font: 900 26px/.9 Inter, sans-serif; color: var(--accent); letter-spacing: -.04em; } .p19-ppl strong { font: 800 16px Inter, sans-serif; } .p19-ppl p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.p19-gl { margin: 0; display: grid; grid-template-columns: minmax(96px, 30%) 1fr; } .p19-gl dt, .p19-gl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ink); } .p19-gl dt { font: 800 14px Inter, sans-serif; padding-right: 10px; } .p19-gl dd { font-size: 14px; line-height: 1.45; }
.p19-myth { border-bottom: 1px solid var(--ink); padding: 10px 0; } .p19-myth summary { cursor: pointer; list-style: none; } .p19-myth summary strong { display: block; font: 800 16px Inter, sans-serif; text-decoration: line-through; text-decoration-color: var(--accent); }
.p19-myth[open] summary strong { text-decoration: none; } .p19-myth p { font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.p19-qs { counter-reset: q; } .p19-qs li { counter-increment: q; padding: 10px 0 10px 34px; position: relative; border-bottom: 1px solid var(--ink); font-size: 15px; line-height: 1.45; } .p19-qs li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 0; font: 900 14px Inter, sans-serif; color: var(--accent); }
.p19-next { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .p19-step { display: block; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.p19-step:nth-child(odd) { border-right: 1px solid var(--ink); } .p19-step:nth-child(even) { padding-left: 10px; } .p19-step strong { font: 800 15px Inter, sans-serif; } .p19-step p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
a.p19-step strong::after { content: " ↗"; color: var(--accent); }
.p19-cta { display: block; width: 100%; margin: 22px 0 0; padding: 16px; border: 0; background: var(--accent); color: #fff; font: 600 12px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
/* p20 ACTS + glossary */
.p20-start { display: grid; gap: 4px; width: 100%; margin: 0 0 14px; padding: 16px; border: 0; background: var(--accent); color: #fff; text-align: left; font: inherit; cursor: pointer; }
.p20-start strong { font: 900 26px/1 Inter, sans-serif; letter-spacing: -.03em; } .p20-k { display: block; font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
.p20-acts { font: 600 10px Inter, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.p20 { font-family: Inter, system-ui, sans-serif; color: var(--ink); }
.p20-prog { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); margin-bottom: 18px; }
.p20-prog span { text-align: center; padding: 8px 0; font: 900 14px Inter, sans-serif; } .p20-prog span + span { border-left: 2px solid var(--ink); }
.p20-prog .on { background: var(--accent); color: #fff; } .p20-prog .done { background: var(--ink); color: var(--bg); }
.p20-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.p20-n { font: 900 76px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); }
.p20-word { margin: 0; font: 900 34px/.95 Inter, sans-serif !important; letter-spacing: -.04em; }
.p20-def { margin: 6px 0 0; font: 600 15px/1.35 Inter, sans-serif; color: var(--ink); }
.p20-prompt { font: 700 18px/1.35 Inter, sans-serif; margin: 16px 0 4px; letter-spacing: -.01em; }
.p20-link { border: 0; background: none; padding: 6px 0; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.p20-verse { margin: 12px 0; padding: 0 0 0 12px; border-left: 4px solid var(--accent); } .p20-verse p { margin: 0; font-family: var(--scripture); font-size: 17px; line-height: 1.45; }
.p20-verse cite { display: block; margin-top: 4px; font: 600 10px Inter, sans-serif; font-style: normal; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.p20-ta, .p20-new { width: 100%; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 12px; font: 400 16px/1.45 Inter, sans-serif; }
.p20-sh { margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; }
.p20-reqs { display: grid; } .p20-req { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ink); font: 700 15px Inter, sans-serif; cursor: pointer; }
.p20-req input { width: 20px; height: 20px; accent-color: var(--accent); }
.p20-addrow { display: grid; grid-template-columns: 1fr auto; margin-top: 10px; } .p20-addbtn { border: 0; background: var(--ink); color: var(--bg); padding: 0 18px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.p20-empty { color: var(--muted); font-size: 14px; }
.p20-nav { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--ink); }
.p20-nav .p20-link { justify-self: start; }
.p20-skip { border: 2px solid var(--ink); background: none; color: var(--ink); padding: 12px 16px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.p20-next { border: 0; background: var(--ink); color: var(--bg); padding: 14px 20px; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
#p20-save { background: var(--accent); color: #fff; }
.p20-journal { margin-top: 10px; } .p20-entry { border-bottom: 1px solid var(--ink); padding: 10px 0; } .p20-entry summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; font: 700 14px Inter, sans-serif; }
.p20-entry p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.p20-marks { display: inline-flex; } .p20-marks b { width: 20px; height: 20px; display: grid; place-items: center; font: 900 10px Inter, sans-serif; border: 1px solid var(--ink); margin-right: -1px; color: var(--muted); } .p20-marks b.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.p14-heat i.p20-m { background: var(--accent) !important; position: relative; } .p14-heat i.p20-m::after { content: attr(data-acts); position: absolute; inset: 0; display: grid; place-items: center; font: 900 5px/1 Inter, sans-serif; color: #fff; overflow: hidden; }
.p20-term { all: unset; display: inline; cursor: help; border-bottom: 1.5px dotted var(--accent); color: inherit; font: inherit; }
.p20-term:focus-visible { outline: 2px solid var(--accent); }
.p20-pop { position: fixed; z-index: 1200; padding: 12px 14px; background: var(--ink); color: var(--bg); font-family: Inter, sans-serif; box-shadow: 6px 6px 0 var(--accent); animation: p20pop .16s ease-out; }
.p20-pop strong { display: block; font: 900 18px Inter, sans-serif; text-transform: capitalize; margin: 2px 0 4px; letter-spacing: -.02em; } .p20-pop p { margin: 0; font-size: 14px; line-height: 1.4; }
@keyframes p20pop { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .p20-pop { animation: none; } }
/* p21 Sections menu (Explore tab removed) */
html.p17.v2 .v2-tabs [data-v2tab="study"] { display: none !important; }
.p21-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 2px solid var(--ink); border-radius: 0 !important; background: var(--bg); color: var(--ink); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.p21-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); } .p21-chev { font-size: 10px; letter-spacing: 0; }
.v2-bar .p21-btn { margin-left: 8px; flex: none; }
html.p17.v2 .v2-bar .v2-ref, html.p17.v2 .v2-bar .v2-view-title { min-width: 0; }
.p17-mast .p21-btn { margin-right: auto; margin-left: 14px; }
.p21 { position: fixed; inset: 0; z-index: 960; }
.p21-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.p21-panel { position: absolute; left: 0; right: 0; top: 0; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); color: var(--ink); border-bottom: 2px solid var(--ink); padding: calc(env(safe-area-inset-top) + 14px) 20px 24px; transform: translateY(-16px); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.25,1.05), opacity .2s; font-family: Inter, system-ui, sans-serif; }
@media (min-width: 760px) { .p21-panel { left: 50%; right: auto; width: 720px; margin-left: -360px; top: 16px; border: 2px solid var(--ink); max-height: calc(100vh - 32px); } }
.p21.in .p21-scrim { opacity: 1; } .p21.in .p21-panel { transform: none; opacity: 1; }
html.p21-on body { overflow: hidden; }
.p21-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.p21-title { margin: 0; font: 900 40px/.9 Inter, sans-serif !important; letter-spacing: -.045em !important; }
.p21-x { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 600 24px/1 Inter, sans-serif; cursor: pointer; }
.p21-find { width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font: 500 17px Inter, sans-serif; outline: none; }
.p21-grp { margin-top: 20px; }
.p21-h { display: flex; gap: 10px; align-items: baseline; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 22px/1 Inter, sans-serif !important; letter-spacing: -.03em !important; }
.p21-gn { font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; color: var(--accent); }
@media (min-width: 760px) { .p21-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; } }
.p21-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0 !important; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.p21-row strong { font: 800 16px/1.25 Inter, sans-serif; letter-spacing: -.01em; } .p21-row small { grid-column: 1; font-size: 13px; line-height: 1.35; color: var(--muted); }
.p21-ar { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); }
.p21-row:hover strong, .p21-row:focus-visible strong { color: var(--accent); }
.p21-bible { background: var(--ink) !important; color: var(--bg) !important; padding: 12px !important; margin-top: 10px; } .p21-bible small { color: inherit; opacity: .7; }
.p21-empty { margin: 16px 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .p21-panel, .p21-scrim { transition: none; } }
@media (max-width: 480px) { html.p17.v2 .v2-bar .p21-btn { padding: 0 8px; } html.p17.v2 .v2-bar-actions [id*="saved"], html.p17.v2 .v2-bar-actions .p13-savedbtn { display: none !important; } html.p17.v2 .v2-bar .v2-ref { font-size: 15px; white-space: nowrap; } }
/* solid tab bar */
html.p17.v2 .v2-tabs, html.p17.v2 .v2-tabs::before, html.p17.v2 .v2-tabs::after { opacity: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.p17.v2 .v2-tabs { background: #FFFFFF !important; border-top: 1px solid #111 !important; }
html.p17.v2[data-theme="dark"] .v2-tabs { background: #000 !important; border-top: 1px solid #FFFFFF !important; }
html.p17.v2 .v2-tabs::before, html.p17.v2 .v2-tabs::after { display: none !important; }
html.p17.v2 .v2-tabs button { color: #111 !important; opacity: 1 !important; filter: none !important; }
html.p17.v2[data-theme="dark"] .v2-tabs button { color: #FFFFFF !important; }
html.p17.v2 .v2-tabs button span { font-weight: 700 !important; color: inherit !important; }
html.p17.v2 .v2-tabs button[aria-current="page"] { background: #3B3FD8 !important; color: #fff !important; }
.p21 [hidden], .p21-grp[hidden] { display: none !important; }
/* p22 places: region + countries */
.p22-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); margin: 6px 0 12px; }
.p22-seg button { border: 0; background: none; color: var(--ink); padding: 11px 4px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .p22-seg button + button { border-left: 2px solid var(--ink); }
.p22-seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.p22-world .p22-sea { fill: var(--paper-2); } .p22-grat { stroke: var(--ink); stroke-opacity: .15; stroke-width: 1; } .p22-lab { font: 600 9px Inter, sans-serif; fill: var(--muted); }
.p13-dot.intl { fill: var(--accent) !important; }
.p22-mode { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 12px 0 6px; }
.p22-k { font: 600 10px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-right: 4px; }
.p22-mode button { border: 1px solid var(--ink); background: none; color: var(--ink); padding: 6px 10px; font: 600 10px Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.p22-mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .p22-clear { border: 0 !important; color: var(--accent) !important; }
html.p17.v2 .p22-cchips button.p22-x[aria-pressed="true"] { background: none !important; color: var(--muted) !important; text-decoration: line-through; text-decoration-color: var(--accent); }
.p22-adv { margin: 8px 0; padding: 8px 10px; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 13px; line-height: 1.45; } .p22-adv a { color: var(--accent); font-weight: 700; }
/* p23 versions */
.p23-bar { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin: 6px 0 14px; font-family: Inter, sans-serif; }
.p23-btn { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.p23-btn + .p23-btn { border-left: 2px solid var(--ink); } .p23-btn strong { font: 800 15px Inter, sans-serif; flex: 1; } .p23-k { font: 600 9px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.p23-missing { font: 600 13px Inter, sans-serif; border-left: 4px solid var(--accent); padding: 4px 10px; }
.p23-blank { color: var(--muted) !important; }
.reading .verse > p[dir="rtl"] { text-align: right; font-size: 1.08em; }
.p23-par { margin: 6px 0 0 !important; padding-left: 10px; border-left: 2px solid var(--accent); font-size: .9em; color: var(--muted); }
.p23-par[dir="rtl"] { border-left: 0; border-right: 2px solid var(--accent); padding: 0 10px 0 0; text-align: right; }
.p23-par::before { content: attr(data-ver) " "; font: 600 9px Inter, sans-serif; letter-spacing: 1px; color: var(--accent); }
.p23-foot { margin: 20px 0 0; padding-top: 10px; border-top: 1px solid var(--ink); font: 400 12px/1.5 Inter, sans-serif; color: var(--muted); } .p23-foot a { color: var(--accent); }
.p23 { font-family: Inter, sans-serif; } .p23-find { width: 100%; box-sizing: border-box; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); font: 500 17px Inter, sans-serif; border-radius: 0; outline: none; margin-bottom: 6px; }
.p23-grp { margin-top: 18px; } .p23-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif !important; letter-spacing: -.02em; } .p23-h small { font: 600 11px Inter, sans-serif; color: var(--accent); }
.p23-row { display: grid; gap: 2px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; border-radius: 0 !important; }
.p23-row strong { font: 800 16px Inter, sans-serif; } .p23-row small { font-size: 12.5px; color: var(--muted); } .p23-row[aria-pressed="true"] { box-shadow: inset 6px 0 0 var(--accent); padding-left: 14px; }
.p23-row.p23-lacks strong, .p23-row.p23-lacks small { opacity: .45; } .p23-grp[hidden], .p23-row[hidden] { display: none !important; }
.p23-fine { font-size: 12px; color: var(--muted); margin-top: 16px; }
.p18 .p18-book.p23-missing-book { opacity: .35 !important; }
.reading.p23-parallel .verse { display: block !important; padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.reading.p23-parallel .verse > p, .reading .verse > .p23-par { display: block !important; }
.reading.p23-on .verse > p[dir="rtl"] { display: block; }
/* p24 pray with friends */
.p24 { font-family: Inter, sans-serif; } .p24-h { margin: 4px 0 8px; font: 900 26px/1 Inter, sans-serif !important; letter-spacing: -.03em; }
.p24-lede { font-size: 15px; line-height: 1.45; } .p24-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.p24-k, .p24-tag { display: inline-block; font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.p24-tag { border: 1px solid var(--accent); padding: 2px 6px; margin-bottom: 4px; }
.p24-f { display: grid; gap: 4px; margin: 12px 0 0; } .p24-f span { font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.p24-f input, .p24-f textarea, .p24-link { width: 100%; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); padding: 11px; font: 400 16px Inter, sans-serif; }
.p24-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p24-btn { display: inline-block; border: 2px solid var(--ink); background: none; color: var(--ink); padding: 11px 14px; font: 600 11px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; text-decoration: none; border-radius: 0; }
.p24-dark { background: var(--ink); color: var(--bg); } .p24-wide { display: block; width: 100%; margin-top: 16px; text-align: center; }
.p24-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .p24-pick { border: 1px solid var(--ink); background: none; color: var(--ink); padding: 6px 9px; font: 600 12px Inter, sans-serif; cursor: pointer; border-radius: 0; }
.p24-friends { margin-top: 20px; } .p24-sh { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; }
.p24-fn { display: flex; justify-content: space-between; margin: 16px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font: 800 16px Inter, sans-serif; } .p24-fn small { color: var(--accent); font-size: 11px; }
.p24-fr { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; } .p24-fr strong { font: 700 15px Inter, sans-serif; } .p24-fr.ans strong { text-decoration: line-through; text-decoration-color: var(--accent); } .p24-fr small { font-size: 12.5px; color: var(--muted); }
.p24-ra { display: flex; gap: 8px; } .p24-mini { border: 0; background: none; padding: 4px 0; color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
/* p25 group study */
.p25-head { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .p25-big { font: 900 72px/.78 Inter, sans-serif; letter-spacing: -.07em; color: var(--accent); }
.p25-mission, .p25-end p, .p25-end { border-left: 4px solid var(--accent); padding-left: 10px; font: 700 14px/1.45 Inter, sans-serif; margin: 12px 0; }
.p25-kv { font-size: 14px; } .p25-sh { margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 900 20px Inter, sans-serif; letter-spacing: -.02em; }
.p25-q { border: 0; border-bottom: 1px solid var(--ink); margin: 0; padding: 12px 0; } .p25-q legend { font: 700 15px/1.4 Inter, sans-serif; padding: 0; margin-bottom: 8px; } .p25-qn { color: var(--accent); font-weight: 900; margin-right: 8px; }
.p25-c { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); margin-top: 4px; cursor: pointer; font-size: 15px; } .p25-c input { accent-color: var(--accent); }
.p25-c.right { border-color: var(--ink); background: var(--ink); color: var(--bg); } .p25-c.wrong { border-color: var(--accent); text-decoration: line-through; color: var(--accent); }
.p25-ref { color: var(--accent); font: 600 10px Inter, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; } .p25-score { font: 900 24px Inter, sans-serif; letter-spacing: -.02em; }
.p25-list { margin: 0; padding-left: 22px; } .p25-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.p25-shareone { display: grid; gap: 4px; width: 100%; margin: 18px 0 0; padding: 14px; border: 0; background: var(--accent); color: #fff; text-align: left; font: inherit; cursor: pointer; } .p25-shareone .p24-k { color: #fff; opacity: .8; } .p25-shareone strong { font: 700 15px/1.4 Inter, sans-serif; }
.p25-leader { margin-top: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 10px 0; } .p25-leader summary { cursor: pointer; font: 600 11px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.p25-nav { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px; border-top: 2px solid var(--ink); }
.p25-open { display: flex; gap: 10px; align-items: baseline; width: 100%; margin-top: 10px; padding: 12px; border: 0; background: var(--ink); color: var(--bg); text-align: left; font: inherit; cursor: pointer; } .p25-open .p24-k { color: inherit; opacity: .75; } .p25-open strong { flex: 1; font: 700 14px Inter, sans-serif; }
.p25-banner { width: calc(100% - 44px); max-width: 676px; margin: 14px auto; padding: 12px 14px; border-left: 6px solid var(--accent); background: var(--paper-2); box-sizing: border-box; } .p25-banner p { margin: 4px 0 0; font: 700 15px/1.4 Inter, sans-serif; }
.p25-wel { font: 600 15px/1.45 Inter, sans-serif; max-width: 320px; margin: 10px auto; text-align: center; }
.p25-gsrow { font-weight: 700 !important; }
html.v2.p12.p13.p17 .v2-tabs { background: #FFFFFF !important; background-color: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-top: 1px solid #111 !important; opacity: 1 !important; }
html.v2.p12.p13.p17[data-theme="dark"] .v2-tabs { background: #000 !important; background-color: #000 !important; border-top: 1px solid #FFFFFF !important; }
html.v2.p12.p13.p17 .v2-sheet, html.v2.p12.p13.p17 .p21-panel, html.v2.p12.p13.p17 .p18, html.v2.p12.p13.p17 .p16 { opacity: 1; background-color: var(--bg) !important; backdrop-filter: none !important; }
html.v2.p12.p13.p17 .v2-sheet[hidden], html.v2.p12.p13.p17 .v2-sheet-scrim[hidden], .p21:not(.in) .p21-panel { pointer-events: none; }
html.v2.p12.p13.p17 .v2-sheet[hidden], html.v2.p12.p13.p17 .v2-sheet-scrim[hidden] { display: none !important; visibility: hidden !important; }
@media (max-width: 420px) { html.p17.v2 .p17-no { display: none; } }

html.p17 .p21-tog { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 10px; width: 100%; cursor: pointer; padding: 6px 0; font: inherit; }
html.p17 .p21-tog:focus-visible { outline: 2px solid #3B3FD8; outline-offset: 2px; }
html.p17 .p21-gc { margin-left: auto; transition: transform .2s; display: inline-block; transform: rotate(-90deg); }
html.p17 .p21-grp.open .p21-gc { transform: none; }
html.p17 .p21:not(.p21-searching) .p21-grp:not(.open) .p21-list { display: none; }
html.p17 .p21.p21-searching .p21-gc { transform: none; }
html.p17 .p13-pill, html.p17 .p13-welcome button, html.p17 .p13-welcome input { border-radius: 0 !important; }
html.p17 #v2-sheet .p14-heat, html.p17 #v2-sheet .p14-heat i, html.p17 #v2-sheet .p13-card, html.p17 #v2-sheet .p13-acc, html.p17 #v2-sheet .p13-pill, html.p17 #v2-sheet .p14-add, html.p17 #v2-sheet [class*="p14-"]:not(.p14-seal), html.p17 #v2-sheet [class*="p20-"], html.p17 #v2-sheet [class*="p24-"], html.p17 #v2-sheet span:not(.p14-seal) { border-radius: 0 !important; }
/* ---------- p26: search, devotional, memory, cards, reminders, a11y ---------- */
.p26-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.p17 .p26-q { width: 100%; box-sizing: border-box; font: 600 1.15rem/1.3 Inter, system-ui, sans-serif; padding: 14px 0; border: 0; border-bottom: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; }
html.p17 .p26-q:focus { outline: none; border-bottom-color: #3B3FD8; }
html.p17 .p26-hint { color: var(--muted, #555); margin: 14px 0; }
html.p17 .p26-grp { margin-top: 22px; }
html.p17 .p26-gh { display: flex; gap: 10px; align-items: baseline; font: 800 1.05rem Inter, system-ui, sans-serif; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin: 0; }
html.p17 .p26-gn { color: #3B3FD8; font-size: .8rem; letter-spacing: .08em; }
html.p17 .p26-gc { margin-left: auto; font-size: .8rem; }
html.p17 .p26-list { list-style: none; margin: 0; padding: 0; }
html.p17 .p26-row { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line, #ccc); cursor: pointer; }
html.p17 .p26-row strong { display: block; font-weight: 700; }
html.p17 .p26-row small { display: block; color: var(--muted, #555); margin-top: 2px; line-height: 1.4; }
html.p17 .p26-row mark { background: #3B3FD8; color: #fff; padding: 0 2px; }
html.p17 .p26-more { all: unset; cursor: pointer; margin-top: 8px; font: 700 .75rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; }
html.p17 .p26-btn { appearance: none; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 .78rem Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; min-height: 44px; border-radius: 0 !important; cursor: pointer; }
html.p17 .p26-btn.p26-solid { background: #111; color: #FFFFFF; border-color: #111; }
html.p17[data-theme="dark"] .p26-btn.p26-solid { background: #FFFFFF; color: #000; border-color: #FFFFFF; }
html.p17 .p26-btn[aria-pressed="true"] { background: #3B3FD8; color: #fff; border-color: #3B3FD8; }
html.p17 .p26-btn:disabled { opacity: .45; cursor: default; }
html.p17 .p26-wide { width: 100%; margin: 12px 0; }
html.p17 .p26-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html.p17 .p26-k, html.p17 .p26-eyebrow { display: block; font: 700 .7rem Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; }
html.p17 .p26-devo { margin: 22px 0; padding: 18px 0 20px; border-top: 3px solid currentColor; border-bottom: 1px solid currentColor; }
html.p17 .p26-devo-h { font: 900 clamp(1.8rem, 8vw, 2.6rem)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.03em; margin: 0 0 12px; }
html.p17 .p26-devo-q { margin: 0 0 16px; padding: 0 0 0 14px; border-left: 4px solid #3B3FD8; font: 400 1.15rem/1.5 Georgia, "Times New Roman", serif; }
html.p17 .p26-refl, html.p17 .p26-ask { border-top: 1px solid var(--line, #ccc); padding-top: 12px; margin-top: 12px; }
html.p17 .p26-refl p, html.p17 .p26-ask p { margin: 0; line-height: 1.5; }
html.p17 .p26-ask p { font-weight: 700; font-size: 1.05rem; }
html.p17 .p26-card-img { width: 100%; height: auto; display: block; border: 1px solid currentColor; }
html.p17 .p26-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; }
html.p17 .p26-stats div { padding: 12px 8px; border-right: 1px solid var(--line, #ccc); }
html.p17 .p26-stats div:last-child { border-right: 0; }
html.p17 .p26-stats b { display: block; font: 900 2.4rem/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; }
html.p17 .p26-stats small { font: 700 .66rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
html.p17 .p26-mlist { list-style: none; padding: 0; margin: 8px 0; }
html.p17 .p26-mlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line, #ccc); }
html.p17 .p26-mlist small { display: block; color: var(--muted, #555); }
html.p17 .p26-x { appearance: none; border: 1px solid currentColor; background: transparent; color: inherit; width: 44px; height: 44px; font-size: 1.3rem; border-radius: 0; cursor: pointer; }
html.p17 .p26-fref { font: 700 .75rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 10px; }
html.p17 .p26-seg { display: flex; border: 2px solid currentColor; margin: 0 0 14px; }
html.p17 .p26-seg button { flex: 1; appearance: none; border: 0; border-right: 2px solid currentColor; background: transparent; color: inherit; padding: 11px 6px; min-height: 44px; font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
html.p17 .p26-seg button:last-child { border-right: 0; }
html.p17 .p26-seg [aria-selected="true"], html.p17 .p26-seg [aria-checked="true"] { background: #3B3FD8; color: #fff; }
html.p17 .p26-hintline { font: 800 1.6rem/1.35 Inter, system-ui, sans-serif; letter-spacing: .06em; word-spacing: .2em; margin: 6px 0 14px; }
html.p17 .p26-faint { font-size: 1rem; color: var(--muted, #555); }
html.p17 .p26-type { width: 100%; box-sizing: border-box; font: 400 1.05rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; }
html.p17 .p26-fout { margin: 14px 0 0; line-height: 1.5; }
html.p17 .p26-big { font: 900 4rem/1 Inter, sans-serif; letter-spacing: -.04em; margin: 10px 0; }
html.p17 .p26-remrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line, #ccc); }
html.p17 .p26-remrow label { display: flex; align-items: center; gap: 12px; font-weight: 700; min-height: 44px; }
html.p17 .p26-remrow input[type=checkbox] { width: 22px; height: 22px; accent-color: #3B3FD8; }
html.p17 .p26-remrow input[type=time] { font: 700 1rem Inter, sans-serif; padding: 8px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; min-height: 44px; }
html.p17 .p26-tog { justify-content: flex-start; }
html.p17 .p26-tog small { display: block; color: var(--muted, #555); font-weight: 400; }
html.p17 .p26-note p { border-left: 4px solid #3B3FD8; padding: 2px 0 2px 12px; margin: 14px 0; line-height: 1.45; }
html.p17 .p26-audio { display: flex; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: 10px; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; }
html.p17 .p26-aprog { margin-left: auto; font: 700 .8rem Inter, sans-serif; font-variant-numeric: tabular-nums; }
/* accessibility */
html.p17 :focus-visible { outline: 3px solid #3B3FD8 !important; outline-offset: 2px !important; }
html.p17[data-theme="dark"] :focus-visible { outline-color: #A9A6FF !important; }
html.p26-large { font-size: 118% !important; }
html.p26-large.p26-xlarge { font-size: 136% !important; }
html.p26-large .verse, html.p26-large .v2-verse, html.p26-large #main p { font-size: 1.08em; }
html.p26-contrast { --muted: #222 !important; --line: #111 !important; }
html.p26-contrast[data-theme="dark"] { --muted: #e8e4dc !important; --line: #FFFFFF !important; }
html.p26-calm *, html.p26-calm *::before, html.p26-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { html.p17 *, html.p17 *::before, html.p17 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
html.p17 .p26-arow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
html.p17 .p26-audio { flex-direction: column; align-items: stretch; }
html.p17 .p26-acredit summary { cursor: pointer; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; }
html.p17 .p26-acredit p { margin: 4px 0 8px; font-size: .85rem; line-height: 1.45; color: var(--muted, #555); }
html.p17 .p26-acct { margin-top: 22px; border-top: 3px solid currentColor; padding-top: 12px; }
html.p17 .p26-acctform { display: grid; gap: 8px; }
html.p17 .p26-acctform input { font: 1rem Inter, sans-serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; min-height: 44px; }
html.p17 .p26-devo { margin-left: var(--p26-gut, 20px); margin-right: var(--p26-gut, 20px); }
/* WCAG AA fixes, dark mode */
html.p17[data-theme="dark"] .p26-k, html.p17[data-theme="dark"] .p26-eyebrow, html.p17[data-theme="dark"] .p26-gn, html.p17[data-theme="dark"] .p26-more, html.p17[data-theme="dark"] .p26-fref, html.p17[data-theme="dark"] .p24-k, html.p17[data-theme="dark"] #v2-sheet summary { color: #A9A6FF !important; }
html.p17[data-theme="dark"] .p20-start { background: #3B3FD8 !important; color: #fff !important; }
html.p17[data-theme="dark"] .p26-row mark { background: #A9A6FF; color: #000; }
html.p17 .p26-mast-search { appearance: none; background: transparent; border: 2px solid currentColor; color: inherit; width: 44px; height: 44px; display: inline-grid; place-items: center; margin-left: 8px; border-radius: 0; cursor: pointer; } html.p17 .p26-mast-search svg { width: 22px; height: 22px; }
/* ---------- p27: nav, Learn, Me, study panel, onboarding, recents, crumbs ---------- */
html.p27-on #main, html.p27-on #v2-home-view, html.p27-on #v2-explore-view { display: none !important; }
html.p17 .v2-tabs [data-v2tab="plans"], html.p17 .v2-tabs [data-v2tab="more"], html.p17 .v2-tabs [data-v2tab="study"] { display: none !important; }
.p27-page { max-width: 760px; margin: 0 auto; padding: 72px 20px 110px; box-sizing: border-box; }
html.p27-full .p27-page { position: fixed; inset: 0; max-width: none; padding: 0; z-index: 60; background: var(--bg, #FFFFFF); overflow: hidden; }
html.p27-full .v2-tabs, html.p27-full header.top, html.p27-full .v2-bar { display: none !important; }
html.p17 .p27-h1 { font: 900 clamp(2.6rem, 13vw, 4.4rem)/.95 Inter, system-ui, sans-serif; letter-spacing: -.045em; margin: 6px 0 8px; }
html.p17 .p27-sub { color: var(--muted, #555); margin: 0 0 18px; line-height: 1.45; }
html.p17 .p27-k { display: block; font: 700 .7rem Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; }
html.p17[data-theme="dark"] .p27-k { color: #A9A6FF; }
html.p17 .p27-tn { font: 800 .75rem Inter, sans-serif; color: #3B3FD8; letter-spacing: .06em; }
html.p17[data-theme="dark"] .p27-tn { color: #A9A6FF; }
html.p17 .p27-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 8px; font: 700 .68rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
html.p17 .p27-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted, #555); }
html.p17 .p27-crumbs a, html.p17 .p27-cb { all: unset; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
html.p17 .p27-crumbs [aria-current] { color: var(--muted, #555); }
html.p17 .p27-scrumbs { padding: 0 20px; }
html.p17 .p27-find { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 0; border-bottom: 2px solid currentColor; font: 600 1.05rem Inter, sans-serif; color: var(--muted, #555); cursor: text; margin-bottom: 18px; }
html.p17 .p27-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid currentColor; border-left: 1px solid currentColor; }
html.p17 .p27-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 120px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
html.p17 .p27-tile strong { font: 800 1.15rem/1.1 Inter, sans-serif; letter-spacing: -.02em; }
html.p17 .p27-tile small { color: var(--muted, #555); line-height: 1.35; font-size: .82rem; }
html.p17 .p27-tile-red { background: #3B3FD8; color: #fff; grid-column: 1 / -1; min-height: 110px; }
html.p17 .p27-tile-red small, html.p17 .p27-tile-red .p27-tn { color: #fff !important; }
html.p17 .p27-wide { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin: 18px 0; padding: 16px; background: #111; color: #FFFFFF; }
html.p17[data-theme="dark"] .p27-wide { background: #FFFFFF; color: #000; }
html.p17 .p27-wide strong { display: block; font: 900 1.8rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 4px 0; }
html.p17 .p27-wide .p27-k { color: #A9A6FF; } html.p17[data-theme="dark"] .p27-wide .p27-k { color: #3B3FD8; }
html.p17 .p27-sec { margin-top: 24px; }
html.p17 .p27-sh { display: flex; gap: 10px; align-items: baseline; font: 800 1.1rem Inter, sans-serif; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin: 0; }
html.p17 .p27-list { display: block; }
html.p17 .p27-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; align-items: baseline; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line, #ccc); }
html.p17 .p27-row > strong { grid-column: 2; font-weight: 700; } html.p17 .p27-row > small { grid-column: 2; color: var(--muted, #555); font-size: .85rem; line-height: 1.35; }
html.p17 .p27-row > .p27-tn { grid-row: 1 / span 2; } html.p17 .p27-row > .p27-ar { grid-column: 3; grid-row: 1 / span 2; color: #3B3FD8; }
html.p17 .p27-row:not(:has(.p27-tn)) > strong, html.p17 .p27-row:not(:has(.p27-tn)) > small { grid-column: 1 / span 2; }
html.p17 .p27-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; margin: 0 0 18px; }
html.p17 .p27-stats div { padding: 12px 10px; border-right: 1px solid var(--line, #ccc); } html.p17 .p27-stats div:last-child { border-right: 0; }
html.p17 .p27-stats b { display: block; font: 900 2.4rem/1 Inter, sans-serif; letter-spacing: -.04em; }
html.p17 .p27-stats small { font: 700 .62rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
html.p17 .p27-empty { color: var(--muted, #555); padding: 16px 0; }
html.p17 .p27-fine { font-size: .8rem; color: var(--muted, #555); }
html.p17 .p27-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 2px solid currentColor; background: transparent; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 11px 14px; min-height: 44px; border-radius: 0 !important; cursor: pointer; box-sizing: border-box; }
html.p17 .p27-btn.p27-solid { background: #111; color: #FFFFFF; border-color: #111; }
html.p17[data-theme="dark"] .p27-btn.p27-solid { background: #FFFFFF; color: #000; border-color: #FFFFFF; }
html.p17 .p27-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
/* Today additions */
html.p17 .p27-goalcard { margin: 18px 20px; border-top: 3px solid #3B3FD8; padding-top: 10px; }
html.p17 .p27-gacts { display: grid; gap: 0; }
html.p17 .p27-gbtn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line, #ccc); font-weight: 700; }
html.p17 .p27-feedcard { all: unset; box-sizing: border-box; cursor: pointer; display: block; margin: 18px 20px; padding: 18px; background: #3B3FD8; color: #fff; position: relative; min-height: 150px; }
html.p17 .p27-feedcard .p27-k { color: #fff; }
html.p17 .p27-feedcard strong { display: block; font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.035em; margin: 4px 0 8px; max-width: 85%; }
html.p17 .p27-feedcard small { display: block; max-width: 85%; line-height: 1.4; }
html.p17 .p27-fgo { position: absolute; right: 16px; bottom: 10px; font: 900 2.6rem Inter, sans-serif; }
html.p17 .p27-recent { margin: 18px 0 18px 20px; }
html.p17 .p27-rrow { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border-top: 2px solid currentColor; padding-right: 20px; }
html.p17 .p27-rcard { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 150px; scroll-snap-align: start; padding: 10px 12px 12px 0; margin-right: 12px; border-right: 1px solid var(--line, #ccc); display: flex; flex-direction: column; gap: 3px; }
html.p17 .p27-rcard strong { font: 800 1rem/1.15 Inter, sans-serif; } html.p17 .p27-rcard small { color: var(--muted, #555); font-size: .75rem; }
/* onboarding */
.p27-onb { position: fixed; inset: 0; z-index: 2000; background: var(--bg, #FFFFFF); overflow-y: auto; padding: max(48px, env(safe-area-inset-top)) 22px 40px; box-sizing: border-box; }
html.p17 .p27-onb h1 { font: 900 clamp(2.4rem, 12vw, 4rem)/.95 Inter, sans-serif; letter-spacing: -.045em; margin: 8px 0 10px; }
html.p17 .p27-goals { border-top: 2px solid currentColor; margin-top: 18px; }
html.p17 .p27-goal { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; width: 100%; padding: 18px 0; border-bottom: 1px solid currentColor; }
html.p17 .p27-goal .p27-tn { grid-row: 1 / span 2; font-size: 1.6rem; font-weight: 900; }
html.p17 .p27-goal strong { font: 800 1.4rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } html.p17 .p27-goal small { color: var(--muted, #555); }
html.p17 .p27-goal:hover, html.p17 .p27-goal:focus-visible { background: #3B3FD8; color: #fff; } html.p17 .p27-goal:hover small, html.p17 .p27-goal:hover .p27-tn { color: #fff; }
html.p17 .p27-skip { all: unset; cursor: pointer; margin-top: 18px; text-decoration: underline; font-weight: 700; padding: 10px 0; }
/* study panel */
html.p17 .p27-tabsbar { display: flex; overflow-x: auto; border: 2px solid currentColor; margin-bottom: 14px; scrollbar-width: none; }
html.p17 .p27-tabsbar button { flex: 0 0 auto; appearance: none; border: 0; border-right: 1px solid currentColor; background: transparent; color: inherit; padding: 11px 12px; min-height: 44px; font: 700 .72rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
html.p17 .p27-tabsbar button:last-child { border-right: 0; }
html.p17 .p27-tabsbar [aria-selected="true"] { background: #3B3FD8; color: #fff; }
html.p17 .p27-note { border-bottom: 1px solid var(--line, #ccc); padding: 12px 0; } html.p17 .p27-note p { margin: 4px 0 0; line-height: 1.5; }
html.p17 .p27-qs { padding-left: 1.3em; line-height: 1.5; } html.p17 .p27-qs li { margin: 6px 0; }
html.p17 .p27-ta { width: 100%; box-sizing: border-box; font: 1rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; }

/* ---------- p28: feed, stories, daily, badges, groups, leader, game ---------- */
.p28-x { appearance: none; background: transparent; border: 2px solid currentColor; color: inherit; width: 44px; height: 44px; font: 400 1.5rem/1 Inter, sans-serif; cursor: pointer; border-radius: 0; }
/* feed */
.p28-fbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: var(--bg, #FFFFFF); border-bottom: 2px solid currentColor; }
.p28-fbrand { font: 900 1.4rem Inter, sans-serif; letter-spacing: -.03em; } .p28-ftime { margin-left: auto; font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; }
.p28-feed { position: absolute; inset: 0; top: calc(66px + env(safe-area-inset-top)); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.p28-fcard { box-sizing: border-box; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 22px 22px calc(26px + env(safe-area-inset-bottom)); border-bottom: 1px solid currentColor; position: relative; overflow: hidden; }
.p28-fimg { position: absolute; left: 0; right: 0; top: 0; height: 42%; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.1); border-bottom: 2px solid currentColor; }
.p28-fimg::after { content: ""; position: absolute; inset: 0; background: #3B3FD8; mix-blend-mode: multiply; opacity: .25; }
.p28-kick { display: flex; gap: 10px; align-items: baseline; font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; margin: 0; }
html[data-theme="dark"] .p28-kick { color: #A9A6FF; }
.p28-fn { font: 900 1rem Inter, sans-serif; color: inherit; }
.p28-ft { font: 900 clamp(1.8rem, 8.5vw, 3rem)/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; margin: 0; }
.p28-fb { font: 400 1.12rem/1.5 Georgia, serif; margin: 0; max-height: 40vh; overflow: auto; }
.p28-deb { font: 700 .75rem Inter, sans-serif; letter-spacing: .06em; border-left: 4px solid #3B3FD8; padding-left: 8px; margin: 0; }
.p28-frow { display: flex; align-items: center; gap: 8px; border-top: 2px solid currentColor; padding-top: 10px; }
.p28-ref, .p28-deeper { appearance: none; border: 0; background: transparent; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.p28-deeper { margin-left: auto; color: #3B3FD8; } html[data-theme="dark"] .p28-deeper { color: #A9A6FF; }
.p28-heart { appearance: none; width: 48px; height: 48px; border: 2px solid currentColor; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; border-radius: 0; }
.p28-heart[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; color: #fff; }
.p28-choices { display: grid; gap: 8px; }
.p28-choice { appearance: none; text-align: left; border: 2px solid currentColor; background: transparent; color: inherit; padding: 13px 14px; min-height: 48px; font: 700 1rem Inter, sans-serif; cursor: pointer; border-radius: 0; }
.p28-choice.right { background: #111; color: #FFFFFF; border-color: #111; } html[data-theme="dark"] .p28-choice.right { background: #FFFFFF; color: #000; }
.p28-choice.wrong { background: #3B3FD8; color: #fff; border-color: #3B3FD8; text-decoration: line-through; }
.p28-choice:disabled { cursor: default; opacity: 1; }
.p28-proof { font: 400 1rem/1.45 Georgia, serif; margin: 6px 0 0; min-height: 1.4em; }
.p28-nudge { position: absolute; left: 14px; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 5; background: #111; color: #FFFFFF; padding: 18px; border-top: 6px solid #3B3FD8; }
.p28-nudge .p27-k { color: #A9A6FF; } .p28-nt { font: 800 1.3rem/1.2 Inter, sans-serif; margin: 0 0 6px; }
.p28-nudge .p27-btn { color: #FFFFFF; } .p28-nudge .p27-btn.p27-solid { background: #3B3FD8; border-color: #3B3FD8; }
/* stories */
.p28-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 2px solid currentColor; border-left: 1px solid currentColor; margin-top: 10px; }
.p28-stile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; min-height: 190px; justify-content: flex-end; }
.p28-stimg { display: block; height: 96px; background: #ccc center/cover; filter: grayscale(1); margin: -10px -10px 8px; border-bottom: 1px solid currentColor; }
.p28-stile strong { font: 800 1.05rem/1.1 Inter, sans-serif; } .p28-stile small { color: var(--muted, #555); font-size: .75rem; }
.p28-stile.done::after { content: "✓"; position: absolute; top: 6px; right: 8px; background: #3B3FD8; color: #fff; font: 900 .8rem Inter; padding: 3px 6px; }
.p28-story { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; overflow: hidden; }
.p28-story::before { content: ""; position: absolute; inset: 0; background: var(--p28-bg) center/cover; filter: grayscale(1) brightness(.35); }
.p28-bars { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 4; }
.p28-bars span { flex: 1; height: 3px; background: rgba(244,242,238,.3); overflow: hidden; }
.p28-bars span i { display: block; height: 100%; width: 0; background: #FFFFFF; }
.p28-bars span.done i { width: 100%; } .p28-bars span.on i { animation: p28bar linear forwards; } .p28-bars span.paused i { animation-play-state: paused; }
@keyframes p28bar { from { width: 0 } to { width: 100% } }
.p28-stop { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 4; }
.p28-stop strong { font: 800 1rem Inter, sans-serif; margin-right: auto; }
.p28-pause { appearance: none; width: 44px; height: 44px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; cursor: pointer; border-radius: 0; }
.p28-story .p28-x { border-color: #FFFFFF; color: #FFFFFF; }
.p28-stage { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 90px 22px calc(40px + env(safe-area-inset-bottom)); z-index: 2; pointer-events: none; }
.p28-slide { width: 100%; animation: p28in .28s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
@keyframes p28in { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.p28-sn { font: 900 4.5rem/1 Inter, sans-serif; color: #A9A6FF; margin: 0 0 6px; letter-spacing: -.04em; }
.p28-stext { font: 800 clamp(1.6rem, 7vw, 2.4rem)/1.12 Inter, sans-serif; letter-spacing: -.025em; margin: 0 0 14px; }
.p28-sref { appearance: none; background: transparent; border: 0; border-top: 2px solid #FFFFFF; color: #FFFFFF; padding: 12px 0 0; font: 700 .8rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 5; }
.p28-tap { position: absolute; top: 80px; bottom: 120px; z-index: 3; background: transparent; border: 0; cursor: pointer; } .p28-tapl { left: 0; width: 35%; } .p28-tapr { right: 0; width: 65%; }
.p28-slkey blockquote { font: 400 1.6rem/1.35 Georgia, serif; margin: 0 0 8px; border-left: 6px solid #3B3FD8; padding-left: 14px; }
.p28-skref { font: 800 1.1rem Inter, sans-serif; } .p28-story .p27-k { color: #A9A6FF; }
.p28-onblack { color: #FFFFFF !important; border-color: #FFFFFF !important; }
.p28-story .p27-btn.p27-solid, .p28-pres .p27-btn.p27-solid, .p28-game .p27-btn.p27-solid { background: #3B3FD8 !important; border-color: #3B3FD8 !important; color: #fff !important; }
.p28-map { border: 2px solid #FFFFFF; } .p28-mapsvg { display: block; width: 100%; height: auto; max-height: 46vh; }
.p28-sea { fill: #1a1a1a; } .p28-land { fill: #3a3a3a; stroke: #FFFFFF; stroke-width: .3; } .p28-dot { fill: #FFFFFF; } .p28-pulse { fill: #3B3FD8; opacity: .6; }
.p28-mapname { font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 10px; } .p28-simg { height: 40vh; background: center/cover; filter: grayscale(1); }
/* daily + badges */
.p28-dprog { display: flex; gap: 4px; margin: 6px 0 14px; } .p28-dprog span { flex: 1; height: 6px; border: 1px solid currentColor; } .p28-dprog .done { background: currentColor; } .p28-dprog .on { background: #3B3FD8; border-color: #3B3FD8; }
.p28-dq { display: block; margin: 0 0 8px; color: #3B3FD8; } html[data-theme="dark"] .p28-dq { color: #A9A6FF; }
.p28-wide { width: 100%; margin-top: 12px; }
.p28-big { font: 900 6rem/1 Inter, sans-serif; letter-spacing: -.06em; margin: 8px 0; }
.p28-friend { background: #3B3FD8; color: #fff; padding: 12px 14px; font-weight: 700; }
.p28-review { padding-left: 1.4em; } .p28-review li { padding: 8px 0; border-bottom: 1px solid var(--line, #ccc); } .p28-review small, .p28-review a { display: block; } .p28-review a { color: inherit; font-weight: 700; font-size: .85rem; }
.p28-cnum { margin-left: auto; font-size: .85rem; }
.p28-cgrid { margin-top: 10px; } .p28-crow { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; padding: 3px 0; border-bottom: 1px solid var(--line, #ddd); }
.p28-cb { font: 700 .66rem Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.p28-cells { display: flex; flex-wrap: wrap; gap: 2px; } .p28-cells a { width: 9px; height: 9px; border: 1px solid currentColor; box-sizing: border-box; } .p28-cells a.on { background: #3B3FD8; border-color: #3B3FD8; }
.p28-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); border-top: 2px solid currentColor; border-left: 1px solid var(--line, #ccc); margin: 10px 0 24px; }
.p28-badge { padding: 12px; border-right: 1px solid var(--line, #ccc); border-bottom: 1px solid var(--line, #ccc); opacity: .5; display: flex; flex-direction: column; gap: 3px; }
.p28-badge.on { opacity: 1; background: #111; color: #FFFFFF; } html[data-theme="dark"] .p28-badge.on { background: #FFFFFF; color: #000; }
.p28-badge strong { font: 800 1rem Inter, sans-serif; } .p28-badge small { font-size: .75rem; } .p28-btier { font: 700 .6rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; } .p28-badge.on .p28-btier { color: #A9A6FF; }
html.p17 .p28-badges .p28-badge:not(.on) small, html.p17 .p28-badge:not(.on) strong { color: inherit; }
/* group plans */
.p28-gtitle { font: 900 2rem/1 Inter, sans-serif; letter-spacing: -.03em; margin: 18px 0 6px; }
.p28-checkin { border-left: 6px solid #3B3FD8; padding: 6px 0 6px 12px; margin: 12px 0; }
.p28-weeks { list-style: none; padding: 0; border-top: 2px solid currentColor; }
.p28-week { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line, #ccc); }
.p28-wn { font: 900 2.2rem/1 Inter, sans-serif; letter-spacing: -.04em; grid-row: 1 / span 2; } .p28-week strong { display: block; font-weight: 800; } .p28-week small { color: var(--muted, #555); }
.p28-wacts { grid-column: 2; display: flex; gap: 8px; }
/* leader / presenter: TV-friendly */
.p28-pres { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; display: flex; flex-direction: column; outline: none; }
.p28-ptop, .p28-gtop { display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; border-bottom: 2px solid #FFFFFF; }
.p28-pbrand { font: 800 .8rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin-right: auto; }
.p28-pres .p28-x, .p28-game .p28-x { border-color: #FFFFFF; color: #FFFFFF; }
.p28-pbtn { appearance: none; min-width: 44px; height: 44px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font: 700 .9rem Inter, sans-serif; cursor: pointer; border-radius: 0; padding: 0 8px; }
.p28-clock { appearance: none; height: 44px; padding: 0 12px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font: 900 1.3rem Inter, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 0; }
.p28-clock.on { background: #3B3FD8; border-color: #3B3FD8; } .p28-clock.done { background: #FFFFFF; color: #000; }
.p28-pstage { flex: 1; display: flex; align-items: center; padding: 4vh 6vw; overflow: auto; }
.p28-pslide { width: 100%; animation: p28in .25s cubic-bezier(.2,.8,.2,1); }
.p28-pk { font: 700 clamp(.8rem, 1.6vw, 1.3rem) Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #A9A6FF; margin: 0 0 2vh; }
.p28-pt { font: 900 clamp(2rem, 6.4vw, 6.5rem)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.035em; margin: 0; }
.p28-pt.long { font-size: clamp(1.6rem, 4.6vw, 4.6rem); }
.p28-ps { font: 700 clamp(1rem, 2.2vw, 2rem) Inter, sans-serif; margin: 2vh 0 0; border-top: 3px solid #FFFFFF; padding-top: 1.5vh; display: inline-block; }
.p28-pbot { display: flex; align-items: center; border-top: 2px solid #FFFFFF; padding-bottom: env(safe-area-inset-bottom); }
.p28-pnav { appearance: none; flex: 1; height: clamp(64px, 10vh, 110px); border: 0; background: transparent; color: #FFFFFF; font: 900 clamp(1.8rem, 4vw, 3rem) Inter, sans-serif; cursor: pointer; }
.p28-pnav:last-child { background: #3B3FD8; } .p28-pnav:disabled { opacity: .3; }
.p28-pcount { flex: 0 0 auto; padding: 0 20px; font: 900 clamp(1rem, 2vw, 1.6rem) Inter, sans-serif; font-variant-numeric: tabular-nums; }
.p28-cin { width: 100%; box-sizing: border-box; margin: 3vh 0 1.5vh; font: 700 clamp(1.2rem, 3vw, 2.4rem) Inter, sans-serif; padding: 14px; background: transparent; color: #FFFFFF; border: 3px solid #FFFFFF; border-radius: 0; }
/* print */
.p28-print { position: fixed; inset: 0; z-index: 3000; background: #fff; color: #000; overflow: auto; padding: 28px; font: 12pt/1.45 Inter, Helvetica, sans-serif; }
.p28-print h1 { font: 900 26pt/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 4px 0 6px; } .p28-print h2 { font: 800 10pt Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 4px; margin: 18px 0 8px; }
.p28-print li { margin: 0 0 10px; } .p28-lines { display: block; height: 22px; border-bottom: 1px solid #999; }
.p28-lnotes { color: #333; font-size: 10pt; }
@media print { html.p28-printing body > *:not(.p28-print) { display: none !important; } .p28-print { position: static; padding: 0; } .p28-noprint { display: none !important; } }
/* game night */
.p28-game { position: absolute; inset: 0; background: #0B0B0B; color: #FFFFFF; overflow-y: auto; padding-bottom: 30px; }
.p28-game > *:not(.p28-gtop) { margin-left: 20px; margin-right: 20px; }
.p28-gh { font: 900 clamp(2.4rem, 11vw, 5rem)/.95 Inter, sans-serif; letter-spacing: -.045em; margin: 18px 0 10px; } .p28-pass { color: #A9A6FF; }
.p28-gsub { color: #cfcac2; line-height: 1.45; } .p28-fine { font-size: .8rem; }
.p28-plist { display: grid; gap: 8px; margin: 14px 0 8px; } .p28-pin, .p28-gopts select { font: 700 1.1rem Inter, sans-serif; padding: 12px; background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF; border-radius: 0; min-height: 48px; }
.p28-gopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; } .p28-gopts option { color: #000; }
.p28-gq { font: 900 clamp(1.7rem, 7vw, 3.4rem)/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 8px 0 16px; }
.p28-gch .p28-choice { border-color: #FFFFFF; color: #FFFFFF; } .p28-gch .p28-choice.right { background: #FFFFFF; color: #000; } .p28-gproof { color: #cfcac2; }
.p28-board { list-style: none; padding: 0; margin: 20px; border-top: 2px solid #FFFFFF; } .p28-board li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #555; font-size: 1.1rem; } .p28-board li.on { color: #A9A6FF; } .p28-board b { font: 900 1.4rem Inter, sans-serif; }
@media (prefers-reduced-motion: reduce) { .p28-slide, .p28-pslide { animation: none; } }
html.p17.v2 .v2-tabs button[data-v2tab="plans"], html.p17.v2 .v2-tabs button[data-v2tab="more"], html.p17.v2 .v2-tabs button[data-v2tab="study"] { display: none !important; }
html.p17 .p28-pres h1, html.p17 .p28-pres .p28-pt, html.p17 .p28-game h1, html.p17 .p28-story h1 { color: #FFFFFF !important; }
html.p17 .p28-game .p28-pass { color: #A9A6FF !important; }
.p28-ptop { flex-wrap: wrap; } .p28-pbrand { font-size: .7rem; }
@media (max-width: 480px) { .p28-pres .p28-pbrand { display: none; } .p28-ptop .p28-clock { margin-right: auto; } }
.p28-fimg { height: 48%; }
/* Today, stripped down */
html.p27-today .p12-searchrow, html.p27-today .p13-head-actions, html.p27-today .p17-no, html.p27-today .hx-date, html.p27-today #v2-home-view .p13-wordmark { display: none !important; }
html.p27-today .hx-greet { font-size: clamp(1.7rem, 7.6vw, 2.6rem) !important; line-height: 1.05 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 0 6px !important; }
html.p27-today .hx-greet br { display: none; }
.p27-streak { font: 700 .72rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3B3FD8; white-space: nowrap; }
html[data-theme="dark"] .p27-streak { color: #A9A6FF; }
.p27-today { display: grid; gap: 30px; margin: 18px 0 34px; }
html.p17 .p27-today .p27-feedcard { margin: 0; min-height: 190px; }
html.p17 .p27-tread { border-top: 3px solid currentColor; padding-top: 12px; }
html.p17 .p27-tr-h { font: 900 clamp(2.2rem, 10vw, 3.4rem)/.98 Inter, sans-serif; letter-spacing: -.04em; margin: 4px 0 10px; }
html.p17 .p27-tr-t { font: 400 1.08rem/1.5 Georgia, serif; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.p17 .p27-tr-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
html.p17 .p27-tr-row .p27-btn { min-width: 120px; }
html.p17 .p27-link { all: unset; cursor: pointer; font: 600 .9rem Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
html.p17 .p27-pray { display: flex; align-items: center; gap: 12px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 10px 0; }
html.p17 .p27-pray-l { all: unset; cursor: pointer; flex: 1; display: flex; flex-direction: column; }
html.p17 .p27-pray-l strong { font: 800 1.05rem Inter, sans-serif; } html.p17 .p27-pray-l small { color: var(--muted, #555); font-size: .8rem; }
html.p17 .p27-more { border-top: 2px solid currentColor; margin: 10px 0 30px; }
html.p17 .p27-more-s { cursor: pointer; list-style: none; padding: 16px 0; font: 800 .8rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; }
html.p17 .p27-more-s::-webkit-details-marker { display: none; }
html.p17 .p27-more-s::after { content: "+"; font-size: 1.2rem; } html.p17 .p27-more[open] .p27-more-s::after { content: "−"; }
html.p17.p27-today #v2-home-view h1.hx-greet { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.02 !important; margin: 14px 0 0 !important; }
html.p17.p27-today #v2-home-view .hx-greet .p17-name { display: inline !important; }
html.p17 .p27-today, html.p17 .p27-more { margin-left: 20px !important; margin-right: 20px !important; }
html.p17 .p27-today { gap: 26px; }
/* ---------- p29: Walk with God ---------- */
.p29-disc { font-size: .8rem; color: var(--muted, #555); border-left: 3px solid currentColor; padding-left: 10px; margin: 0 0 18px; }
.p29-q { border-top: 2px solid currentColor; padding: 12px 0 18px; }
.p29-ql { display: block; font: 800 1.3rem/1.15 Inter, sans-serif; letter-spacing: -.02em; margin-bottom: 10px; }
.p29-rrow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-weight: 700; }
.p29-range { width: 100%; accent-color: #3B3FD8; height: 32px; }
.p29-cval { font: 900 2.6rem/1 Inter, sans-serif; letter-spacing: -.04em; min-width: 2ch; text-align: right; }
.p29-yn { display: grid; gap: 6px; }
.p29-ynb { appearance: none; text-align: left; border: 2px solid currentColor; background: transparent; color: inherit; padding: 12px 14px; min-height: 48px; font: 700 .98rem Inter, sans-serif; cursor: pointer; border-radius: 0; }
.p29-ynb::before { content: "No · "; font-weight: 400; } .p29-ynb[aria-pressed="true"] { background: #111; color: #FFFFFF; border-color: #111; } .p29-ynb[aria-pressed="true"]::before { content: "Yes · "; }
html[data-theme="dark"] .p29-ynb[aria-pressed="true"] { background: #FFFFFF; color: #000; }
.p29-lkrow { border: 0; padding: 0; margin: 0 0 10px; } .p29-lkrow legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.p29-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid currentColor; }
.p29-seg button { appearance: none; border: 0; border-right: 1px solid currentColor; background: transparent; color: inherit; min-height: 44px; font: 800 1rem Inter, sans-serif; cursor: pointer; border-radius: 0; } .p29-seg button:last-child { border-right: 0; }
.p29-seg [aria-checked="true"] { background: #3B3FD8; color: #fff; }
.p29-ta, .p29-vin { width: 100%; box-sizing: border-box; font: 1rem/1.5 Georgia, serif; padding: 12px; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 0; margin-bottom: 8px; }
.p29-vin { font-family: Inter, sans-serif; } .p29-vprev { font: italic .95rem/1.45 Georgia, serif; color: var(--muted, #555); margin: 0; }
.p29-scorebar { position: sticky; bottom: 70px; display: flex; align-items: center; gap: 12px; background: var(--bg, #FFFFFF); border-top: 3px solid currentColor; padding: 10px 0; }
.p29-live { font: 900 2.4rem/1 Inter, sans-serif; letter-spacing: -.04em; } .p29-save { margin-left: auto; }
.p29-big { font: 900 7rem/.9 Inter, sans-serif; letter-spacing: -.06em; margin: 4px 0; }
.p29-today { border-top: 3px solid currentColor; padding-top: 10px; margin-bottom: 20px; }
.p29-care { border: 3px solid #3B3FD8; padding: 14px; margin: 16px 0; } .p29-care a { color: inherit; font-weight: 800; }
.p29-rem, .p29-hist { margin: 24px 0; }
.p29-hl { list-style: none; padding: 0; } .p29-hl li { border-bottom: 1px solid var(--line, #ccc); padding: 10px 0; } .p29-hl p { margin: 4px 0; font: 1rem/1.45 Georgia, serif; }
.p29-vq { margin: 10px 0; border-left: 4px solid #3B3FD8; padding-left: 12px; } .p29-vq p { margin: 0 0 4px; font: 1.02rem/1.45 Georgia, serif; } .p29-vq cite a { font: 700 .75rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: inherit; font-style: normal; }
.p29-chart { width: 100%; height: auto; display: block; border-bottom: 2px solid currentColor; margin: 10px 0; }
.p29-grid { stroke: currentColor; stroke-opacity: .15; stroke-width: 1; } .p29-line { fill: none; stroke: #3B3FD8; stroke-width: 2.5; } .p29-pt { fill: #3B3FD8; }
html[data-theme="dark"] .p29-line { stroke: #A9A6FF; } html[data-theme="dark"] .p29-pt { fill: #A9A6FF; }
.p29-heat { display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 2px; margin: 12px 0; overflow-x: auto; }
.p29-heat i { border: 1px solid var(--line, #ccc); } .p29-heat .l1 { background: #e8c9c9; } .p29-heat .l2 { background: #c97a7a; } .p29-heat .l3 { background: #ad3a3a; } .p29-heat .l4 { background: #3B3FD8; }
.p29-list { list-style: none; padding: 0; } .p29-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #ccc); } .p29-list b { font: 900 1.6rem/1 Inter, sans-serif; min-width: 2.2ch; } .p29-list small { display: block; color: var(--muted, #555); }
.p29-prompt { display: flex; align-items: center; justify-content: space-between; margin-top: -16px; font: 600 .85rem Inter, sans-serif; } .p29-prompt a { color: inherit; text-underline-offset: 3px; padding: 8px 0; }
.p29-hide { appearance: none; background: transparent; border: 0; color: inherit; font-size: 1.2rem; width: 44px; height: 36px; cursor: pointer; }
html.p17 .p27-pray { flex-wrap: wrap; } .p29-prompt { flex: 0 0 100%; margin-top: 4px; border-top: 1px solid var(--line, #ccc); }
html.p17 #v2-ref { max-width: 42vw; overflow: hidden; } html.p17 #v2-ref-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.p17 #p27-more, html.p17 #p27-more > * { max-width: 100%; min-width: 0; overflow-x: hidden; } html.p17 #p27-more .p12-car { overflow-x: auto; }
html.p17 #v2-sheet { overflow-x: hidden; } html.p17 .p11-tlwrap { max-width: 100%; overflow-x: auto; }
/* feed: image in its own block, never overlapping the title */
.p28-fcard { overflow-y: auto; overflow-x: hidden; padding-left: 22px; padding-right: 22px; }
.p28-fimg, html.p17 .p28-fimg { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; flex: 0 1 38vh; height: auto !important; min-height: 96px; max-height: 42vh; margin: -22px -22px 20px; border-bottom: 2px solid currentColor; }
.p28-fcard > .p28-kick { margin-top: 0; }
.p28-fcard > .p28-fimg + .p28-kick { margin-top: auto; }
.p28-ft { line-height: 1.04 !important; padding-top: .06em; overflow-wrap: anywhere; }
@media (max-height: 700px) { .p28-fimg, html.p17 .p28-fimg { flex-basis: 26vh; max-height: 28vh; } .p28-ft { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; } }
/* never let a bleeding row widen the page (iOS/Chrome shrink-to-fit made the whole layout 2x wide) */
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
#p12-choose .p12-chips, .p12-chips { margin-left: calc(-1 * min(22px, (100vw - 100%) / 2)) !important; margin-right: calc(-1 * min(22px, (100vw - 100%) / 2)) !important; }
#v2-home-view, #p27-more-b, .hx-sec { overflow-x: clip; }
/* universal back / close */
.nav-back { position: fixed; z-index: 10050; top: calc(10px + env(safe-area-inset-top)); left: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid currentColor; border-radius: 0 !important; background: #FFFFFF; color: #000; cursor: pointer; }
.nav-back[hidden] { display: none !important; }
html[data-theme="dark"] .nav-back { background: #000; color: #FFFFFF; }
html.p27-full .nav-back, .nav-back.nav-x { background: #000; color: #FFFFFF; border-color: #FFFFFF; }
html.nav-back-on .v2-bar, html.nav-back-on .p28-ftop, html.nav-back-on .p28-ptop, html.nav-back-on .p28-stop, html.nav-back-on .v2-sheet-head, html.nav-back-on .p27-head { padding-left: 64px !important; }
/* verse preview pop-up */
.vpop-scrim { position: fixed; inset: 0; z-index: 10040; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.vpop-scrim.on { opacity: 1; }
.vpop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10045; max-height: 78vh; display: flex; flex-direction: column; background: #FFFFFF; color: #000; border-top: 3px solid #3B3FD8; padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); font-family: Inter, system-ui, sans-serif; }
.vpop.on { transform: none; }
html[data-theme="dark"] .vpop { background: #000; color: #FFFFFF; }
.vpop-grab { display: block; width: 44px; height: 4px; background: currentColor; opacity: .3; margin: 0 auto 10px; }
.vpop-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 2px solid currentColor; padding: 0 0 10px 52px; min-height: 34px; }
.vpop-ref { font: 900 1.5rem/1.05 Inter, sans-serif; letter-spacing: -.03em; } .vpop-tr { font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.vpop-body { overflow-y: auto; max-height: 42vh; padding: 12px 0; font: 1.12rem/1.55 var(--scripture, Georgia, serif); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.vpop-v { margin: 0 0 .5em; } .vpop-v sup { color: #3B3FD8; font: 700 .65em Inter, sans-serif; margin-right: 2px; }
.vpop-acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid currentColor; }
.vpop-b { min-height: 48px; border: 0; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; background: none; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; }
.vpop-b:nth-child(2n) { border-right: 0; } #vpop-open { grid-column: 1 / -1; background: #3B3FD8; color: #fff; border-right: 0; }
.vpop-msg { margin: 8px 0 0; min-height: 1em; font: 600 .8rem Inter, sans-serif; color: #3B3FD8; }
/* corrections + support */
.fb-suggest { display: block; margin: 18px 0 8px; padding: 6px 0; border: 0; background: none; color: inherit; opacity: .65; font: 600 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fb-suggest:hover { opacity: 1; color: #3B3FD8; } .fb-card.fb-suggest, .p28-fcard > .fb-suggest { margin: 4px 0 0; align-self: flex-start; }
.fb-page { margin: 28px 20px 120px; } .fb-vpop { margin: 6px 0 0; }
.fb-wrap { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; }
.fb-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.fb-card { position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: #FFFFFF; color: #000; border-top: 3px solid #3B3FD8; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)) 20px; padding-top: 64px; font-family: Inter, system-ui, sans-serif; box-sizing: border-box; }
html[data-theme="dark"] .fb-card { background: #000; color: #FFFFFF; }
.fb-k { font: 700 .7rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; }
.fb-h { font: 900 1.7rem/1.05 Inter, sans-serif; letter-spacing: -.03em; margin: 0 0 12px; }
.fb-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 14px; border-top: 2px solid currentColor; } .fb-meta div { border-bottom: 1px solid currentColor; padding: 6px 0; } .fb-meta dt { font: 700 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .fb-meta dd { margin: 2px 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.fb-f { display: grid; gap: 4px; margin: 0 0 12px; } .fb-l { font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.fb-f textarea, .fb-f input { font: 1rem/1.4 Inter, sans-serif; padding: 10px; border: 2px solid currentColor; border-radius: 0 !important; background: transparent; color: inherit; width: 100%; box-sizing: border-box; }
.fb-n { font-size: .78rem; opacity: .7; } .fb-msg { color: #3B3FD8; font-weight: 600; min-height: 1em; }
.fb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-btn { min-height: 46px; padding: 0 18px; border: 2px solid currentColor; border-radius: 0 !important; background: none; color: inherit; font: 700 .78rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.fb-solid { background: #3B3FD8; border-color: #3B3FD8; color: #fff; } .fb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.fb-me { margin: 28px 0 0; } .fb-item { border-top: 2px solid currentColor; padding: 12px 0; display: grid; gap: 4px; } .fb-item p { margin: 4px 0; } .fb-p { margin: 6px 0 14px; line-height: 1.5; }
.fb-dline { margin: 14px 0 0; font-size: .82rem; opacity: .8; } .fb-dline a { color: inherit; text-decoration: underline; }
.qa-verse { margin: 0 0 14px; padding: 10px 0 10px 14px; border-left: 4px solid #3B3FD8; font: 1.05rem/1.5 var(--scripture, Georgia, serif); } .qa-verse p { margin: 0 0 6px; } .qa-verse cite { font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; font-style: normal; }
.qa-ans { border-left: 3px solid currentColor; padding: 4px 0 4px 10px; margin: 6px 0; } .qa-ans p { margin: 2px 0 0; } .qa-share { margin: 8px 0; }
/* international basemap */
.p22-mapwrap { position: relative; }
.p22-mapbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; } .p22-zoom { margin-left: auto; display: flex; gap: 6px; }
.p22-mapbar [aria-pressed="true"] { background: #000; color: #FFFFFF; }
svg.p22-world { width: 100%; aspect-ratio: 2 / 1; height: auto; display: block; border: 2px solid currentColor; cursor: grab; user-select: none; -webkit-user-select: none; }
.p22-world .p22-sea { fill: #FFFFFF; } html[data-theme="dark"] .p22-world .p22-sea { fill: #000; }
.p22-world .p22-country { fill: #E4E1DA; stroke: #000; stroke-width: .6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
html[data-theme="dark"] .p22-world .p22-country { fill: #1c1c1c; stroke: #FFFFFF; }
.p22-world .p22-clabs text { fill: #000; opacity: .55; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: .04em; pointer-events: none; } html[data-theme="dark"] .p22-world .p22-clabs text { fill: #FFFFFF; }
.p22-world .p13-dot { fill: #3B3FD8; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; cursor: pointer; } .p22-world .p13-dot.on { fill: #000; }
.p22-card { position: relative; margin: 8px 0 0; padding: 12px 40px 12px 14px; border: 2px solid currentColor; border-left: 6px solid #3B3FD8; display: grid; gap: 4px; } .p22-card[hidden] { display: none; }
.p22-card strong { font: 900 1.15rem/1.1 Inter, sans-serif; } .p22-cacts { display: flex; gap: 6px; margin-top: 4px; } .p22-cx { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.p22-credit { font-size: .7rem; opacity: .6; margin: 6px 0 0; }
/* timeline road story */
.road { position: relative; padding: calc(70px + env(safe-area-inset-top)) 0 120px; background: #FFFFFF; color: #000; font-family: Inter, system-ui, sans-serif; overflow-x: clip; }
html[data-theme="dark"] .road { background: #000; color: #FFFFFF; }
.road-intro { padding: 0 22px 30px; border-bottom: 2px solid currentColor; margin: 0 22px; padding-left: 0; }
.road-k { font: 700 .68rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 6px; }
.road-title { font: 900 clamp(2.4rem, 12vw, 5rem)/.95 Inter, sans-serif; letter-spacing: -.05em; margin: 0 0 10px; } .road-sub { margin: 0; opacity: .7; }
.road-era { position: relative; padding: 0 22px; }
.road-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 8px; border-bottom: 1px solid currentColor; padding: 40px 0; box-sizing: border-box; }
.road-num { font: 900 clamp(5.5rem, 34vw, 12rem)/.82 Inter, sans-serif; letter-spacing: -.07em; margin: 0; overflow-wrap: anywhere; }
.road-unit { font: 700 .8rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin: 0; color: #3B3FD8; }
.road-name { font: 900 clamp(1.8rem, 8vw, 3rem)/1.02 Inter, sans-serif; letter-spacing: -.035em; margin: 6px 0 8px; border-top: 2px solid currentColor; padding-top: 10px; }
.road-img { height: 30vh; min-height: 150px; background-size: cover; background-position: center 50%; filter: grayscale(1) contrast(1.05); border: 2px solid currentColor; }
.road-why { font: 1.08rem/1.45 var(--scripture, Georgia, serif); margin: 6px 0 0; } .road-why .road-k { display: inline; margin-right: 6px; }
.road-books { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.road-book { border: 1.5px solid currentColor; background: none; color: inherit; padding: 6px 10px; font: 700 .7rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; }
.road-track { position: relative; padding: 30px 0 40px; display: flex; flex-direction: column; gap: 26px; }
.road-svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.road-path { fill: none; stroke: #3B3FD8; stroke-width: 3; stroke-linecap: square; } .road-head { fill: #3B3FD8; }
.road-ev { position: relative; z-index: 1; width: 64%; text-align: left; display: grid; gap: 4px; padding: 12px 14px; border: 2px solid currentColor; background: #FFFFFF; color: inherit; font: inherit; border-radius: 0 !important; cursor: pointer; }
html[data-theme="dark"] .road-ev { background: #000; }
.road-ev.l { align-self: flex-start; } .road-ev.r { align-self: flex-end; }
.road-ev strong { font: 900 1.15rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } .road-ev small { font-size: .86rem; line-height: 1.4; opacity: .8; }
.road-evn { font: 700 .66rem Inter, sans-serif; letter-spacing: .14em; color: #3B3FD8; }
.road-ref { justify-self: start; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.road-gap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.road-gapl { background: #FFFFFF; padding: 10px 14px; text-align: center; display: grid; gap: 2px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } html[data-theme="dark"] .road-gapl { background: #000; }
.road-gapl strong { font: 900 1.2rem/1.1 Inter, sans-serif; letter-spacing: -.02em; } .road-gapl span { font: 700 .66rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.road-rail { position: fixed; right: 8px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 8px; }
.road-dot { width: 10px; height: 10px; padding: 0; border: 1.5px solid currentColor; background: #FFFFFF; border-radius: 0 !important; cursor: pointer; } .road-dot.on { background: #3B3FD8; border-color: #3B3FD8; transform: scale(1.35); }
.road-credit { margin: 30px 22px 0; font-size: .72rem; opacity: .6; }
.road-ev, .road-hero > *, .road-gap { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.road-ev:not(.in) { opacity: 0; transform: translateY(18px); } .road-hero:not(.in) > * { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) { .road-ev, .road-hero > *, .road-gap { transition: none !important; opacity: 1 !important; transform: none !important; } }
.road-era { padding-right: 30px; }
/* recommended viewing */
.wt { margin: 22px 0; border-top: 2px solid currentColor; padding-top: 10px; font-family: Inter, system-ui, sans-serif; }
#main > .wt { margin: 30px 22px 40px; }
.wt-k { font: 700 .7rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #3B3FD8; margin: 0 0 8px; }
.wt-item { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; }
.wt-play { width: 40px; height: 40px; display: grid; place-items: center; background: #000; color: #FFFFFF; font-size: 14px; } html[data-theme="dark"] .wt-play { background: #FFFFFF; color: #000; }
.wt-item[data-series="ohob"] .wt-play { background: #3B3FD8; color: #fff; }
.wt-t { display: grid; gap: 2px; } .wt-t strong { font: 700 .98rem/1.25 Inter, sans-serif; } .wt-t small { font-size: .78rem; opacity: .7; }
.wt-ext { opacity: .5; } .wt-note { font-size: .7rem; opacity: .55; margin: 8px 0 0; }
.wt-fcard { background: #000 !important; color: #FFFFFF !important; } .wt-fcard .p28-kick { color: #A9A6FF; } .wt-go { color: #A9A6FF !important; }
.wt-more { margin: 8px 0 0; border: 0; background: none; color: inherit; font: 700 .72rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; cursor: pointer; padding: 6px 0; } .wt-sermon .wt-play { background: transparent; color: inherit; border: 2px solid currentColor; }
/* story fx */
.p28-story.sfx-kb::before { animation: sfxkb 22s ease-in-out infinite alternate; transform-origin: 40% 40%; }
@keyframes sfxkb { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.18) translate(-3%, -2%); } }
.sfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sfx-ph { opacity: 0; animation: sfxin .6s cubic-bezier(.2,.7,.2,1) forwards; display: inline; }
@keyframes sfxin { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
.sfx-name { color: #A9A6FF; font-weight: inherit; }
.sfx-road { fill: none; stroke: #3B3FD8; stroke-width: 1.6; stroke-linecap: square; } .sfx-head { fill: #3B3FD8; }
.p28-slkey.sfx-end blockquote { font: 900 clamp(2rem, 10vw, 4.2rem)/1.02 Inter, sans-serif !important; letter-spacing: -.04em; margin: 8px 0 12px; }
.sfx-nar[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; }
@media (prefers-reduced-motion: reduce) { .p28-story.sfx-kb::before { animation: none; } .sfx-ph { animation: none; opacity: 1; } .sfx-cv { display: none; } }
/* on this page */
.otp { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; background: #FFFFFF; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; margin: 0 0 14px; font-family: Inter, system-ui, sans-serif; }
html[data-theme="dark"] .otp { background: #000; }
.otp-page { top: calc(env(safe-area-inset-top) + var(--barh, 56px)); }
.otp-row { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; } .otp-row::-webkit-scrollbar { display: none; }
.otp-tab, .otp-contents { flex: 0 0 auto; border: 0; background: none; color: inherit; padding: 11px 12px; font: 700 .7rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; border-radius: 0 !important; border-bottom: 3px solid transparent; }
.otp-tab.on { border-bottom-color: #3B3FD8; color: #3B3FD8; }
.otp-contents { border-right: 1px solid currentColor; background: #000; color: #FFFFFF; } html[data-theme="dark"] .otp-contents { background: #FFFFFF; color: #000; }
.otp-list { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 6px 0; list-style: none; background: inherit; border-bottom: 2px solid currentColor; max-height: 55vh; overflow-y: auto; counter-reset: otp; box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.otp-list li { counter-increment: otp; } .otp-list button { width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(0,0,0,.12); background: none; color: inherit; padding: 10px 16px; font: 600 .95rem Inter, sans-serif; cursor: pointer; }
.otp-list button::before { content: counter(otp, decimal-leading-zero) "  "; color: #3B3FD8; font-weight: 800; }
.otp-top { position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 10030; border: 2px solid currentColor; background: #FFFFFF; color: #000; padding: 10px 12px; font: 800 .72rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; }
.otp-top[hidden] { display: none; } html[data-theme="dark"] .otp-top { background: #000; color: #FFFFFF; }
/* p30: trust, translations, journeys, connected, pray */
.p30-sec { margin: 26px 0; } .p30-lede { font-size: 1.05rem; line-height: 1.5; }
.p30-card { border-top: 1px solid currentColor; padding: 12px 0 14px; } .p30-card h3 { margin: 0 0 6px; font: 800 1.05rem Inter, sans-serif; } .p30-card p { margin: 6px 0; line-height: 1.5; }
.p30-k { font: 800 .66rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; }
.p30-fine { font-size: .82rem; opacity: .72; line-height: 1.45; } .p30-src { font-size: .78rem; opacity: .8; } .p30-src a { color: inherit; }
.p30-dbt { display: inline-block; margin-left: 6px; border: 1px solid #3B3FD8; color: #3B3FD8; font: 700 .6rem Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; }
.p30-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; border-top: 2px solid currentColor; padding-top: 10px; } .p30-facts dt { font-weight: 800; } .p30-facts dd { margin: 0; }
.p30-acts { padding-left: 20px; } .p30-acts li { margin: 8px 0; } .p30-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.p30-thread { border-top: 1px solid rgba(0,0,0,.15); padding: 8px 0; } .p30-num { font: 900 2.6rem Inter, sans-serif; margin: 0; color: #3B3FD8; }
.p30-crow { display: grid; grid-template-columns: 1fr; border-top: 1px solid rgba(0,0,0,.15); padding: 8px 0; } .p30-crow small { opacity: .7; }
.p30-faq { border-top: 1px solid currentColor; padding: 10px 0; } .p30-faq summary { font-weight: 800; cursor: pointer; } .p30-go { color: #3B3FD8; font-weight: 700; }
.p30-ver { display: grid; grid-template-columns: 54px 1fr; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.15); } .p30-ver small { grid-column: 2; opacity: .75; font-size: .76rem; }
.p30-bar { position: relative; height: 2px; background: currentColor; } .p30-bar i { position: absolute; top: -5px; width: 12px; height: 12px; margin-left: -6px; background: #000; } .p30-ver.in .p30-bar i { background: #3B3FD8; }
html[data-theme="dark"] .p30-bar i { background: #FFFFFF; } .p30-axis { display: flex; justify-content: space-between; font: 700 .66rem Inter; letter-spacing: .1em; text-transform: uppercase; padding-left: 64px; }
.p30-q { font-family: Georgia, serif; } .p30-picks { font-weight: 800; }
.p30-tglink { display: block; width: 100%; text-align: left; border: 2px solid currentColor; background: none; color: inherit; padding: 10px 12px; margin: 0 0 12px; cursor: pointer; } .p30-tglink strong { display: block; } .p30-tglink small { color: #3B3FD8; }
.p30-jlist { display: grid; gap: 0; } .p30-jcard { display: grid; gap: 4px; padding: 16px 0; border-top: 2px solid currentColor; color: inherit; text-decoration: none; } .p30-jcard strong { font: 900 1.4rem Inter, sans-serif; }
.p30-jbar { height: 4px; background: rgba(0,0,0,.12); } .p30-jbar i { display: block; height: 100%; background: #3B3FD8; } .p30-jn { font-size: .78rem; opacity: .75; }
.p30-steps { list-style: none; padding: 0; } .p30-step { border-top: 1px solid currentColor; padding: 14px 0; } .p30-step.next { border-top: 3px solid #3B3FD8; } .p30-step.done h3 { opacity: .55; }
.p30-step h3 { margin: 0; font: 800 1.1rem Inter, sans-serif; } .p30-sn { color: #3B3FD8; margin-right: 8px; } .p30-why { line-height: 1.5; }
.p30-items { display: flex; flex-wrap: wrap; gap: 6px; } .p30-item, .p30-chip { border: 1px solid currentColor; background: none; color: inherit; padding: 6px 9px; font: 600 .82rem Inter, sans-serif; border-radius: 0 !important; cursor: pointer; text-align: left; }
.p30-done { margin-top: 10px; border: 2px solid currentColor; background: none; color: inherit; padding: 8px 12px; font: 800 .72rem Inter; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; cursor: pointer; } .p30-done[aria-pressed="true"] { background: #3B3FD8; border-color: #3B3FD8; color: #fff; }
.p30-conn { border-top: 2px solid currentColor; margin: 28px 0 10px; padding-top: 10px; } .p30-ch { font: 900 1.2rem Inter, sans-serif; margin: 0 0 8px; } .p30-cg { margin: 10px 0; } .p30-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.p30-pray { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: .8rem; opacity: .85; border-bottom: 1px solid rgba(0,0,0,.15); padding: 4px 26px 8px 0; margin: 0 0 12px; position: relative; font-family: Inter, sans-serif; }
.p30-pref { border: 0; background: none; color: #3B3FD8; font: 700 .8rem Inter; padding: 0; text-decoration: underline; cursor: pointer; } .p30-x { position: absolute; right: 0; top: 0; border: 0; background: none; color: inherit; font-size: 1.1rem; width: 26px; height: 26px; cursor: pointer; }
.p30-pf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: .86rem; margin: 6px 0 10px; } .p30-pfn { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #3B3FD8; color: #fff; font: 800 .66rem Inter; margin-right: 4px; }
.p30-set { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid currentColor; padding: 12px 0; margin-top: 16px; } .p30-set small { display: block; opacity: .7; }
/* trivia */
.tv-sec { margin: 22px 0; } .tv-hint { font-size: .8rem; opacity: .7; }
.tv-facts { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .tv-facts::-webkit-scrollbar { display: none; }
.tv-fact { flex: 0 0 82%; scroll-snap-align: start; border: 2px solid currentColor; padding: 16px; min-height: 210px; display: flex; flex-direction: column; gap: 8px; }
.tv-k { font: 800 .66rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3B3FD8; display: flex; justify-content: space-between; gap: 8px; margin: 0; } .tv-n { color: inherit; }
.tv-ft { font: 700 1.15rem/1.35 Inter, sans-serif; margin: 0; } .tv-note { font-size: .8rem; opacity: .7; margin: 0; } .tv-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tv-pick select { border: 2px solid currentColor; background: none; color: inherit; padding: 10px; font: 600 .9rem Inter; border-radius: 0; }
.tv-best { font: 700 .8rem Inter; margin: 10px 0; } .tv-start, .tv-next { width: 100%; margin-top: 10px; }
.tv-timer { height: 4px; background: rgba(0,0,0,.12); margin: 8px 0; } .tv-timer i { display: block; height: 100%; background: #3B3FD8; transition: width 1s linear; }
.tv-q { font: 800 1.3rem/1.3 Inter, sans-serif; margin: 10px 0; } .tv-ch { display: grid; gap: 8px; }
.tv-opt { border: 2px solid currentColor; background: none; color: inherit; padding: 12px; text-align: left; font: 600 1rem Inter; border-radius: 0 !important; cursor: pointer; }
.tv-opt.right { background: #000; color: #fff; } .tv-opt.wrong { border-color: #3B3FD8; color: #3B3FD8; text-decoration: line-through; } html[data-theme="dark"] .tv-opt.right { background: #FFFFFF; color: #000; }
.tv-ref { border: 0; background: none; color: #3B3FD8; font-weight: 700; text-decoration: underline; padding: 0; cursor: pointer; } .tv-score { font: 900 3.5rem Inter; margin: 10px 0 0; }
.tv-game { display: block; margin-top: 16px; color: #3B3FD8; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tv-timer i { transition: none; } }
.tv-start[hidden] { display: none !important; } .tv-fact { min-height: 0; }
/* p31 */
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; margin: 12px 0 20px; } .st-big { padding: 12px 6px 12px 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.st-big strong { display: block; font: 900 1.7rem Inter, sans-serif; } .st-big small { font-size: .72rem; opacity: .75; }
.st-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 120px; align-items: end; margin: 10px 0 20px; } .st-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.st-bar i { display: block; width: 100%; background: #3B3FD8; min-height: 2px; } .st-bar small { font: 700 .6rem Inter; margin-top: 4px; } .st-top li { margin: 6px 0; }
.yir { position: fixed; inset: 0; z-index: 10040; background: #000; color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; padding: calc(60px + env(safe-area-inset-top)) 26px 40px; }
.yir-prog { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; gap: 4px; } .yir-prog i { flex: 1; height: 3px; background: rgba(255,255,255,.25); } .yir-prog i.on { background: #3B3FD8; }
.yir-x { position: absolute; top: calc(26px + env(safe-area-inset-top)); right: 12px; background: none; border: 0; color: inherit; font-size: 1.8rem; }
.yir-n { font: 900 clamp(3.5rem, 18vw, 6rem)/1 Inter, sans-serif; margin: 0; color: #FFFFFF; } .yir-l { font: 700 1.4rem Inter; margin: 10px 0; } .yir-s { color: #e8a0a0; }
.yir-nav { position: absolute; bottom: calc(30px + env(safe-area-inset-bottom)); left: 20px; right: 20px; display: flex; justify-content: space-between; } .yir-nav button { background: none; border: 2px solid #FFFFFF; color: inherit; padding: 10px 16px; font: 800 .8rem Inter; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; }
.yir-nav button[disabled] { opacity: .3; }
.sn { display: grid; gap: 12px; } .sn-f { display: grid; gap: 4px; } .sn-f input, .sn-f textarea { border: 2px solid currentColor; background: none; color: inherit; padding: 10px; font: 500 1rem Inter; border-radius: 0; }
.sn-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .sn-list { margin-top: 14px; } .sn-item { display: grid; gap: 2px; border-top: 1px solid currentColor; padding: 12px 0; color: inherit; text-decoration: none; } .sn-item small { opacity: .7; }
.rv-count { font: 800 1rem Inter; } .rv-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; border-top: 1px solid currentColor; padding: 10px 0; } .rv-row small { color: #3B3FD8; font: 700 .66rem Inter; letter-spacing: .1em; text-transform: uppercase; }
.rv-row p { font-size: .82rem; opacity: .75; margin: 4px 0; } .rv-note { width: 100%; border: 1px solid rgba(0,0,0,.3); background: none; color: inherit; padding: 6px; font: .85rem Inter; border-radius: 0; } .rv-ok { width: 22px; height: 22px; accent-color: #3B3FD8; }
.p31-fam { display: grid; grid-template-columns: 1fr auto; } .p31-fam input { grid-row: 1 / 3; grid-column: 2; width: 24px; height: 24px; accent-color: #3B3FD8; align-self: center; }
.dp-item { border-top: 1px solid currentColor; padding: 10px 0; } .dp-item summary { cursor: pointer; } .dp-f p { margin: 4px 0; } .dp-web { width: 100%; height: auto; color: inherit; } .dp-webwrap { border: 2px solid currentColor; padding: 10px; margin-bottom: 16px; }
.ws-orig { font: 800 1.4rem Georgia, serif; margin: 0; } .vp-xr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: baseline; }
.dp-kv { border-left: 3px solid #3B3FD8; padding-left: 10px; font-family: Georgia, serif; } .dp-days { padding-left: 18px; } .dp-days li { margin: 8px 0; } .dp-kind { font: 700 .62rem Inter; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 1px 4px; } .dp-fulfilled { color: #3B3FD8; } .ws-e { border-top: 1px solid currentColor; padding: 10px 0; }
html.nav-back-on #v2-sheet.p13-herosheet .v2-sheet-head, #v2-sheet.p13-herosheet .v2-sheet-head { padding: 0 !important; width: 1px !important; overflow: hidden; }
html.nav-back-on .p28-fbar, html.nav-back-on .p28-gtop { padding-left: 64px !important; }

/* full-bleed: page colour edge to edge (incl. iOS overscroll + notch sides), no sideways scroll */
html.v2, html.p17.v2 { background: var(--bg) !important; overflow-x: clip; }
html.v2 body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; max-width: none !important; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html.v2 .v2-tabs { padding-left: max(6px, env(safe-area-inset-left, 0px)) !important; padding-right: max(6px, env(safe-area-inset-right, 0px)) !important; }
html.v2 img, html.v2 svg, html.v2 video { max-width: 100%; }