/* 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. */
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}
body.mvp2-live .s-head h1,body.mvp2-live .hero h1{color:#fffaf0!important;
  font-size:clamp(1.55rem,3vw,2.45rem)!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}

body.mvp2-live .matn-wrap.mvp2-reading{
  width:min(1180px,calc(100% - 34px))!important;max-width:none!important;margin:30px auto 60px!important;
  display:grid!important;grid-template-columns:minmax(230px,290px) minmax(0,760px)!important;
  grid-template-rows:auto auto!important;justify-content:center!important;gap:18px 34px!important;
  align-items:start!important;padding:0!important}
body.mvp2-live .matn-wrap .matn-lead{grid-column:2;grid-row:1;margin:0!important;
  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{grid-column:1;grid-row:1;position:sticky;top:18px;
  max-height:calc(100vh - 36px);overflow:auto;margin:0!important;border:1px solid var(--line)!important;
  border-radius:12px!important;background:var(--paper-high)!important;box-shadow:var(--shadow)!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{grid-column:1;grid-row:2;margin:0!important;
  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-wrap .matn-body{grid-column:2;grid-row:2;min-width:0!important;
  width:auto!important;max-width:var(--measure)!important;margin:0!important;padding:0 0 30px!important}
body.mvp2-live .matn-body>p{text-align:justify;hyphens:auto}
body.mvp2-live .matn-body h2{display:flex;align-items:end;gap:10px;color:var(--c-deep)!important;
  font-size:var(--fs-h2)!important;margin-top:2.4em!important;scroll-margin-top:60px}
body.mvp2-live .matn-body h2::after{content:"";flex:1;height:1px;background:var(--line-strong);transform:translateY(-6px)}
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}
body.mvp2-live .tl-wrap{margin-top:34px!important;padding-top:18px!important;border-top:1px solid var(--line)!important}
body.mvp2-live .tl{border-inline-start:2px solid var(--line-strong)!important;padding-inline-start:24px!important}
body.mvp2-live .tl-year{color:var(--c-deep)!important;background:var(--paper)!important}
body.mvp2-live .tl-item{background:color-mix(in srgb,var(--c) 12%,var(--paper-high))!important;
  border:1px solid color-mix(in srgb,var(--c) 22%,var(--paper-high))!important;border-radius:10px!important}
body.mvp2-live .tl-item:hover{background:color-mix(in srgb,var(--c) 18%,var(--paper-high))!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 .matn-wrap.mvp2-reading{display:block!important;width:min(100% - 24px,760px)!important}
  body.mvp2-live .matn-wrap .toc-panel{position:static;max-height:none;margin:0 0 16px!important}
  body.mvp2-live .matn-wrap .refblock{margin:0 0 18px!important}
  body.mvp2-live .matn-wrap .matn-lead{margin:0 0 20px!important}
  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}
  body.mvp2-live .matn-wrap.mvp2-reading{display:block!important;width:auto!important;margin:0!important}
  body.mvp2-live .matn-wrap .matn-body{max-width:none!important}
}