/* VENDORED VERBATIM from BibleProjectPro_V2.4 @ 9733b5e5eb19 — help.php — between «<style>» and «</style>» after «$sch_head = $doc».
   the help page look: the hero, desktop / phone switch, search box, sticky contents, sections, tips, lightbox.
   DO NOT EDIT: run «php dev/scripts/sync_bible_ui.php --bible=<checkout>»; song-only changes go in song-header.*
   (Songs-Server/25-bible-shared-ui.md). sha256 of the copied bytes: eb262e3353826296c5e828fad6f3490b6c22eaad11a03f5b81aeffb9745b01da */

/* ── help page (namespaced .sch-*) — self-sufficient even without the site head ── */
:root{ --sch-primary:#1668cd; --sch-dark:#0f4d99; --sch-text:#1a2a3f; --sch-mut:#5a6b8a;
       --sch-line:#d6deec; --sch-bg:#f4f7fc; --sch-panel:#ffffff; --sch-soft:#eef3fb; }
.sch-wrap *{ box-sizing:border-box; }
.sch-wrap{ max-width:1100px; margin:0 auto; padding:16px 14px 80px; color:var(--sch-text);
  font-family:"Segoe UI",Tahoma,Arial,sans-serif; line-height:1.9; direction:rtl; }
.sch-wrap h1,.sch-wrap h2,.sch-wrap h3{ line-height:1.4; }
.sch-hero{ background:linear-gradient(135deg,#1668cd,#0f4d99); color:#fff; border-radius:16px;
  padding:22px 22px; margin-bottom:16px; box-shadow:0 8px 24px rgba(15,77,153,.18); }
.sch-hero h1{ margin:0 0 6px; font-size:23px; }
.sch-hero p{ margin:0; font-size:14px; opacity:.95; }
.sch-hero .sch-back{ display:inline-block; margin-top:12px; background:rgba(255,255,255,.18);
  color:#fff !important; text-decoration:none !important; padding:8px 16px; border:1px solid rgba(255,255,255,.5);
  border-radius:9px; font:700 13px/1.4 inherit; cursor:pointer; }
.sch-hero .sch-back:hover{ background:rgba(255,255,255,.32); }

/* controls: device toggle + search */
.sch-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
  background:var(--sch-panel); border:1px solid var(--sch-line); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.sch-seg{ display:inline-flex; border:1px solid var(--sch-line); border-radius:10px; overflow:hidden; }
.sch-seg button{ border:0; background:#fff; color:var(--sch-mut); font:700 13px/1 inherit; padding:8px 14px; cursor:pointer; }
.sch-seg button.on{ background:var(--sch-primary); color:#fff; }
.sch-search{ position:relative; flex:1 1 260px; min-width:200px; }
.sch-search input{ width:100%; box-sizing:border-box; padding:10px 38px 10px 12px; border:1px solid var(--sch-line);
  border-radius:10px; font:14px/1.6 inherit; color:var(--sch-text); background:#fff; direction:rtl; outline:none; }
.sch-search input:focus{ border-color:var(--sch-primary); box-shadow:0 0 0 3px rgba(22,104,205,.14); }
.sch-search .sch-search-ic{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:#8aa0c8; font-size:15px; pointer-events:none; }
.sch-search .sch-clear{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  border:0; background:#eef3fb; color:#557; width:22px; height:22px; border-radius:50%; cursor:pointer; display:none; font-size:13px; line-height:1; }
.sch-noresult{ display:none; background:#fff6e6; border:1px solid #f0d9a8; color:#7a5a10; border-radius:10px; padding:12px 14px; margin-bottom:14px; }

/* layout: TOC nav + content */
.sch-layout{ display:grid; grid-template-columns:230px 1fr; gap:16px; align-items:start; }
.sch-toc{ position:sticky; top:10px; background:var(--sch-panel); border:1px solid var(--sch-line);
  border-radius:12px; padding:8px; max-height:calc(100vh - 24px); overflow:auto; }
.sch-toc a{ display:block; padding:8px 11px; border-radius:8px; text-decoration:none; color:var(--sch-text);
  font-size:13.5px; font-weight:600; border-bottom:1px solid #f0f3fa; }
.sch-toc a:last-child{ border-bottom:0; }
.sch-toc a:hover{ background:var(--sch-soft); }
.sch-toc a.on{ background:var(--sch-primary); color:#fff; }
.sch-content{ min-width:0; }

.sch-section{ background:var(--sch-panel); border:1px solid var(--sch-line); border-radius:14px;
  padding:18px 20px; margin-bottom:16px; scroll-margin-top:14px; }
.sch-section > h2{ margin:0 0 10px; font-size:19px; color:var(--sch-dark);
  display:flex; align-items:center; gap:9px; border-bottom:2px solid var(--sch-soft); padding-bottom:9px; }
.sch-section h3{ margin:16px 0 6px; font-size:15.5px; color:var(--sch-primary); }
.sch-section p{ margin:8px 0; font-size:14.5px; }
.sch-section ul,.sch-section ol{ margin:8px 0; padding-inline-start:22px; }
.sch-section li{ margin:5px 0; font-size:14.5px; }
/* justified reading text */
.sch-section p, .sch-section li, .sch-tip, .sch-note, .sch-legend .sch-ltx, .sch-hero p{ text-align:justify; text-justify:inter-word; }
.sch-hl{ background:#fff7d6; padding:0 3px; border-radius:3px; }   /* search highlight */

/* callout / tip / note boxes */
.sch-tip{ background:#eaf6ef; border:1px solid #bfe3cd; border-radius:10px; padding:10px 14px; margin:10px 0; font-size:14px; }
.sch-tip b{ color:#1c7a45; }
.sch-note{ background:#fdf3e7; border:1px solid #f2d6ab; border-radius:10px; padding:10px 14px; margin:10px 0; font-size:14px; }
.sch-key{ display:inline-block; min-width:22px; text-align:center; background:#111827; color:#fff;
  border:1px solid #374151; border-bottom-width:3px; border-radius:6px; padding:2px 8px; font:700 12.5px/1 Arial,sans-serif; }
.sch-try{ display:inline-flex; align-items:center; gap:6px; background:var(--sch-primary); color:#fff !important;
  text-decoration:none; padding:6px 13px; border-radius:9px; font-size:13px; font-weight:700; margin:6px 6px 6px 0; }
.sch-try:hover{ background:var(--sch-dark); }
/* Keep OUR link colours — the included site theme's a / a:visited rules would
   otherwise override them (e.g. turning the blue «جرّب» button's text invisible). */
.sch-wrap a:link, .sch-wrap a:visited{ color:var(--sch-primary) !important; }
.sch-wrap a.sch-try:link, .sch-wrap a.sch-try:visited, .sch-wrap a.sch-try:hover{ color:#fff !important; }
.sch-toc a:link, .sch-toc a:visited{ color:var(--sch-text) !important; }
.sch-toc a.on:link, .sch-toc a.on:visited{ color:#fff !important; }
.sch-figure a:link, .sch-figure a:visited{ color:inherit !important; }

/* numbered UI re-creation (a stylised toolbar with numbered callouts) */
.sch-mock{ background:#dbdaec; border:1px solid #aeb4dd; border-bottom:2px solid #5577bd; border-radius:12px;
  padding:12px; margin:12px 0; display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:center; }
.sch-btn{ position:relative; display:inline-flex; align-items:center; gap:5px; background:#5577bd; color:#fff;
  border-radius:11px; font:700 13px/1.2 Arial,sans-serif; padding:8px 12px; white-space:nowrap; }
.sch-btn.light{ background:#fff; color:#33445f; border:1px solid #cdd9ec; }
.sch-btn .sch-num{ position:absolute; top:-9px; inset-inline-start:-9px; width:20px; height:20px; border-radius:50%;
  background:#c0392b; color:#fff; font:800 11px/20px Arial; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.sch-legend{ list-style:none; padding:0; margin:12px 0; }
.sch-legend li{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed #e3e8f5; }
.sch-legend li:last-child{ border-bottom:0; }
.sch-legend .sch-lnum{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:#c0392b; color:#fff;
  font:800 12px/22px Arial; text-align:center; }
.sch-legend .sch-ltx b{ color:var(--sch-dark); }

/* screenshot placeholders (hybrid: real screenshots added for full-screen views) */
.sch-shot{ border:1px dashed #b9c4dd; background:repeating-linear-gradient(45deg,#f7f9fd,#f7f9fd 10px,#eef3fb 10px,#eef3fb 20px);
  border-radius:12px; padding:22px; text-align:center; color:#7a8aa5; font-size:13px; margin:12px 0; }
.sch-shot b{ color:#5a6b8a; }
.sch-figure{ margin:14px 0; }
.sch-img{ display:block; max-width:100%; height:auto; border:1px solid var(--sch-line); border-radius:12px; box-shadow:0 4px 14px rgba(20,32,60,.12); margin:0 auto; }
.sch-figure figcaption{ font-size:12.5px; color:var(--sch-mut); text-align:center; margin-top:7px; }
.sch-figure a{ display:block; }
.sch-img{ cursor:zoom-in; }
/* in-page image lightbox (no new window) */
.sch-lb{ position:fixed; inset:0; z-index:100090; background:rgba(10,18,32,.9);
  display:flex; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
.sch-lb[hidden]{ display:none; }
.sch-lb img{ max-width:96vw; max-height:92vh; border-radius:10px; box-shadow:0 12px 44px rgba(0,0,0,.55); background:#fff; }
.sch-lb-x{ position:fixed; top:14px; inset-inline-end:16px; width:42px; height:42px; border:0; border-radius:50%;
  background:#fff; color:#1a2a3f; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4); }

.sch-shortcuts table{ width:100%; border-collapse:collapse; }
.sch-shortcuts td{ padding:8px 6px; border-bottom:1px solid #eef1f8; font-size:14px; vertical-align:middle; }
.sch-shortcuts td:first-child{ width:1%; white-space:nowrap; }

/* device-specific content */
.sch-mode-mobile .sch-desktop-only{ display:none !important; }
.sch-mode-desktop .sch-mobile-only{ display:none !important; }

@media (max-width:820px){
  .sch-layout{ grid-template-columns:1fr; }
  .sch-toc{ position:static; max-height:none; display:flex; flex-wrap:wrap; gap:4px; }
  .sch-toc a{ border-bottom:0; background:var(--sch-soft); font-size:12.5px; padding:6px 10px; }
  .sch-toc a.on{ background:var(--sch-primary); }
}