/* Live mode (studio/live.js): real accounts. Only applies when body has .live (loginBypass: false). */

/* The internal bar is for staff only; customers and the sign-in screens never see it. */
body.live #demo { display: none; }
body.live.team #demo { display: flex; }
/* Real accounts: the admin bar keeps only the account picker. Prototype tools (Emails, Email routing, Review, Tags) live in /demo?team. */
body.live #demo button,
body.live .ptag { display: none; }
body.live #ibc,
body.live #demo [data-a="reset"] { display: none; }
/* "Our side" boxes: staff only, and only the controls that save for real. */
body.live.public .demo-box { display: none; }
body.live [data-a="day"],
body.live [data-a="skipdays"],
body.live [data-a="team-auto"] { display: none; }

/* Sign-in screens: the Studio's .entry / .signin look, plus what the demo never needed. */
.lv .lv-h { color: #fff; font-size: clamp(32px, 9vw, 44px); margin-top: 24px; }
.lv.entry .signin { gap: 16px; }
.lv input { font-size: 16px; } /* 16px stops phones zooming in on focus */
.lv input[type=password] { width: 100%; border: 1.5px solid #2A338A; background: #121B6E; color: #fff; border-radius: 16px; padding: 13px 15px; line-height: 1.5; }
.lv input::placeholder { color: #8E92C2; }
.lv #lv-otp { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.lv .link { color: var(--volt); }
.lv .lv-forgot { align-self: flex-end; margin-top: -8px; font-size: 14px; }
.lv .lv-g svg { width: 18px; height: 18px; }
.lv-or { display: flex; align-items: center; gap: 12px; color: #8E92C2; font-size: 13px; }
.lv-or::before, .lv-or::after { content: ""; flex: 1; height: 1px; background: #2A338A; }
.lv-err { color: #FFC2C2; font-weight: 600; }
.lv-err:empty { display: none; }
.lv-acc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 14px 18px; color: #fff; cursor: pointer; }
.lv-acc:hover, .lv-acc:focus-visible { border-color: var(--volt); }
.lv-acc b { font-size: 17px; }
.lv-acc span { color: #C9CDF2; font-size: 13.5px; }
@media (max-width: 540px) {
  .lv.entry { padding: 36px 16px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .lv.entry .signin { margin-top: 2vh; }
}

/* Team card: remove links. */
.lv-rm { color: var(--muted); flex: none; }
.lv-rm:hover, .lv-rm[data-sure="1"] { color: var(--red); }

/* Uploads: drop highlight on the twin tab's tiles, and the per-file progress panel (top right, clear of toasts). */
.adds.lv-over .add { border-color: var(--blue); background: var(--blue-soft); }
.lv-up { position: fixed; top: 84px; right: 16px; z-index: 90; width: min(360px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh2); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.lv-up-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--abyss); }
.lv-up ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 40vh; overflow-y: auto; }
.lv-up li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13.5px; }
.lv-up .nm { font-weight: 650; color: var(--abyss); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-up .sz { color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-up .s { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.lv-up .bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lv-up .bar b { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; }
.lv-up .lv-st-up .bar b, .lv-up .lv-st-save .bar b { width: 40%; animation: lv-slide 1.1s ease-in-out infinite; }
.lv-up .lv-st-save .bar b { width: 90%; animation: none; }
.lv-up .lv-st-done .bar b { width: 100%; background: var(--ok); }
.lv-up .lv-st-done .s { color: var(--ok); font-weight: 650; }
.lv-up .lv-st-fail .s, .lv-up .lv-st-bad .s { color: var(--red); font-weight: 650; }
.lv-up .lv-st-fail .bar b, .lv-up .lv-st-bad .bar b { width: 100%; background: var(--red); }
@keyframes lv-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .lv-up .lv-st-up .bar b { animation: none; width: 60%; } }
@media (max-width: 960px) { .lv-up { top: 72px; } } /* live.js moves it just below the header when it shows */

/* Watching a posted video from the Library */
.lv-watch{display:block;width:100%;max-height:70vh;margin-top:14px;border-radius:14px;background:#000}

/* Team desk (studio/desk.js): the queue button in the bar, the queue page, the desk card and its sheets. */
body.live.team #demo button.dk-q { display: inline-flex; align-items: center; gap: 6px; }
.dk-q .count { position: static; }
.dk-page { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: var(--foam); padding: 28px 16px 56px; }
.dk-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.dk-wrap h1 { font-size: clamp(24px, 7.2vw, 40px); line-height: 1.02; overflow-wrap: normal; word-break: normal; }
.dk-wrap .row.between { flex-wrap: wrap; }
.dk-grp { display: flex; flex-direction: column; gap: 10px; }
.dk-grp h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--abyss); margin: 8px 0 0; }
.dk-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--abyss); color: #fff; font-size: 12px; }
.dk-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.dk-item.late { border-color: var(--flare); }
.dk-item .grow { min-width: 0; }
.dk-item .btn { flex: none; }
.dk-card { margin-bottom: 18px; border: 1.5px dashed var(--line); background: #fff; }
.dk-radio { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.dk-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.dk-row .grow { min-width: 0; }
.dk-file { cursor: pointer; flex: none; }
.dk-prow input { border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; font: inherit; min-width: 0; }
@media (max-width: 540px) {
  .dk-item { flex-direction: column; align-items: stretch; }
  .dk-item .btn { width: 100%; }
}