/* Production (studio/production.js, migration 018): the team's board for every Spine video, and the video room's
   progress bar and "What happened". Brand tokens from studio.css (Abyss, Signal Blue, Volt, Foam). */

body.live.team #demo button.pd-q { display: inline-flex; align-items: center; gap: 6px; }
.pd-q .count { position: static; }
body.pd-open { overflow: hidden; }

.pd-page { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: var(--foam); padding: 28px 16px 64px; }
.pd-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.pd-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pd-h1 { margin-top: 8px; font-size: clamp(26px, 6vw, 44px); line-height: 1.02; }
.pd-topacts { gap: 8px; align-items: center; }
.pd-topacts .btn svg { width: 18px; height: 18px; }
.pd-x { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--abyss); }
.pd-x svg { width: 18px; height: 18px; }

/* the link's health */
.pd-health { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.pd-hl { font-family: var(--wide); font-stretch: 115%; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--abyss); margin-right: 4px; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--sand); color: var(--ink2); }
.pd-chip svg { width: 8px; height: 8px; }
.pd-chip.tone-ok svg { color: var(--ok); } .pd-chip.tone-warn svg { color: #C99A00; } .pd-chip.tone-bad { background: #FFECEB; color: var(--red); } .pd-chip.tone-bad svg { color: var(--red); }
.pd-sync { margin-left: auto; }
.pd-sync svg { width: 15px; height: 15px; }
.pd-health .pd-bad { flex-basis: 100%; }
.pd-bad { color: var(--red); } .pd-ok { color: var(--ok); }

/* counts */
.pd-stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.pd-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; text-align: left; display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit; cursor: pointer; }
.pd-stat.static { cursor: default; }
.pd-stat .n { font-family: var(--wide); font-stretch: 125%; font-weight: 850; font-size: 28px; line-height: 1; color: var(--abyss); }
.pd-stat .l { font-size: 13px; color: var(--muted); }
.pd-stat.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.pd-stat.hot .n { color: var(--red); }

.pd-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pd-find { gap: 8px; }
.pd-find input, .pd-find select, #pd-sq, .pd-bulk ~ .row select { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; font: inherit; background: #fff; min-width: 0; }
.pd-find input { width: 220px; }
.pd-empty { padding: 24px 4px; }
.pd-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #FFECEB; border-radius: 14px; padding: 10px 14px; }

/* rows */
.pd-list { display: flex; flex-direction: column; gap: 8px; }
.pd-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: 16px; padding: 12px 14px; }
.pd-row.tone-need { border-left-color: var(--blue); } .pd-row.tone-problem { border-left-color: var(--red); } .pd-row.tone-making { border-left-color: var(--volt); } .pd-row.tone-done { border-left-color: var(--ok); } .pd-row.tone-paused { border-left-color: var(--line2); }
.pd-main { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.pd-main:hover .pd-title { color: var(--blue); }
.pd-studio { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pd-title { color: var(--abyss); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--abyss); color: var(--volt); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.pd-state { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.pd-state .tiny { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-prog { display: flex; align-items: center; gap: 8px; width: 100%; }
.pd-steps { display: inline-flex; gap: 3px; flex: none; }
.pd-steps i { width: 16px; height: 6px; border-radius: 3px; background: var(--line); }
.pd-steps i.done { background: var(--abyss); } .pd-steps i.now { background: var(--blue); }
.pd-bar { flex: 1; min-width: 60px; max-width: 220px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.pd-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .6s ease; }
.pd-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pd-acts .btn svg { width: 15px; height: 15px; }

/* sheets */
.pd-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; }
.pd-pick:hover { border-color: var(--blue); }
.pd-pick[aria-disabled="true"] { opacity: .6; }
.pd-pick b { display: block; color: var(--abyss); }
.pd-bulk { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.pd-brow { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.pd-brow.on { border-color: var(--blue); }
.pd-brow b { display: block; color: var(--abyss); }
.pd-brow .tiny { display: block; }

/* the video room */
.nv-prog { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); margin: 8px auto 0; }
.nv-prog .pd-bar { max-width: none; }
.pd-tlbox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.pd-tlbox summary { cursor: pointer; font-weight: 700; color: var(--abyss); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pd-now { display: flex; flex-direction: column; gap: 2px; background: var(--blue-soft); border-radius: 12px; padding: 8px 12px; margin: 10px 0; }
.pd-tl { list-style: none; margin: 10px 0 6px; padding: 0 0 0 22px; background: linear-gradient(var(--line), var(--line)) 6px 0 / 2px 100% no-repeat; display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.pd-tl li { display: flex; flex-direction: column; gap: 1px; position: relative; }
.pd-tl li::before { content: ''; position: absolute; left: -21px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--abyss); }
.pd-tl li.sp::before { background: var(--blue); }
.pd-tl b { font-size: 14px; color: var(--abyss); }

@media (max-width: 900px) {
  .pd-top { position: relative; padding-right: 52px; }
  .pd-x { position: absolute; top: 0; right: 0; }
  .pd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-row { grid-template-columns: minmax(0, 1fr); }
  .pd-acts { justify-content: flex-start; }
  .pd-find input { width: 100%; }
  .pd-find, .pd-find select { width: 100%; }
}
@media (max-width: 480px) {
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-sync { margin-left: 0; }
}