/* Evolv-To: the live section at /work/studio.
   Sits on top of css/multimedia.css, which already gives this page the dark
   screening room, the .mm-hero, the facts panel and the next-site rule. Only
   the live parts are here: the stage, the on-air states, chat, subscribe and
   the replays.

   The hidden attribute has to beat the display values set below, or an element
   the JS hides stays on screen. "0 watching" sat under the off-air badge for
   exactly this reason. Scoped to this page so it cannot surprise anyone else's.
   */

.live [hidden] { display: none !important; }

.live-stage { padding: 0 var(--gutter) 1rem; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr); gap: 1.5rem; align-items: start; }

/* Status line above the frame */
.live-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; border-bottom: 1px solid var(--line-dark); padding-bottom: 0.9rem; margin-bottom: 0.25rem; }
.live-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.75rem; border-radius: var(--r-sm); background: #e0243c; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: livePulse 1.6s ease-in-out infinite; }
.live-badge.off { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.62); }
.live-badge.off::before { background: rgba(255, 255, 255, 0.45); animation: none; }
.live-badge.replay { background: var(--accent); }
.live-badge.replay::before { animation: none; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.live-label { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.live-watching { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.live-watching::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #35c88a; }

/* The frame */
.live-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; min-height: 240px; background: #000; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.live-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.live-frame .ctl { position: absolute; bottom: 1rem; background: rgba(0, 0, 0, 0.62); border: 1px solid var(--line-dark); color: #fff; border-radius: var(--r-sm); padding: 0.5rem 0.85rem; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; cursor: pointer; }
.live-frame .ctl:hover { background: rgba(0, 0, 0, 0.85); }
.live-frame .ctl svg { width: 16px; height: 16px; }
.live-frame .sound { left: 1rem; }
.live-frame .full { right: 1rem; width: 38px; height: 38px; justify-content: center; padding: 0; }

/* Off air */
.live-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-align: center; padding: 1.5rem; background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%); }
.live-off img { width: 132px; height: auto; margin-bottom: 0.35rem; }
.live-off .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dark); }
.live-off h2 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; }
.live-off p { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; max-width: 34ch; }
.live-check { margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.live-check::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livePulse 1.8s ease-in-out infinite; }

/* Side column: chat and subscribe */
.live-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.live-panel { border: 1px solid var(--line-dark); border-radius: var(--r-lg); background: #141414; overflow: hidden; }
.live-panel > h3 { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line-dark); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); display: flex; align-items: center; gap: 0.5rem; }
.live-panel > h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0243c; }
.live-chat-log { height: 320px; overflow-y: auto; padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; scrollbar-width: thin; }
.live-msg { font-size: 0.9rem; line-height: 1.5; display: flex; gap: 0.45rem; }
.live-msg b { color: #e8879a; font-weight: 600; white-space: nowrap; }
.live-msg span { color: rgba(255, 255, 255, 0.8); word-break: break-word; }
.live-chat-empty { color: var(--muted-dark); font-size: 0.9rem; text-align: center; padding: 2.5rem 0; }
.live-chat-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: 0.5rem; padding: 0.85rem 1.1rem; border-top: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.03); }
.live-chat-form input { background: #0d0d0d; border: 1px solid var(--line-dark); color: #fff; border-radius: var(--r-sm); padding: 0.55rem 0.7rem; font-size: 0.88rem; min-width: 0; }
.live-chat-form input:focus { outline: none; border-color: var(--accent); }
.live-chat-form button { background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm); padding: 0.55rem 1rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.live-chat-form button:hover { background: var(--accent-hover); }
.live-note { padding: 1.1rem; color: var(--muted-dark); font-size: 0.9rem; line-height: 1.55; }

.live-sub { padding: 1.1rem; }
.live-sub h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.live-sub p { color: var(--muted-dark); font-size: 0.9rem; line-height: 1.5; }
.live-sub form { display: flex; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; }
.live-sub input[type=email] { flex: 1 1 150px; min-width: 0; background: #0d0d0d; border: 1px solid var(--line-dark); color: #fff; border-radius: var(--r-sm); padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.live-sub input[type=email]:focus { outline: none; border-color: var(--accent); }
.live-sub button { background: var(--accent); color: #fff; border: 0; border-radius: var(--r-sm); padding: 0.6rem 1.1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.live-sub button:hover { background: var(--accent-hover); }
.live-sub .form-status { min-height: 1.2rem; margin-top: 0.6rem; font-size: 0.86rem; color: var(--muted-dark); }
.live-sub .form-status.ok { color: #35c88a; }
.live-sub .form-status.error { color: #ff7a7a; }
.live-sub .turnstile-wrap { margin-top: 0.7rem; }

/* Replays */
.replays { padding: 2.5rem var(--gutter) 4rem; }
.replays .head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.replays .head h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); }
.replay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.replay-msg { grid-column: 1 / -1; color: var(--muted-dark); font-size: 0.95rem; }
.replay-card { background: #141414; border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; text-align: left; padding: 0; cursor: pointer; color: #fff; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s; }
.replay-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.replay-card .thumb { position: relative; aspect-ratio: 16 / 9; background: #0d0d0d; display: grid; place-items: center; }
.replay-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.replay-card .thumb svg { width: 34px; height: 34px; opacity: 0.3; }
.replay-card .body { padding: 0.9rem 1rem 1.1rem; }
.replay-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.replay-card p { color: rgba(255, 255, 255, 0.68); font-size: 0.87rem; line-height: 1.5; }
.replay-card .when { margin-top: 0.5rem; font-size: 0.76rem; color: var(--muted-dark); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
    .live-stage { grid-template-columns: 1fr; }
    .live-chat-log { height: 240px; }
}
@media (max-width: 600px) {
    .live-chat-form { grid-template-columns: 1fr; }
    .live-watching { margin-left: 0; }
}