/* Kingdom Code Source Index styles. */
:root{
  color-scheme:light;
  --bg:#ffffff; --surface:#f7f8f6; --hairline:#e6e8e4; --line:#7e8581;
  --ink:#14181a; --muted:#6b726e; --accent:#1c6944; --accent-hover:#145234;
  --tint:#daece3; --on-accent:#ffffff;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;
  --fade:150ms ease-out;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg:#111513; --surface:#1a1f1c; --hairline:#2a312d; --line:#66706a;
    --ink:#e8ece9; --muted:#9ba49f; --accent:#5fc08f; --accent-hover:#7ad2a5;
    --tint:#1f3a2c; --on-accent:#0b1a12;
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#111513; --surface:#1a1f1c; --hairline:#2a312d; --line:#66706a;
  --ink:#e8ece9; --muted:#9ba49f; --accent:#5fc08f; --accent-hover:#7ad2a5;
  --tint:#1f3a2c; --on-accent:#0b1a12;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/26px var(--sans);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:var(--s2) var(--s2) var(--s6)}
header{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--hairline)}
.wordmark{font:600 20px/28px var(--serif);text-decoration:none}
header{position:relative}
.tools{display:flex;align-items:center;gap:4px}
.nav{padding:0 8px;font:500 15px/36px var(--sans);color:var(--muted);text-decoration:none;transition:color var(--fade)}
@media (hover:hover){.nav:hover{color:var(--ink)}}
.tools .nav:nth-of-type(2){margin-right:4px}
.wordmark{white-space:nowrap}
.theme,.menubtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-6px 0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:color var(--fade),background var(--fade)}
.menubtn[aria-expanded=true]{color:var(--ink);background:var(--surface)}
@media (hover:hover){.theme:hover,.menubtn:hover{color:var(--ink);background:var(--surface)}}
.menubtn{margin-right:-6px}
.theme svg,.menubtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menubtn .x,.menubtn[aria-expanded=true] .bars{display:none}
.menubtn[aria-expanded=true] .x{display:block}
.menu{position:absolute;right:-6px;top:calc(100% + 8px);z-index:10;width:224px;margin:0;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menu[hidden]{display:none}
.menu ul{list-style:none;margin:0;padding:0}
.menu a,.menu button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 16px/24px var(--sans);text-align:left;text-decoration:none;cursor:pointer;transition:background var(--fade)}
@media (hover:hover){.menu a:hover,.menu button:hover{background:var(--tint)}}
.menu a,.menu button{justify-content:flex-start;gap:12px}
.menu svg{flex:none;width:18px;height:18px;color:var(--muted)}
.menu svg.fill{fill:currentColor}
.menu svg.line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.menu a:hover svg{color:var(--accent)}}
.menu .nolink{display:none}
.theme .sun{display:none}
:root[data-theme=dark] .theme .sun{display:block}
:root[data-theme=dark] .theme .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .theme .sun{display:block}
  :root:not([data-theme=light]) .theme .moon{display:none}
}
.chip.static{background:transparent;color:var(--muted)}
.search{position:relative}
.sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;margin:0;padding:4px;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;max-height:340px;overflow:auto}
.sug[hidden]{display:none}
.opt{display:grid;grid-template-columns:1fr auto;column-gap:var(--s2);align-items:center;min-height:48px;padding:8px 12px;border-radius:8px;border-left:3px solid transparent;cursor:pointer}
.opt .t{font:600 17px/24px var(--serif)}
.opt .m{font:400 13px/18px var(--sans);color:var(--muted);text-align:right}
.opt[aria-selected=true]{background:var(--tint);border-left-color:var(--accent)}
@media (hover:hover){.opt:hover{background:var(--tint);border-left-color:var(--accent)}}
.opt[aria-selected=true] .t{color:var(--accent)}
.sw{color:var(--muted)}
.verse sup.vn{font:600 12px/1 var(--sans);font-style:normal;color:var(--muted);margin-right:2px}
.read{margin:0}
.rv{display:grid;grid-template-columns:36px 1fr;column-gap:var(--s1);padding:8px 12px 8px 0;margin-top:2px;text-decoration:none;color:inherit;border-left:4px solid transparent;border-radius:8px}
.rv .n{font:600 13px/30px var(--sans);color:var(--muted);text-align:right;padding-right:4px}
.rv .t{font:400 18px/30px var(--serif)}
.rv .t .cap{display:block;margin-top:2px;font:600 13px/18px var(--sans);color:var(--accent)}
.rv.c{border-left-color:var(--accent);background:var(--surface)}
@media (hover:hover){.rv.c:hover{background:var(--tint)}}
.rv.f{outline:2px solid var(--accent);outline-offset:-2px}
.navbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:500 15px/20px var(--sans);text-decoration:none;cursor:pointer;transition:border-color var(--fade),background var(--fade)}
@media (hover:hover){.navbtn:hover{border-color:var(--accent);background:var(--surface)}}
.navbtn[aria-disabled=true]{opacity:.35;pointer-events:none}
.rbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:var(--s1);margin:16px 0 0;padding:8px 0;background:var(--bg);border-bottom:1px solid var(--hairline)}
.rbar .where{flex:1;min-width:0;text-align:center;font:600 17px/22px var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.rbar .where:hover{color:var(--accent)}}
.rtools{display:flex;align-items:center;gap:var(--s1);margin-top:12px;flex-wrap:wrap}
.text{margin-top:16px;font:400 var(--rs,19px)/1.75 var(--serif)}
.text p{margin:0 0 10px}
.text sup{font:600 11px/1 var(--sans);color:var(--muted);margin-right:4px;vertical-align:super}
.text a.vv{display:block;margin-left:-14px;padding:2px 0 2px 11px;border-left:3px solid var(--accent);color:inherit;text-decoration:none;border-radius:0 6px 6px 0;transition:background var(--fade)}
@media (hover:hover){.text a.vv:hover{background:var(--tint)}}
.text .f{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.endnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin-top:24px}
.endnav .btn{width:100%;height:auto;min-height:56px;padding:8px 12px;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;line-height:20px}
.endnav .btn.next{align-items:flex-end;text-align:right}
.endnav .btn small{font:400 13px/18px var(--sans);color:var(--muted)}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;list-style:none;margin:16px 0 0;padding:0}
.cht{position:relative;display:flex;align-items:center;justify-content:center;height:48px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);color:var(--ink);font:500 16px/20px var(--sans);text-decoration:none;transition:border-color var(--fade),background var(--fade)}
@media (hover:hover){.cht:hover{border-color:var(--accent);background:var(--tint)}}
.cht .dot,.legend .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.legend{display:flex;align-items:center;gap:8px;margin-top:12px}
.legend .dot{position:static;display:inline-block}
.contcard{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:24px;padding:var(--s2) var(--s3);border:1px solid var(--hairline);border-radius:12px;background:var(--surface)}
.contcard b{display:block;font:600 19px/26px var(--serif)}
.vnav{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
.wl{display:block;padding:var(--s2) 0;text-decoration:none}
.wl b{display:block;font:600 19px/26px var(--serif);transition:color var(--fade)}
@media (hover:hover){.wl:hover b{color:var(--accent)}}
.wf .lg{color:var(--accent)}
.wl span{display:block;margin-top:2px;font:400 13px/18px var(--sans);color:var(--muted)}
.wl span.en{display:block;margin-top:2px;font:400 16px/24px var(--sans);color:var(--ink)}
.wl span.lang{margin-top:4px}
.enline{margin:var(--s2) 0 0}
.enline .cap{display:block}
.enline b{display:block;margin-top:2px;font:400 22px/30px var(--serif)}
.opt .m{white-space:nowrap}
.opt.w{grid-template-columns:1fr;row-gap:2px}
.opt.w .m{text-align:left;white-space:normal}
.wf{display:grid;grid-template-columns:72px 1fr;column-gap:var(--s2);align-items:start;padding:var(--s2) 0}
.wf .lg{font:600 13px/26px var(--sans);color:var(--accent)}
.wf .w{font:600 22px/26px var(--serif)}
.wf .sc{display:block;margin-top:2px;font:400 24px/32px var(--serif);direction:ltr;text-align:left;unicode-bidi:isolate}
.wf .g{margin:4px 0 0;font:400 16px/24px var(--sans)}
.say{margin:0}
.say p{margin:0;font:400 18px/28px var(--serif)}
.say p + p{margin-top:var(--s2)}
.wordmark .sub{font:500 13px/20px var(--sans);color:var(--muted);margin-left:4px}
.cap a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:color var(--fade)}
@media (hover:hover){.cap a:hover{color:var(--accent)}}
.piece .btn{margin-top:var(--s1)}
.ok{margin-left:var(--s1);color:var(--accent)}
.base{word-break:break-all}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(32px,9vw,44px);line-height:1.15;letter-spacing:-.01em;margin-top:var(--s6)}
h2{font-size:26px;line-height:34px;letter-spacing:-.005em;margin-top:var(--s6)}
h3{font-size:22px;line-height:30px}
.lede{margin:var(--s2) 0 0;max-width:56ch;color:var(--muted)}
h2 + .lede{margin-top:var(--s1)}
.back{display:flex;width:fit-content;align-items:center;gap:2px;margin:calc(var(--s3) - 9px) 0 -12px -6px;padding:12px 12px 12px 0;font:500 15px/20px var(--sans);color:var(--muted);text-decoration:none}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.back:hover{color:var(--ink)}}
.back + h1{margin-top:var(--s2)}
.cap{margin:0;font:400 13px/18px var(--sans);color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
form.search{display:flex;gap:var(--s1);margin-top:var(--s3)}
input[type=search]{flex:1;min-width:0;height:48px;padding:0 var(--s2);border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:400 16px/24px var(--sans)}
input[type=search]::placeholder{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 var(--s2);border-radius:8px;font:500 15px/20px var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--fade)}
.btn[hidden]{display:none}
.btn.primary{height:48px;padding:0 var(--s3);background:var(--accent);color:var(--on-accent);border:0}
@media (hover:hover){.btn.primary:hover{background:var(--accent-hover)}}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
@media (hover:hover){.btn.secondary:hover{background:var(--surface);border-color:var(--accent)}}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;background:var(--surface);border:1px solid var(--hairline);border-radius:8px;font:500 14px/20px var(--sans);text-decoration:none;transition:background-color var(--fade)}
@media (hover:hover){.chip:hover{background:var(--tint);border-color:var(--accent)}}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:var(--s3)}
.card + .card{margin-top:var(--s2)}
.list{list-style:none;margin:0;padding:0}
.list > li + li{border-top:1px solid var(--hairline)}
.q{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;text-decoration:none;min-height:56px}
.q span{font:600 19px/26px var(--serif);text-wrap:balance;transition:color var(--fade)}
@media (hover:hover){.q:hover span{color:var(--accent)}}
.q i{font-style:normal;color:var(--accent);font:600 15px/20px var(--sans)}
.piece{padding:var(--s2) 0}
.piece .t{font:600 18px/26px var(--serif);text-wrap:balance;margin:2px 0}
.piece .t a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:color var(--fade)}
@media (hover:hover){.piece .t a:hover{color:var(--accent)}}
.feature h3{margin:var(--s1) 0 var(--s1)}
.feature h3 a{text-decoration:none}
.feature .btn{margin-top:var(--s2)}
.verse{margin:0;padding:var(--s3);background:var(--surface);border:1px solid var(--hairline);border-left:4px solid var(--accent);border-radius:12px}
.verse p{margin:0;font:400 italic 20px/32px var(--serif)}
.verse p + p{margin-top:2px}
.verse .cap{margin-top:var(--s2)}
.tabs{display:flex;gap:var(--s1);margin-top:var(--s3)}
.tab{height:40px;padding:0 var(--s2);border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:500 15px/20px var(--sans);cursor:pointer;transition:background-color var(--fade)}
@media (hover:hover){.tab:hover{background:var(--surface)}}
.tab[aria-selected=true]{background:var(--tint);border-color:var(--accent);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s1);margin:var(--s2) 0 0;padding:0;list-style:none}
.bk{display:block;height:100%;padding:12px var(--s2);background:var(--surface);border:1px solid var(--hairline);border-radius:12px;text-decoration:none;transition:background-color var(--fade)}
@media (hover:hover){.bk:hover{background:var(--tint);border-color:var(--accent)}}
.bk .n{display:block;font:500 15px/20px var(--sans)}
.bk .m{display:block;margin-top:2px;font:400 12px/16px var(--sans);color:var(--muted)}
.grp{margin-top:var(--s3)}
.grp h3{font-size:18px;line-height:26px}
.grp .chips{margin-top:var(--s1)}
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);padding:12px 0;flex-wrap:wrap}
.row .r{font:600 18px/26px var(--serif)}
.cta{margin-top:var(--s3)}
footer{margin-top:var(--s8);padding-top:var(--s3);border-top:1px solid var(--hairline)}
footer .cap{margin:0}
.about p{margin:var(--s2) 0 0;max-width:56ch;font:400 19px/30px var(--serif)}
.about p a{color:var(--accent)}
.about .act{margin-top:var(--s3)}
.about ol{margin:var(--s2) 0 0;padding-left:1.3em;max-width:56ch;font:400 19px/30px var(--serif)}
.about li + li{margin-top:var(--s1)}
.tier{margin-top:var(--s4)}
.tier h2{display:flex;align-items:center;gap:12px;margin:0 0 var(--s1)}
.tb{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:700 18px/1 var(--serif)}
.tier.s .tb{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tier h2 .ts{font:500 15px/22px var(--sans);color:var(--muted)}
.tier .list > li{padding:var(--s2) 0}
.tier .list b{display:block;font:600 17px/24px var(--serif)}
.tier .list p{margin:4px 0 0}
.pp .card{padding-top:8px;padding-bottom:8px}
.pg{margin:var(--s3) 0 0;font:600 18px/26px var(--serif)}
.use{margin:var(--s4) 0 0}
.use div{padding:var(--s1) 0}
.use div + div{border-top:1px solid var(--hairline)}
.use dt{font:600 15px/22px var(--sans)}
.use dd{margin:0;color:var(--muted)}
.dict{padding:var(--s2) 0}
.dict .dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.dict .dw{font:600 24px/32px var(--serif);direction:ltr;unicode-bidi:isolate}
.dict .dt{font:400 16px/24px var(--sans);color:var(--ink)}
.dict .dn{font:600 12px/18px var(--sans);color:var(--accent);letter-spacing:.02em}
.dict .dg{margin:2px 0 0;font:400 16px/24px var(--sans)}
.dict details{margin-top:8px}
.dict summary{display:inline-block;cursor:pointer;font:500 14px/20px var(--sans);color:var(--accent)}
.dict .dd{margin-top:8px;padding-left:12px;border-left:2px solid var(--hairline);font:400 15px/24px var(--sans);color:var(--muted)}
.dict .dd p{margin:0 0 6px}
.btn svg{flex:none;width:18px;height:18px;margin-right:8px;fill:currentColor}
dialog.dlg{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);overflow:hidden}
dialog.dlg::backdrop{background:rgba(0,0,0,.55)}
.dlgbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:8px 8px 8px var(--s2);border-bottom:1px solid var(--hairline)}
.dlgbar h2{margin:0;font-size:18px;line-height:26px}
.dlgbar .ibtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
@media (hover:hover){.dlgbar .ibtn:hover{color:var(--ink);background:var(--surface)}}
.dlgbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dlgbody iframe{display:block;width:100%;height:min(712px,calc(100vh - 150px));border:0;background:#f9f9f9}
.dlgfoot{margin:0;padding:10px var(--s2);border-top:1px solid var(--hairline)}
/* The app (app.html): a side drawer for the menu, and solid bars behind the phone's status bar and buttons */
.menubtn.lead{margin:-6px 6px -6px -8px}
.menubtn.lead ~ .wordmark{margin-right:auto}
dialog.drawer{position:fixed;inset:0 auto 0 0;width:min(320px,85vw);max-width:none;height:100%;max-height:none;margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);border:0;border-right:1px solid var(--hairline);background:var(--bg);color:var(--ink);box-shadow:4px 0 24px rgba(0,0,0,.2);overflow-y:auto;transform:translateX(-100%);transition:transform 180ms cubic-bezier(.4,0,1,1),overlay 180ms allow-discrete,display 180ms allow-discrete}
dialog.drawer[open]{transform:none;animation:drawer-in 260ms cubic-bezier(.2,.8,.2,1)}
dialog.drawer::backdrop{background:rgba(0,0,0,0);transition:background var(--glide,180ms) ease-in,opacity var(--glide,180ms) ease-out,overlay 180ms allow-discrete,display 180ms allow-discrete}
dialog.drawer[open]::backdrop{background:rgba(0,0,0,.5);animation:scrim-in 260ms ease-out}
.drawerin:focus{outline:none}
.drawerin{display:flex;flex-direction:column;min-height:100%;padding:0 var(--s1)}
.drawerbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:var(--s2) 0 var(--s2) 12px;margin-bottom:var(--s1);border-bottom:1px solid var(--hairline)}
.drawerbar .ibtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
@media (hover:hover){.drawerbar .ibtn:hover{color:var(--ink);background:var(--surface)}}
.drawerbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.drawer .menu{position:static;width:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.drawer .menu a,.drawer .menu button{min-height:52px;font-size:17px;gap:16px}
.drawer .menu svg{width:20px;height:20px}
.drawerfoot{margin:auto 0 0;padding:var(--s3) 12px var(--s2)}
html.drawer-open,html.drawer-open body,html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}
/* The verse panel, marks on verses, and the Favorites and Highlights pages (js/marks.js) */
:root{--h-c1:rgba(250,204,21,.38);--h-c2:rgba(74,222,128,.36);--h-c3:rgba(96,165,250,.38);--h-c4:rgba(244,114,182,.36);--h-c5:rgba(251,146,60,.38);--h-c6:rgba(192,132,252,.38)}
[data-product=app] .text p[id^=v]{margin:0 -6px 10px;padding:0 6px;border-radius:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.text p.m-c1{background:var(--h-c1)}.text p.m-c2{background:var(--h-c2)}.text p.m-c3{background:var(--h-c3)}
.text p.m-c4{background:var(--h-c4)}.text p.m-c5{background:var(--h-c5)}.text p.m-c6{background:var(--h-c6)}
.text p.m-u1,.m-u1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent)}
.text p.m-u2,.m-u2{text-decoration:underline double;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent)}
.text p.fav sup::after{content:"\2605";margin-left:2px;color:var(--accent);font-size:10px}
.text p.sel{outline:2px solid var(--accent);outline-offset:2px}
dialog.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:85%;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);border:0;border-top:1px solid var(--hairline);border-radius:16px 16px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -8px 24px rgba(0,0,0,.2);overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform 180ms cubic-bezier(.4,0,1,1),overlay 180ms allow-discrete,display 180ms allow-discrete}
dialog.sheet[open]{transform:none;animation:sheet-in 260ms cubic-bezier(.2,.8,.2,1)}
dialog.sheet::backdrop{background:rgba(0,0,0,0);transition:background 180ms ease-in,overlay 180ms allow-discrete,display 180ms allow-discrete}
dialog.sheet[open]::backdrop{background:rgba(0,0,0,.35);animation:scrim-in 260ms ease-out}
.sheetin{padding:0 var(--s2) var(--s2)}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:var(--s2) 0 4px}
.sheethead h2{margin:0;font:600 21px/28px var(--serif)}
.sheethead .ibtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.sheethead svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sheetmsg{min-height:20px;margin:-8px 0 8px;font:600 14px/20px var(--sans);color:var(--accent)}
.sheetver{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 var(--s2);font:400 15px/22px var(--serif);color:var(--muted)}
.sheetacts,.hlmore{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:6px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);color:var(--ink);font:500 14px/18px var(--sans);cursor:pointer}
.sbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbtn[aria-pressed=true]{border-color:var(--accent);background:var(--tint)}
.sbtn[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}
.sbtn.row{min-height:48px;flex-direction:row}
.sbtn:disabled{opacity:.4;cursor:default}
.notebtn{display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface);color:var(--ink);font:500 15px/20px var(--sans);text-align:left;cursor:pointer}
.notebtn svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notebtn .nbody{display:flex;flex-direction:column;min-width:0}
.notebtn .npreview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 14px/20px var(--serif);color:var(--muted)}
#sheet-note textarea{display:block;width:100%;min-height:128px;max-height:40vh;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:400 17px/26px var(--serif);resize:vertical}
#sheet-note textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.noteacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.noteacts .done{border-color:var(--accent);background:var(--tint)}
.noteacts [hidden]{display:none}
.notehint{margin:8px 0 0}
.noteacts:has([hidden]) .done{grid-column:1/-1}
.bkpaste{margin-top:var(--s3)}
.bkpaste summary{cursor:pointer;color:var(--accent);font:500 16px/24px var(--sans)}
.bkpaste textarea{display:block;width:100%;margin-top:var(--s1);padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:400 14px/20px ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.bkcard{margin-top:var(--s3);padding:var(--s2);border:1px solid var(--hairline);border-radius:12px;background:var(--surface)}
.bkcard p{margin:0 0 var(--s1);font:400 15px/22px var(--sans)}
.bkcard p.act{margin:var(--s2) 0 0}
.bkmsg{margin-top:var(--s2);font:500 15px/22px var(--sans);color:var(--accent)}
.text p.noted::after{content:"";display:inline-block;width:.62em;height:.46em;margin-left:.45em;border:2px solid var(--accent);border-radius:3px;vertical-align:.02em}
.mrow .np{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 4px;white-space:pre-wrap;font:400 17px/25px var(--serif);color:var(--ink)}
.sheetlabel{margin:var(--s2) 0 8px;font:600 12px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:8px}
.sw{height:48px;padding:0;border:2px solid transparent;border-radius:12px;cursor:pointer}
.sw.m-c1{background:var(--h-c1)}.sw.m-c2{background:var(--h-c2)}.sw.m-c3{background:var(--h-c3)}.sw.m-c4{background:var(--h-c4)}.sw.m-c5{background:var(--h-c5)}.sw.m-c6{background:var(--h-c6)}
.sw[aria-pressed=true]{border-color:var(--ink)}
.mlist{margin-top:var(--s3)}
.mrow{display:block;padding:12px 0 12px 12px;border-bottom:1px solid var(--hairline);border-left:4px solid var(--hairline);text-decoration:none}
.mrow .t{display:block;font:600 17px/24px var(--serif)}
.mrow .t i{margin-left:8px;font:400 13px/18px var(--sans);font-style:normal;color:var(--muted)}
.mrow .vp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:400 16px/24px var(--serif);color:var(--muted)}
@media (hover:hover){.mrow:hover .t{color:var(--accent)}}
.mrow.m-c1{border-left-color:rgb(250,204,21)}.mrow.m-c2{border-left-color:rgb(74,222,128)}.mrow.m-c3{border-left-color:rgb(96,165,250)}
.mrow.m-c4{border-left-color:rgb(244,114,182)}.mrow.m-c5{border-left-color:rgb(251,146,60)}.mrow.m-c6{border-left-color:rgb(192,132,252)}
.mrow.m-u1,.mrow.m-u2{border-left-color:var(--accent);text-decoration:none}
.drawerhead{margin:var(--s3) 12px 4px;padding-bottom:6px;border-bottom:1px solid var(--hairline);font:600 12px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drawer .menu .drawerhead:first-child{margin-top:var(--s1)}
/* The app's reading bar in the header, and the reading toolbar at the bottom of a chapter (js/readerbar.js) */
.readbar{display:none;flex:1;min-width:0;align-items:center;gap:0}
body[data-view=read] .readbar:not([hidden]){display:flex}
body[data-view=read] header .wordmark,body[data-view=read] header .tools .nav{display:none}
.rbtn{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:40px;border-radius:8px;color:var(--ink);text-decoration:none}
@media (hover:hover){.rbtn:hover{background:var(--surface)}}
.rbtn[aria-disabled=true]{opacity:.3;pointer-events:none}
.rbtn svg,.readtools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rbtitle{flex:1;min-width:0;padding:0 4px;text-align:center;text-decoration:none;color:var(--ink)}
.rbtitle b{display:block;overflow:hidden;font:600 18px/22px var(--serif);white-space:nowrap;text-overflow:ellipsis}
.rbtitle span{display:block;overflow:hidden;font:400 12px/16px var(--sans);color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.readtools{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:var(--s6);padding:4px 0 env(safe-area-inset-bottom,0px);background:var(--bg);border-top:1px solid var(--hairline);transition:transform 180ms ease-out,visibility 0s}
.readtools[hidden]{display:none}
.readtools.away{transform:translateY(100%);visibility:hidden;transition:transform 180ms ease-out,visibility 0s 180ms}
.readtools button{display:inline-flex;align-items:center;justify-content:center;width:56px;height:48px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.readtools button:hover{background:var(--surface)}}
.readtools button:disabled{opacity:.3;cursor:default;background:transparent}
body[data-view=read] main{padding-bottom:72px}
.hlist{margin-top:var(--s3)}
.dayhead{margin:var(--s4) 0 var(--s1);font:600 14px/20px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:56px;padding:8px 0;border-bottom:1px solid var(--hairline);text-decoration:none}
.hrow .t{font:600 19px/26px var(--serif)}
@media (hover:hover){.hrow:hover .t{color:var(--accent)}}
dialog.drawer{overscroll-behavior:contain;touch-action:pan-y}
.edge{position:fixed;left:0;top:0;bottom:0;z-index:4;width:14px;touch-action:pan-y}
html.drawer-open .edge,html.sheet-open .edge{display:none}
dialog.drawer::backdrop{opacity:var(--scrim,1)}
[data-product=app] body::before,[data-product=app] body::after{content:"";position:fixed;left:0;right:0;z-index:5;background:var(--bg);pointer-events:none}
[data-product=app] body::before{top:0;height:env(safe-area-inset-top,0px)}
[data-product=app] body::after{bottom:0;height:env(safe-area-inset-bottom,0px)}
/* App feel (app.html only): a finger gets an answer the moment it lands, the drawer and panel glide in on any WebView */
@keyframes drawer-in{from{transform:translateX(-100%)}}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes scrim-in{from{opacity:0}}
/* The press colour is the accent, translucent, so it reads on every surface, over a highlighted verse too */
:root{--press:var(--tint)}
@supports (color:color-mix(in srgb,red,blue)){:root{--press:color-mix(in srgb,var(--accent) 24%,transparent)}}
[data-product=app]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-product=app] :is(.btn,.chip,.navbtn,.tab,.cht,.bk,.sbtn,.notebtn,.sw,.rbtn,.readtools button,.theme,.menubtn,.ibtn,.drawer .menu a,.drawer .menu button,.hrow,.mrow,.wl,.q,.rv,.opt),
[data-product=app] .text p[id^=v]{transition:transform 180ms cubic-bezier(.2,.8,.2,1),background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out,box-shadow 180ms ease-out}
/* a button or tile: the colour fills it, and it shrinks a little */
[data-product=app] :is(.btn.secondary,.chip,.navbtn,.tab,.cht,.bk,.sbtn,.notebtn):active{transform:scale(.97);box-shadow:inset 0 0 0 999px var(--press);transition-duration:60ms}
[data-product=app] .btn.primary:active{transform:scale(.97);background-color:var(--accent-hover);transition-duration:60ms}
[data-product=app] .sw:active{transform:scale(.92);transition-duration:60ms}
/* an icon: a soft round patch behind it */
[data-product=app] :is(.rbtn,.readtools button,.theme,.menubtn,.ibtn):active{transform:scale(.88);background-color:var(--surface);box-shadow:inset 0 0 0 999px var(--press);transition-duration:60ms}
/* a row with its own padding, a verse: the colour fills it */
[data-product=app] :is(.drawer .menu a,.drawer .menu button,.rv,.opt):active,
[data-product=app] .text p[id^=v]:active{box-shadow:inset 0 0 0 999px var(--press);transition-duration:60ms}
/* a row that runs flush with the text: the colour reaches past the words, rounded, and nothing moves */
[data-product=app] :is(.hrow,.mrow,.wl,.q):active{border-radius:10px;box-shadow:0 0 0 10px var(--press);transition-duration:60ms}
[data-product=app] :is(.wl,.q,.hrow,.mrow,.bk,.btn,.chip,.tab,.cht,.sbtn,.notebtn,.drawer a,.drawer button,.rbtn,.readtools button){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* a page arrives with a short rise, so the change reads as one movement */
[data-product=app] .fadein{animation:page-in 240ms cubic-bezier(.2,.8,.2,1)}
@keyframes page-in{from{opacity:.3;transform:translateY(10px)}}
/* a drawer being dragged by a finger takes no entrance of its own, and its scrim keeps pace with the glide */
dialog.drawer.swiped::backdrop{animation:none}
.tierfig{margin:var(--s3) 0}
.tierfig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hairline)}
.tierfig figcaption{margin-top:8px}
.fadein{animation:fade var(--fade)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:479px){
  header{gap:var(--s1)}
  .wordmark{display:flex;flex-direction:column;align-items:flex-start}
  .wordmark .sub{margin:0;font-size:12px;line-height:16px}
  .tools{gap:0}
  .nav{padding:0 6px}
  .theme,.menubtn{width:32px}
  .menubtn{margin-right:-4px}
  .menu{right:-4px}
  .menubtn.lead{margin:-6px 4px -6px -6px}
}
@media (max-width:359px){
  .wordmark{font-size:18px}
  .nav{padding:0 4px}
}
@media (min-width:720px){
  .wrap{padding:var(--s4) var(--s3) var(--s8)}
  .grid{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* The app's in-place update: a bar that fills as the new version downloads (js/updates.js) */
.upprog{height:8px;margin:var(--s3) 0 var(--s2);border-radius:99px;background:var(--tint);overflow:hidden}
.upprog i{display:block;height:100%;border-radius:99px;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .25s ease-out}
.upprog.wait i{width:40%;transform:none;animation:up-slide 1.1s ease-in-out infinite}
@keyframes up-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.upprog i{transition:none}.upprog.wait i{animation:none;width:100%;opacity:.5}}

/* The app's icon on its download page */
.appicon{display:block;width:96px;height:96px;margin:var(--s3) 0 var(--s3);filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}

/* Kingdom Code's downloadable guides, on the website's Guides page */
.gcards{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.gcard{border:1px solid var(--hairline);border-radius:14px;background:var(--surface);overflow:hidden}
.gcover{display:block;background:#111}
.gcover img{display:block;width:100%;height:auto;aspect-ratio:1200/675}
.gbody{padding:var(--s3)}
.gbody h3{margin:0 0 2px;font-size:20px;line-height:26px}
.gsub{margin:0 0 var(--s2);font-style:italic;color:var(--muted)}
.gabout{margin:0 0 var(--s2)}
.gbody .act{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 0}

/* A guide's own page: the wide cover, then what is inside */
.gwide{margin:var(--s3) 0 var(--s3);border-radius:14px}
.gcoverimg{display:block;width:100%;height:auto;aspect-ratio:1200/675;background:#111}
.gbody h3 a{color:inherit;text-decoration:none}
.gtoc{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--hairline)}
.gtoc li{display:grid;grid-template-columns:40px 1fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--hairline)}
.gtoc .gpg{font:600 14px/22px var(--sans);color:var(--accent);text-align:right}
.gtoc b{display:block}
.gtoc span:not(.gpg){display:block;color:var(--muted)}

/* The website's front page, as the Kingdom Code archive (js/pages.js, archiveHome). Only the front page is wide. */
html[data-archive] .wrap{max-width:1040px}
.ahero{margin:var(--s3) 0 var(--s4);padding:var(--s6) var(--s3) var(--s4);border-radius:18px;color:#f1f3f0;
  background:radial-gradient(120% 140% at 85% 0%,#1d2a1d 0%,#0e100f 55%,#090a0a 100%);border:1px solid rgba(112,184,80,.32)}
.ahero h1{margin:0;font:700 clamp(30px,8.2vw,72px)/1.04 var(--serif);letter-spacing:-.01em;text-transform:uppercase}
.ahero h1 em{font-style:normal;color:#70b850}
.ahead{max-width:640px;margin:var(--s3) 0 var(--s2);font:700 clamp(18px,5vw,36px)/1.25 var(--sans);letter-spacing:-.01em;color:#f1f3f0}
.alede{max-width:640px;margin:0 0 var(--s4);font:400 clamp(16px,2.2vw,18px)/1.6 var(--sans);color:#aeb7b0}
.ahero .search{margin-top:0;max-width:680px}
.ahero .search input{background:#f6f7f5;color:#14181a;border-color:transparent}
.ahero .chips{margin-top:var(--s2)}
.ahero .chip{background:#171c18;border-color:#2a332c;color:#dfe5e0}
@media (hover:hover){.ahero .chip:hover{border-color:#70b850}}
.ahero .sug{color:#14181a}
.ah2{margin:var(--s6) 0 var(--s2);font:600 13px/18px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.acols{display:grid;gap:var(--s4);grid-template-columns:1fr}
.acols .ah2{margin-top:var(--s3)}
@media (min-width:860px){.acols{grid-template-columns:1.1fr 1fr;gap:var(--s6)}}
.afeat{display:block;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none}
.afeat img{display:block;width:100%;height:auto;aspect-ratio:1200/675;background:#111}
.afeat-b{display:block;padding:var(--s2) var(--s3) var(--s3)}
.afeat-b b{display:block;font:600 22px/28px var(--serif)}
.afeat-b span{display:block;margin-top:2px;font-style:italic;color:var(--muted)}
.afeat-b i{display:block;margin-top:var(--s1);font:400 13px/18px var(--sans);font-style:normal;color:var(--muted)}
.coll{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:860px){.coll{grid-template-columns:repeat(4,1fr)}}
.cc{display:flex;flex-direction:column;gap:4px;height:100%;padding:var(--s2) var(--s2) var(--s3);border:1px solid var(--hairline);border-radius:14px;background:var(--surface);text-decoration:none;transition:border-color var(--fade),transform var(--fade)}
.cc .cn{font:700 34px/38px var(--serif);color:var(--accent)}
.cc b{font:600 18px/24px var(--serif)}
.cc .cd{font-size:14px;line-height:21px;color:var(--muted)}
@media (hover:hover){.cc:hover{border-color:var(--accent)}}
.cc:active{transform:scale(.985)}
@media (min-width:860px){.ahero{padding:var(--s8) var(--s6) var(--s6)}.cc{padding:var(--s3)}}

/* An essay, read on the website */
.essaymeta{margin:var(--s1) 0 var(--s3)}
.essaytext{font:400 19px/1.75 var(--serif);max-width:680px}
.essaytext p{margin:0 0 1.1em}
.essaytext h2,.essaytext h3,.essaytext h4{margin:1.8em 0 .5em;font-family:var(--serif);line-height:1.3}
.essaytext h2{font-size:26px}.essaytext h3{font-size:22px}.essaytext h4{font-size:19px}
.essaytext blockquote{margin:1.3em 0;padding:.1em 0 .1em 1.1em;border-left:3px solid var(--accent);color:var(--ink)}
.essaytext blockquote p{margin:0 0 .6em}
.essaytext hr{border:0;margin:2em auto;width:64px;border-top:1px solid var(--line)}
.essaytext ul,.essaytext ol{margin:0 0 1.1em;padding-left:1.4em}.essaytext li{margin:.25em 0}
.essaytext a{color:var(--accent)}
.essayfoot{margin-top:var(--s4)}

/* Website polish: every control answers a touch or a hover, pages arrive with one short rise, and what opens, opens softly.
   The app has its own version of this above ([data-product=app]). Nothing here moves for a reader who asks for reduced motion. */
html:not([data-product]){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (prefers-reduced-motion:no-preference){
  html:not([data-product]) :is(.btn,.chip,.navbtn,.tab,.cht,.bk,.cc,.afeat,.gcard,.efig,.theme,.menubtn,.ibtn,.q,.wl){transition:transform 180ms cubic-bezier(.2,.8,.2,1),background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out,box-shadow 200ms ease-out}
  html:not([data-product]) .fadein{animation:page-in 260ms cubic-bezier(.2,.8,.2,1)}
  html:not([data-product]) .menu:not([hidden]){transform-origin:top right;animation:pop-in 160ms cubic-bezier(.2,.8,.2,1)}
  html:not([data-product]) .sug:not([hidden]){animation:pop-in 130ms cubic-bezier(.2,.8,.2,1)}
  html:not([data-product]) #support[open]{animation:pop-in 200ms cubic-bezier(.2,.8,.2,1)}
  html:not([data-product]) #support[open]::backdrop{animation:scrim-in 200ms ease-out}
  html:not([data-product]) #loadmsg{animation:pulse 1.2s ease-in-out infinite}
  html.theming,html.theming *,html.theming *::before,html.theming *::after{transition:background-color 260ms ease,color 260ms ease,border-color 260ms ease,fill 260ms ease,stroke 260ms ease!important}
  @media (hover:hover){
    html:not([data-product]) :is(.cc,.bk,.gcard,.afeat):hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.09)}
    html[data-theme=dark]:not([data-product]) :is(.cc,.bk,.gcard,.afeat):hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
    html:not([data-product]) .chip:hover{transform:translateY(-1px)}
    html:not([data-product]) .btn.primary:hover{box-shadow:0 6px 16px rgba(28,105,68,.28)}
  }
  html:not([data-product]) :is(.btn,.chip,.navbtn,.tab,.cht,.bk,.cc,.afeat,.gcard):active{transform:scale(.98);transition-duration:60ms;box-shadow:none}
  html:not([data-product]) :is(.theme,.menubtn,.ibtn):active{transform:scale(.9);transition-duration:60ms}
}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-color-scheme:dark){
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    html:not([data-product]):not([data-theme=light]) :is(.cc,.bk,.gcard,.afeat):hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
  }
}

/* The Bible's own pages point to essays in one separate section, last on the page */
.cited{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.cited h2{margin-top:0}

/* Early Church: a list of figures, and one figure's page */
.efigs{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.efig{display:flex;gap:var(--s2);align-items:center;padding:var(--s2);border:1px solid var(--hairline);border-radius:14px;background:var(--surface);text-decoration:none;color:inherit}
.efig img{flex:none;width:84px;height:105px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--hairline)}
.efig b{display:block;font:600 20px/26px var(--serif)}
.efig .en{display:block;margin-top:2px;color:var(--muted)}
.efig .cap{display:block;margin-top:4px}
@media (hover:hover){.efig:hover b{color:var(--accent)}}
.efigure{margin:var(--s3) 0 var(--s1)}
.efigure img{display:block;width:100%;max-width:360px;height:auto;border-radius:12px;border:1px solid var(--hairline)}
.eover{max-width:680px;margin-top:var(--s3)}
.eover p{margin:0 0 1.1em;font:400 18px/1.7 var(--serif)}

.ahead span{display:block}

/* Berean reader accounts: Become a Berean, My Library, Save buttons (js/account.js) */
.eyebrow{display:flex;align-items:center;justify-content:space-between;margin:var(--s3) 0 var(--s1);font:600 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.acct h1{margin-top:0}
.acctnote{max-width:56ch;margin:var(--s2) 0 0;color:var(--muted)}
.acctform{margin-top:var(--s3);max-width:420px}
.acctform label{display:block;margin-bottom:6px;font:600 14px/20px var(--sans)}
.acctform input{width:100%;height:52px;padding:0 var(--s2);border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:400 17px/24px var(--sans);transition:border-color var(--fade),box-shadow var(--fade)}
.acctform input::placeholder{color:var(--muted)}
.acctform input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.acctform .acctnum{font:600 28px/36px var(--sans);letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.acctform h2{margin-top:0}
.acctform .btn.primary{width:100%;margin-top:var(--s2)}
.acctform .btn[disabled]{opacity:.55;cursor:default}
.acctform .cap{margin-top:var(--s2)}
.acctcaptcha{margin-top:var(--s2);min-height:65px}
.accterr{min-height:20px;margin:var(--s1) 0 0;font:500 14px/20px var(--sans);color:#b3261e}
:root[data-theme=dark] .accterr{color:#f2877e}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .accterr{color:#f2877e}}
.acctlinks{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:var(--s2) 0 0}
.linkbtn{padding:6px 0;border:0;background:none;color:var(--accent);font:500 15px/20px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn.danger{color:#b3261e}
:root[data-theme=dark] .linkbtn.danger{color:#f2877e}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .linkbtn.danger{color:#f2877e}}
.acctlist{list-style:none;margin:var(--s4) 0 var(--s2);padding:0;display:grid;gap:var(--s2);max-width:56ch}
.acctlist li{padding-left:var(--s3);position:relative;color:var(--muted)}
.acctlist li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.acctlist b{color:var(--ink)}
.savebar{margin:var(--s2) 0 0}
.savebtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 var(--s2);border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:500 15px/20px var(--sans);cursor:pointer;transition:background-color var(--fade),border-color var(--fade),color var(--fade)}
.savebtn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.savebtn[aria-pressed=true]{background:var(--tint);border-color:var(--accent);color:var(--accent)}
.savebtn[aria-pressed=true] svg{fill:currentColor}
@media (hover:hover){.savebtn:hover{border-color:var(--accent)}}
.toast{position:fixed;left:50%;bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));z-index:30;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 15px/22px var(--sans);box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity 200ms ease-out,transform 200ms ease-out}
.toast.show{opacity:1;transform:translate(-50%,0)}
.libhead{margin-top:var(--s3);padding:var(--s3);border-radius:16px;background:linear-gradient(160deg,#16251c,#0e1812);color:#eef3ef;border:1px solid #26382d}
.libhead .eyebrow{margin-top:0;color:#8fd6ae}
.libhead h1{margin:var(--s1) 0 var(--s1);color:#fff}
.libhead p{margin:0;color:#c3cec7;max-width:46ch}
.libhead .eyebrow{color:#8fd6ae}
.libwelcome{margin-top:var(--s2)!important;padding-top:var(--s2);border-top:1px solid #2c4034;color:#8fd6ae!important;font-weight:600}
.libh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:var(--s6)}
.libh .count,#libsaved h3 .count{font:500 14px/20px var(--sans);color:var(--accent)}
.libguides{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.libguide{display:grid;grid-template-columns:112px 1fr;gap:var(--s2);padding:var(--s2);border:1px solid var(--hairline);border-radius:14px;background:var(--surface)}
.libcover img{display:block;width:100%;height:auto;aspect-ratio:1200/675;object-fit:cover;border-radius:8px;border:1px solid var(--hairline);background:#111}
.libbody h3{margin:0;font:600 18px/24px var(--serif)}
.libbody h3 a{text-decoration:none}
@media (hover:hover){.libbody h3 a:hover{color:var(--accent)}}
.libbody .gsub{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:20px}
.libbody .cap{margin-top:4px}
.libact{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0}
@media (max-width:520px){.libguide{grid-template-columns:1fr}.libcover{max-width:240px}}
#libsaved h3{display:flex;align-items:baseline;gap:var(--s1);margin:var(--s3) 0 0;font:600 16px/24px var(--sans)}
#libsaved h3:first-child{margin-top:var(--s2)}
.libitems{list-style:none;margin:var(--s1) 0 0;padding:0;border:1px solid var(--hairline);border-radius:12px;background:var(--surface)}
.libitem{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:12px var(--s2)}
.libitem + .libitem{border-top:1px solid var(--hairline)}
.libtext{min-width:0}
.libtext > a{font:600 17px/24px var(--serif);text-decoration:none}
@media (hover:hover){.libtext > a:hover{color:var(--accent)}}
.libtext .cap{display:block;margin-top:2px}
.libsnip{display:block;margin-top:4px;color:var(--muted);font:400 15px/22px var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.libsnip:empty{display:none}
.libempty p{margin:0}
.libempty .cap{margin-top:var(--s1)}
.libacct p{margin:0}
.libbtns{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0!important}
.libacct #libdel{margin:var(--s1) 0 var(--s2)}
.libwarn{padding:var(--s2);border:1px solid #b3261e;border-radius:10px}
.btn.danger{background:#b3261e;color:#fff;border:0}
@media (hover:hover){.btn.danger:hover{background:#8f1d17}}

.about .aclose{margin-top:var(--s3);font-weight:600;color:var(--accent)}
.accpreview{margin-top:var(--s2);padding:8px 12px;border:1px dashed var(--line);border-radius:8px}


/* The Daily Witness (js/witness.js) */
.dw{margin:var(--s6) 0 0;padding:var(--s3);border:1px solid var(--hairline);border-top:3px solid var(--accent);border-radius:14px;background:var(--surface)}
.dw .eyebrow{margin:0 0 var(--s1)}
.dwt{margin:0;font:600 28px/36px var(--serif)}
.dwt a{text-decoration:none}
@media (hover:hover){.dwt a:hover{color:var(--accent)}}
.dwref{margin:var(--s1) 0 0;font:500 14px/20px var(--sans);color:var(--accent)}
.dwobs{max-width:58ch;margin:var(--s2) 0 0;font:400 18px/28px var(--serif);color:var(--ink)}
.dwact{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0}
.dwthread{margin-top:var(--s2)}
.wit h1{margin-top:var(--s1)}
.witrefline{margin:var(--s1) 0 0;font:500 15px/22px var(--sans);color:var(--accent)}
.wit h2{margin-top:var(--s6)}
.witdraft{margin-top:var(--s2);padding:8px 12px;border:1px dashed var(--line);border-radius:8px}
.witpass{max-width:50ch;margin:var(--s2) 0 0;padding-left:var(--s2);border-left:3px solid var(--accent)}
.witpass p{margin:0 0 .5em;font:400 20px/32px var(--serif)}
.witpass figcaption{margin-top:var(--s1);font:400 13px/18px var(--sans);color:var(--muted)}
.witpass figcaption a{color:var(--accent)}
.witplace{margin-top:4px}
.wittext{max-width:62ch}
.wittext p{margin:var(--s2) 0 0;font:400 18px/30px var(--serif)}
.wq{quotes:"\201C" "\201D";font-style:italic}
.wcite{font:500 14px/20px var(--sans);color:var(--accent);text-decoration:none;white-space:nowrap}
@media (hover:hover){.wcite:hover{text-decoration:underline}}
.wittake{max-width:62ch;margin:var(--s4) 0 0;padding:var(--s2) var(--s3);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--tint)}
.wittake b{display:block;font:600 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wittake p{margin:var(--s1) 0 0;font:600 19px/29px var(--serif)}
.witx{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.witx li{padding:var(--s2);border:1px solid var(--hairline);border-radius:12px;background:var(--surface)}
.witxref{font:600 15px/22px var(--sans);color:var(--accent);text-decoration:none}
.witx .wq{display:block;margin-top:6px;font:italic 400 18px/28px var(--serif)}
.witx p{margin:6px 0 0;color:var(--muted);font:400 15px/24px var(--sans)}
.wit .act{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0}
.wit .cited,.wit section[aria-labelledby="wit-rel"],.witseq{margin-top:var(--s6)}
.wit .cited h2,.wit section[aria-labelledby="wit-rel"] h2,.witseq h2{margin-top:0}
.witbuilds{margin:var(--s1) 0 0;font:400 15px/24px var(--sans);color:var(--muted)}
.witbuilds a{color:var(--accent)}
.witnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin-top:var(--s2)}
.witnav .btn{height:auto;min-height:56px;padding:8px 12px;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;white-space:normal;line-height:20px}
.witnav .btn.next{align-items:flex-end;text-align:right}
.witnav small{font:400 13px/18px var(--sans);color:var(--muted)}
.witrules{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s1);max-width:60ch}
.witrules li{padding-left:var(--s3);position:relative;color:var(--muted)}
.witrules li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.witrules b{color:var(--ink)}
.witthread{margin-top:var(--s6)}
.witthread .card{margin-top:var(--s2);padding-top:8px;padding-bottom:8px}
.witrow .en{display:block}
.witcov{margin-top:var(--s6)}
.covg{margin-top:var(--s2)}
.covg h3{margin:0;font:600 15px/22px var(--sans)}
.covg .chips{margin-top:var(--s1)}
.chip.cv{color:var(--muted);background:transparent}
.chip.cv.x{border-style:dashed;border-color:var(--accent);color:var(--ink)}
.chip.cv.t{background:var(--tint);border-color:var(--accent);color:var(--accent);font-weight:600}
.dw .eyebrow{flex-wrap:wrap;gap:2px 12px}
.witsoon{margin-top:var(--s4);padding:var(--s2) var(--s3);border:1px solid var(--hairline);border-radius:12px;background:var(--surface);font:500 17px/26px var(--serif)}