/* The debate format, on top of style.css: the listening scene is shared, the answer is laid out for speech. */

#cue-hint { position: absolute; left: 0; right: 0; top: 760px; text-align: center; font: 500 30px 'CG Sans'; color: var(--pale); opacity: .8; }
#cue-hint b { color: #fff; font-weight: 700; }
body.ready #cue-hint::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; background: var(--mint); vertical-align: middle; }

/* ---------- the answer ---------- */
#answer .ai-head { top: 64px; }
#replying { position: absolute; left: 110px; top: 160px; width: 860px; }
#claim-who { font: 700 20px 'CG Sans'; letter-spacing: 2.4px; color: var(--blue); text-transform: uppercase; }
#claim-text { position: static; height: auto; display: block; text-align: left; margin-top: 12px; padding-left: 26px; border-left: 6px solid var(--gray); font: 500 34px/1.25 'CG Sans'; letter-spacing: -.4px; color: var(--navy); text-wrap: pretty; }
#headline { margin-top: 40px; font: 700 80px/1.04 'CG Sans'; letter-spacing: -2.8px; text-wrap: balance; }

#evidence { position: absolute; left: 1060px; top: 160px; width: 760px; padding-left: 60px; border-left: 1.5px solid var(--gray); min-height: 540px; }
.evidence-label { font: 700 20px 'CG Sans'; letter-spacing: 2.4px; color: var(--blue); margin-bottom: 8px; }
#evidence .figure { height: 190px; }
#evidence #stat-value { font-size: 200px; letter-spacing: -8px; }
#evidence #stat-unit { margin-top: 34px; font-size: 80px; }
#evidence.long #stat-unit { font-size: 54px; margin-top: 50px; letter-spacing: -1.5px; }
#evidence #stat-says { margin-top: 10px; font-size: 28px; max-width: 700px; }
#evidence #figure-chart { margin-top: 20px; }
#evidence .donut svg { width: 140px; height: 140px; }
#evidence .donut ul { font-size: 21px; }
#evidence .hbar { grid-template-columns: 210px 1fr; font-size: 19px; }
#stat-source { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgb(143 173 178 / .6); font: 500 19px/1.35 'CG Sans'; color: var(--navy); }
#stat-source b { color: var(--blue); letter-spacing: 1.4px; font-weight: 700; }
#answer.nostat #evidence { display: none; }
#answer.nostat #replying { width: 1500px; }
#answer.nostat #headline { font-size: 96px; }

/* what the AI is saying, word by word as it says it */
#voice { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; display: flex; align-items: center; gap: 40px; padding: 0 110px; background: var(--navy); color: var(--paper); transition: opacity .5s; }
#wave { flex: none; display: flex; align-items: center; gap: 7px; height: 90px; }
#wave i { width: 9px; height: 16px; border-radius: 5px; background: var(--mint); transition: height .08s; }
#spoken { flex: 1; min-width: 0; height: 186px; overflow: hidden; scroll-behavior: smooth; font: 500 38px/1.22 'CG Sans'; letter-spacing: -.3px; color: rgb(208 234 233 / .4); }
#spoken > span { display: block; }
#spoken span span.on { color: #fff; }

/* the question it hands back to the panelist */
#challenge { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; padding: 46px 110px 0; background: var(--plum); color: var(--paper); transform: translateY(100%); transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
#challenge-label { font: 700 22px 'CG Sans'; letter-spacing: 2.8px; opacity: .85; }
#challenge-text { margin-top: 14px; font: 700 56px/1.12 'CG Sans'; letter-spacing: -1.4px; text-wrap: balance; }
#answer.asking #challenge { transform: none; }

#answer.on .ai-head { animation: fade .6s both; }
#answer.on #replying { animation: rise .7s .1s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on #headline { animation: rise .75s .7s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on #evidence { animation: rise .7s 1.6s cubic-bezier(.2, .7, .3, 1) both; }
#answer.on #figure-chart { animation: fade .6s 2.6s both; }
#answer.on .hbar .bar i, #answer.on .hbar .bar b { animation-delay: 3s !important; }
#answer.on .donut .slice { animation-delay: 3s; }

/* ---------- the two channels ---------- */
#channels { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 18px 110px; background: rgb(8 52 105 / .94); color: var(--paper); transition: transform .5s; }
body:not(.running) #channels, body.answering #channels { transform: translateY(100%); }
.channel { min-width: 0; }
.channel .who { display: flex; align-items: center; gap: 10px; font: 700 17px 'CG Sans'; letter-spacing: 2px; color: var(--gray); }
.channel .who i { width: 11px; height: 11px; border-radius: 50%; background: currentColor; opacity: .4; }
.channel.talking .who { color: var(--mint); }
.channel.talking .who i { opacity: 1; animation: blink 1.2s infinite; }
.channel .said { margin-top: 8px; height: 72px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font: 500 26px/36px 'CG Sans'; color: var(--pale); }

/* ---------- start card ---------- */
.choices.two { margin-top: 10px; }
.name { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 500 15px 'CG Sans'; }
.name input { flex: 1; max-width: 260px; padding: 8px 12px; border: 1px solid var(--gray); border-radius: 8px; background: #fff; color: inherit; font: inherit; }
.fine { margin-top: 12px; }