/* Agape Bible - iOS-style, mobile-first layer (loaded after styles.css).
   Navigation bar on top, tab bar at the bottom, sheets that slide up, grouped lists, safe areas. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic", "Segoe UI", "Cairo", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --nav-h: 50px; --tab-h: 50px;
  --nav-total: calc(var(--nav-h) + var(--safe-t));
  --tab-total: calc(var(--tab-h) + var(--safe-b));
  --gutter-l: max(16px, calc(var(--safe-l) + 8px)); --gutter-r: max(16px, calc(var(--safe-r) + 8px));
  --chrome: rgba(250, 245, 235, .78); --chrome-ink: #2b1d0e; --hairline: rgba(60, 40, 20, .16);
  --tint: #8a3a16; --tint-soft: rgba(138, 58, 22, .12); --fill: rgba(118, 118, 128, .12); --row: #fffdf8; --group-bg: #f2ece0; --label-2: rgba(60, 40, 20, .6);
  --surface: #f0e3c8; --card-shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 18px rgba(60, 40, 20, .07);
  --glass-edge: inset 0 .5px 0 rgba(255, 255, 255, .7);
  --ease: cubic-bezier(.32, .72, 0, 1);
}
body.night {
  --chrome: rgba(24, 19, 14, .78); --chrome-ink: #f1e4c8; --hairline: rgba(255, 230, 180, .13);
  --tint: #e0a458; --tint-soft: rgba(224, 164, 88, .16); --fill: rgba(118, 118, 128, .24); --row: #1f1913; --group-bg: #120e0a; --label-2: rgba(240, 225, 200, .55);
  --surface: #140f0a; --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --glass-edge: inset 0 .5px 0 rgba(255, 240, 210, .08);
  color-scheme: dark;
}
html, body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
/* the whole app lives in fixed layers: the document itself never scrolls or shifts, and whatever shows around
   the bars (the browser's own toolbar area, the home indicator) is the page colour, never a dark band */
html { height: 100%; background: #f0e3c8; }
html:has(> body.night) { background: #140f0a; }
body { font-family: var(--font-ui); position: fixed; inset: 0; width: 100%; height: 100%; background: var(--surface); }
button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.legacy { display: none !important; }

/* ---------- Navigation bar ---------- */
.navbar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-total); padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px;
  background: var(--chrome); color: var(--chrome-ink); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-bottom: .5px solid transparent; transition: transform .35s var(--ease), opacity .3s, border-color .25s, box-shadow .25s; }
.navbar.scrolled { border-bottom-color: var(--hairline); box-shadow: 0 6px 20px rgba(40, 25, 5, .06); }
.nb-side { display: flex; align-items: center; gap: 0; }
.nb-trail { justify-content: flex-end; }
.nb-btn { width: 44px; height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--tint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font-ui); transition: background .2s, color .2s, transform .15s; }
.nb-btn:active { transform: scale(.9); opacity: .6; }
.nb-btn.on { background: var(--tint); color: var(--row); box-shadow: 0 4px 12px rgba(138, 58, 22, .3); }
.nb-aa { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.nb-title { justify-self: center; position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; height: 38px; border: 0; background: var(--fill); color: var(--chrome-ink); border-radius: 999px; padding: 0 16px; font-family: var(--font-ui); font-size: 16px; font-weight: 650; cursor: pointer; }
.nb-title::after { content: ""; position: absolute; inset: -4px -2px; }
.nb-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-title svg { flex: none; opacity: .6; }
.nb-title:active { opacity: .6; }

/* ---------- Content areas between the bars ---------- */
/* the text runs under the glass bars (phones); a wide screen keeps it between them, beside the side panel */
.layout { inset: 0 !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
.page { padding: calc(var(--nav-total) + 18px) var(--gutter-r) calc(var(--tab-total) + 28px) var(--gutter-l); }
.reader { scroll-padding-top: calc(var(--nav-total) + 8px); }
.chapter-head { margin: 4px 0 18px; }
.banner { display: none !important; }
body.read .navbar, body.read .tabbar { transform: translateY(-120%); opacity: 0; pointer-events: none; }
body.read .tabbar { transform: translateY(120%); }
body.read .layout { inset: 0 !important; }
body.read .page { padding-top: calc(28px + var(--safe-t)); }
.exit-read { top: calc(10px + var(--safe-t)); width: 44px; height: 44px; }

/* ---------- Tab bar ---------- */
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 45; height: var(--tab-total); padding: 0 calc(4px + var(--safe-r)) var(--safe-b) calc(4px + var(--safe-l));
  display: grid; grid-template-columns: repeat(5, 1fr); background: var(--chrome); border-top: .5px solid var(--hairline);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); transition: transform .35s var(--ease), opacity .3s; }
.tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border: 0; background: transparent; color: var(--label-2); font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 0; transition: color .2s; }
.tabbar button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar button > * { position: relative; z-index: 1; }
/* the chosen tab sits on a soft capsule */
.tab-ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; z-index: 0; border-radius: 22px; background: var(--tint-soft); pointer-events: none;
  transition: transform .55s cubic-bezier(.3, 1.3, .45, 1), width .35s var(--ease); }
.tab-ind.still { transition: none; }
.tabbar button.active { color: var(--tint); }
.tabbar button:active svg { transform: scale(.88); }
.tabbar svg { width: 24px; height: 24px; transition: transform .15s; }
.tabbar button.active svg { stroke-width: 2; }

/* ---------- Pages of the other tabs: their own large-title bar ---------- */
body.in-page .navbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
:root { --pvh: 52px; }
.page-view { inset: 0 !important; z-index: 30; overflow: hidden; }
/* a slim bar over the page: clear at the top, glass once the page moves under it; its small title appears when the large one has scrolled away */
.pv-head { position: absolute; inset: 0 0 auto 0; z-index: 3; display: grid; grid-template-columns: minmax(48px, 1fr) minmax(0, auto) minmax(48px, 1fr); align-items: center; gap: 4px;
  height: calc(var(--safe-t) + var(--pvh)); padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l)); border-bottom: .5px solid transparent; background: transparent;
  transition: background-color .25s, border-color .25s, box-shadow .25s; }
