/* Audio chapter illustrations. Typography stays live HTML — selectable, readable,
   fixable without regenerating artwork. Motion is layered on top and is entirely
   optional: see the prefers-reduced-motion block at the foot of this file, which
   returns the player to the plain chapter-swap it was before 2026-09-18. */

.visual-player{margin:24px 0;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden}

/* The stage owns the aspect box so the eleven cards can stack inside it.
   container-type:size gives the cards both cqw and cqh to size against. */
.visual-stage{position:relative;aspect-ratio:1672/941;container-type:size;background:#f4ecdf;overflow:hidden}

.chapter-visual{position:absolute;inset:0;margin:0!important;overflow:hidden;color:#211d17;background:#f4ecdf}
.chapter-visual[hidden]{display:none}                    /* the no-JS state: card 1 only */
.chapter-visual>img{position:absolute;top:-2.5%;left:-2.5%;width:105%;height:105%;max-width:none;
  object-fit:cover;transform-origin:50% 50%}   /* max-width:none (B4): halaqa.css caps img at 100%,
  which had quietly cancelled the 105% overscan, so a pan could show the right-hand edge */

/* Stacked mode. chapter-visuals.js adds .is-stacked once it has taken over, so a
   reader without JS never sees eleven cards piled on each other. */
.visual-stage.is-stacked .chapter-visual{opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s}
.visual-stage.is-stacked .chapter-visual.is-current{opacity:1;visibility:visible;
  transition:opacity .45s ease}
.visual-stage.is-stacked .chapter-visual.is-current>img{will-change:transform}

/* --- the copy block ------------------------------------------------------- */

.chapter-visual .visual-copy{position:absolute;top:9%;left:6%;width:56%;z-index:2}
.chapter-visual.wide-copy .visual-copy{width:77%}
.chapter-visual .visual-kicker{margin:0;font:500 clamp(10px,2cqw,22px)/1.4 "DM Sans",sans-serif!important;
  letter-spacing:.08em;text-transform:uppercase;color:#211d17}
.chapter-visual h2{font-family:var(--font-display,"DM Serif Display"),Georgia,serif;font-size:clamp(22px,5.4cqw,64px);
  line-height:1.1;color:#211d17;margin:3.5% 0 0;font-weight:400;text-wrap:balance}
.chapter-visual .visual-detail{font:clamp(11px,2.4cqw,28px)/1.45 "DM Sans",sans-serif!important;
  margin:4% 0 0;color:#211d17}
.chapter-visual .visual-flow{display:flex;align-items:center;gap:2%;margin-top:5%;
  font-size:clamp(11px,2.6cqw,30px);line-height:1.4}
.visual-flow strong,.visual-flow span:not(.flow-arrow){padding:2% 3%;border-radius:6px;color:#211d17;
  background:#f4ecdfed;border:1px solid #d3c6ae}
.visual-flow strong{background:#3f4b30;color:#fff}
.chapter-visual.questions h2{font-size:clamp(19px,4.5cqw,52px)}
.chapter-visual .visual-questions{padding:0;list-style:none;display:grid;gap:10px;margin:4% 0 0}
.visual-stage .chapter-visual .visual-copy .visual-questions li{background:#f4ecdfee;
  border-left:3px solid #b18959;padding:2% 3%;font:clamp(12px,2.7cqw,32px)/1.35 "DM Sans",sans-serif;color:#211d17}

/* Staggered reveal. Each direct child of the caption comes in on its own beat as the
   chapter opens; the questions card then walks its two items in behind that. */
.visual-stage.is-stacked .visual-copy>*{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.visual-stage.is-stacked .chapter-visual.is-current .visual-copy>*{opacity:1;transform:none}
.visual-stage.is-stacked .visual-copy>*:nth-child(1){transition-delay:.10s}
.visual-stage.is-stacked .visual-copy>*:nth-child(2){transition-delay:.26s}
.visual-stage.is-stacked .visual-copy>*:nth-child(3){transition-delay:.42s}
.visual-stage.is-stacked .visual-copy>*:nth-child(4){transition-delay:.58s}
.visual-stage.is-stacked .visual-questions li{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.visual-stage.is-stacked .is-current .visual-questions li{opacity:1;transform:none}
.visual-stage.is-stacked .is-current .visual-questions li:nth-child(1){transition-delay:.85s}
.visual-stage.is-stacked .is-current .visual-questions li:nth-child(2){transition-delay:1.25s}

/* A hairline that grows across the chapter, under the heading. Decorative. */
.chapter-visual .visual-underline{display:block;height:2px;background:#211d17;opacity:.4;
  width:10%;margin-top:3%}
.visual-stage:not(.is-stacked) .visual-underline{display:none}

/* --- word to listen for --------------------------------------------------- */

.visual-word{position:absolute;left:6%;bottom:9%;z-index:3;display:flex;align-items:stretch;
  max-width:52cqw;opacity:0;transform:translateX(-18px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.visual-word.is-on{opacity:1;transform:none}
.visual-word .bar{width:3px;background:#b18959;flex:none}
.visual-word .body{background:#f4ecdff5;border:1px solid #d3c6ae;border-left:none;
  padding:1.8cqh 2cqw;display:grid;gap:.7cqh;min-width:0}
.visual-word .lbl{font:600 clamp(8px,1.15cqw,14px)/1 "DM Sans",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#785019}
.visual-word .pair{display:flex;align-items:baseline;gap:1.6cqw;flex-wrap:wrap}
.visual-word .ar{font-family:"Amiri",serif;font-size:clamp(18px,3.4cqw,42px);line-height:1.75;
  color:#211d17;direction:rtl}
.visual-word .tr{font:italic 600 clamp(12px,2cqw,25px)/1.2 "DM Sans",sans-serif;color:#211d17}
.visual-word .gloss{font:clamp(10px,1.55cqw,19px)/1.35 "DM Sans",sans-serif;color:#5d554a}

/* Below a 560px-wide stage the frame is too small for a floating card, so it becomes a
   band across the foot of the picture instead. The copy block sits at the top, so
   nothing collides at any size. */
/* A stage narrower than 560px cannot spare the room: the full card would cover half
   the picture. The word and its transliteration still appear, as one slim band; the
   gloss is a tap away on the Arabic words page and is in the transcript below. */
@container (max-width:560px){
  .visual-word{left:0;right:0;bottom:6px;max-width:none}
  .visual-word .bar{width:2px}
  .visual-word .body{flex:1;display:flex;align-items:baseline;gap:8px;
    border-left:none;border-right:none;border-bottom:none;border-radius:0;
    padding:4px 10px 5px;background:#f4ecdff7;overflow:hidden}
  .visual-word .lbl,.visual-word .gloss{display:none}
  .visual-word .pair{gap:8px;flex-wrap:nowrap;min-width:0}
  .visual-word .ar{font-size:19px;line-height:1.75;white-space:nowrap}
  .visual-word .tr{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* --- progress rail -------------------------------------------------------- */

.visual-rail{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:4;
  background:rgba(244,236,223,.22)}
.visual-rail .fill{height:100%;width:0;background:#e0b675}
.visual-rail .tick{position:absolute;bottom:0;width:2px;height:11px;background:#f4ecdf;opacity:.5}
.visual-stage:not(.is-stacked) .visual-rail{display:none}

/* --- toolbar and chapter list --------------------------------------------- */

.visual-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--rule)}
.visual-toolbar[hidden]{display:none}
.visual-toolbar label{font-size:.85rem}
.visual-toolbar select{min-width:0;flex:1;max-width:100%;min-height:44px;background:var(--card);
  color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:8px}
.visual-toolbar button{min-height:44px;padding:8px 12px;border:1px solid var(--rule);
  border-radius:6px;background:var(--card);color:var(--link);cursor:pointer}
.visual-player .audio-player{border:0;border-radius:0;margin:0}
.visual-note{font:.8rem/1.9 "DM Sans",sans-serif!important;color:var(--muted);margin:0 16px 12px}
.visual-player .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The chapter list under the player doubles as the jump control once JS is up. */
ol.chapters li[aria-current="true"]{position:relative}
ol.chapters li[aria-current="true"]>a{font-weight:600;color:var(--teal-text)}

/* --- fullscreen ----------------------------------------------------------- */

.visual-player:fullscreen{border:0;border-radius:0;overflow:auto;background:var(--bg);
  padding:12px;display:flex;flex-direction:column;align-items:center}
.visual-player:fullscreen .visual-stage{width:min(100%,calc((100dvh - 310px)*1672/941));
  min-width:min(100%,420px);flex-shrink:0}
.visual-player:fullscreen .visual-toolbar,
.visual-player:fullscreen .audio-player,
.visual-player:fullscreen .visual-note{width:min(100%,1000px)}

@media(max-width:420px){
  .visual-toolbar{gap:8px;padding:10px}
  .visual-toolbar label{display:none}
  .visual-toolbar select{flex-basis:65%}
  .chapter-visual .visual-kicker{letter-spacing:.02em}
  .chapter-visual h2{font-size:5.8cqw}
  .chapter-visual.questions h2{font-size:5cqw}
  .chapter-visual .visual-questions{gap:5px}
}

/* --- reduced motion ------------------------------------------------------- */
/* Everything above degrades to the plain swap. chapter-visuals.js reads the same
   query and stops writing transforms, so no pan or zoom is applied either. */
@media (prefers-reduced-motion:reduce){
  .visual-stage.is-stacked .chapter-visual,
  .visual-stage.is-stacked .visual-copy>*,
  .visual-stage.is-stacked .visual-questions li,
  .visual-word{transition:none!important}
  .visual-stage.is-stacked .chapter-visual{visibility:hidden}
  .visual-stage.is-stacked .chapter-visual.is-current{visibility:visible}
  .visual-stage.is-stacked .visual-copy>*,
  .visual-stage.is-stacked .visual-questions li{opacity:1;transform:none}
  .chapter-visual>img{transform:none!important}
}

/* --- quoted line on an ayah card (added 2026-09-30) ------------------------ */
/* One short line from the ayah itself, Saheeh International verbatim, so a card says
   something with the sound off. The attribution is in .visual-note under the player. */
.chapter-visual .visual-quote{margin:4.5% 0 0;padding:1.6% 2.4%;max-width:100%;
  font:italic clamp(12px,2.35cqw,28px)/1.4 "DM Sans",sans-serif!important;color:#211d17;
  background:#f4ecdfe8;border-left:3px solid #b18959;border-radius:0 6px 6px 0;text-wrap:pretty}
@container (max-width:560px){
  .chapter-visual:has(.visual-quote) .visual-copy{width:74%}
  .chapter-visual .visual-quote{margin-top:3%;padding:4px 8px}
}

/* --- captions (added 2026-09-30) ------------------------------------------ */
/* A band under the picture, never on it: it cannot cover the art or the word card.
   Built by chapter-visuals.js from briefing.vtt; aria-hidden, because the full
   transcript is on the page and a live region would talk over the narration. */
.visual-captions{margin:0;padding:12px 16px;border-top:1px solid var(--rule);background:var(--card);
  color:var(--ink);font-size:1rem;line-height:1.5;min-height:calc(3 * 1.5em + 24px);
  display:flex;align-items:center}
.visual-captions[hidden]{display:none}
.visual-captions .idle{color:var(--muted);font-size:.9rem}
.visual-captions .rec{color:var(--teal-text);font-style:italic}
.visual-captions .who{font-weight:700}
@media(min-width:900px){.visual-captions{font-size:1.15rem;padding:14px 24px}}
.visual-player:fullscreen>.visual-captions{width:min(100%,1000px);font-size:1.3rem;
  min-height:calc(2 * 1.5em + 24px)}

/* Full screen is for watching, so the picture gets the room (2026-09-30). The CSS calc
   above is only a fallback: chapter-visuals.js measures what sits under the stage and
   sets the stage width so picture + captions + controls fill exactly one screen. The
   download link, the credit note and the "Playback position" label go; play, seek,
   speed and the chapter menu stay. */
.visual-player:fullscreen{padding:8px 12px;justify-content:center;justify-content:safe center}
.visual-player:fullscreen [data-status]{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* In full screen the captions move onto the picture, as subtitles: chapter-visuals.js
   moves the band inside the stage and back out on exit. The word card is lifted by the
   band's measured height (--cap-h) so the two never overlap. */
.visual-stage>.visual-captions{position:absolute;left:0;right:0;bottom:6px;z-index:5;margin:0;
  min-height:0;border:0;justify-content:center;text-align:center;
  background:#16140fd6;color:#fff;font-size:clamp(16px,2.1cqw,30px);line-height:1.4;
  padding:1.2cqh 5cqw 1.6cqh}
.visual-stage>.visual-captions .rec{color:#e0b675}
.visual-stage>.visual-captions:empty,
.visual-stage>.visual-captions:has(.idle){display:none}
.visual-stage.caps-over .visual-word{bottom:calc(var(--cap-h,0px) + 3%)}
.visual-player:fullscreen .visual-note,
.visual-player:fullscreen .audio-file,
.visual-player:fullscreen .audio-player label.meta{display:none}
.visual-player:fullscreen .visual-toolbar{padding:8px 0;border-top:0}
.visual-player:fullscreen .audio-player{padding-top:6px;padding-bottom:6px}

/* --- the first 30 seconds (added 2026-09-30, SKILL.md 8.2b) --------------- */
/* Beats on the welcome card, timed by OPEN in chapter-visuals.js: later chapters'
   pictures peek in behind the opening question, a quote card carries the Saheeh line,
   and chips name what the briefing holds. They share the word card's slot at the foot
   of the picture; OPEN keeps the quote and the chips apart in time. */
.chapter-visual>img.visual-peek{opacity:0;transition:opacity .45s ease;z-index:1}
.chapter-visual>img.visual-peek.is-on{opacity:1}
.visual-open-quote{position:absolute;left:6%;bottom:9%;z-index:3;display:flex;align-items:stretch;
  max-width:62cqw;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.visual-open-quote.is-on{opacity:1;transform:none}
.visual-open-quote .bar{width:3px;background:#b18959;flex:none}
.visual-open-quote .body{background:#f4ecdff5;border:1px solid #d3c6ae;border-left:none;
  padding:1.8cqh 2.2cqw;display:grid;gap:.6cqh;min-width:0}
.visual-open-quote .ar{font-family:"Amiri",serif;font-size:clamp(17px,3.1cqw,38px);line-height:1.8;
  color:#211d17;direction:rtl;text-align:right}
.visual-open-quote .ar[hidden]{display:none}
.visual-open-quote .en{font:italic clamp(12px,2.3cqw,28px)/1.4 "DM Sans",sans-serif;color:#211d17;text-wrap:pretty}
.visual-open-quote .ref{font:600 clamp(8px,1.15cqw,14px)/1 "DM Sans",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#785019}
.visual-open-chips{position:absolute;left:6%;bottom:9%;z-index:3;display:flex;flex-wrap:wrap;gap:1.2cqw;
  max-width:80cqw;pointer-events:none}
.visual-open-chips .chip{opacity:0;transform:translateY(12px);background:#3f4b30;color:#fff;
  border-radius:999px;padding:1cqh 2cqw;font:600 clamp(11px,2.2cqw,27px)/1.2 "DM Sans",sans-serif;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.visual-open-chips .chip.is-on{opacity:1;transform:none}
.visual-stage.caps-over .visual-open-quote,
.visual-stage.caps-over .visual-open-chips{bottom:calc(var(--cap-h,0px) + 3%)}
@container (max-width:560px){
  .visual-open-quote{left:0;right:0;bottom:6px;max-width:none}
  .visual-open-quote .body{flex:1;padding:4px 10px 6px;gap:2px}
  .visual-open-quote .ar{display:none}       /* a phone-sized stage has room for one line set */
  .visual-open-quote .en{font-size:11.5px;line-height:1.35}
  .visual-open-quote .ref{display:none}
  .visual-open-chips{left:4%;bottom:8px;gap:5px}
  .visual-open-chips .chip{font-size:11px;padding:3px 9px}
}
@media (prefers-reduced-motion:reduce){
  .visual-open-quote,.visual-open-chips .chip,.chapter-visual>img.visual-peek{transition:none!important}
}

/* --- timed cards (added for session 07, 2026-10-10) ---------------------------------------- */
/* A second card in the word card's slot: a Saheeh quotation, a commentator's name, a narration the briefing
   names. CARDS in chapter-visuals.js keeps it and the word card apart in time. */
.visual-cue{position:absolute;left:6%;bottom:9%;z-index:3;display:flex;align-items:stretch;
  max-width:56cqw;opacity:0;transform:translateX(-18px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.visual-cue.is-on{opacity:1;transform:none}
.visual-cue .bar{width:3px;background:#b18959;flex:none}
.visual-cue .body{background:#f4ecdff5;border:1px solid #d3c6ae;border-left:none;
  padding:1.8cqh 2cqw;display:grid;gap:.7cqh;min-width:0}
.visual-cue .lbl{font:600 clamp(8px,1.15cqw,14px)/1 "DM Sans",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#785019}
.visual-cue .main{font:600 clamp(13px,2.3cqw,28px)/1.3 "DM Sans",sans-serif;color:#211d17;text-wrap:balance}
.visual-cue .main.is-quote{font-style:italic;font-weight:500;text-wrap:pretty}
.visual-cue .sub{display:grid;gap:.4cqh;font:clamp(10px,1.55cqw,19px)/1.35 "DM Sans",sans-serif;color:#5d554a}
.visual-cue .sub:empty{display:none}
.visual-stage.caps-over .visual-cue{bottom:calc(var(--cap-h,0px) + 3%)}
@container (max-width:560px){
  .visual-cue{left:0;right:0;bottom:6px;max-width:none}
  .visual-cue .bar{width:2px}
  .visual-cue .body{flex:1;border-left:none;border-right:none;border-bottom:none;border-radius:0;
    padding:4px 10px 5px;background:#f4ecdff7;gap:0;overflow:hidden}
  .visual-cue .lbl,.visual-cue .sub{display:none}
  .visual-cue .main{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.visual-cue{transition:none!important}}
/* A word or timed card that would sit on the chapter's quote line: the quote steps aside (see avoidQuote in the JS). */
.visual-stage.is-stacked.quote-dim .chapter-visual.is-current .visual-copy>.visual-quote{opacity:0;transition-delay:0s}

/* --- single-image mode (rebrand B4, 2026-10-19) --------------------------------------------- */
/* One <figure class="chapter-visual is-single" data-visual-single> holds the session's object
   (assets/object.webp) for the whole briefing; each chapter is a .visual-copy block inside its
   figcaption, swapped by chapter-visuals.js. The photos are dark and close, so the copy sits on
   a soft dark scrim in cream; the paper cards keep ink on paper. Without JS the first block
   shows and the rest carry [hidden]. */
.chapter-visual.is-single{background:#14120e;color:#f4ecdf}
.chapter-visual.is-single::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,14,10,.90) 0%,rgba(16,14,10,.82) 36%,rgba(16,14,10,.60) 62%,rgba(16,14,10,.22) 84%,rgba(16,14,10,.06) 100%),
    linear-gradient(180deg,rgba(16,14,10,.50) 0%,rgba(16,14,10,.18) 30%,rgba(16,14,10,0) 50%),
    linear-gradient(0deg,rgba(16,14,10,.40) 0%,rgba(16,14,10,0) 28%)}
.chapter-visual.is-single>figcaption{margin:0}
.chapter-visual.is-single .visual-copy h2,
.chapter-visual.is-single .visual-copy .visual-detail{color:#f4ecdf;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.chapter-visual.is-single .visual-copy .visual-kicker{color:#efd09b;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.chapter-visual.is-single .visual-underline{background:#f4ecdf;opacity:.55}
.chapter-visual .visual-copy.wide-copy{width:77%}
.chapter-visual .visual-copy.questions h2{font-size:clamp(19px,4.5cqw,52px)}
.visual-stage.is-stacked .chapter-visual.is-single{opacity:1;visibility:visible}
.visual-stage.is-stacked .chapter-visual.is-single>img{will-change:transform}
.chapter-visual.is-single>img.is-gliding{transition:transform 1s cubic-bezier(.45,0,.2,1)}
.visual-stage.is-stacked .chapter-visual.is-single .visual-copy{opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s}
.visual-stage.is-stacked .chapter-visual.is-single .visual-copy.is-current{opacity:1;visibility:visible;
  transition:opacity .45s ease}
.visual-stage.is-stacked .visual-copy.is-current>*{opacity:1;transform:none}
.visual-stage.is-stacked.quote-dim .visual-copy.is-current>.visual-quote{opacity:0;transition-delay:0s}
@container (max-width:560px){
  .chapter-visual.is-single .visual-copy{width:56%}
  .chapter-visual.is-single .visual-copy.wide-copy{width:77%}
  .chapter-visual.is-single .visual-copy:has(.visual-quote){width:74%}
}
@media(max-width:420px){
  .chapter-visual .visual-copy.questions h2{font-size:5cqw}
}
@media (prefers-reduced-motion:reduce){
  .visual-stage.is-stacked .chapter-visual.is-single .visual-copy,
  .chapter-visual.is-single>img.is-gliding{transition:none!important}
}

@media print{.visual-player{display:none}}