/* IMATX Halaqa — shared stylesheet. One copy per session folder (see _build/halaqa.css). */

/* ---- Self-hosted fonts (no third-party request; Arabic no longer depends on a CDN) ---- */
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Amiri carries the Arabic and the honorific glyph U+FDFA. font-display:block so Arabic
   never flashes in a fallback that drops harakat. */
@font-face{font-family:"Amiri";src:url("fonts/amiri-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}

:root{
  --teal:#1a6b62;--teal-mid:#2a8a7e;--teal-light:#e8f4f2;--teal-text:#1a6b62;
  --link:#176059;                 /* 7.05:1 on --bg — was #2a8a7e at 4.00:1 */
  --gold:#785019;                 /* 6.80:1 on --bg — was #b8874a at 3.05:1 */
  --gold-light:#f7f0e6;
  --ink:#1f2a2a;--muted:#5c6b6a;--rule:#dfe7e5;--bg:#fbfaf7;--card:#ffffff;
  --focus:var(--gold);
  --r-card:12px;--r-box:10px;--r-chip:999px;--r-sm:8px;
  --tap:44px;                     /* standalone controls */
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e9eeec;--muted:#a3b1ae;--rule:#2b3634;--bg:#111716;--card:#1a2321;
    --teal-light:#173330;--gold-light:#2c2418;--teal-text:#6cc4b6;
    --link:#6cc4b6;
    --gold:#c99a5e;               /* was #b8874a — only 4.25:1 on --teal-light */
    --focus:#c99a5e;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "DM Sans",system-ui,sans-serif}
.wrap{max-width:680px;margin:0 auto;padding:0 16px 48px}
h1,h2,h3,h4{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.2;margin:1.4em 0 .5em}
h1{font-size:1.9rem;margin:.1em 0 .3em}
h2{font-size:1.35rem;color:var(--teal-text)}
h3{font-size:1.1rem}
h4{font-size:1rem}
a{color:var(--link)}
p{margin:.6em 0}
.eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:24px}
.meta{color:var(--muted);font-size:.9rem}
[id]{scroll-margin-top:16px}

/* Skip link — first focusable thing on every page */
.skip-link{position:absolute;left:16px;top:-100px;z-index:20;background:var(--card);color:var(--link);
  padding:12px 20px;border:1px solid var(--rule);border-radius:var(--r-sm);text-decoration:none}
.skip-link:focus{top:12px}

/* ---- Focus: one visible ring for every interactive thing ---- */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,audio:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
nav.session a:focus-visible,ol.pips button:focus-visible,nav.jump a:focus-visible{outline-offset:3px}

/* ---- Page head: brand, one-line kicker, page-specific h1 ---- */
.pagehead{padding-top:18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--muted)}
.brand img{height:32px;width:auto;display:block}
.brand span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.kicker{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.kicker a{color:var(--link)}
.pagehead .meta{margin:.2em 0 0}
footer .brand{margin:0 0 10px}
footer .brand img{height:24px}

/* Section nav — identical on every page of a session */
nav.session{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
nav.session a{display:inline-flex;align-items:center;min-height:var(--tap);padding:10px 14px;
  border:1px solid var(--rule);border-radius:var(--r-chip);font-size:.85rem;
  text-decoration:none;color:var(--ink);background:var(--card)}
nav.session a[aria-current="page"]{background:var(--teal);color:#fff;border-color:var(--teal)}

/* In-page jump strip (verses, vocab) */
nav.jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
nav.jump a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  min-width:var(--tap);padding:8px 13px;border:1px solid var(--rule);border-radius:var(--r-chip);
  font-size:.85rem;text-decoration:none;color:var(--ink);background:var(--card)}
nav.jump a [lang="ar"]{font-family:"Amiri",serif;font-size:1.05rem;margin-right:4px;color:var(--teal-text)}
nav.jump.ayat a{font-variant-numeric:tabular-nums}
nav.jump a[aria-current]{background:var(--teal);color:#fff;border-color:var(--teal)}
nav.jump a[aria-current] [lang="ar"]{color:#fff}

/* Inline links inside prose get a >=24px hit area (WCAG 2.5.8) without disturbing layout.
   :where() keeps specificity at zero so the pill/button rules below still win. */
:where(.unit,.hadith,.meta,.hook,.word .src,ol.questions,.tadabbur,.note,.quiet,
       .kicker,.readfirst,.listen,.extras,footer,.q-group,.ayah .ref,
       .word-detail,.verse-translit,.reading-key) a{
  display:inline-block;min-width:24px;padding:4px 2px;margin:-4px -2px}
.word dl.mini dt .listen,.word .head .tr .listen{min-width:24px;text-align:center}
.lecture :is(h2,h3) a{display:inline-block;padding:2px 0;margin:-2px 0}
.lecture .len a{display:inline-block;padding:4px 2px;margin:-4px -2px}

/* Verses */
.ayah{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);padding:16px;margin:14px 0}
.ayah .ref{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.85rem;color:var(--muted)}
.ayah .ref h3{margin:0;font-family:"DM Sans",system-ui,sans-serif;font-size:1rem;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ayah .ar{font-family:"Amiri","Scheherazade New","Traditional Arabic",serif;font-size:1.9rem;
  line-height:2;direction:rtl;text-align:right;margin:8px 0 6px}
.ayah .tr{font-style:italic;color:var(--muted);margin:4px 0}
.ayah .en{margin:6px 0 10px}
.basmalah{font-family:"Amiri",serif;font-size:1.7rem;text-align:center;direction:rtl;margin:12px 0 4px}
.listen{background:var(--teal-light);border-radius:var(--r-card);padding:12px 16px;margin:20px 0}
/* U+FDFA is a wide decorative ligature; DM Sans has no glyph for it at all and the
   system fallback renders it as a blob. Amiri has it, and it needs the extra size. */
.honorific{font-family:"Amiri",serif;font-size:1.45em;line-height:1;
  vertical-align:-.14em;padding:0 .05em}

/* Tafsir / hadith */
.unit{border-left:3px solid var(--gold);padding-left:14px;margin:22px 0}
.hadith{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);padding:16px;margin:14px 0}
.hadith .ar{font-family:"Amiri",serif;font-size:1.35rem;line-height:1.9;direction:rtl;text-align:right}
.hadith .cite{font-size:.85rem;color:var(--muted)}
.hadith .why{margin-top:8px;padding-top:8px;border-top:1px dashed var(--rule)}
.caution{background:var(--gold-light);border-radius:var(--r-box);padding:10px 14px;font-size:.92rem}

/* Discussion */
.q-group{margin:26px 0}
.q-group > h2{font-size:1.1rem;color:var(--ink);margin:0 0 2px}
.q-group > .meta{margin:0 0 10px}
ol.questions{padding-left:1.4em}
ol.questions li{margin:12px 0}
.tag{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold);margin-right:6px}
.quiet{font-style:italic;color:var(--muted);margin-top:18px}
.tadabbur{background:var(--teal-light);border-radius:var(--r-card);padding:16px 20px;margin:18px 0}
.tadabbur li{margin:10px 0}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-weight:600;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
table.facts th{width:9.5em}

/* Notes / footer */
.note{background:var(--gold-light);border-radius:var(--r-box);padding:12px 16px;margin:14px 0}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);font-size:.82rem;color:var(--muted)}
.hub a.session-card{display:block;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:14px 16px;margin:12px 0;text-decoration:none;color:var(--ink)}
.hub a.session-card .meta{display:block;margin-top:4px}

/* Extras row on index.html */
.extras{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:14px;margin:18px 0}
.extras img{border-radius:var(--r-sm);background:#fff;padding:4px;flex:none}

/* "Read this first" box (session index) */
.readfirst{display:flex;gap:14px;align-items:flex-start;background:var(--gold-light);
  border-left:3px solid var(--gold);border-radius:var(--r-box);padding:14px 16px;margin:18px 0}
.readfirst .tag{display:block;margin:0 0 4px}
.readfirst p{margin:4px 0}
.readfirst .go{display:inline-block;margin-top:6px;font-weight:500}

/* Handout: compact verses, printable */
.ayah.compact{padding:10px 14px;margin:8px 0}
.ayah.compact .ar{font-size:1.5rem;line-height:1.8;margin:4px 0}
.handout table.vocab{width:100%;border-collapse:collapse;font-size:.92rem;margin:8px 0 14px}
.handout table.vocab td{padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.handout table.vocab td.ar{font-family:"Amiri",serif;font-size:1.4rem;direction:rtl;text-align:right;
  white-space:nowrap;font-feature-settings:"calt" 0,"liga" 0,"dlig" 0}

/* ---- Recitation player (index passage player + per-ayah players on verses) ---- */
.recite{background:var(--teal-light);border-radius:var(--r-card);padding:16px;margin:20px 0}
.recite-head{display:flex;gap:12px;align-items:center}
.recite strong{display:block}
.recite .meta{margin:2px 0 0}
.playbtn{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--teal);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.playbtn:hover{background:var(--teal-mid)}
.playbtn .ico{border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.playbtn.playing .ico{border:0;width:12px;height:14px;margin:0;
  background:linear-gradient(to right,#fff 0 4px,transparent 4px 8px,#fff 8px 12px)}
ol.pips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:14px 0 10px}
ol.pips button{min-width:var(--tap);height:var(--tap);border-radius:var(--r-sm);border:1px solid var(--rule);
  background:var(--card);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;padding:0;
  font-variant-numeric:tabular-nums}
ol.pips button[aria-current="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}

/* Per-ayah player: replaces the native <audio> when scripting is available */
.ayah-player{display:flex;align-items:center;gap:12px;margin:10px 0 2px}
.ayah-player .playbtn{width:var(--tap);height:var(--tap)}
.ayah-player .playbtn .ico{border-width:7px 0 7px 11px}
.ayah-player .track{flex:1;min-width:0}
.ayah-player .bar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.ayah-player .bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .15s linear}
@media (prefers-reduced-motion:reduce){.ayah-player .bar i{transition:none}}
.ayah-player .status{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;
  color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.ayah-player .chain{background:none;border:0;font:inherit;font-size:.8rem;min-height:24px;
  padding:4px 2px;margin:-4px -2px;color:var(--link);cursor:pointer;text-decoration:underline}
.ayah audio{width:100%;min-height:var(--tap)}

/* ---- Lecture cards ---- */
.lectures{list-style:none;margin:18px 0;padding:0}
.lecture{display:flex;gap:14px;background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:12px;margin:12px 0}
.lecture .thumb{position:relative;flex:none;width:168px;aspect-ratio:16/9;border-radius:var(--r-sm);
  overflow:hidden;background:var(--teal-light);display:block;text-decoration:none}
.lecture .thumb img{width:100%;height:100%;object-fit:cover;display:block;border:0}
.lecture .thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:34px;
  border-radius:7px;background:rgba(15,15,15,.78);display:flex;align-items:center;justify-content:center}
.lecture .thumb .play::after{content:"";border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff;margin-left:2px}
.lecture .thumb.novideo{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  border:1px dashed var(--rule);background:var(--gold-light)}
.lecture .thumb.novideo span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  text-align:center;padding:0 8px;line-height:1.4}
.lecture .body{min-width:0;flex:1}
.lecture h2,.lecture h3{margin:0 0 3px;font-size:1.05rem;color:var(--ink)}
.lecture h2 a,.lecture h3 a{text-decoration:none}
.lecture .who{font-size:.85rem;color:var(--muted);margin:0 0 5px}
.lecture .len{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.82rem;
  color:var(--muted);margin:0 0 6px}
.lecture .len .runtime{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.lecture .why{margin:0;font-size:.92rem}
/* inline click-to-play video (was duplicated in index.html and lectures.html) */
.lecture .thumb[data-embed]{cursor:pointer}
.lecture .player{flex:none;width:168px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:#000}
.lecture .player iframe{width:100%;height:100%;border:0;display:block}
.lecture.playing{flex-direction:column}
.lecture.playing .player{width:100%}

/* ---- vocab ---- */
.word{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-card);padding:16px 18px;margin:18px 0}
.word .head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start;
  border-bottom:1px dashed var(--rule);padding-bottom:10px;margin-bottom:10px}
.word .head .ar{grid-column:2;grid-row:1/span 2;margin:0;align-self:center;white-space:nowrap;
  font-family:"Amiri","Scheherazade New","Traditional Arabic",serif;font-weight:400;font-size:2.2rem;
  line-height:1.5;direction:rtl;color:var(--teal-text);font-feature-settings:"calt" 0,"liga" 0,"dlig" 0}
.word .head .tr{grid-column:1;margin:2px 0;font-size:1.05rem}
.word .head .si{grid-column:1;margin:2px 0;font-size:.9rem;color:var(--muted)}
.word .head .tr .listen{font-size:.82rem;white-space:nowrap;display:inline-block;padding:3px 2px}
.word dl{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:8px 14px;margin:0}
.word dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);padding-top:3px}
.word dd{margin:0}
.word dd ul{margin:6px 0 4px;padding-left:18px}
.word dd li{margin:4px 0}
.word .root{font-family:"Amiri",serif;font-size:1.35rem;color:var(--teal-text);margin-right:6px}
.word [lang="ar"]:not(.ar):not(.root){font-family:"Amiri",serif;font-size:1.15rem}
.word .src{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.word details.more{margin:10px 0 4px;border-top:1px dashed var(--rule);padding-top:8px}
/* NB: no display:flex on <summary> — it removes the disclosure triangle in Chrome.
   The hit area comes from padding instead. */
.word details.more summary{cursor:pointer;font-size:.85rem;color:var(--muted);padding:6px 0}
.word details.more summary:hover{color:var(--ink)}
.word details.more dl{margin-top:10px}
.word .hook{margin:10px 0 0;padding:10px 12px;background:var(--teal-light);border-radius:var(--r-sm);font-size:.95rem}
.word .hook a{font-weight:500;margin-right:4px}
.word.compact h2{margin:0 0 4px;font-size:1.15rem;color:var(--ink)}
.word.compact .meta{margin:0 0 10px}
.word dl.mini{display:block}
.word dl.mini dt{font-size:1rem;text-transform:none;letter-spacing:0;color:var(--ink);margin-top:12px}
.word dl.mini dt [lang="ar"]{font-family:"Amiri",serif;font-size:1.5rem;color:var(--teal-text);
  margin-right:6px;font-feature-settings:"calt" 0,"liga" 0}
.word dl.mini dt .listen{font-size:.85rem;display:inline-block;padding:3px 6px}
.word dl.mini dd{margin:4px 0 0}
.word.exercise details{border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 12px;
  margin:8px 0;background:var(--bg)}
.word.exercise summary{cursor:pointer;font-weight:500;padding:5px 0}
.word.exercise summary [lang="ar"]{font-family:"Amiri",serif;font-size:1.25rem;color:var(--teal-text)}
.word.exercise details p{margin:8px 0 2px}
.word.exercise table.match{border-collapse:collapse;margin:8px 0 2px;width:auto}
.word.exercise table.match td{padding:6px 14px 6px 0;border-bottom:1px solid var(--rule)}
.word.exercise table.match td[lang="ar"]{font-family:"Amiri",serif;font-size:1.3rem;color:var(--teal-text);
  font-feature-settings:"calt" 0,"liga" 0}

/* Study disclosure (verses) */
.word-detail,.verse-translit,.reading-key{margin:12px 0;border-top:1px solid var(--rule);padding-top:10px}
.word-detail summary,.verse-translit summary,.reading-key summary{cursor:pointer;color:var(--link);
  font-weight:500;padding:5px 0}
.word-grid{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0}
.word-grid li{flex:1 1 115px;min-width:0;max-width:100%;padding:10px 8px;border:1px solid var(--rule);
  border-radius:var(--r-box);background:var(--bg);text-align:center}
.word-grid span,.word-grid a{display:block}
.word-grid .word-ar{font-family:"Amiri",serif;font-size:1.8rem;line-height:1.8}
.word-grid .word-tr{font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.word-grid .word-en{font-size:.9rem;margin-top:5px}
.word-grid a{font-size:.8rem;margin-top:8px;direction:ltr;padding:6px 2px}
.study-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.study-controls[hidden]{display:none}
.study-controls button{font:inherit;font-size:.9rem;min-height:var(--tap);padding:10px 14px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);color:var(--ink);cursor:pointer}

@media (max-width:560px){
  .lecture{flex-direction:column;gap:10px}
  .lecture .thumb{width:100%}
  .word .head{grid-template-columns:1fr}
  .word .head .ar{grid-column:1;grid-row:auto;white-space:normal;font-size:1.9rem;margin-bottom:2px}
  .word dl{grid-template-columns:1fr}
  .word dt{padding-top:6px}
  /* five pips per row keeps every target a comfortable 44px */
  ol.pips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  ol.pips li{display:block}
  ol.pips button{width:100%;min-width:0;height:var(--tap)}
  .extras{flex-direction:column}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .wrap{max-width:none;padding:0}
  nav.session,nav.jump,footer,audio,.extras,.eyebrow,.skip-link,
  .ayah-player,.recite,.study-controls{display:none!important}
  .kicker{display:block!important;color:#333}
  .ayah,.hadith{border:none;border-bottom:1px solid #ccc;border-radius:0;padding:6px 0;margin:0;break-inside:avoid}
  h1{font-size:18pt;margin:0 0 4pt}h2{font-size:14pt;margin:8pt 0 4pt;color:#000}h3{font-size:12pt}
  a{color:#000;text-decoration:none}
  .unit a,.hadith a,.meta a,.hook a,.word .src a,ol.questions a{display:inline;padding:0;margin:0}
  .lecture{border:none;border-bottom:1px solid #ccc;border-radius:0;padding:6px 0;break-inside:avoid}
  .lecture .thumb{display:none}
  .word,.readfirst,.note,.tadabbur,.listen{break-inside:avoid}
  .word-grid li{break-inside:avoid}
  .brand{margin:0 0 6px}.brand img{height:26px}
  @page{size:Letter;margin:0.6in}
}

/* ---- Audio briefing: player, chapter list, transcript ------------------- */
/* The player is progressive enhancement over a native <audio controls>.     */
/* briefing.js hides the native control and reveals .bplayer; if the file    */
/* fails to load it puts the native control back.                           */

.bplayer{background:var(--teal-light);border-radius:var(--r-card);padding:16px;margin:20px 0}
.bplayer[hidden]{display:none!important}
.bplayer .now{display:flex;gap:12px;align-items:center}
.bplayer .now strong{display:block;font-size:1rem}
.bplayer .now .meta{margin:2px 0 0}
.bplayer .playbtn{width:56px;height:56px}
.bplayer .playbtn .ico{border-width:10px 0 10px 16px}
.bplayer .playbtn.playing .ico{width:14px;height:17px;
  background:linear-gradient(to right,#fff 0 5px,transparent 5px 9px,#fff 9px 14px)}

.bplayer .track{margin:14px 0 6px}
.bplayer .bar{position:relative;height:8px;border-radius:var(--r-chip);background:var(--card);
  border:1px solid var(--rule);overflow:hidden;cursor:pointer}
.bplayer .bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .15s linear}
.bplayer .times{display:flex;justify-content:space-between;color:var(--muted);
  font-size:.85rem;font-variant-numeric:tabular-nums}

.bplayer .controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.bplayer .controls button{min-height:var(--tap);min-width:var(--tap);padding:0 14px;
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.bplayer .controls button:hover{border-color:var(--teal)}
.bplayer .controls .rate[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.bplayer .controls .spacer{flex:1 1 auto}
.bplayer .offline{color:var(--muted);font-size:.85rem;margin:10px 0 0}

ol.chapters{list-style:none;padding:0;margin:18px 0 8px;border-top:1px solid var(--rule)}
ol.chapters li{border-bottom:1px solid var(--rule)}
ol.chapters a,ol.chapters button{display:flex;width:100%;gap:12px;align-items:baseline;
  min-height:var(--tap);padding:10px 2px;background:none;border:0;text-align:left;
  font:inherit;color:var(--ink);text-decoration:none;cursor:pointer}
ol.chapters button:hover{color:var(--link)}
ol.chapters .at{flex:none;width:3.2em;color:var(--gold);font-size:.85rem;
  font-variant-numeric:tabular-nums}
ol.chapters [aria-current="true"]{color:var(--link);font-weight:500}
ol.chapters [aria-current="true"] .at{color:var(--link)}

.transcript{margin-top:8px}
.transcript h3{margin:1.6em 0 .4em;display:flex;gap:10px;align-items:baseline}
.transcript h3 .at{font-family:"DM Sans",system-ui,sans-serif;font-size:.8rem;
  color:var(--gold);font-variant-numeric:tabular-nums;font-weight:500}
/* The seek buttons beside transcript headings are standalone controls, so they carry
   their own 24px target (WCAG 2.5.8) rather than inheriting the heading's line box. */
.transcript h3 .at.seek{display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;min-width:44px;padding:0 6px;border:1px solid transparent;
  border-radius:var(--r-chip);background:none;cursor:pointer;color:var(--gold);
  font:inherit;font-family:"DM Sans",system-ui,sans-serif;font-size:.8rem;font-weight:500}
.transcript h3 .at.seek:hover{border-color:var(--gold);color:var(--link)}

/* Shared continuous audio player */
[hidden]{display:none!important}
.recite-track{display:flex;align-items:center;gap:12px;margin-top:14px}
.recite-track progress{flex:1;min-width:0;width:100%;height:10px;accent-color:var(--teal)}
.recite-track span{white-space:nowrap;font-variant-numeric:tabular-nums}
.retry-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);color:var(--link);font:inherit;cursor:pointer}
.retry-button{margin-top:12px}


/* ===== folded in from revision.css, 2026-09-12 (session-page-spec §8: new sessions ship one sheet) ===== */
/* Calm reading surface; shared navigation and actions across every page. */
:root{--arabic-size:1.9rem}
.wrap{max-width:752px;padding-bottom:48px}
.pagehead{padding-top:24px}
h1{font-size:2.15rem;max-width:24ch;margin-top:8px}
main{margin-top:28px}
p,li,dd{overflow-wrap:break-word}
.brand span{font-size:.75rem}
.tag{font-size:.875rem;letter-spacing:.035em}
.session-nav{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.session-nav>a,.session-nav summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.875rem;border:1px solid transparent;background:transparent}
.session-nav>a:hover,.session-nav summary:hover{background:var(--teal-light)}
.session-nav a[aria-current=page]{background:var(--teal);color:#fff}
.session-nav summary{display:list-item;cursor:pointer;list-style-position:inside}
.session-nav details{position:relative}
.session-nav details[open]{flex:1 1 100%}
.session-nav details[data-current=true] summary{border-color:var(--teal-text);color:var(--teal-text)}
.resource-links{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.resource-links a{display:inline-flex;min-height:44px;align-items:center;border:1px solid var(--rule);padding:8px 12px;border-radius:8px;text-decoration:none;font-size:.875rem}
.session-join{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px;background:var(--teal-light);border-radius:12px;margin-top:20px}
.session-join p{margin:0}
.join-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:8px;background:var(--teal);color:#fff;text-decoration:none;font-weight:600}
.join-button:hover{background:#15584f}
.prepare h2{margin:0 0 10px;font-size:1.7rem}
.prepare>.tag{margin-top:0}
.prep-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 32px}
.prep-choice{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--rule);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--card)}
.prep-choice:hover{border-color:var(--teal-text)}
.prep-choice .tag{margin:0}
.prep-choice strong{font-size:1.1rem}
.prep-choice>span:last-child{font-size:.9rem;color:var(--muted)}
.reading-section{border-top:1px solid var(--rule);padding-top:12px;margin-top:28px}
.outcomes{padding-left:24px}.outcomes li{margin:8px 0}
.agenda{padding:0;list-style:none}.agenda li{display:flex;gap:20px;padding:8px 0;border-bottom:1px solid var(--rule)}.agenda strong{min-width:64px}
.resource-list{list-style:none;padding:0}.resource-list li{padding:14px 0;border-bottom:1px solid var(--rule)}.resource-list a{display:inline-block;min-height:28px;font-weight:500}.resource-list span{display:block;color:var(--muted);font-size:.9rem}
.download-links{display:flex;gap:10px;flex-wrap:wrap}.download-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--rule);border-radius:8px;text-decoration:none}
.session-qr summary{cursor:pointer;padding:10px 0;min-height:44px}.session-qr img{max-width:100%;height:auto;background:#fff}
.extras>div{flex:1}.extras h2{margin-top:0}
.next-step{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:20px;margin-top:36px}.next-step a{display:inline-flex;min-height:44px;align-items:center}.next-step p{margin:0;color:var(--muted);font-size:.875rem}
.unit{border-left:0;padding-left:0;margin:28px 0;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.unit-takeaway{font-size:1.06rem;font-weight:500}.facilitator-note summary{cursor:pointer;padding:10px 0;min-height:44px;color:var(--link)}
.reading-intro{padding:16px 18px;background:var(--teal-light);border-radius:10px}
.question{padding:18px 0;border-bottom:1px solid var(--rule)}.question h3{font-family:'DM Sans',sans-serif;font-size:.95rem;margin:0 0 8px;font-weight:600}.question p{margin:8px 0}.question .tag{margin-left:8px}.optional-questions{margin:24px 0}.optional-questions>summary{padding:12px 0;cursor:pointer;min-height:44px;color:var(--link);font-weight:500}
.word .head{margin-bottom:16px}.word dl>dt:first-child{font-weight:600}.word dl>dd:nth-child(2){margin-bottom:8px}
.movement{background:transparent;border:0;border-top:2px solid var(--rule);border-radius:0;padding:20px 0}.movement-details>summary{padding:12px 0;cursor:pointer;color:var(--link);min-height:44px}.current-passage{padding:16px!important;background:var(--teal-light);border-radius:10px;border:0}.current-label{font-size:.875rem;color:var(--teal-text)}
.reading-preferences{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0;border:1px solid var(--rule);border-radius:10px;padding:12px 16px}.reading-preferences legend{padding:0 6px;font-size:.9rem}
button,select,input{font:inherit}button,select{min-height:44px}button{cursor:pointer}
.reading-preferences select,.transport button,.audio-controls button,.audio-controls select,[data-print]{padding:9px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink)}
.transport{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.transport label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.9rem}.transport input{width:20px;height:20px}
.ayah .ar{font-size:var(--arabic-size)}.ayah.is-playing{border-color:var(--teal-text);box-shadow:inset 3px 0 var(--teal-text)}
.audio-player{background:var(--teal-light);padding:16px;border-radius:10px;margin:14px 0}.audio-player audio{width:100%}
.audio-controls .transport{gap:8px}.audio-controls [data-play]{background:var(--teal);color:white;border-color:var(--teal);min-width:80px;font-weight:600}.audio-controls label{font-size:.875rem}.audio-controls select{max-width:100%}.audio-controls input[type=range]{display:block;width:100%;min-height:44px;accent-color:var(--teal);margin:4px 0}.audio-times{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}.audio-controls [data-status]{margin:8px 0 0;font-size:.875rem;color:var(--muted)}.audio-file{font-size:.875rem;margin:6px 0 0}.audio-file a{display:inline-flex;align-items:center;min-height:28px}
.ayah .audio-player{padding:12px}.ayah .audio-controls [data-replay]{margin-left:auto}
ol.chapters li{display:flex;align-items:center;gap:12px}ol.chapters a{flex:1;min-width:0}ol.chapters button{display:inline-flex;width:auto;min-width:64px;justify-content:center;border:1px solid var(--rule);border-radius:8px;padding:8px 12px;font-size:.875rem;background:var(--card);color:var(--link)}ol.chapters li[aria-current=true]{border-left:3px solid var(--teal-text);padding-left:10px;background:var(--teal-light)}
.transcript h3{scroll-margin-top:24px}.transcript .recitation-text{padding:12px;border-left:3px solid var(--teal-text)}
.review-status{font-size:.8rem}.print-meta{font-size:.875rem;color:var(--muted)}
@media(min-width:1180px){.surah-page .contents{position:fixed;top:24px;left:max(16px,calc(50% - 580px));width:190px;max-height:calc(100vh - 48px);overflow:auto}.surah-page .wrap{transform:translateX(55px)}.surah-page .contents nav>a{font-size:.8rem;min-height:36px}.surah-page .contents summary{font-size:.875rem}}
@media(max-width:560px){h1{font-size:1.85rem}.pagehead{padding-top:16px}.prep-options{grid-template-columns:1fr;gap:10px}.prep-choice{padding:16px}.session-nav{gap:2px}.session-nav>a,.session-nav summary{padding:8px 9px}.session-join{padding:14px}.join-button{width:100%}.audio-controls .transport{gap:6px}.audio-controls button{padding:8px 10px}.audio-controls label{width:auto}.audio-controls [data-replay]{margin-left:0}.audio-player{padding:12px}.extras{flex-direction:column}.next-step{margin-top:28px}.transcript h3{flex-wrap:wrap}table:not(.threads) th,table:not(.threads) td{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*{transition:none!important}}
@media print{body{color:#000;background:#fff}.session-nav,.session-join,.listen-hero,.next-step,.audio-player,.reading-preferences,.transport,.optional-questions>summary,[data-print],.review-status,.contents,.extras{display:none!important}.wrap,.surah-page .wrap{max-width:none;transform:none;padding:0}.handout .ar{font-size:19pt!important;line-height:1.65!important}.handout .ayah{padding:8px 0;break-inside:avoid}.handout .en{font-size:10.5pt;line-height:1.4}.print-section{break-before:page}.handout h2{break-after:avoid}.handout .question{break-inside:avoid;padding:8px 0}.handout .question h3{font-size:10pt}.handout .question p{font-size:10.5pt}.handout .tadabbur{background:transparent;border:1px solid #aaa;padding:10px}.handout .tadabbur li{font-size:10.5pt}.handout .tag{font-size:9pt}.handout .basmalah{font-size:18pt}.handout .word-summary{font-size:10.5pt}.pagehead{padding-top:0}.print-meta{color:#333;font-size:9pt}.brand span{font-size:9pt}.kicker{font-size:9pt}.pagehead h1{font-size:18pt;max-width:none}.handout ul{padding-left:20px}a{color:#000!important}.current-passage{background:transparent}details{display:block}details>summary{list-style:none}.facilitator-note{display:none}}
@media print{.handout-page .kicker,.handout-page .pagehead>.meta{display:none!important}.handout-page .brand{margin:0}.handout-page .brand img{height:20px}.handout-page h1{font-size:16pt;margin:6px 0}.handout-page main{margin-top:12px}.handout .ayah{padding:5px 0}.handout .ar{font-size:18pt!important;line-height:1.5!important;margin:4px 0!important}.handout .en{margin:4px 0 6px}.handout-page .print-meta{margin:4px 0 10px}}
@media(min-width:1180px){.surah-page .wrap{transform:none;position:relative;left:55px}}@media print{.surah-page .wrap{left:0}}


/* =========================================================================
   Design pass — 2026-09-12 (revision 3)
   Two changes, both taken as patterns (not styling) from a reading-site
   review: a text serif for reading prose, and a richer page head.
   Palette, radii, focus rules and the 44/24px tap bar are unchanged.
   ========================================================================= */

/* ---- Source Serif 4 — reading face. SIL OFL 1.1, self-hosted, latin subset.
   Licence at fonts/LICENSE-source-serif-4.txt. 400 / 400 italic / 600. ---- */
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --font-ui:"DM Sans",system-ui,sans-serif;
  --font-read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --read-size:1.0625rem;          /* 17px — one step up from UI, as reading text wants */
  --read-leading:1.68;
}

/* ---- Reading prose gets the serif; everything structural stays sans ----
   The split is the point: if it is written in the serif it is something to
   read, and if it is in the sans it is a label, a control or a source line. */
.reading main p:not(.meta):not(.cite):not(.tag):not(.eyebrow):not(.ar):not(.tr):not(.si):not(.audio-file):not(.who):not(.len):not(.hook):not(.related-link):not(.print-meta),
.reading main li:not(.lecture):not(.word-grid > li),
.reading main dd,
.reading main blockquote,
.reading main .note,
.reading main .why,
.reading main .tadabbur,
.reading main .unit-takeaway,
.reading-section p:not(.meta):not(.eyebrow),
.reading-section li,
.reading-section dd,
.verses-page .ayah .en{
  font-family:var(--font-read);
  font-size:var(--read-size);
  line-height:var(--read-leading);
}

/* Opt-outs — labels, controls, source lines, Arabic and transliteration.
   .meta staying sans is deliberate: it keeps "Sources:" and reading guides
   visually distinct from the prose they annotate. */
.reading main .meta,
.reading main .cite,
.reading main .tag,
.reading main .eyebrow,
.reading main .ar,
.reading main .tr,
.reading main .word-ar,.reading main .word-tr,.reading main .word-en,
.reading main .runtime,.reading main .len,.reading main .who,
.reading main summary,
.reading main button,
.reading main input,.reading main select,.reading main label,
.reading main nav a,
.reading main .chips a,
.reading main table,
.reading main .audio-player,
.reading main .print-meta,
.reading main code,.reading main kbd{
  font-family:var(--font-ui);
}
/* Arabic keeps Amiri and its own size — never inherit the reading face. */
.reading main .ar,.reading main .word-ar,.verses-page .ar{font-family:"Amiri",serif}

/* Serif bold needs the 600 file, not a synthesised weight. */
.reading main p strong,
.reading main li strong,
.reading main dd strong,
.reading-section strong{font-weight:600}

/* ---- Page head: type chips, deck, head meta ----
   Chips say what kind of page this is and what kind of claim it carries,
   before the reader has scrolled. Same idea as the in-page labels. */
.page-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px;padding:0;list-style:none}
.page-chips li{margin:0}
.page-chips .chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;
  border:1px solid currentColor;border-radius:var(--r-chip);
  font-family:var(--font-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--link);background:transparent}
.page-chips .chip-sub{color:var(--muted);border-color:var(--rule)}

/* Deck — one sentence saying what the page is for. Serif, so it reads as
   the first thing to read rather than as another label. */
.deck{font-family:var(--font-read);font-size:1.15rem;line-height:1.5;
  color:var(--teal-text);margin:.45em 0 0;max-width:34em}

/* Head meta — reading time and the session date, Gregorian and Hijri. */
.headmeta{font-family:var(--font-ui);font-size:.82rem;color:var(--muted);
  margin:.7em 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.headmeta > span{white-space:nowrap}
/* The separator leads the item it precedes, so a wrap never leaves it
   stranded at the end of a line. */
.headmeta > span + span::before{content:"·";opacity:.5;margin-right:10px}
.headmeta .readtime{font-weight:500;color:var(--ink)}

@media(max-width:560px){
  .deck{font-size:1.08rem}
  .page-chips{gap:6px;margin-top:12px}
  .page-chips .chip{font-size:.64rem;padding:4px 10px}
}

/* Long-form reading measure. 34em of Source Serif at 17px lands near 70
   characters — deliberately narrower than the 752px wrap, and narrower than
   the site this pattern came from, which runs to about 100. */
.reading main > p,
.reading main .unit > p,
.reading main .hadith > p,
.reading main .word > p{max-width:36em}

@media print{
  .page-chips,.headmeta{display:none!important}
  .deck{font-size:11pt;color:#000}
}


/* ---- Handout: writing space and the QR block (2026-09-12) ---- */
.write-space{margin:10px 0 0}
.write-space .writing-line{display:block;border-bottom:1px solid var(--rule);height:26px;margin:0 0 10px}
.print-qr{float:none;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;padding:4px}
.handout-page .print-meta{display:flex;gap:16px;align-items:flex-start;margin-top:18px;
  border-top:1px solid var(--rule);padding-top:12px}
.handout-page .print-meta p{margin:.2em 0}
@media print{
  .write-space .writing-line{border-bottom:1px solid #999;height:30px}
  .print-qr{width:100px;height:100px;border:1px solid #bbb}
  .handout-page .print-meta{break-inside:avoid;gap:14px}
}

/* Overview page: the audio briefing leads; Google Meet sits at the end, smaller. */
.listen-hero{margin-top:24px;padding:20px 22px 18px;background:var(--teal-light);border-radius:12px}
.listen-hero .eyebrow{margin-top:0}
.listen-hero h2{margin:6px 0 8px}
.listen-hero>p{margin:0 0 6px}
.listen-hero .audio-player{background:var(--card);border:1px solid var(--rule);margin:14px 0 8px}
.listen-hero .audio-controls [data-play]{min-width:112px;min-height:48px;font-size:1rem}
.listen-hero .listen-more{margin:6px 0 0;font-size:.9rem}
.session-join-compact{margin-top:36px;padding:14px 16px;background:transparent;border:1px solid var(--rule);gap:12px}
.session-join-compact .eyebrow{margin:0 0 4px}
.session-join-compact p{font-size:.9rem}
.session-join-compact .join-button{min-height:40px;padding:8px 14px;font-size:.875rem;font-weight:500}
@media(max-width:560px){.listen-hero{padding:16px 14px 14px}.session-join-compact .join-button{width:auto}}

/* imatx:surah-a11y-2026-09-16 */

/* Tap targets. Project floor: 44px standalone, 24px inline in prose.
   Same rules as the sessions' 2026-09-16 block, plus the three controls that
   exist only on this page. */
main summary{min-height:var(--tap);box-sizing:border-box;padding:11px 0;
  display:list-item;list-style-position:inside}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:var(--tap)}
footer>a[href^="https://halaqa.imatx.org/"]{display:inline-flex;align-items:center;
  min-height:var(--tap);padding:2px 0}

/* "← Back to 7:11–18", inserted by surah-session.js when ?p= is present. */
.back-link,#surah-back{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:4px 0}

/* The sticky contents list, visible from 1180px. */
.contents a{display:flex;align-items:center;min-height:var(--tap);padding:4px 8px}

/* Source link under a pulled quotation. */
figcaption a{display:inline-block;min-height:24px;padding:2px 0}

/* The 1180px sticky-sidebar rule above shrinks these to 36px to fit the fixed
   column. 36px clears WCAG 2.5.8 but not the project's own 44px bar, and the
   column has the room. */
@media(min-width:1180px){.surah-page .contents nav>a{min-height:var(--tap)}}