.pv-head.scrolled, #pageView.no-lt .pv-head { border-bottom-color: var(--hairline); background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.pv-head.scrolled { box-shadow: 0 6px 20px rgba(40, 25, 5, .06); }
.pv-head h2 { grid-column: 2; font-family: var(--font-ui); font-size: 17px; font-weight: 650; letter-spacing: -.2px; color: var(--chrome-ink); padding: 0; line-height: 1.3; text-align: center;
  opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .3s var(--ease); }
#pageView.collapsed .pv-head h2, #pageView.no-lt .pv-head h2 { opacity: 1; transform: none; }
.page-view[dir="rtl"] .pv-head h2, .page-view[dir="rtl"] .lt { letter-spacing: 0; }
.pv-back { grid-column: 1; justify-self: start; flex: none; border: 0; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.pv-back:active { background: var(--fill); }
body:not(.sub-page) .pv-back { display: none; }
.pv-tools { grid-column: 3; justify-self: end; }
.pv-listen, .pv-icon { width: 44px; height: 44px; }
.pv-body { position: relative; z-index: 1; padding-top: calc(var(--safe-t) + var(--pvh)); padding-bottom: calc(var(--tab-total) + 20px); scroll-padding-top: calc(var(--safe-t) + var(--pvh) + 8px); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lt { margin: 0; padding: 4px var(--gutter-r) 2px var(--gutter-l); font-family: var(--font-ui); font-size: 34px; font-weight: 800; letter-spacing: -.6px; line-height: 1.22; color: var(--chrome-ink); transform-origin: left top; overflow-wrap: anywhere; }
.page-view[dir="rtl"] .lt { transform-origin: right top; }
body.sub-page .lt { font-size: 30px; }
.pv-inner { padding: 14px var(--gutter-r) 14px var(--gutter-l); }

/* ---------- Explanation / Helper: a sheet that slides up ---------- */
.panel { position: fixed !important; z-index: 60; inset: auto 0 0 0; height: calc(100% - var(--safe-t) - 10px); border-radius: 20px 20px 0 0;
  transform: translateY(105%); transition: transform .42s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,.25); border: 0 !important; padding-bottom: var(--safe-b); }
.layout.panel-open .panel { transform: translateY(0); }
.panel.dragging { transition: none; }
.sheet-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--hairline); margin: 7px auto 2px; flex: none; cursor: grab; touch-action: none; }
.panel-tabs { border-bottom: .5px solid var(--hairline); padding: 4px 12px 8px; justify-content: space-between; }
.panel .explain-content { -webkit-overflow-scrolling: touch; }
.ask-form { padding: 8px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l)); align-items: flex-end; background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.ask-form textarea { border-radius: 22px; padding: 11px 16px; font-size: 16px; min-height: 44px; line-height: 1.35; }
.ask-form .send, .ask-form .mic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ask-form .mic { border: 0; background: var(--fill); color: var(--tint); }
.ask-form .mic.on { background: #d93a2b; color: #fff; }

/* wide screens: the explanation is a side panel, like an iPad split view */
@media (min-width: 1024px) {
  .layout.panel-open { grid-template-columns: 1fr min(460px, 40%) !important; }
  .panel { position: relative !important; inset: auto; height: auto; border-radius: 0; transform: none; box-shadow: none; border-inline-start: .5px solid var(--hairline) !important; display: none; padding-bottom: 0; }
  .layout.panel-open .panel { display: flex; }
  .panel .sheet-grabber { display: none; }
  .page { max-width: 760px; }
  .layout { inset: var(--nav-total) 0 var(--tab-total) 0 !important; }
  .page { padding-top: 18px; }
  .reader { scroll-padding-top: 8px; }
}

/* ---------- Segmented control, switches, grouped lists (iOS components) ---------- */
.ios-seg, .seg, .seg.small { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill); border: 0; gap: 0; overflow: visible; }
.ios-seg button, .seg button, .seg.small button { position: relative; min-height: 36px; border: 0; background: transparent; color: var(--chrome-ink); padding: 6px 14px; border-radius: 7px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .2s, box-shadow .2s; }
.ios-seg button::after, .seg button::after { content: ""; position: absolute; inset: -4px 0; }
.ios-seg button.active, .seg button.active, .seg.small button.active { background: var(--row); color: var(--chrome-ink); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08); font-weight: 600; }
.ios-seg .ptab { display: inline-flex; gap: 4px; }
.ios-switch { width: 51px; height: 31px; border-radius: 16px; border: 0; background: var(--fill); position: relative; cursor: pointer; transition: background .25s; flex: none; }
.ios-switch::before { content: ""; position: absolute; inset: -7px -2px; }
.ios-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: inset-inline-start .25s var(--ease); }
.ios-switch[aria-pressed="true"], body.night #nightBtn { background: #34c759; }
.ios-switch[aria-pressed="true"]::after, body.night #nightBtn::after { inset-inline-start: 22px; }
.ios-group { background: var(--row); border-radius: 16px; overflow: hidden; margin: 0 0 22px; box-shadow: var(--card-shadow); }
.ios-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 6px 16px; border: 0; width: 100%; background: transparent; color: var(--chrome-ink); font-family: var(--font-ui); font-size: 16px; text-align: start; position: relative; }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; inset-inline-start: 16px; inset-inline-end: 0; border-top: .5px solid var(--hairline); }
button.ios-row { cursor: pointer; }
button.ios-row:active { background: var(--fill); }
.ios-row .chev { color: var(--label-2); font-size: 20px; }
[dir="rtl"] .ios-row .chev { transform: scaleX(-1); }
.ios-row small { color: var(--label-2); font-size: 13px; }
.ios-link { color: var(--tint) !important; }
.ios-head { margin: 18px 16px 6px; font-size: 13px; color: var(--label-2); text-transform: uppercase; letter-spacing: .2px; }
.stepper { display: inline-flex; background: var(--fill); border-radius: 9px; overflow: hidden; }
.stepper button { border: 0; background: transparent; color: var(--chrome-ink); width: 56px; height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.stepper button + button { border-inline-start: .5px solid var(--hairline); }
.stepper button:active { background: var(--fill); }

/* ---------- Sheets ---------- */
.sheet-shade { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .35s; }
.sheet-shade.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 70; inset: auto 0 0 0; max-height: 80vh; max-height: 80dvh; display: flex; flex-direction: column; background: var(--group-bg); color: var(--chrome-ink);
  border-radius: 20px 20px 0 0; padding: 0 var(--safe-r) var(--safe-b) var(--safe-l); transform: translateY(105%); transition: transform .42s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,.25); font-family: var(--font-ui); }
