/* Agape Bible - the Bible in other languages: the text, its fonts, the language list in "Aa", and the first-launch welcome. */

/* ---------- the text in another language (body.lang-x; .tx in each verse, .book-tx in the chapter's heading) ---------- */
.verse .tx { display: none; }
.lang-x .verse .ar, .lang-x .verse .en { display: none; }
.tx, .book-tx { font-family: var(--font-en); }
.lang-x .verse .tx { display: block; font-size: calc(var(--fs) * 1.05); line-height: var(--lh-en, 1.8); color: var(--ink); text-align: start; overflow-wrap: anywhere; }
/* the chapter's heading, always in the app's language */
.chapter-head .book-tx:lang(ar) { font-family: var(--font-ar); font-size: calc(var(--fs) * 1.9); color: var(--accent); line-height: 1.3; }
.chapter-head .book-tx:lang(en) { font-family: var(--font-en); font-size: calc(var(--fs) * 1.25); color: var(--ink-soft); letter-spacing: 1px; text-transform: uppercase; }
.lang-x .verse .tx.fb { opacity: .8; }
/* a verse the language lacks is shown in the app's language, in that language's own font */
.tx:lang(ar), .book-tx:lang(ar) { font-family: var(--font-ar); }
.lang-x .verse .tx:lang(ar) { font-size: var(--fs); line-height: var(--lh-ar, 1.95); }

/* fonts for each alphabet (Coptic, Hebrew, Greek, Cyrillic, Vietnamese are in public/fonts/scripts.css; the rest are the phone's) */
:is(.tx, .book-tx, .txt, .wl-row, .lang-row b, .aa-val b, .bible-srcs b, option):lang(cop) { font-family: 'Noto Sans Coptic', 'Antinoou', 'Segoe UI Historic', sans-serif; }
:is(.tx, .book-tx, .txt, .wl-row, .lang-row b, .aa-val b, .bible-srcs b, option):lang(he) { font-family: 'Noto Serif Hebrew', 'SBL Hebrew', 'Times New Roman', serif; }
:is(.tx, .book-tx, .txt, .wl-row, .lang-row b, .aa-val b, .bible-srcs b, option):is(:lang(grc), :lang(vi)) { font-family: 'Noto Serif', 'Gentium Plus', serif; }
:is(.tx, .book-tx, .txt):is(:lang(ru), :lang(uk), :lang(sr)) { font-family: var(--font-en), 'Noto Serif', serif; }
:is(.tx, .book-tx, .txt, .wl-row, .lang-row b, .aa-val b, .bible-srcs b, option):is(:lang(fa), :lang(ur)) { font-family: var(--font-ar); }
:is(.tx, .book-tx, .txt):lang(zh-Hans) { font-family: 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', serif; }
:is(.tx, .book-tx, .txt):lang(zh-Hant) { font-family: 'Songti TC', 'Noto Serif TC', 'Source Han Serif TC', 'PMingLiU', serif; }
:is(.tx, .book-tx, .txt):lang(ja) { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }
:is(.tx, .book-tx, .txt):lang(ko) { font-family: 'AppleMyungjo', 'Noto Serif KR', 'Batang', serif; }
:is(.tx, .book-tx, .txt):lang(th) { font-family: 'Thonburi', 'Noto Serif Thai', 'Leelawadee UI', 'Tahoma', sans-serif; }
:is(.tx, .book-tx, .txt):lang(hi) { font-family: 'Kohinoor Devanagari', 'Noto Serif Devanagari', 'Nirmala UI', 'Mangal', serif; }
:is(.tx, .book-tx, .txt):lang(ta) { font-family: 'Tamil Sangam MN', 'Noto Serif Tamil', 'Nirmala UI', 'Latha', serif; }
.lang-x .verse .tx:is(:lang(he), :lang(fa), :lang(ur)) { font-size: calc(var(--fs) * 1.08); line-height: var(--lh-ar, 1.95); }
.lang-x .verse .tx:is(:lang(zh-Hans), :lang(zh-Hant), :lang(ja), :lang(ko)) { font-size: var(--fs); line-height: 1.9; }
.lang-x .verse .tx:is(:lang(th), :lang(hi), :lang(ta)) { line-height: 1.95; }

/* ---------- "Aa": the Bible's language, and the list of languages ---------- */
.aa-val { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--label-2); }
.aa-val b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
#aaSheet .sheet-head > span:first-child { justify-self: start; }
#aaSheet .sheet-back { font-size: 26px; line-height: 1; }
#aaSheet .aa-main.hidden, #aaSheet .aa-langs.hidden { display: none; }
.lang-row b { font-weight: 500; font-size: 17px; }
.lang-row .check { color: var(--tint); font-size: 18px; font-weight: 700; visibility: hidden; }
.lang-row.on .check { visibility: visible; }

