/* Live cards between Orbit posts, plus the in-Live switcher (live-in-feed.js). */
.mwlf-card{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,77,109,.45);box-shadow:0 10px 32px rgba(0,0,0,.38),0 0 0 1px rgba(255,77,109,.08) inset;background:#07101f;isolation:isolate}
.mwlf-open{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;min-height:clamp(300px,82vw,440px);padding:14px;cursor:pointer;color:#fff;background:radial-gradient(ellipse at 50% 38%,rgba(255,77,109,.28),transparent 62%),radial-gradient(ellipse at 20% 100%,rgba(244,198,78,.16),transparent 55%),linear-gradient(165deg,#13203d,#060b18 70%)}
.mwlf-open:focus-visible{outline:3px solid var(--gold,#f4c64e);outline-offset:-3px;border-radius:18px}
.mwlf-backdrop{position:absolute;inset:-24px;z-index:-1;display:block;opacity:.55;filter:blur(26px) saturate(1.25);transform:scale(1.1)}
.mwlf-backdrop img{width:100%;height:100%;object-fit:cover}
.mwlf-open::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 55%,rgba(0,0,0,.72))}
.mwlf-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mwlf-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;background:linear-gradient(135deg,#ff2d55,#ff5f6d);font-weight:900;font-size:.72rem;letter-spacing:.08em;box-shadow:0 0 18px rgba(255,45,85,.55)}
.mwlf-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:mwlf-blink 1.2s ease-in-out infinite}
.mwlf-count,.mwlf-kind{padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);font-size:.72rem;font-weight:750}
.mwlf-kind{margin-left:auto}
.mwlf-center{display:flex;flex-direction:column;align-items:center;gap:12px;margin:10px 0}
.mwlf-ring{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;padding:4px;background:conic-gradient(from 0deg,#ff2d55,#f4c64e,#ff2d55);animation:mwlf-spin 4s linear infinite}
.mwlf-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,45,85,.55);animation:mwlf-pulse 1.8s ease-out infinite}
.mwlf-ring .mwlf-avatar{animation:mwlf-spin 4s linear infinite reverse}
.mwlf-avatar{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--blue,#4ea1ff),var(--gold,#f4c64e));border:3px solid #07101f;font-size:2.2rem;font-weight:900;color:#021}
.mwlf-avatar img{width:100%;height:100%;object-fit:cover}
.mwlf-bars{display:flex;align-items:flex-end;gap:4px;height:22px}
.mwlf-bars i{width:5px;border-radius:3px;background:#f4c64e;animation:mwlf-bar 0.9s ease-in-out infinite alternate}
.mwlf-bars i:nth-child(2){animation-delay:.15s}.mwlf-bars i:nth-child(3){animation-delay:.3s}.mwlf-bars i:nth-child(4){animation-delay:.45s}
.mwlf-info{display:flex;flex-direction:column;gap:3px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.mwlf-info strong{font-size:1.08rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mwlf-info small{font-size:.8rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mwlf-cta{align-self:flex-start;margin-top:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);font-weight:800;font-size:.8rem}
.mwlf-open:hover .mwlf-cta{background:rgba(255,45,85,.85);border-color:transparent}
.mwlf-more{margin-top:6px;font-size:.72rem;opacity:.75}

/* Inside a Live: up/down switcher, the swipe transition cover and short notices. */
.mwlf-nav{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}
.mwlf-nav[hidden]{display:none}
.mwlf-nav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.38);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.mwlf-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mwlf-position{font-size:.68rem;font-weight:800;color:#fff;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.4)}
.mwlf-notice{position:absolute;left:50%;top:22%;z-index:7;transform:translateX(-50%);margin:0;max-width:80%;padding:9px 14px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;font-size:.8rem;font-weight:750;text-align:center;opacity:0;pointer-events:none}
.mwlf-notice.is-on{animation:mwlf-notice 2.6s ease forwards}
.mwlf-switch{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding:24px;overflow:hidden;isolation:isolate;will-change:transform;background:radial-gradient(ellipse at 50% 40%,rgba(255,45,85,.25),transparent 60%),linear-gradient(165deg,#13203d,#04070f)}
.mwlf-switch .mwlf-backdrop{opacity:.45}
.mwlf-switch .mwlf-top{position:absolute;left:16px;right:16px;top:calc(14px + env(safe-area-inset-top,0px));justify-content:center}
.mwlf-switch.is-leaving{animation:mwlf-fade .26s ease forwards}
.mwlf-switch strong{font-size:1.15rem}.mwlf-switch small{opacity:.8;max-width:30ch}
.mwlf-switch .mwlf-cta{align-self:center}
/* Cards off screen stop their spinning rings and pulses. */
.mwlf-card.is-away .mwlf-ring,.mwlf-card.is-away .mwlf-ring .mwlf-avatar,.mwlf-card.is-away .mwlf-ring::after,.mwlf-card.is-away .mwlf-bars i,.mwlf-card.is-away .mwlf-badge::before{animation-play-state:paused}
@keyframes mwlf-fade{to{opacity:0}}
@keyframes mwlf-notice{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes mwlf-blink{50%{opacity:.25}}
@keyframes mwlf-spin{to{transform:rotate(360deg)}}
@keyframes mwlf-pulse{from{transform:scale(.92);opacity:1}to{transform:scale(1.25);opacity:0}}
@keyframes mwlf-bar{from{height:5px}to{height:22px}}
@media (prefers-reduced-motion:reduce){.mwlf-ring,.mwlf-ring .mwlf-avatar,.mwlf-ring::after,.mwlf-bars i,.mwlf-badge::before{animation:none}}
