/* Reliable first-screen artwork, automatic channel playback and data states. */
main>.hero .hero-art{position:relative}
main>.hero .hero-art>#hero-image,main>.hero .hero-art>#hero-motion{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center}
main>.hero .hero-art>#hero-image{display:block!important;z-index:1}
main>.hero .hero-art>#hero-motion{z-index:2;opacity:0;pointer-events:none}
main>.hero .hero-art.motion-playing>#hero-motion{opacity:1}
main>.hero .hero-art.motion-playing>#hero-image{opacity:0}
#live-start[hidden],#live-sound[hidden]{display:none!important}
.live-sound{position:absolute;top:12px;right:12px;z-index:3;min-height:40px;padding:9px 13px;border:1px solid #ffffff70;border-radius:9px;background:#111c;color:#fff;font:600 12px/20px Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.live-sound:hover{background:#111}
.live-sound:focus-visible{outline:2px solid #ff962f;outline-offset:3px}
.flow-stat strong{font-size:clamp(16px,1.5vw,21px);font-variant-numeric:tabular-nums}
.flow-stat[data-state=stale] strong{color:var(--muted)}
.flow-update{line-height:1.7}
.flow-update.delayed{color:#8b5425}
[data-theme=dark] .flow-update.delayed{color:#ffc58c}
[data-theme=dark] .live-info{background:var(--card);color:var(--ink)}
[data-theme=dark] .live-sound{border-color:#ffffff80;background:#080808df}
[data-theme=dark] .hero-art{border:1px solid #343434;border-radius:14px;overflow:hidden}
@media(prefers-reduced-motion:reduce){main>.hero .hero-art>#hero-motion{display:none!important}main>.hero .hero-art>#hero-image{opacity:1!important}}

/* Library and kit details: useful file choices without changing the established layout. */
.available-material-languages{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.kit-rows{margin-top:20px}.kit-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.kit-row>div{min-width:0}.kit-row h3{font-size:18px;margin-bottom:5px}.kit-row details{margin-top:10px}.kit-row summary{cursor:pointer;font-size:13px;color:var(--muted)}
.kit-row ul{font-size:12px;line-height:1.8;margin:10px 0 0;padding-left:18px;overflow-wrap:anywhere}
.schedule-warning{grid-column:1/-1;color:var(--muted);font-size:14px}
@media(max-width:480px){.kit-row{gap:12px}.kit-row .button{padding:10px 14px}}

/* Full poster framing for square, story and landscape campaign files. */
.material-preview.campaign-preview>img{object-fit:contain;background:#fff8ef}
.material-preview.campaign-preview:hover>img,.material-card:hover .campaign-preview>img{transform:none}
.materials-more{display:flex;margin:30px auto 0}
.materials-more[hidden]{display:none}

/* Short promotional reels retain their native portrait composition. */
.material-card.reel-material .material-preview{aspect-ratio:9/16!important;background:#07101d}
.material-card.reel-material .material-preview>img{object-fit:cover!important}
.material-card.reel-material .preview-play{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;color:#25150c;background:#fff}
.material-card.reel-material .preview-play svg{display:block;width:20px;height:20px;padding:0;background:none;border-radius:0;fill:currentColor}
#hub-modal .portrait-video{width:auto;max-width:100%;height:65dvh;aspect-ratio:9/16;object-fit:contain;margin-inline:auto}