/* Queue display (waiting-room TV) — used by /workflow/queue/<token> and the
   editor preview. Designed on a 1920×1080 stage scaled to fit. */
.qd-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--qd-bg, #0f172a) center / cover no-repeat; }
.qd-stage {
  --qd-bg: #0f172a; --qd-text: #fff; --qd-accent: #22c55e;
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center;
  background: var(--qd-bg) center / cover no-repeat; color: var(--qd-text); font-family: 'Inter', system-ui, sans-serif;
  display: flex; flex-direction: column; padding: 56px 72px; box-sizing: border-box; overflow: hidden;
}
.qd-stage * { box-sizing: border-box; }
.qd-stage::before { content: ''; position: absolute; inset: 0; background: var(--qd-overlay, transparent); pointer-events: none; }
.qd-head, .qd-main { position: relative; z-index: 1; }
.qd-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 40px; min-height: 80px; }
.qd-brand { display: flex; align-items: center; gap: 28px; min-width: 0; }
.qd-logo { max-height: 110px; max-width: 420px; object-fit: contain; }
.qd-title { font: 800 var(--qd-title-size, 64px)/1.1 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--qd-title, inherit); }
.qd-clock { text-align: right; color: var(--qd-clock, inherit); font-weight: 600; font-size: calc(var(--qd-clock-size, 52px) * .58); white-space: nowrap; }
.qd-clock div:first-child { font-size: var(--qd-clock-size, 52px); font-weight: 700; }
.qd-main { flex: 1; display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; min-height: 0; }
.qd-main.line-left { grid-template-columns: 1fr 1.55fr; }
.qd-main.line-left .qd-line { order: -1; }
.qd-main.no-line { grid-template-columns: 1fr; }
.qd-label { font-size: var(--qd-label-size, 30px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--qd-label, inherit); margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.qd-count { background: var(--qd-panel, rgba(255,255,255,.14)); border-radius: 999px; padding: 4px 18px; letter-spacing: 0; color: var(--qd-text); }

.qd-calling { display: flex; flex-direction: column; min-height: 0; }
.qd-current {
  background: var(--qd-panel, rgba(255,255,255,.07)); border: 4px solid var(--qd-accent); border-radius: 36px;
  padding: 56px 64px; min-height: 360px; display: flex; flex-direction: column; justify-content: center;
}
.qd-current .name { font: 800 var(--qd-name-size, 150px)/1.02 'Manrope', sans-serif; letter-spacing: -.03em; text-transform: capitalize; color: var(--qd-name, inherit); }
.qd-current .msg { font-size: var(--qd-message-size, 56px); font-weight: 600; margin-top: 28px; color: var(--qd-message, var(--qd-accent)); }
.qd-current.idle { border-color: color-mix(in srgb, var(--qd-text) 15%, transparent); }
.qd-current.idle .msg { color: var(--qd-text); opacity: .8; font-size: calc(var(--qd-message-size, 56px) * .86); margin: 0; }
.qd-current.pulse { animation: qdpulse 1.2s ease-in-out 4; }
@keyframes qdpulse { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--qd-accent) 35%, transparent); } }
.qd-recent { margin-top: 32px; display: grid; gap: 14px; }
.qd-recent .row { display: flex; justify-content: space-between; gap: 24px; font-size: var(--qd-recent-size, 40px); padding: 18px 28px; border-radius: 20px; background: var(--qd-panel, rgba(255,255,255,.06)); }
.qd-recent .row b { text-transform: capitalize; color: var(--qd-name, inherit); }
.qd-recent .row span { color: var(--qd-message, inherit); }

.qd-line { background: var(--qd-panel, rgba(255,255,255,.05)); border-radius: 36px; padding: 40px 44px; display: flex; flex-direction: column; min-height: 0; }
.qd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; overflow: hidden; }
.qd-list li { display: flex; align-items: center; gap: 28px; font-size: var(--qd-line-size, 44px); font-weight: 600; padding: 12px 8px; border-bottom: 2px solid color-mix(in srgb, var(--qd-text) 10%, transparent); text-transform: capitalize; color: var(--qd-line, inherit); }
.qd-list li:last-child { border-bottom: 0; }
.qd-list .pos { width: 1.64em; height: 1.64em; border-radius: 50%; background: color-mix(in srgb, var(--qd-text) 14%, transparent); display: flex; align-items: center; justify-content: center; font-size: .78em; flex-shrink: 0; }
.qd-list li:first-child .pos { background: var(--qd-accent); color: var(--qd-bg-solid, #0f172a); }
.qd-list .empty { opacity: .65; border: 0; }
.qd-more { font-size: calc(var(--qd-line-size, 44px) * .72); opacity: .7; margin-top: 16px; color: var(--qd-line, inherit); }

.qd-flash {
  position: absolute; inset: 0; background: var(--qd-flash-bg, var(--qd-accent)); color: var(--qd-flash-text, #0f172a); z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px;
  animation: qdin .35s ease-out;
}
@keyframes qdin { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.qd-flash-label { font-size: calc(var(--qd-flash-message-size, 84px) * .66); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.qd-flash-name { font: 800 var(--qd-flash-name-size, 230px)/1 'Manrope', sans-serif; letter-spacing: -.03em; margin: 30px 0 40px; text-transform: capitalize; }
.qd-flash-msg { font-size: var(--qd-flash-message-size, 84px); font-weight: 700; }
.qd-notice { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; text-align: center; padding: 10px; z-index: 6; }

/* Portrait TVs: "Now calling" on top, the line underneath */
.qd-stage.portrait .qd-main, .qd-stage.portrait .qd-main.line-left { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.qd-stage.portrait .qd-main.line-left .qd-line { order: 0; }