/* MVP2 live compatibility layer. The approved Shangarf sheet remains canonical;
   this file maps the existing production DOM onto that design without touching
   transcript, Quran, audio, or reference content.

   2026-07-25 phase-1 consolidation: matn layout (grid / max-width / h1 size /
   timeline paint) emptied here — sole owner is shangarf.css (+ shangarf-site.css
   for the timeline / gahshomar). Remaining rules are chrome + non-layout theming. */
html{scroll-behavior:smooth}
body.mvp2-live{background:var(--paper)!important;color:var(--ink)!important;
  font-family:var(--ff)!important}
body.mvp2-live a{transition:color .15s ease,background-color .15s ease,border-color .15s ease}

body.mvp2-live .s-head,
body.mvp2-live .hero{
  margin:0!important;padding:30px max(20px,calc((100vw - 1120px)/2)) 26px!important;
  background:linear-gradient(160deg,var(--c-deep) 0%,color-mix(in srgb,var(--c-deep) 80%,#111827) 100%)!important;
  color:#fffaf0!important;border:0!important;border-bottom:4px solid var(--c)!important;
  box-shadow:none!important;min-height:0!important}
/* h1 SIZE owned by shangarf.css (--fs-h1 / clamp); only colour/meta stay here */
body.mvp2-live .s-head h1,body.mvp2-live .hero h1{color:#fffaf0!important;
  line-height:1.35!important;margin:8px 0!important}
body.mvp2-live .s-head .back,body.mvp2-live .hero .back,
body.mvp2-live .s-head .s-meta,body.mvp2-live .hero p{color:rgba(255,250,240,.78)!important}
body.mvp2-live .s-head .mark{display:none!important}

/* ── matn layout emptied (phase 1) ─────────────────────────────────────────
   Former grid (toc + body), max-width:var(--measure), and mobile block switch
   lived here with !important and forced shangarf to fight with `html` prefixes.
   Layout is now sole-owned by shangarf.css (single-column, --read-max).
   Decorative / typographic rules for the transcript body remain below. */
body.mvp2-live .matn-wrap .matn-lead{
  padding:15px 18px!important;border-inline-start:3px solid var(--c-tint)!important;
  background:var(--paper-mid)!important;color:var(--ink-soft)!important}
body.mvp2-live .matn-wrap .toc-panel>h2{margin:0!important;padding:11px 15px!important;
  background:var(--c-wash)!important;color:var(--c-deep)!important;border-bottom:1px solid var(--line)!important}
body.mvp2-live .matn-wrap .toc-list{margin:0!important;padding:6px 0!important;list-style:none!important}
body.mvp2-live .matn-wrap .toc-list a{display:block;padding:7px 15px;color:var(--ink-soft)!important}
body.mvp2-live .matn-wrap .toc-list a:hover{background:var(--paper-deep)!important;color:var(--c-deep)!important}
body.mvp2-live .matn-wrap .refblock{
  border:1px solid var(--line)!important;border-radius:12px!important;background:var(--paper-high)!important}
body.mvp2-live .matn-wrap .refblock summary{padding:11px 15px!important;color:var(--c-deep)!important;
  background:var(--c-wash)!important;cursor:pointer!important}
body.mvp2-live .matn-body>p{text-align:justify;hyphens:auto}
body.mvp2-live .matn-body h2{color:var(--c-deep)!important;
  font-size:var(--fs-h2)!important;margin-top:2.4em!important;
  /* BS 2026-07-30: was 60 px — short of chrome (~39) + readbar (~52). Token from reading-desk.css. */
  scroll-margin-top:var(--read-scroll-pad,96px)}
body.mvp2-live .quran-block{background:var(--zar-wash)!important;border:1px solid var(--zar-line)!important;
  border-radius:4px!important;box-shadow:inset 0 0 0 4px var(--paper)!important}

body.mvp2-live .tabs{width:min(1120px,calc(100% - 34px));margin:28px auto 0!important;
  display:flex!important;gap:6px!important;padding:0 6px!important;border:0!important}
body.mvp2-live .tabs .tab{border:1px solid var(--line)!important;border-bottom:0!important;
  border-radius:10px 10px 0 0!important;background:var(--paper-deep)!important;color:var(--ink-faint)!important}
body.mvp2-live .tabs .tab.active{background:var(--paper-high)!important;color:var(--c-deep)!important;
  box-shadow:inset 0 3px 0 var(--c)!important}
body.mvp2-live .panes{width:min(1120px,calc(100% - 34px));margin:0 auto 60px!important;
  background:var(--paper-high)!important;border:1px solid var(--line)!important;
  border-radius:0 14px 14px 14px!important;box-shadow:var(--shadow)!important}
body.mvp2-live .pane{padding:22px!important}
body.mvp2-live .ses-row,body.mvp2-live .plist li{border-color:var(--line)!important}
body.mvp2-live .ses-row:hover,body.mvp2-live .plist li:hover{background:var(--c-wash)!important}

body.mvp2-live .wrap,body.mvp2-live .coll-wrap{width:min(1120px,calc(100% - 34px))!important;
  max-width:none!important;margin:28px auto 60px!important;padding:0!important}
body.mvp2-live .bento{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body.mvp2-live .card-feat{border:1px solid var(--line)!important;border-radius:14px!important;
  background:var(--paper-high)!important;box-shadow:var(--shadow)!important;color:var(--ink)!important}
body.mvp2-live .card-feat:hover{background:var(--c-wash)!important;border-color:var(--c-tint)!important}
/* timeline paint emptied — sole owner: shangarf-site.css (.gahshomar / .g-item).
   Keep only the section wrapper spacing so the block still sits under the bento. */
body.mvp2-live .tl-wrap{margin-top:34px!important;padding-top:18px!important;border-top:1px solid var(--line)!important}

body.mvp2-live .coll-hero{padding:28px max(20px,calc((100vw - 1120px)/2))!important;
  background:var(--c-deep)!important;color:#fffaf0!important;border-bottom:4px solid var(--c)!important}
body.mvp2-live .coll-hero h1,body.mvp2-live .coll-hero a{color:#fffaf0!important}

@media(max-width:850px){
  body.mvp2-live .bento{grid-template-columns:1fr!important}
  body.mvp2-live .tabs,body.mvp2-live .panes{width:calc(100% - 24px)!important}
}

@media print{
  .progress,.toc-panel,.refblock,.tabs,.back{display:none!important}
}