/* mibl_resonance_card.css — the resonance card's styles, moved out of mibl_resonance_card.php (audit P1 #9, 2026-10-02).
   ~3 KB of inline <style> re-sent byte-identical with page views; no PHP was interpolated into it.
   Loaded from the position the inline block had, so the cascade is unchanged. */
/* Warm gold, deliberately NOT the radio bar's cyan: this is a different medium being offered, and
   the colour is the first thing that says so before a word is read.
   z-index 9500 clears the site-wide FAB hub (9000) — measured covering new UI before, so this is a
   fix, not a precaution — while staying under the 9990 mobile-version banner. */
.mreso{position:fixed;right:18px;bottom:96px;z-index:9500;width:min(370px,calc(100vw - 28px));
  box-sizing:border-box;opacity:0;transform:translateY(14px);
  transition:opacity .4s ease,transform .4s ease;
  background:linear-gradient(150deg,rgba(60,42,16,.96),rgba(12,10,6,.98));
  border:1px solid rgba(232,200,116,.36);border-radius:16px;padding:14px 16px;
  box-shadow:0 22px 54px rgba(0,0,0,.6);
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif}
.mreso.show{opacity:1;transform:translateY(0)}
.mreso-lead{font-size:12.5px;color:#e8c874;font-weight:700;margin:0 26px 9px 0;line-height:1.5}
.mreso-body{display:flex;gap:11px;align-items:flex-start;text-decoration:none;margin-bottom:11px}
.mreso-cov{width:46px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 auto;
  box-shadow:0 4px 12px rgba(0,0,0,.5)}
.mreso-txt{display:flex;flex-direction:column;min-width:0}
.mreso-title{font-size:13.5px;font-weight:800;color:#f4e7c9;line-height:1.35}
.mreso-by{font-size:11px;color:rgba(232,200,116,.75);margin-top:2px}
.mreso-teaser{font-size:11.5px;color:rgba(214,201,168,.72);line-height:1.55;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mreso-cta{display:block;text-align:center;padding:10px;border-radius:10px;text-decoration:none;
  font-size:13px;font-weight:800;color:#241a06;background:linear-gradient(135deg,#f8e6b8,#d4a94a)}
.mreso-cta:hover{filter:brightness(1.06)}
.mreso-x{position:absolute;top:2px;right:2px;background:none;border:0;color:rgba(232,200,116,.55);
  font-size:20px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.mreso-x:hover{color:#f4e7c9}
/* Mobile: near-full width above whatever is docked at the bottom, 48px CTA — this is the tap that
   closes the loop, and 80%+ of listeners are on a phone.

   ⚠️ Anchor LEFT and size in vw — measured, not stylistic. A position:fixed box resolves its offsets
   against the initial containing block, and on a phone any page with horizontal overflow widens that
   block past the visible screen (explore.php overflows ~40px on its own, giving an ICB of 415 inside
   a 375px viewport). Consequences measured there:
     left:10 + right:10  → 395px card in a 375px screen
     right:10 + width vw → correct width, but pushed 40px off-screen
   The ICB's LEFT edge still coincides with the screen's, so left-anchoring is stable; and 100vw
   stays true to the visual viewport (375) where 100% does not (415). */
.mreso--mobile{left:10px;right:auto;width:calc(100vw - 20px);bottom:150px}
@media(max-width:520px){
  .mreso{left:10px;right:auto;width:calc(100vw - 20px);bottom:150px}
  .mreso-cta{padding:14px;font-size:14.5px;min-height:48px}
}
@media (prefers-reduced-motion:reduce){ .mreso{transition:opacity .3s} }