.sheet.open { transform: translateY(0); }
.sheet.dragging { transition: none; }
.sheet.tall { height: calc(100% - var(--safe-t) - 10px); max-height: none; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 2px 12px 10px; }
.sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; grid-column: 2; }
.sheet-head .sheet-done { grid-column: 3; } /* (also when the back button before them is hidden) */
.sheet-done, .sheet-back { justify-self: end; min-height: 44px; min-width: 44px; border: 0; background: transparent; color: var(--tint); font-family: var(--font-ui); font-size: 17px; font-weight: 600; cursor: pointer; padding: 6px 6px; }
.sheet-back { justify-self: start; font-size: 26px; font-weight: 400; line-height: 1; }
[dir="rtl"] .sheet-back { transform: scaleX(-1); }
.sheet-body { overflow-y: auto; padding: 4px 16px 18px; -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .sheet { inset: auto 0 0 0; margin: 0 auto; max-width: 560px; } }

/* book & chapter picker */
.bs-test { margin: 14px 4px 6px; font-size: 13px; color: var(--label-2); }
.bs-books .ios-row { font-family: var(--font-ar); font-size: 18px; }
.bs-books .ios-row.current { color: var(--tint); font-weight: 700; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.ch-grid button { height: 52px; border: 0; border-radius: 12px; background: var(--row); color: var(--chrome-ink); font-family: var(--font-ui); font-size: 17px; font-weight: 500; cursor: pointer; }
.ch-grid button.current { background: var(--tint); color: var(--row); font-weight: 700; }
.ch-grid button:active { transform: scale(.94); }

/* ---------- Verse actions: an action sheet ---------- */
.verse-pop { left: calc(8px + var(--safe-l)) !important; right: calc(8px + var(--safe-r)); top: auto !important; bottom: calc(var(--tab-total) + 8px); z-index: 58; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
  border-radius: 22px; background: var(--chrome); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--hairline); box-shadow: 0 10px 40px rgba(0,0,0,.25); animation: popUp .3s var(--ease); max-width: 560px; margin: 0 auto; }
@keyframes popUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.vp-ref { text-align: center; font-size: 13px; color: var(--label-2); font-weight: 600; }
.vp-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 52px 52px; gap: 8px; }
.verse-pop .vp-actions button { background: var(--row); border-radius: 12px; padding: 10px 6px; font-size: 13px; color: var(--chrome-ink); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.3; }
.verse-pop .vp-actions button.primary { background: var(--tint); color: var(--row); }
.verse-pop .vp-actions #popMark, .verse-pop .vp-actions #popNote { font-size: 20px; }
.verse-pop .pop-colors { justify-content: center; border: 0; padding: 0; gap: 8px; }
.verse-pop .hl-dot { position: relative; width: 32px; height: 32px; margin: 6px; }
.verse-pop .hl-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.verse-pop .hl-dot.none { min-width: 44px; height: 44px; margin: 0; }

/* ---------- Mini player ---------- */
.play-bar { inset: auto calc(12px + var(--safe-r)) calc(var(--tab-total) + 8px) calc(12px + var(--safe-l)) !important; width: auto !important; margin: 0 auto !important; max-width: 560px; transform: none !important; border-radius: 22px; padding: 6px 8px 6px 12px;
  flex-wrap: nowrap; justify-content: space-between; background: var(--chrome); color: var(--chrome-ink); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--hairline); box-shadow: var(--glass-edge), 0 10px 30px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.08); animation: popUp .35s var(--ease); }
