/* Generated by tools/build_surah_pages.py: never edit by hand. The surah pages (/surah/): light only, phone first. */
:root{
  color-scheme: light;
  --bg:#F1F7FC; --surface:#FFFFFF; --bg-alt:#E4F0F9;
  --ink:#182634; --ink-soft:#57667A;
  --brand:#1C6FA5; --brand-deep:#134C73; --brand-tint:#DCEBF7;
  --gold-text:#7D5A1B;
  --border:#C3D9EA; --border-soft:#DEEAF3;
  --radius:10px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Karla',-apple-system,sans-serif; font-size:16.5px; line-height:1.6; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
a{ color:var(--brand); font-weight:700; text-underline-offset:2px; }
a:focus-visible, .btn:focus-visible, input:focus-visible{ outline:2px solid var(--gold-text); outline-offset:3px; border-radius:4px; }
.wrap{ max-width:820px; margin:0 auto; padding:0 16px; }
.skip-link{ position:absolute; left:12px; top:-120px; z-index:60; background:var(--brand-deep); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; }
.skip-link:focus{ top:12px; }
main:focus{ outline:none; }
.top{ background:var(--surface); border-bottom:1px solid var(--border-soft); }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; flex-wrap:wrap; }
.logo{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:'Lora',serif; font-weight:700; font-size:1.05rem; }
.logo img{ width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px var(--border-soft); transform:rotate(-15deg); }
.logo small{ display:block; direction:rtl; font-family:'Amiri',serif; font-weight:400; font-size:.8rem; color:var(--ink-soft); line-height:1.2; }
.top-links{ display:flex; gap:16px; font-size:.92rem; }
.top-links a{ display:inline-flex; align-items:center; min-height:40px; }
main{ padding:22px 0 48px; }
.crumbs{ font-size:.88rem; color:var(--ink-soft); margin:0 0 14px; }
.crumbs a{ font-weight:600; }
.s-head{ background:var(--surface); border:1px solid var(--border-soft); border-radius:calc(var(--radius) + 4px); padding:24px 24px 20px; margin:0 0 18px; }
.s-kicker{ margin:0; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-text); }
h1{ font-family:'Lora',serif; font-size:2rem; line-height:1.2; margin:4px 0 2px; color:var(--brand-deep); }
h2{ font-family:'Lora',serif; font-size:1.2rem; margin:0 0 8px; color:var(--brand-deep); }
.s-ar{ font-family:'Amiri Quran','Amiri',serif; font-size:1.9rem; line-height:1.9; margin:0; color:var(--brand-deep); }
.s-meta{ margin:2px 0 0; color:var(--ink-soft); }
.s-also{ margin:2px 0 0; color:var(--ink-soft); font-size:.9rem; }
.s-go, .learn-go{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.btn{ display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:100px; background:var(--brand-deep); color:#fff; border:1.5px solid var(--brand-deep); text-decoration:none; font-weight:800; font-size:.95rem; }
.btn.alt{ background:var(--surface); color:var(--brand-deep); border-color:var(--border); }
.nw{ white-space:nowrap; }
.s-note{ margin:12px 0 0; font-size:.92rem; color:var(--ink-soft); }
.basmala{ font-family:'Amiri Quran','Amiri',serif; font-size:1.8rem; line-height:2; text-align:center; margin:6px 0 10px; color:var(--brand-deep); }
ol.ayat{ list-style:none; margin:0; padding:0; }
ol.ayat li{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:14px 18px 12px; margin:0 0 10px; display:grid; grid-template-columns:minmax(0, 1fr); }
.ay-ar{ font-family:'Amiri Quran','Amiri',serif; font-size:1.75rem; line-height:2.15; color:var(--ink); text-align:right; overflow-wrap:break-word; }
.ay-en{ margin:6px 0 0; color:var(--ink); }
.ay-n{ justify-self:start; margin-top:6px; font-size:.82rem; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; min-height:32px; }
.s-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin:22px 0 0; font-size:.95rem; }
.s-nav a{ display:inline-flex; align-items:center; min-height:44px; }
.s-nav .all{ font-weight:600; }
.credit{ margin:22px 0 0; font-size:.86rem; color:var(--ink-soft); }
.learn{ margin:22px 0 0; background:var(--brand-tint); border:1px solid var(--border); border-radius:calc(var(--radius) + 4px); padding:20px 22px; }
.learn p{ margin:0; }
.s-find{ margin:0 0 14px; }
.s-find label{ display:block; font-weight:800; margin:0 0 6px; }
.s-find input{ width:100%; font:inherit; padding:11px 14px; min-height:46px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.s-ref, .s-none{ margin:8px 0 0; }
.s-none{ color:var(--ink-soft); }
ol.s-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
ol.s-list li[hidden]{ display:none; }
ol.s-list a{ display:grid; grid-template-columns:42px minmax(0, 1fr) auto; grid-template-areas:"n name ar" "n meta ar"; column-gap:10px; align-items:center; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:10px 14px; text-decoration:none; color:var(--ink); font-weight:400; min-height:64px; }
ol.s-list a:hover{ border-color:var(--brand); }
.sl-n{ grid-area:n; font-weight:800; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.sl-name{ grid-area:name; overflow-wrap:anywhere; }
.sl-name b{ color:var(--brand-deep); }
.sl-en{ color:var(--ink-soft); font-size:.9rem; }
.sl-meta{ grid-area:meta; font-size:.82rem; color:var(--ink-soft); }
.sl-ar{ grid-area:ar; font-family:'Amiri Quran','Amiri',serif; font-size:1.25rem; line-height:1.6; color:var(--brand-deep); }
/* "This surah and our course" (under the heading): folded below 1180px, where its summary gives the shares and the
   first ayah stays on the first screen; from 1180px open beside the ayat (.s-cols), where it stays in view */
.s-course{ background:var(--surface); border:1px solid var(--border-soft); border-left:4px solid var(--gold-text); border-radius:calc(var(--radius) + 4px); padding:12px 18px 14px; margin:0 0 16px; }
.s-course h2{ margin:0; font-size:1.08rem; }
details.sc-fold > summary{ display:flex; align-items:center; gap:10px; min-height:44px; margin:8px 0 0; padding:8px 12px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--bg); color:var(--ink); font-weight:600; line-height:1.4; cursor:pointer; list-style:none; }
details.sc-fold > summary::-webkit-details-marker{ display:none; }
details.sc-fold > summary::after{ content:'\25BE'; margin-left:auto; padding-left:4px; color:var(--brand); font-size:1rem; }
details.sc-fold[open] > summary::after{ transform:rotate(180deg); }
details.sc-fold > summary b{ color:var(--brand-deep); font-weight:800; }
details.sc-fold > summary:hover{ border-color:var(--brand); }
details.sc-fold > summary:focus-visible{ outline:2px solid var(--gold-text); outline-offset:3px; }
.sc-lead{ display:none; margin:10px 0 6px; }   /* the intro beside the ayat; folded, the summary is the intro */
ul.sc-bars{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px; max-width:560px; }
ul.sc-bars a{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"w p" "bar bar" "n see"; align-items:center; column-gap:10px; row-gap:3px; padding:6px 8px; margin:0 -8px; border-radius:8px; color:var(--ink); font-weight:400; text-decoration:none; }
ul.sc-bars a:hover{ background:var(--bg); }
ul.sc-bars a:hover .sc-see{ text-decoration:underline; }
.sc-w{ grid-area:w; font-weight:800; color:var(--brand-deep); }
.sc-p{ grid-area:p; justify-self:end; font-weight:800; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.sc-bar{ grid-area:bar; height:10px; border-radius:6px; background:var(--bg-alt); overflow:hidden; }
.sc-bar i{ display:block; height:100%; background:var(--brand); border-radius:6px; }
.sc-n{ grid-area:n; min-width:0; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.9rem; }
.sc-n b{ color:var(--ink); }
.sc-see{ grid-area:see; font-size:.9rem; font-weight:700; color:var(--brand); white-space:nowrap; }
.sc-go{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:12px 0 0; }
.sc-ask{ font-weight:700; flex-basis:100%; }
@media (min-width:1180px){
  .wrap{ max-width:1180px; }
  .s-cols{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; column-gap:32px; align-items:start; }
  .s-cols > *{ grid-column:1; }
  .s-cols > .s-course{ grid-column:2; grid-row:2 / span 40; margin:0; }
  details.sc-fold[open] > summary{ display:none; }
  details.sc-fold[open] .sc-lead{ display:block; }
  .sc-go .btn{ flex:1 1 100%; justify-content:center; }
  ol.s-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .s-find{ max-width:640px; }
}
@media (min-width:1180px) and (min-height:620px){
  .s-cols > .s-course{ position:sticky; top:16px; }
}
/* word by word (only on pages built with WORD_BY_WORD): each word with its meaning under it, wrapping on phones */
ol.wbw{ list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; direction:rtl; gap:8px 6px; }
ol.wbw li{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; max-width:100%; padding:2px 8px 6px; border-radius:8px; background:var(--bg); }
ol.wbw li span:first-child{ font-family:'Amiri Quran','Amiri',serif; font-size:1.4rem; line-height:2.1; color:var(--ink); direction:rtl; }
ol.wbw li span + span{ direction:ltr; margin-top:2px; font-size:.8rem; line-height:1.3; color:var(--ink-soft); max-width:10em; overflow-wrap:anywhere; }
.wbw-off ol.wbw{ display:none; }
ol.wbw li[data-held]{ outline:2px dashed var(--gold-text); outline-offset:-2px; }   /* --wbw-preview only: a meaning held for review */
.s-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.wbw-switch{ margin:0; }
.wbw-switch button{ font:inherit; font-weight:800; font-size:.92rem; min-height:40px; padding:8px 16px; border-radius:100px; border:1.5px solid var(--border); background:var(--bg); color:var(--brand-deep); cursor:pointer; }
.wbw-switch button[aria-checked="true"]{ background:var(--brand-tint); border-color:var(--brand); }
.wbw-switch button:focus-visible{ outline:2px solid var(--gold-text); outline-offset:3px; }
.foot{ background:var(--brand-deep); color:var(--brand-tint); padding:24px 0; font-size:.88rem; }
.foot p{ margin:0; }
.foot a{ color:#fff; font-weight:600; }
@media (max-width:640px){
  main{ padding-top:14px; }
  .crumbs{ margin-bottom:10px; }
  h1{ font-size:1.6rem; }
  .s-head{ padding:16px 16px 14px; margin-bottom:14px; }
  .s-ar{ line-height:1.65; }
  .s-course{ margin-bottom:12px; }
  ol.ayat li{ padding:12px 14px 10px; }
  .ay-ar{ font-size:1.5rem; line-height:2.1; }
  .s-course{ padding:10px 14px 12px; }
  .s-go{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .s-go .btn:first-child{ grid-column:1 / -1; }
  .s-go .btn{ justify-content:center; text-align:center; padding:8px 10px; font-size:.9rem; }
  ol.wbw li span:first-child{ font-size:1.25rem; }
  ol.s-list{ grid-template-columns:minmax(0, 1fr); }
  .logo small{ display:none; }
  .top-links{ gap:12px; }
}