/* ---------- Settings: the Bible texts and their licences ---------- */
.bible-srcs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.bible-srcs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.bible-srcs b { font-weight: 600; min-width: 5.5em; }
.bible-srcs a { color: var(--tint); text-decoration: none; overflow-wrap: anywhere; }
.bible-srcs small { color: var(--label-2); }

/* ---------- first launch: the app's language, then the Bible's ---------- */
.welcome { position: fixed; inset: 0; z-index: 200; background: var(--group-bg); color: var(--chrome-ink); font-family: var(--font-ui); overflow: hidden; }
.welcome.hide { opacity: 0; transform: scale(1.04); transition: opacity .35s, transform .35s; pointer-events: none; }
.wl-step { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.32, .72, 0, 1), opacity .3s;
  padding: var(--safe-t, env(safe-area-inset-top)) var(--safe-r, env(safe-area-inset-right)) 0 var(--safe-l, env(safe-area-inset-left)); }
.wl-step.off { opacity: 0; pointer-events: none; transform: translateX(30%); }
.wl-step.past { opacity: 0; pointer-events: none; transform: translateX(-30%); }
.wl-one { align-items: center; justify-content: center; gap: 26px; padding-inline: 16px; overflow-y: auto; }
.wl-mark { width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: block; }
.wl-name { margin: -8px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px; text-align: center; }
.wl-one .ios-group { width: min(100%, 420px); margin: 0; }
.wl-one .ios-row { min-height: 58px; font-size: 20px; font-weight: 600; justify-content: center; }
.wl-one .ios-row[data-ui="ar"] { font-family: var(--font-ar); font-size: 23px; }
.wl-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 8px 4px; flex: none; }
.wl-head h2 { margin: 0; font-size: 17px; font-weight: 650; text-align: center; }
.wl-head .sheet-back { justify-self: start; font-size: 28px; line-height: 1; }
.wl-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px 16px; }
.wl-list .ios-group { margin: 0 auto 12px; max-width: 560px; }
.wl-row { font-size: 18px; }
.wl-row .check { color: var(--tint); font-weight: 700; visibility: hidden; }
.wl-row.on .check { visibility: visible; }
.wl-foot { flex: none; padding: 10px 16px calc(14px + var(--safe-b, env(safe-area-inset-bottom))); background: var(--chrome); border-top: .5px solid var(--hairline);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.wl-start { display: block; width: min(100%, 560px); margin: 0 auto; min-height: 52px; border: 0; border-radius: 14px; background: var(--tint); color: var(--row);
  font-family: var(--font-ui); font-size: 18px; font-weight: 700; cursor: pointer; }
.wl-start:active { transform: scale(.98); }
@media (orientation: landscape) and (max-height: 500px) {
  .wl-one { flex-direction: row; flex-wrap: wrap; gap: 18px 28px; }
  .wl-mark { width: 64px; height: 64px; border-radius: 16px; }
  .wl-name { margin: 0; font-size: 24px; }
  .wl-one .ios-group { width: min(100%, 360px); }
}
@media (prefers-reduced-motion: reduce) { .wl-step, .welcome.hide { transition: none; } }