.pb-mode { font-weight: 650; font-size: 14px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pb-controls { display: flex; align-items: center; gap: 0; flex: none; }
.pb-btn { min-width: 44px; height: 44px; background: transparent; color: var(--chrome-ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pb-btn:hover { background: var(--fill); }
.pb-btn:active { transform: scale(.9); }
.pb-btn.main { background: var(--tint); color: var(--row); min-width: 44px; height: 44px; margin: 0 2px; box-shadow: 0 4px 12px rgba(138, 58, 22, .28); }
.pb-btn.main:hover { background: var(--tint); }
.pb-btn.sm { font-size: 17px; color: var(--label-2); }
.pb-btn.on { background: #d93a2b; color: #fff; }
.pb-speed { font-size: 12px; min-width: 32px; color: var(--label-2); }
.play-bar.waiting .pb-btn.main { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
body.has-player .page { padding-bottom: calc(var(--tab-total) + 92px); }
body.has-player .pv-body { padding-bottom: calc(var(--tab-total) + 84px); }
.sage-dock { bottom: calc(var(--tab-total) + 8px); inset-inline-end: calc(8px + max(var(--safe-l), var(--safe-r))); background: var(--chrome); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: .5px solid var(--hairline); }
body.has-player .sage-dock { bottom: calc(var(--tab-total) + 76px); }
.toast { top: calc(var(--nav-total) + 10px); border-radius: 14px; }

/* ---------- Reader details ---------- */
.verse { border-radius: 10px; }
.chapter-foot { gap: 8px; flex-wrap: wrap; justify-content: center; }
.ghost { border-radius: 999px; }
.chat .msg.user { border-radius: 18px; border-end-start-radius: 6px; }
.chat .msg.bot { border-radius: 18px; border-end-end-radius: 6px; }
.chat-intro .sage-intro { width: 84px; height: 84px; }
.hour-card, .srch-item, .saved-item, .plan-day { border-radius: 16px; border: 0; background: var(--row) !important; box-shadow: var(--card-shadow); }
.agpeya-text { padding: 14px var(--gutter-r) 40px var(--gutter-l); }
.drawer, .drawer-shade { display: none !important; }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .page { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  .vp-actions { grid-template-columns: 1fr 1fr 1fr 46px 46px; }
  .verse-pop .vp-actions button span { font-size: 12px; }
  /* the mini player keeps play, next and stop; the rest is in "now playing" */
  .pb-speed, #pbSlower, #pbFaster, #pbPrev, #pbMic { display: none !important; }
  .explain-bar { padding: 8px 10px 4px; }
  .settings .set-row { flex-direction: column; align-items: flex-start; }
}

/* the explanation / helper sheet rises above the bars and the dimming (the layout is its own layer) */
@media (max-width: 1023px) { .layout.panel-open { z-index: 56; } }
.ios-row .chev { display: inline-block; }

/* ---------- Floating tab bar: hugs the bottom edge (just above the home indicator), sized by the safe area ---------- */
body.nav-float { --tab-gap: max(8px, calc(var(--safe-b) - 8px)); --tab-total: calc(64px + var(--tab-gap)); }
body.nav-float .tabbar { inset: auto calc(12px + var(--safe-r)) var(--tab-gap) calc(12px + var(--safe-l)); height: 64px; padding: 0 6px; max-width: 520px; margin: 0 auto;
  border-radius: 28px; border: .5px solid var(--hairline); box-shadow: var(--glass-edge), 0 12px 32px rgba(40, 25, 5, .18), 0 2px 6px rgba(40, 25, 5, .08); }

/* ---------- Touch targets: at least 44 points everywhere ---------- */
.ghost { min-height: 44px; }
.pv-inner .ghost, .rec-bar .ghost { height: auto; min-height: 44px; }
.pv-inner .select, .pg-pickers .select, .pv-tools .select, .kt-pick input[type="date"] { height: 44px; border-radius: 12px; }
.chip { min-height: 44px; padding: 8px 16px; font-size: 14px; border-radius: 22px; }
.pst-authors button, .syn-toc button, .plan-links button { position: relative; min-height: 40px; }
.pst-authors button::after, .syn-toc button::after, .plan-links button::after { content: ""; position: absolute; inset: -2px 0; }
.ex-listen { position: relative; min-height: 32px; }
.ex-listen::after { content: ""; position: absolute; inset: -6px -4px; }
.dialog-actions button { min-height: 44px; }
.saved-item .rm { width: 44px; height: 44px; top: 2px; inset-inline-end: 2px; }
.msg-say { min-width: 44px; min-height: 44px; }
.ex-form .send, .ex-form .mic { height: 44px; width: 44px; }
.pst-form .primary { width: 44px; height: 44px; }
.range input { height: 44px; }
.plan-day label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.plan-day input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--tint); }
.kt-nav { min-width: 48px; min-height: 48px; border-radius: 50%; }
.font-card { min-height: 64px; }
.kt-ref { min-height: 44px; }
.syn-rec-btn { height: 44px; padding: 0 20px; }
.set-ctl .primary { min-height: 44px; border-radius: 12px; font-size: 15px; padding: 0 18px; }
.pst-form textarea { min-height: 44px; padding: 11px 8px; }

/* ---------- Explanation sheet: the pastors on one line that slides sideways ---------- */
.explain-bar { flex-wrap: nowrap; align-items: center; padding: 8px calc(12px + var(--safe-r)) 6px calc(12px + var(--safe-l)); }
#authorSeg { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#authorSeg::-webkit-scrollbar { display: none; }
#authorSeg button { flex: none; white-space: nowrap; }
#exLangSeg { flex: none; }
.explain-sub { padding: 2px calc(16px + var(--safe-r)) 6px calc(16px + var(--safe-l)); }

/* ---------- Reader: end-of-chapter controls ---------- */
.chapter-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; }
.chapter-foot #explainBtn2 { grid-column: 1 / -1; order: -1; }
.chapter-foot .ghost { min-height: 50px; border: 0; border-radius: 16px; background: var(--row); color: var(--chrome-ink); box-shadow: var(--card-shadow); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; transition: transform .15s; }
.chapter-foot .ghost.accent { background: var(--tint); color: var(--row); box-shadow: 0 8px 20px rgba(138, 58, 22, .25); }
.chapter-foot .ghost:active { transform: scale(.97); }

/* ---------- Cards and lists ---------- */
.hour-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.hour-card { position: relative; padding: 16px 18px; transition: transform .15s var(--ease); }
.hour-card:active, .srch-item:active, button.ios-row:active { transform: scale(.985); }
.hour-card b { font-size: 21px; line-height: 1.4; }
.hour-card.now { background: linear-gradient(135deg, #8a3a16, #b5651d) !important; color: #fff; box-shadow: 0 12px 28px rgba(138, 58, 22, .32); }
body.night .hour-card.now { background: linear-gradient(135deg, #5e2e12, #3a2410) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(224, 164, 88, .35); }
.hour-card.now b { color: #fff; }
.hour-card.now small { color: rgba(255, 255, 255, .82); }
.hour-card.now .badge { background: rgba(255, 255, 255, .22); color: #fff; }
.pv-sub { font-size: 15px; }
.srch-form input { border: 0; border-radius: 14px; background: var(--row); box-shadow: var(--card-shadow); min-height: 48px; }
body.night .srch-form input { background: var(--row); }
.srch-form .primary { min-width: 52px; border-radius: 14px; background: var(--tint); color: var(--row); }
.srch-opts { gap: 10px; }
.settings section { background: var(--row); border: 0; border-radius: 16px; padding: 2px 16px 10px; margin: 0 0 16px; box-shadow: var(--card-shadow); }
.settings section h3 { margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: var(--label-2); letter-spacing: .2px; }
.settings .set-row + .set-row { border-top: .5px solid var(--hairline); }
.progress { height: 12px; background: var(--fill); }
.progress div { background: linear-gradient(90deg, var(--tint), var(--gold)); border-radius: 999px; }
.plan-day { padding: 8px 14px 12px; }
.plan-day.today { box-shadow: var(--card-shadow), inset 0 0 0 1.5px var(--gold); }
.plan-links button { background: var(--fill); border: 0; }

/* "More": each page with its own coloured icon tile */
.pv-body .ios-row[data-page] { min-height: 56px; }
.pv-body .ios-row[data-page] > span:first-child { display: inline-flex; align-items: center; gap: 14px; }
.pv-body .ios-row[data-page] .di-ico { position: relative; width: 32px; height: 32px; flex: none; border-radius: 9px; font-size: 0; color: #fff; background: var(--tile, #8a7a66); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); }
.pv-body .ios-row[data-page] .di-ico::before { content: ""; position: absolute; inset: 6px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pv-body .ios-row[data-page] + .ios-row::before { inset-inline-start: 62px; }
.ios-row[data-page="readings"] { --tile: #b5651d; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5C5.5 4 8.5 4 12 6c3.5-2 6.5-2 9-.5V19c-2.5-1.5-5.5-1.5-9 .5-3.5-2-6.5-2-9-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E"); }
.ios-row[data-page="library"] { --tile: #2f6f8f; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='4.5' height='16' rx='1'/%3E%3Crect x='10' y='4' width='4.5' height='16' rx='1'/%3E%3Cpath d='M17 6l3.2.9-3.4 13.2-3.2-.9'/%3E%3C/svg%3E"); }
.ios-row[data-page="synax"] { --tile: #c9962b; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1.7 1.9 2.4 3.2 2.4 4.4a2.4 2.4 0 0 1-4.8 0c0-1.2.7-2.5 2.4-4.4z'/%3E%3Crect x='8.5' y='11' width='7' height='10.5' rx='1.5'/%3E%3C/svg%3E"); }
.ios-row[data-page="pastors"] { --tile: #8a3a16; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.2-4.4A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M12 7.5v8M9 10.5h6'/%3E%3C/svg%3E"); }
.ios-row[data-page="saved"] { --tile: #c2453b; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11v18L12 17l-5.5 4z'/%3E%3C/svg%3E"); }
.ios-row[data-page="plan"] { --tile: #3f7d5a; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); }
.ios-row[data-page="dictionary"] { --tile: #1f7a6e; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18.5V5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0-2 2 2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9.5 13l2.5-6 2.5 6M10.4 11h3.2'/%3E%3C/svg%3E"); }
.ios-row[data-page="settings"] { --tile: #7c7268; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M19 7h1M4 17h3M13 17h7'/%3E%3Ccircle cx='16' cy='7' r='2.5'/%3E%3Ccircle cx='10' cy='17' r='2.5'/%3E%3C/svg%3E"); }
.ios-row[data-page="media"] { --tile: #4b4b9a; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5.5l11-2V16'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='17.5' cy='16' r='2.5'/%3E%3C/svg%3E"); }

/* ---------- Phones on their side: slimmer bars, so the text keeps the room ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --nav-h: 44px; }
  body.nav-float { --tab-gap: max(6px, calc(var(--safe-b) - 6px)); --tab-total: calc(50px + var(--tab-gap)); }
  body.nav-float .tabbar { height: 50px; max-width: 620px; border-radius: 25px; }
  .tabbar button { flex-direction: row; gap: 6px; font-size: 12.5px; }
  .tabbar svg { width: 21px; height: 21px; }
  .tab-ind { border-radius: 16px; }
  :root { --pvh: 44px; }
  .lt, body.sub-page .lt { font-size: 24px; padding-top: 2px; }
  .panel, .sheet { left: 0; right: 0; margin: 0 auto; max-width: 720px; }
  .panel, .sheet.tall { height: calc(100% - var(--safe-t) - 6px); }
  .sheet { max-height: 92dvh; }
  .chat-intro .sage-intro { width: 56px; height: 56px; }
  .chat-intro { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Reader: the bar is clear over the chapter's heading, glass once the text moves under it; a reading-progress hairline ---------- */
@media (max-width: 1023px) {
  .navbar:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* while the explanation sheet is up, the chapter behind it is dimmed (it lies above the bars then); a tap there closes the sheet */
  .layout.panel-open .reader::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 5; animation: fadeIn .35s; }
}
@keyframes fadeIn { from { opacity: 0; } }
.navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.5px; height: 2px; background: linear-gradient(90deg, var(--tint), var(--gold)); transform: scaleX(var(--rp, 0)); transform-origin: left center; opacity: 0; transition: opacity .3s; pointer-events: none; }
[dir="rtl"] .navbar::after { transform-origin: right center; background: linear-gradient(270deg, var(--tint), var(--gold)); }
.navbar.scrolled::after { opacity: .8; }
body.in-page .navbar::after { opacity: 0; }
.chapter-head { cursor: pointer; -webkit-user-select: none; user-select: none; }

/* ---------- Moving between pages and chapters: the previous view, as a still picture, leaves while the new one arrives ---------- */
.fx-ghost { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; pointer-events: none; background: inherit; }
.fx-ghost.under { z-index: 0; }
.fx-ghost .fx-in { overflow: visible; height: auto; }
#pageView.pv-moving #pvBody { background: inherit; box-shadow: 0 0 34px rgba(30, 15, 0, .16); }
.fx-chapter { position: fixed; z-index: 3; background: none; right: auto; bottom: auto; }

/* ---------- Mini player: what is playing, a line for the place in it; a tap opens "now playing" ---------- */
.play-bar { padding: 6px 6px 9px 6px; gap: 2px; overflow: hidden;
  --pb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6h3.2L11 5.8v12.4l-4.3-3.8H3.5z'/%3E%3Cpath d='M15 9.2a4 4 0 0 1 0 5.6M18 6.4a8 8 0 0 1 0 11.2'/%3E%3C/svg%3E"); }
.play-bar.mode-read { --pb-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10 5 7.4 4.5 3.5 5v13.2c3.9-.5 6.5 0 8.5 1.5 2-1.5 4.6-2 8.5-1.5V5c-3.9-.5-6.5 0-8.5 1.6z'/%3E%3Cpath d='M12 6.6v13.1'/%3E%3C/svg%3E"); }
.pb-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px; border: 0; border-radius: 16px; background: transparent; color: inherit; font-family: var(--font-ui); text-align: start; cursor: pointer; }
.pb-art { position: relative; flex: none; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, #7a2e12, #c9962b); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 3px 8px rgba(60, 25, 5, .25); }
.pb-art::before { content: ""; position: absolute; inset: 10px; background: #fff; -webkit-mask: var(--pb-ico) center / contain no-repeat; mask: var(--pb-ico) center / contain no-repeat; }
.pb-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pb-title { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-mode { font-size: 12.5px; font-weight: 500; color: var(--label-2); padding: 0; }
.pb-line { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2.5px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.pb-line i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tint), var(--gold)); transform: scaleX(0); transform-origin: left center; }
.play-bar[dir="rtl"] .pb-line i { transform-origin: right center; background: linear-gradient(270deg, var(--tint), var(--gold)); }
.play-bar.waiting .pb-line i { animation: pulse 1s infinite; }
body.np-open .play-bar { opacity: 0; pointer-events: none; }

/* ---------- Now playing: the full screen ---------- */
.np-sheet { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; padding: var(--safe-t) calc(26px + var(--safe-r)) calc(var(--safe-b) + 18px) calc(26px + var(--safe-l));
  color: #fff; font-family: var(--font-ui); overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 65% at 50% 0%, rgba(201, 150, 43, .38) 0%, transparent 70%), linear-gradient(180deg, #6a2a0f 0%, #2a1208 62%, #160a04 100%);
  transform: translateY(100%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; }
.np-sheet.open { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.np-sheet.dragging { transition: none; }
body.night .np-sheet { background: radial-gradient(120% 65% at 50% 0%, rgba(224, 164, 88, .2) 0%, transparent 70%), linear-gradient(180deg, #3a1a0a 0%, #160b05 65%, #0b0603 100%); }
.np-top { flex: none; width: 100%; max-width: 560px; height: 54px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; touch-action: none; cursor: grab; }
.np-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.np-grab { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.np-art { flex: none; width: min(76vw, 42vh, 360px); width: min(76vw, 42dvh, 360px); aspect-ratio: 1; margin: 12px 0 26px; padding: 22px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: radial-gradient(circle at 30% 18%, #fffaf0 0%, #f3e2bd 50%, #d6b273 100%); color: #7a2e12;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 9px rgba(184, 137, 43, .16);
  transition: transform .7s cubic-bezier(.3, 1.35, .5, 1), box-shadow .7s; }
.np-sheet.paused .np-art { transform: scale(.84); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 0 9px rgba(184, 137, 43, .16); }
#npArtText { font-family: var(--font-ar); font-size: clamp(26px, 8.5vw, 46px); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.np-sheet[dir="ltr"] #npArtText { font-family: var(--font-en); font-weight: 600; }
.np-orn { color: #b8892b; letter-spacing: 6px; font-size: 13px; }
.np-main { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.np-meta h3 { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-sheet[dir="rtl"] .np-meta h3 { letter-spacing: 0; }
.np-meta p { margin: 3px 0 0; font-size: 15px; color: rgba(255, 255, 255, .62); }
.np-text { margin: 0; min-height: calc(3 * 1.75em); font-family: var(--font-ar); font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, .9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.np-text[dir="ltr"] { font-family: var(--font-en); font-size: 19px; line-height: 1.6; min-height: calc(3 * 1.6em); }
.np-sheet.mode-read .np-text { display: none; }
.np-scrub { display: flex; flex-direction: column; gap: 2px; }
#npRange { --p: 0; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
#npRange::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, #fff calc(var(--p) * 100%), rgba(255, 255, 255, .24) 0); }
.np-sheet[dir="rtl"] #npRange::-webkit-slider-runnable-track { background: linear-gradient(to left, #fff calc(var(--p) * 100%), rgba(255, 255, 255, .24) 0); }
#npRange::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .2s; }
#npRange:active::-webkit-slider-thumb { transform: scale(1.45); }
#npRange::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .24); }
#npRange::-moz-range-progress { height: 6px; border-radius: 3px; background: #fff; }
#npRange::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.np-times { display: flex; justify-content: space-between; min-height: 16px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.np-sheet[dir="rtl"] .np-times { flex-direction: row-reverse; }
.np-ctl { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 4px 0; }
.np-btn { width: 64px; height: 64px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.np-btn.main { width: 80px; height: 80px; background: #fff; color: #5a240c; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.np-sheet.waiting .np-btn.main { animation: pulse 1s infinite; }
.np-sheet:not(.mode-listen) .listen-only { display: none; }
.np-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.np-speed { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.np-speed button { width: 50px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 21px; cursor: pointer; }
#npSpeed { min-width: 44px; text-align: center; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.np-round { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.np-round.on { background: #d93a2b; }
@media (min-width: 700px) and (min-height: 700px) { .np-art { width: min(52vw, 40vh, 380px); width: min(52vw, 40dvh, 380px); } }

/* ---------- "More": the Today card ---------- */
.today { position: relative; overflow: hidden; margin: 2px 0 22px; border-radius: 22px; color: #fff; font-family: var(--font-ui);
  background: linear-gradient(140deg, #6e2810 0%, #a24a1a 58%, #c99130 125%); box-shadow: 0 14px 34px rgba(138, 58, 22, .3), inset 0 .5px 0 rgba(255, 255, 255, .25); }
body.night .today { background: linear-gradient(140deg, #4c210d 0%, #2c180b 75%); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(224, 164, 88, .26); }
.today::after { content: "✠"; position: absolute; top: -30px; inset-inline-end: -12px; font-size: 150px; line-height: 1; color: rgba(255, 255, 255, .07); pointer-events: none; }
.td-head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px 12px; }
.td-head b { font-size: 22px; font-weight: 750; letter-spacing: -.3px; }
.today[dir="rtl"] .td-head b { letter-spacing: 0; }
.td-coptic { min-height: 1.35em; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.td-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.td-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 15px; background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--font-ui); text-align: start; cursor: pointer; }
.td-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; }
.td-ico svg { width: 20px; height: 20px; }
.td-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.td-txt b { font-size: 15.5px; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-txt small { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.td-count { flex: none; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; }
.td-row .chev { color: rgba(255, 255, 255, .6); font-size: 20px; }
.today[dir="rtl"] .td-row .chev { transform: scaleX(-1); }
.td-wait { cursor: default; }
.today .skel { --sk1: rgba(255, 255, 255, .12); --sk2: rgba(255, 255, 255, .28); }
.td-wait .skel { flex: 1; height: 14px; margin: 0; max-width: 70%; }
.td-coptic .skel { width: 130px; height: 12px; margin: 5px 0 0; }

/* ---------- Loading: an outline of what is coming, shimmering ---------- */
:root { --sk1: rgba(120, 85, 40, .1); --sk2: rgba(120, 85, 40, .2); }
body.night { --sk1: rgba(255, 235, 200, .06); --sk2: rgba(255, 235, 200, .13); }
.skel { display: block; height: 14px; margin: 0 0 13px; border-radius: 7px; background: linear-gradient(90deg, var(--sk1) 0%, var(--sk2) 45%, var(--sk1) 90%); background-size: 300% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.skel-wrap { padding-top: 12px; }
.skel-wrap br { display: block; content: ""; margin-top: 26px; }
.skel-h { width: 55%; height: 22px; margin-bottom: 20px; }
.skel-sub { width: 70%; margin: 6px 0 20px; }
.skel-card { height: 96px; margin: 0; border-radius: 16px; }
.skel-pick { max-width: 420px; height: 44px; margin: 0 auto 26px; border-radius: 12px; }

/* ---------- Nothing yet: Saved and Search ---------- */
.saved > .pv-sub:only-child, #srchInfo:has(+ .srch-res:empty) { text-align: center; max-width: 300px; margin-inline: auto; color: var(--label-2); line-height: 1.55; }
.saved > .pv-sub:only-child { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 10vh; font-size: 16px; }
.saved > .pv-sub:only-child::before, .srch-res:empty::before { content: ""; width: 88px; height: 88px; border-radius: 28px; animation: popUp .5s var(--ease) both; }
.saved > .pv-sub:only-child::before { box-shadow: 0 14px 30px rgba(194, 69, 59, .3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11v18L12 17l-5.5 4z'/%3E%3C/svg%3E") center / 42px no-repeat, linear-gradient(140deg, #c2453b, #e0805c); }
.srch-res:empty { display: flex; justify-content: center; padding-top: 6vh; }
.srch-res:empty::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3a16' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / 42px no-repeat, var(--tint-soft); }
body.night .srch-res:empty::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a458' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / 42px no-repeat, var(--tint-soft); }

/* ---------- Presses: a quick give under the finger, a springy return ---------- */
.ios-row, .hour-card, .srch-item, .td-row, .pb-open, .chapter-foot .ghost, .ch-grid button, .kt-nav, .kt-ref, .chip, .pst-ex, .pst-hopen, .font-card, .pv-listen, .pv-icon, .pv-back,
.nb-btn, .nb-title, .pb-btn, .np-btn, .np-round, .np-close, .np-speed button, .stepper button, .ios-seg button, .seg button, .tabbar button svg, .sheet-done, .verse-pop .vp-actions button {
  transition: transform .5s cubic-bezier(.3, 1.6, .45, 1), background-color .2s, color .2s, opacity .2s, box-shadow .25s; }
.ios-row:active, button.ios-row:active, .hour-card:active, .srch-item:active, .td-row:active, .chapter-foot .ghost:active, .font-card:active, .pst-ex:active, .pst-hopen:active { transform: scale(.975); transition-duration: .12s; }
.pb-open:active, .kt-ref:active, .chip:active { transform: scale(.96); transition-duration: .12s; }
.ch-grid button:active, .kt-nav:active, .pv-listen:active, .pv-icon:active, .pv-back:active, .nb-btn:active, .nb-title:active, .pb-btn:active, .np-round:active, .np-close:active,
.np-speed button:active, .stepper button:active, .ios-seg button:active, .seg button:active, .sheet-done:active, .verse-pop .vp-actions button:active { transform: scale(.9); transition-duration: .1s; opacity: 1; }
.np-btn:active { transform: scale(.86); transition-duration: .1s; }
.td-row:active { background: rgba(255, 255, 255, .2); }
.pb-open:active { background: var(--fill); }
.tabbar button:active svg { transform: scale(.84); transition-duration: .1s; }

/* ---------- Home-screen app: the band under the status bar is dark in day mode (its text is white) ---------- */
#statusBand { display: none; position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--safe-t); pointer-events: none; }
body.standalone:not(.night) #statusBand { display: block; background: linear-gradient(180deg, #3e1a08 0%, #6a2c10 100%); box-shadow: 0 .5px 0 rgba(0, 0, 0, .15); }
@media (display-mode: standalone) { body:not(.night) #statusBand { display: block; background: linear-gradient(180deg, #3e1a08 0%, #6a2c10 100%); box-shadow: 0 .5px 0 rgba(0, 0, 0, .15); } }

/* ---------- Phones on their side: now playing in two columns ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .np-sheet { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 34px; align-items: center; padding-bottom: calc(var(--safe-b) + 6px); }
  .np-top { grid-column: 1 / -1; justify-self: center; height: 44px; }
  .np-art { width: min(36vw, calc(100dvh - var(--safe-t) - 70px)); margin: 0; padding: 14px; gap: 6px; }
  #npArtText { font-size: clamp(20px, 4vw, 34px); }
  .np-main { gap: 6px; }
  .np-text { -webkit-line-clamp: 2; min-height: 0; font-size: 16px; }
  .np-text[dir="ltr"] { font-size: 16px; min-height: 0; }
  .np-ctl { gap: 22px; margin: 0; }
  .np-btn { width: 52px; height: 52px; }
  .np-btn.main { width: 62px; height: 62px; }
  .np-meta h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* ---------- The Bible bar holds three buttons a side on narrow phones ---------- */
@media (max-width: 400px) { .navbar { gap: 2px; padding-left: calc(2px + var(--safe-l)); padding-right: calc(2px + var(--safe-r)); } .navbar .nb-btn { width: 40px; } .nb-title { padding: 0 12px; } }

/* ---------- Listening: the lit verse and word follow the recording in the Bible only; on the other pages
   (Agpeya, daily readings, Synaxarium) the place is only estimated, so nothing is lit there ---------- */
.page-view .speaking, .page-view .speaking .w.w-now { background: none !important; box-shadow: none !important; }
.page-view .speaking .w.w-now { color: inherit !important; }

/* ---------- Day / night button in the Bible's bar: a half-filled circle that turns over when the mode changes ---------- */
.nb-theme svg { transition: transform .6s cubic-bezier(.3, 1.4, .45, 1); }
body.night .nb-theme svg { transform: rotate(180deg); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ---------- Phones: while the explanation / helper sheet is up it covers the tab bar, so the mini player docks at the
   screen's foot and the sheet keeps a strip for it; the text and the question box always end above the player ---------- */
@media (max-width: 1023px) {
  .play-bar { transition: bottom .42s var(--ease), opacity .25s; }
  body.has-player:has(.layout.panel-open) .play-bar { bottom: calc(var(--safe-b) + 8px) !important; }
  body.has-player .layout.panel-open .panel { padding-bottom: calc(var(--safe-b) + 82px); }
  body.has-player .layout.panel-open .ask-form { padding-bottom: 8px; }
}

/* ---------- Third look, "Light": clean white pages, near-black text, a deep Coptic wine red with gold; no paper, no picture.
   (Classic = the parchment look above; Dark = body.night.) Chosen in Aa or Settings: body.light, never together with .night ---------- */
body.light {
  --ink: #1c1b1f; --ink-soft: #48464f; --ink-faint: #8a8791;
  --paper: #ffffff; --paper-2: #f7f6f4; --paper-edge: #e6e3de;
  --accent: #8e1b2b; --accent-2: #b5452f; --gold: #b58a2e;
  --panel: #ffffff; --panel-edge: #e8e6e2;
  --bar: rgba(255, 255, 255, .92); --bar-ink: #1c1b1f;
  --chrome: rgba(255, 255, 255, .8); --chrome-ink: #1c1b1f; --hairline: rgba(20, 20, 30, .12);
  --tint: #8e1b2b; --tint-soft: rgba(142, 27, 43, .09); --fill: rgba(118, 118, 128, .1); --row: #ffffff; --group-bg: #f3f2f7; --label-2: rgba(60, 60, 67, .6);
  --surface: #f3f2f7; --card-shadow: 0 1px 2px rgba(20, 20, 30, .05), 0 8px 24px rgba(20, 20, 30, .06);
  --glass-edge: inset 0 .5px 0 rgba(255, 255, 255, .9);
  --sk1: rgba(20, 20, 30, .05); --sk2: rgba(20, 20, 30, .1);
}
html:has(> body.light) { background: #f3f2f7; }
body.light .reader, body.light.has-bg .reader, body.light.no-bgpic.has-bg .reader { background: #ffffff; }
body.light .reader::before, body.light .page-view::before { display: none; }
body.light .page-view { background: #f3f2f7; }
body.light .verse.speaking { background: rgba(142, 27, 43, .07); box-shadow: inset 3px 0 0 var(--tint); }
body.light [dir="rtl"] .verse.speaking, body.light.lang-ar .verse.speaking { box-shadow: inset -3px 0 0 var(--tint); }
body.light .speaking .w.w-now { background: rgba(181, 138, 46, .28); color: inherit; }
body.light .chapter-head h1, body.light .chapter-head h2 { color: var(--accent); }
body.light .nb-btn.on, body.light .pb-btn.main { box-shadow: 0 4px 12px rgba(142, 27, 43, .25); }
body.light .hour-card.now { background: linear-gradient(135deg, #8e1b2b, #5e1220) !important; box-shadow: 0 12px 28px rgba(142, 27, 43, .28); }
body.light .today { background: linear-gradient(140deg, #8e1b2b 0%, #4d0f19 80%); box-shadow: 0 14px 34px rgba(142, 27, 43, .25); }
body.light .np-sheet { background: radial-gradient(120% 65% at 50% 0%, rgba(181, 138, 46, .22) 0%, transparent 70%), linear-gradient(180deg, #7a1726 0%, #3d0b13 70%, #22060b 100%); }
body.light .navbar.scrolled, body.light .pv-head.scrolled { box-shadow: 0 6px 20px rgba(20, 20, 30, .05); }
body.light .tabbar { box-shadow: var(--glass-edge), 0 12px 32px rgba(20, 20, 30, .1), 0 2px 6px rgba(20, 20, 30, .05); }
body.light .play-bar { box-shadow: var(--glass-edge), 0 10px 30px rgba(20, 20, 30, .1), 0 1px 3px rgba(20, 20, 30, .06); }
body.light .explain-content h3 { border-bottom-color: var(--panel-edge); }
/* a home-screen iPhone app keeps the band under the status bar in the light look's red */
body.light.standalone #statusBand { background: linear-gradient(180deg, #4d0f19 0%, #8e1b2b 100%); }
@media (display-mode: standalone) { body.light #statusBand { background: linear-gradient(180deg, #4d0f19 0%, #8e1b2b 100%); } }

/* ---------- reading plan: read chapters, continue button, start date ---------- */
.plan-links button.read { background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); }
.plan-day.done .plan-links button { opacity: .8; }
.plan-day label small { opacity: .7; font-weight: 400; }
#pvBody .cta { display: inline-block; border: 0; border-radius: 12px; padding: 12px 18px; background: var(--tint); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
#pvBody .ios-row input[type="date"] { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--sep, rgba(0,0,0,.15)); background: transparent; color: inherit; }
#pvBody h4 { margin: 18px 4px 6px; opacity: .75; font-size: 15px; }