/* Tafsir al-Jalalayn wa al-Sawi — refreshed shell
   Layered ON TOP of the surah pages' existing <style> block, so we only add
   new features + mobile polish + dark mode and let the original palette
   (accent green #0d7a5f, gold #b8860b, quran green #0b5d46) stand. */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Scheherazade+New:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sh-bg: var(--bg, #fbf7ef);
  --sh-card: var(--card, #ffffff);
  --sh-ink: var(--ink, #1f2933);
  --sh-muted: var(--muted, #6b7280);
  --sh-accent: var(--accent, #0d7a5f);
  --sh-accent2: var(--accent2, #b8860b);
  --sh-line: var(--line, #e7e1d4);
  --sh-quran: var(--quran, #0b5d46);
  --sh-lecture: #6b3fa0;             /* distinct colour for lecture-notes panel */
  --sh-lecture-tint: #f5f0fc;
  --sh-shadow: 0 6px 24px -12px rgba(15,52,40,.25);
  --sh-shadow-hover: 0 10px 32px -12px rgba(15,52,40,.35);
  --sh-text-scale: 1;
}

/* Dark mode — opt in via [data-theme="dark"] on <html> */
html[data-theme="dark"]{
  --bg: #10151a;
  --card: #1a2028;
  --ink: #e6ecf1;
  --muted: #93a1b0;
  --line: #2a333d;
  --accent: #4fd1a5;
  --accent2: #f0c674;
  --quran: #6bdcb0;
  --sh-lecture: #b892f0;
  --sh-lecture-tint: #201a2e;
  --sh-shadow: 0 6px 24px -12px rgba(0,0,0,.55);
}
html[data-theme="dark"] .jal .ar{background:#232b36;color:#dbe3ec}
html[data-theme="dark"] .sawi-body{background:#141a20}
html[data-theme="dark"] .intro{background:#141a20;color:#dbe3ec}
html[data-theme="dark"] .qawl,html[data-theme="dark"] .qawl.en{color:#dbe3ec}
html[data-theme="dark"] .lemma{color:#8fe6c1}
html[data-theme="dark"] .ar-q{color:#e8f4ee}
html[data-theme="dark"] details.lecture > summary{background:var(--sh-lecture)}
html[data-theme="dark"] .site-hdr{background:rgba(16,21,26,.92)}
html[data-theme="dark"] .site-hdr .btn{color:#dbe3ec}

/* Reader font-scale — bumped on the .verse text nodes */
html{ font-size: calc(16px * var(--sh-text-scale)); }
body{ transition: background .2s ease, color .2s ease; }

/* ------- Site header (sticky, mobile-first) ------- */
.site-hdr{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem;
  background:rgba(251,247,239,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--sh-line);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.9rem;
}
.site-hdr .brand{
  display:flex; align-items:center; gap:.4rem;
  font-weight:600; color:var(--sh-accent);
  text-decoration:none; padding:.3rem .35rem;
}
.site-hdr .brand-mark{
  width:26px; height:26px; border-radius:8px;
  background:var(--sh-accent); color:#fff;
  display:grid; place-items:center;
  font-family:'Amiri',serif; font-size:1rem; font-weight:700;
}
.site-hdr .brand-txt{ letter-spacing:.01em; }
.site-hdr .spacer{ flex:1; }
.site-hdr .btn{
  appearance:none; background:transparent; border:1px solid transparent;
  color:var(--sh-ink); padding:.4rem .55rem; border-radius:9px;
  cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:.35rem;
  transition:background .15s ease, border-color .15s ease;
}
.site-hdr .btn:hover{ background:rgba(0,0,0,.05); border-color:var(--sh-line); }
.site-hdr .btn svg{ width:18px; height:18px; }
.site-hdr .btn-primary{ background:var(--sh-accent); color:#fff; }
.site-hdr .btn-primary:hover{ background:#0a5f4a; border-color:transparent; }

/* Surah sub-bar: only appears on surah pages, provides jump / prev / next */
.surah-bar{
  position:sticky; top:44px; z-index:40;
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .55rem;
  background:rgba(251,247,239,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--sh-line);
  font-family:'Inter',system-ui,sans-serif;
  font-size:.82rem;
  color:var(--sh-muted);
}
html[data-theme="dark"] .surah-bar{background:rgba(16,21,26,.85)}
.surah-bar select{
  font:inherit; padding:.3rem .5rem; border-radius:8px;
  border:1px solid var(--sh-line); background:var(--sh-card); color:var(--sh-ink);
  min-width:110px;
}
.surah-bar .nav-btn{
  appearance:none; background:var(--sh-card); border:1px solid var(--sh-line);
  color:var(--sh-ink); padding:.3rem .55rem; border-radius:8px; cursor:pointer;
  font:inherit;
}
.surah-bar .nav-btn:hover{ background:var(--sh-accent); color:#fff; border-color:transparent; }
.surah-bar .nav-btn:disabled{ opacity:.4; cursor:not-allowed; }
.surah-bar .progress{ flex:1; text-align:right; font-variant-numeric:tabular-nums; }

/* ------- Per-verse enhancements ------- */
.verse{ position:relative; scroll-margin-top:96px; }
.verse.is-target{ animation: flashTarget 1.6s ease-out; }
@keyframes flashTarget{
  0%,15%{ box-shadow:0 0 0 3px var(--sh-accent2), var(--sh-shadow); }
  100%{ box-shadow:0 1px 2px rgba(0,0,0,.03); }
}
.verse-toolbar{
  position:absolute; top:14px; right:14px;
  display:flex; gap:.35rem;
}
.verse-toolbar button{
  appearance:none; background:transparent; border:1px solid var(--sh-line);
  width:32px; height:32px; border-radius:8px; cursor:pointer;
  display:grid; place-items:center; color:var(--sh-muted);
  transition:all .15s ease;
}
.verse-toolbar button:hover{ color:var(--sh-accent); border-color:var(--sh-accent); background:var(--sh-card); }
.verse-toolbar button svg{ width:16px; height:16px; }
.verse-toolbar .bm.is-on{ color:var(--sh-accent2); border-color:var(--sh-accent2); background:#fffbec; }
html[data-theme="dark"] .verse-toolbar .bm.is-on{ background:#2a2419; }

/* Adjust vnum position so it doesn't clash with the toolbar on narrow screens */
.vnum{ position:relative; }

/* ------- Lecture Notes panel (Al-Hajj) ------- */
details.lecture{
  margin-top:14px;
  border:1px solid var(--sh-lecture);
  border-radius:10px;
  overflow:hidden;
}
details.lecture>summary{
  cursor:pointer; list-style:none;
  padding:10px 14px;
  background:var(--sh-lecture); color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  display:flex; align-items:center; gap:.5rem;
}
details.lecture>summary::-webkit-details-marker{display:none}
details.lecture>summary::before{
  content:"\1F393";                /* graduation cap glyph */
  display:inline-block; width:22px; height:22px; line-height:22px; text-align:center;
  background:#fff; color:var(--sh-lecture); border-radius:50%; font-size:.9rem;
}
details.lecture>summary .lect-meta{ margin-left:auto; opacity:.85; font-weight:500; font-size:.75rem; }
details.lecture .lecture-body{
  padding:14px 16px 16px; background:var(--sh-lecture-tint);
  font-family:Georgia,serif; line-height:1.75; color:var(--sh-ink);
  font-size:1rem;
}
html[data-theme="dark"] details.lecture .lecture-body{ background:var(--sh-lecture-tint); color:#e6ecf1; }
details.lecture .lecture-body p{ margin:0 0 .8em; }
details.lecture .lecture-body p:last-child{ margin-bottom:0; }
details.lecture .lect-header{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.78rem;
  color:var(--sh-lecture);
  text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 .6em; font-weight:700;
  padding-bottom:.5em; border-bottom:1px dashed rgba(107,63,160,.35);
}
html[data-theme="dark"] .lect-header{ color:#b892f0; border-bottom-color:rgba(184,146,240,.35); }
details.lecture .lect-header + .lect-header{ margin-top:1.2em; }

/* ------- FAB: return to last-read ayah / bookmarks ------- */
.fab{
  position:fixed; right:14px; bottom:14px;
  width:52px; height:52px; border-radius:50%;
  background:var(--sh-accent); color:#fff; border:none; cursor:pointer;
  box-shadow:var(--sh-shadow); display:grid; place-items:center;
  z-index:60;
  transition:transform .15s ease, box-shadow .15s ease;
}
.fab:hover{ transform:translateY(-2px); box-shadow:var(--sh-shadow-hover); }
.fab svg{ width:22px; height:22px; }

/* ------- Search overlay ------- */
.search-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding:60px 16px;
}
.search-overlay.is-open{ display:flex; }
.search-panel{
  background:var(--sh-card); border-radius:14px; width:100%; max-width:640px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4);
  font-family:'Inter',system-ui,sans-serif;
}
.search-panel input{
  width:100%; border:none; padding:16px 18px; font-size:1rem;
  border-bottom:1px solid var(--sh-line); background:var(--sh-card); color:var(--sh-ink);
  outline:none;
}
.search-results{ max-height:60vh; overflow:auto; }
.search-results a{
  display:block; padding:12px 18px; border-bottom:1px solid var(--sh-line);
  color:var(--sh-ink); text-decoration:none;
}
.search-results a:hover{ background:rgba(13,122,95,.08); }
.search-results a mark{ background:#fff3bf; color:inherit; padding:0 2px; border-radius:2px; }
html[data-theme="dark"] .search-results a mark{ background:#5c4a1a; color:#ffe9a1; }
.search-results .kind{
  display:inline-block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--sh-muted); margin-right:.5rem;
}
.search-empty{ padding:20px; color:var(--sh-muted); text-align:center; }

/* ------- Bookmarks page cards ------- */
.bm-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.bm-card{
  background:var(--sh-card); border:1px solid var(--sh-line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--sh-shadow);
  display:grid; grid-template-columns:1fr auto; gap:8px 14px;
  align-items:start;
}
.bm-card a{ color:var(--sh-accent); font-weight:600; text-decoration:none; }
.bm-card a:hover{ text-decoration:underline; }
.bm-card .bm-when{ font-size:.75rem; color:var(--sh-muted); font-family:'Inter',sans-serif; }
.bm-card .bm-snippet{
  grid-column:1 / -1;
  font-family:'Amiri','Traditional Arabic',serif; direction:rtl; text-align:right;
  color:var(--sh-quran); line-height:1.9; font-size:1.1rem;
}
.bm-card .bm-del{
  appearance:none; background:transparent; border:1px solid var(--sh-line);
  color:var(--sh-muted); border-radius:8px; padding:.35rem .6rem; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.8rem;
}
.bm-card .bm-del:hover{ color:#c1272d; border-color:#c1272d; }
.bm-empty{ text-align:center; color:var(--sh-muted); padding:60px 20px; font-family:'Inter',sans-serif; }

/* ------- Hub / index cards ------- */
.hub-hero{
  text-align:center; padding:34px 12px 24px;
}
.hub-hero .ar{
  font-family:'Amiri','Traditional Arabic',serif;
  font-size:clamp(2rem, 6vw, 3rem); color:var(--sh-accent);
  line-height:1.3; margin:0 0 .3em;
}
.hub-hero .en{
  font-family:'Inter',system-ui,sans-serif;
  font-size:.95rem; color:var(--sh-muted); letter-spacing:.03em;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin:20px 0 40px;
}
.hub-card{
  background:var(--sh-card); border:1px solid var(--sh-line); border-radius:14px;
  padding:18px 18px 16px; text-decoration:none; color:inherit;
  box-shadow:var(--sh-shadow);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;
}
.hub-card:hover{
  transform:translateY(-2px); box-shadow:var(--sh-shadow-hover);
  border-color:var(--sh-accent);
}
.hub-card .num{
  position:absolute; top:14px; right:14px;
  font-family:'Inter',sans-serif; font-size:.75rem; color:var(--sh-muted);
}
.hub-card .ar{
  font-family:'Amiri','Traditional Arabic',serif; font-size:1.6rem;
  color:var(--sh-quran); direction:rtl;
}
.hub-card .en{
  font-family:'Inter',sans-serif; font-size:1.05rem; color:var(--sh-ink); font-weight:600;
}
.hub-card .meta{
  font-family:'Inter',sans-serif; font-size:.8rem; color:var(--sh-muted);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto;
}
.hub-card .bar{
  height:4px; background:var(--sh-line); border-radius:2px; overflow:hidden;
}
.hub-card .bar span{
  display:block; height:100%; background:var(--sh-accent); border-radius:2px;
}
.hub-tools{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  margin:0 0 24px;
}
.hub-tool{
  background:var(--sh-card); border:1px solid var(--sh-line); border-radius:12px;
  padding:12px 14px; text-decoration:none; color:inherit;
  display:flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif;
  transition:background .15s ease, border-color .15s ease;
}
.hub-tool:hover{ border-color:var(--sh-accent); }
.hub-tool .ico{
  width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(13,122,95,.12); color:var(--sh-accent);
}
.hub-tool .ico svg{ width:18px; height:18px; }
.hub-tool .t{ font-weight:600; font-size:.95rem; }
.hub-tool .s{ font-size:.75rem; color:var(--sh-muted); }
.hub-continue{
  background:linear-gradient(135deg, #0d7a5f, #0b5d46);
  color:#fff; border:none; box-shadow:var(--sh-shadow);
  padding:16px 18px; border-radius:14px;
  display:flex; align-items:center; gap:14px;
  text-decoration:none; margin:0 0 20px;
  font-family:'Inter',sans-serif;
}
.hub-continue:hover{ box-shadow:var(--sh-shadow-hover); }
.hub-continue .ico{
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.18); display:grid; place-items:center;
}
.hub-continue .ico svg{ width:20px; height:20px; color:#fff; }
.hub-continue .t{ font-weight:700; font-size:1rem; }
.hub-continue .s{ font-size:.82rem; opacity:.85; }
.hub-continue .arrow{ margin-left:auto; opacity:.75; }
.hub-continue.hidden{ display:none; }

/* ------- Mobile refinements ------- */
@media (max-width: 640px){
  .wrap{ padding:12px 12px 90px !important; }
  .verse{ padding:14px 12px !important; border-radius:12px !important; }
  .surah-head{ padding:18px 4px 6px !important; }
  .surah-head .ar{ font-size:1.6rem !important; }
  .ar-q{ font-size:1.4rem !important; line-height:2 !important; }
  .jal .ar{ font-size:1.05rem !important; padding:8px 10px !important; }
  .qawl{ font-size:1.02rem !important; }
  .verse-toolbar{ top:10px; right:10px; }
  .verse-toolbar button{ width:30px; height:30px; }
  .site-hdr{ padding:.4rem .5rem; }
  .site-hdr .brand-txt{ display:none; }
  .surah-bar{ font-size:.75rem; padding:.35rem .5rem; }
  .surah-bar select{ min-width:88px; padding:.28rem .4rem; }
}

/* Print — booklet layout uses its own file, but ensure surah pages print reasonably */
@media print{
  .site-hdr, .surah-bar, .fab, .verse-toolbar{ display:none !important; }
  .verse{ page-break-inside:avoid; box-shadow:none !important; }
  details.sawi, details.lecture{ page-break-inside:avoid; }
  details:not([open])>*:not(summary){ display:none !important; }
}
