/* Whole-surah content uses the shared halaqa typography and reading column. */
.surah-page{--quote:var(--teal-light)}
.surah-page main{min-width:0}
.surah-subtitle{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:4px 0 0}
.surah-subtitle [lang="ar"]{font-family:"Amiri",serif;font-size:1.5rem;line-height:1.8;color:var(--teal-text)}
.surah-page nav.session a{font-size:.875rem}
.contents{margin:18px 0;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card)}
.contents summary{padding:10px 14px;min-height:44px;cursor:pointer;color:var(--link);font-size:.875rem;font-weight:500}
.contents nav{padding:0 14px 10px}
.contents nav>a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 4px;font-size:.875rem;color:var(--link);text-decoration:none;line-height:1.5}
.contents nav>a:hover{text-decoration:underline}
.contents .chapter-link span{flex:0 0 24px;color:var(--gold);font-variant-numeric:tabular-nums}
.nav-divider{border-top:1px solid var(--rule);margin:8px 0}
.surah-intro{margin:20px 0}
.lead{font-size:1rem}
.surah-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px 0;margin:20px 0 8px;border-block:1px solid var(--rule)}
.surah-facts dt{font-size:.875rem;color:var(--muted)}
.surah-facts dd{margin:2px 0 0;font-size:1rem;font-weight:500}
.caption,.surah-page figcaption{font-size:.875rem;color:var(--muted);line-height:1.6}
.surah-page .eyebrow{font-size:.875rem;letter-spacing:.06em;margin-bottom:6px}
.section-heading h2{margin-top:0}
.spine{margin:18px 0 10px}
.spine-bar{display:flex;gap:4px}
.spine-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:66px;padding:8px 2px;background:var(--teal);color:#fff;text-decoration:none;border-radius:var(--r-sm);font-family:"DM Serif Display",Georgia,serif;font-size:1.2rem}
.spine-bar a:hover{background:#15584f}
.spine-bar small{font:.875rem/1.5 "DM Sans",system-ui,sans-serif}
.movement{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--gold);border-radius:var(--r-card);margin:22px 0;padding:16px}
.mv-head{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:16px}
.roman{font-family:"DM Serif Display",Georgia,serif;font-size:1.7rem;color:var(--gold);line-height:1.2}
.mv-head .caption{margin:0 0 4px}
.mv-head h3{font-size:1.1rem;color:var(--teal-text);margin:0}
.movement-desc{color:var(--muted);font-size:1rem;margin:8px 0 0}
.blocks{list-style:none;margin:0;padding:0}
.block{padding:16px 0;border-top:1px solid var(--rule);min-width:0}
.num{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-size:.875rem;font-variant-numeric:tabular-nums}
.num a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;font-weight:500}
.num small{font-size:.875rem;color:var(--muted)}
.block h4{margin:4px 0 8px;font-size:1rem;line-height:1.4}
.block p{font-size:1rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips a{display:inline-flex;gap:8px;align-items:center;min-height:44px;border:1px solid var(--rule);border-radius:var(--r-chip);padding:8px 14px;text-decoration:none;font-size:.875rem;color:var(--link)}
.chips a:hover{background:var(--teal-light)}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;padding:8px 0}
:where(.surah-page) :where(p,li,dd,figcaption,td,th) a{display:inline-block;min-width:24px;padding:4px 2px;margin:-4px -2px}
.ar-inline,.ar-block{font-family:"Amiri",serif;unicode-bidi:isolate}
.ar-inline{font-size:1.4rem}
.quotation{background:var(--quote);border-inline-start:3px solid var(--teal-text);margin:14px 0;padding:12px 16px;border-radius:var(--r-box)}
.quotation blockquote{margin:0}
.surah-page .ar-block{font-size:1.75rem;line-height:2;text-align:right;margin:0 0 12px}
.quotation .translation{font:inherit;line-height:1.6}
.quotation figcaption{margin-top:12px}
.block .interpretive-note{font-size:.875rem;color:var(--muted);padding-left:12px;border-left:2px solid var(--rule);margin-top:14px}
.takeaways,.background,.sources,.surah-page section[aria-labelledby="threads"]{border-top:1px solid var(--rule);margin-top:28px;padding-top:8px}
.takeaways ol{list-style:none;padding:0;margin:16px 0}
.takeaways li{border-left:3px solid var(--gold);padding-left:14px;margin:20px 0}
.takeaways h3{font-size:1.1rem;margin:0 0 8px}
.takeaways p,.bibliography li{font-size:1rem}
.threads{font-size:1rem;margin-top:16px}
.threads caption{text-align:left;color:var(--muted);font-size:.875rem;padding-bottom:10px}
.threads th,.threads td{overflow-wrap:anywhere}
.threads thead th{font-size:.875rem}
.verse-links a{font-variant-numeric:tabular-nums}
.bibliography{padding-left:22px}
.bibliography li{margin:14px 0}
@media(max-width:560px){
  .surah-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spine-bar{flex-wrap:wrap;gap:6px}
  .spine-bar a{flex:1 1 80px!important;min-height:60px}
  .movement{padding:14px}
  .quotation{padding:12px}
  .surah-page .ar-block{font-size:1.6rem}
  .threads thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .threads,.threads tbody,.threads tr,.threads td,.threads th{display:block;width:100%}
  .threads tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .threads td,.threads th{padding:4px 0;border:0}
  .threads .verse-links::before{content:"Ayat: ";color:var(--muted)}
}
@media print{
  .contents,.back-link{display:none!important}
  .movement{padding:12px 0;background:#fff;border:0;border-bottom:1px solid #ccc;border-radius:0}
  .block,.quotation,.takeaways li{break-inside:avoid}
  .mv-head,h2,h3,h4{break-after:avoid}
  .spine-bar a{background:#fff;color:#000;border:1px solid #ccc}
  .chips a,
  .chips .soon{min-height:0;padding:0;border:0}
  .surah-page a{overflow-wrap:anywhere}
}

/* ---- Whole-surah audio overview (added 2026-09-09) --------------------- */
.surah-page .listen{margin-top:28px}
.surah-page .listen .section-heading{margin-bottom:6px}
.surah-page .listen h3{font-size:1.05rem;margin:18px 0 4px}
.transcript-wrap{margin-top:14px;border-top:1px solid var(--rule);padding-top:10px}
.transcript-wrap summary{cursor:pointer;color:var(--link);min-height:24px;line-height:24px;font-weight:500}
.transcript-wrap .transcript h3{font-size:1.05rem}

/* ---- 2026-09-17 revision 3: two routes, glossary, one question per movement, weekly response ---- */
.surah-page .prep-options{margin:18px 0 8px}
.glossary dl{margin:8px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.95rem}
.glossary dt{font-weight:600}
.glossary dd{margin:0}
.movement-ask{margin:14px 0 4px;padding:14px 16px;background:var(--gold-light);border-radius:var(--r-box)}
.movement-ask .tag{display:block;margin:0 0 6px}
.movement-ask .ask{font-size:1.06rem;font-weight:500;margin:0 0 8px}
.movement-ask .meta{margin:0}
.surah-page .tadabbur .tag{display:block;margin:0 0 6px}
/* the transcript disclosure was 24px tall, below the 44px floor for a <summary> */
.transcript-wrap summary{min-height:var(--tap);line-height:1.5;padding:10px 0}
@media(max-width:560px){.glossary dl{grid-template-columns:1fr;gap:2px 0}.glossary dd{margin-bottom:8px}}

/* Sessions that are not built yet. Same box as .chips a so the roadmap keeps
   its rhythm, but muted and not a link — 25 of these used to be clickable
   straight into a 404. The hub index has always guarded these with its
   `ready` flag; this is the same idea on the shared surah page. */
.chips .soon{display:inline-flex;gap:8px;align-items:center;min-height:44px;border:1px dashed var(--rule);border-radius:var(--r-chip);padding:8px 14px;font-size:.875rem;color:var(--muted)}
.chips .soon small{font-size:.8125rem;opacity:.85}