/* Ask Trump Anything. Look: the Freedomvision design (palette, Freedom fonts, lower-third, flag-edged cards).
   Layout: one grid. Phones (< 820 px wide): show view = video, actions, tabs + up-next; audience view = board with a small
   video. Wider screens: video and actions on the left, the board always on the right. */
@font-face{font-family:Freedom;src:url('../assets/Freedom-700.e476562ec9.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Freedom;src:url('../assets/Freedom-700-italic.331783dae9.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:FreedomDisplay;src:url('../assets/FreedomDisplay-900-italic.e1ed5d7e50.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}

:root{color-scheme:dark;--red:#ff0039;--gold:#ffcf30;--cyan:#079cde;--line:#0874b0;--ink:#f8fbff;--muted:#a5c2e3;
  --heading:Freedom,'Arial Narrow',Impact,sans-serif;--display:FreedomDisplay,Impact,sans-serif;--vh:100dvh}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#030b18;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{container:viewport/size}        /* the layout queries the viewport; a container can't query its own size */
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:2px}
svg{display:block;width:22px;height:22px;flex:none}
a{color:#72d9ff}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- frame ---------- */
.app{height:var(--vh);width:100%;max-width:1080px;margin:0 auto;display:grid;
  grid-template-rows:var(--mast) minmax(0,1fr) var(--form);gap:var(--gap);padding:0 10px 6px;
  --gap:7px;--mast:clamp(45px,8.4cqh,76px);--form:46px;
  background:radial-gradient(ellipse at 45% 0,#113e78 0,transparent 43%),#020e28}
/* masthead: the pre-rebuild values, verbatim (the art fills the band edge to edge) */
.masthead{min-width:0;min-height:0;position:relative;margin:0 -8px}
.brand{display:block;width:100%;height:100%}
.brand-wide{display:none;width:100%;height:100%}
.brand-narrow{display:block;width:100%;max-width:520px;margin-inline:auto;height:100%;overflow:hidden}

.stage{min-height:0;min-width:0;display:grid;gap:var(--gap);
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 34px auto;grid-template-areas:'video' 'actions' 'quick'}
.video{grid-area:video;min-height:0;min-width:0;container:video/size}
.actions{grid-area:actions;display:grid;grid-template-columns:1fr 1fr;gap:7px;min-height:0}
.quick{grid-area:quick;display:grid;grid-template-rows:34px 34px;gap:4px}
.audience-head,.board{display:none}

/* ---------- player ---------- */
.player{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid #068ed1;border-radius:9px;background:#100d19;box-shadow:0 0 14px #057bff29}
.player .poster,.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.player video{visibility:hidden}.player.playing video{visibility:visible}.player.playing .poster{visibility:hidden}
.badge,.sound{position:absolute;top:8px;z-index:3;display:flex;align-items:center;gap:6px;border-radius:5px;padding:4px 8px}
.badge{left:8px;background:#334;font:700 14px var(--heading);letter-spacing:.02em}
.badge i{width:7px;height:7px;border-radius:50%;background:#fff}
.badge.live{background:var(--red)}.badge.live i{animation:blink 1.4s infinite}
.badge.rerun{background:#1b4fa0}
@keyframes blink{50%{opacity:.25}}
.sound{right:8px;background:#030d21d9;border:1px solid #d1dae082;font-size:13px}
.sound svg{width:16px;height:16px}
.tap{position:absolute;inset:0;margin:auto;z-index:4;width:78%;height:max-content;padding:14px 8px;border-radius:7px;background:#e70038f0;font:700 20px var(--heading)}

/* lower-third */
.now{position:absolute;z-index:2;left:0;right:0;bottom:0;pointer-events:none;filter:drop-shadow(0 -1px 2px #040c3280)}
.now-label{position:relative;z-index:2;display:table;max-width:83%;margin:0 0 -1px 8.5%;padding:3px 12px 4px;transform:skew(-12deg);
  border:1px solid #ffabae;border-bottom:0;border-radius:5px 6px 0 0;background:linear-gradient(180deg,#ff5a61,#ff122b 12%,#e80016 46%,#b40012);
  color:#fff;font:italic 700 clamp(11px,4.6cqw,22px)/1 Freedom,'Arial Narrow',sans-serif;text-shadow:0 1px 2px #72000c;letter-spacing:.02em}
.now-label span{display:flex;align-items:center;gap:8px;transform:skew(12deg);white-space:nowrap}
.now-label i{font-style:normal}
.now-panel{position:relative;isolation:isolate}
.now-frame{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
/* bottom spacing is a transparent border, not padding: overflow clips at the padding edge, so a padded bottom would
   show a sliver of the clamped 4th line */
.now-title{margin:0;min-height:clamp(46px,18cqw,105px);padding:clamp(6px,1.9cqw,12px) 11% 0 10%;border-bottom:clamp(9px,2.6cqw,17px) solid transparent;color:#020b25;
  font:italic 900 clamp(16px,7.4cqw,40px)/1 var(--display);letter-spacing:-.015em;text-shadow:0 1px 0 #fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.now-title.long{font-size:clamp(14px,5.6cqw,30px)}

/* ---------- actions, quick ---------- */
.action{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #079edc;border-radius:6px;
  background:linear-gradient(#073e80,#04152d 80%);font:700 17px var(--heading);box-shadow:inset 0 1px 3px #38b9ff66}
.action svg{width:18px;height:18px}
.quick-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #125496;border-radius:6px 6px 0 0;overflow:hidden}
.quick-tabs button{font:700 17px var(--heading);background:linear-gradient(#092754,#020d27)}
.quick-tabs button:first-child{background:linear-gradient(#ff1144,#d9002b)}
.upnext{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 9px;border-radius:5px;background:linear-gradient(100deg,#ffe669,#ffcb24);color:#06142b;text-align:left}
.upnext>span{min-width:0;flex:1}
.upnext b{display:block;font:700 11px/1 var(--heading)}
.upnext span span{display:block;font:700 15px/1.15 var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- board ---------- */
.audience-head{grid-area:head;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-width:0}
.audience-head h2{font:700 32px/.95 var(--heading);margin:0}
.audience-head small{color:#9fbade;font-size:12px}
.back{color:#63d7ff;font-size:14px;padding:4px 0}
.board{grid-area:board;min-height:0;min-width:0;grid-template-rows:32px minmax(0,1fr);gap:6px}
.tabs{display:flex;gap:22px;border-bottom:1px solid #174c7d}
.tabs button{border-bottom:3px solid transparent;color:#a7c8e7;font:700 20px var(--heading)}
.tabs button[aria-selected=true]{border-color:var(--red);color:#fff}
.panel{min-height:0;min-width:0;display:grid;gap:7px}
.panel.questions{grid-template-rows:auto minmax(0,1fr) 30px}
.panel.clips{grid-template-rows:minmax(0,1fr) 30px}
.panel.detail{align-content:center;gap:12px;padding:8px 3px}

.locked{border:1px solid #e5be32;border-radius:7px;background:linear-gradient(135deg,#153035,#03132c 65%);overflow:hidden}
.locked-title{width:max-content;display:flex;align-items:center;gap:7px;padding:3px 11px;border-radius:0 0 5px 0;background:linear-gradient(#ffe767,#ffc929);color:#06152c;font:700 16px/1 var(--heading)}
.locked-title svg{width:16px;height:16px}
.locked-row{display:flex;align-items:center;gap:8px;padding:4px 9px;font-size:14px;line-height:1.15;min-width:0}
.locked-row+.locked-row{border-top:1px solid #84702f70}
.locked-row b{color:var(--gold);font:700 12px var(--heading);min-width:40px}
.locked-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.list{display:grid;grid-template-rows:repeat(var(--rows,4),minmax(0,1fr));gap:6px;min-height:0}
.q{position:relative;display:flex;align-items:center;gap:10px;min-height:0;min-width:0;overflow:hidden;padding:5px 8px 5px 15px;
  border:1px solid #056baf;border-radius:7px;background:linear-gradient(110deg,#08224c,#020d26 60%)}
.q:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(150deg,#ff0036 0 28%,#fff 29% 40%,#004bbc 42% 67%,#fc003a 69%)}
.rank{font:700 30px/1 var(--heading);min-width:34px}
.q.mine .rank{color:var(--gold)}
.q-text{flex:1;min-width:0;text-align:left;font:400 15px/1.15 Arial,sans-serif}
.q-text span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.yours{display:block;width:max-content;margin-bottom:3px;padding:2px 7px 1px;border-radius:8px;background:var(--gold);color:#041326;font:700 11px/1 var(--heading)}
.vote{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;min-width:60px;height:40px;padding:6px;border:1px solid #0595d1;border-radius:6px;
  background:linear-gradient(#082841,#010a1a);font:700 23px/1 var(--heading)}
.vote svg{width:20px;height:20px}
.vote[aria-pressed=true]{background:linear-gradient(#ff1b50,#e90033);border-color:#fb234e}
.empty{padding:16px;color:#a9bfdd}
.pager{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#a9c8e9}
.pager button{min-width:52px;height:28px;border:1px solid #22558b;border-radius:4px;background:#071d3d;color:#c2e9ff;font:700 15px var(--heading)}

.clip-list{grid-template-columns:1fr}
.clip{display:grid;grid-template-columns:clamp(70px,26%,115px) minmax(0,1fr);min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:linear-gradient(120deg,#06234d,#030e25)}
.clip img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.clip-body{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;padding:8px 10px}
.clip-kicker{font:700 12px var(--heading);color:var(--gold)}
.clip h3{margin:0;font:700 20px/1.05 var(--heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clip-meta{font-size:12px;color:#a8c3e4}
.clip-controls{display:flex;gap:14px;flex-wrap:wrap}
.clip-controls button{display:flex;align-items:center;gap:4px;color:#68d4ff;font-size:13px}
.clip-controls svg{width:15px;height:15px}

.detail h3{margin:0;font:700 28px/1.08 var(--heading);overflow-wrap:anywhere}
.detail p{margin:0;color:#c4d5ec;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.detail .vote{align-self:start;width:max-content}

/* ---------- composer ---------- */
.composer{display:flex;min-height:0;overflow:hidden;border:1px solid #0397db;border-radius:7px;background:#04122c;box-shadow:inset 0 1px 5px #16acff22}
.composer input{flex:1;min-width:0;border:0;background:transparent;padding:8px 11px;font-size:16px;outline-offset:-3px}
.composer input::placeholder{color:#a8bad5}
.count{align-self:center;padding:0 8px;color:#7896bc;font-size:12px}
.composer button{width:54px;display:flex;align-items:center;justify-content:center;background:linear-gradient(130deg,#10bbff,#0054ff)}
.composer button svg{width:28px;height:28px}
/* messages ("Checking your question…") float just above the ask box while they are showing; nothing otherwise */
.feedback{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--form) + 14px);z-index:30;
  width:max-content;max-width:min(520px,calc(100% - 32px));padding:7px 12px;border:1px solid #ffcf30;border-radius:8px;background:#061a3d;
  color:#ffdd62;font-size:13px;line-height:17px;text-align:center;box-shadow:0 4px 18px #000a}
.feedback.active{display:block}
.turnstile{position:fixed;right:16px;bottom:16px;z-index:50;padding:6px;border-radius:10px;background:#0b1a36;box-shadow:0 4px 18px #000a}

/* ---------- phone, audience view ---------- */
.app[data-view=audience] .stage{grid-template-columns:minmax(0,1fr) 108px;grid-template-rows:clamp(118px,22cqh,176px) minmax(0,1fr);grid-template-areas:'head video' 'board board'}
.app[data-view=audience] .audience-head{display:flex}
.app[data-view=audience] .board{display:grid}
.app[data-view=audience] .actions,.app[data-view=audience] .quick,.app[data-view=audience] .now{display:none}
.app[data-view=audience] .sound span{display:none}
.app[data-view=audience] .badge{font-size:10px;padding:2px 5px}

/* short phones */
@container viewport (max-width:819px) and (max-height:640px){
  .app{--mast:40px;--form:42px;--gap:5px}
  .stage{grid-template-rows:minmax(0,1fr) 30px auto}
  .quick{grid-template-rows:30px 30px}.action{font-size:15px}
}

/* ---------- wide screens ---------- */
@container viewport (min-width:820px){
  .masthead{margin:0 -12px}
  .app{--gap:clamp(6px,1.1cqh,12px);--mast:clamp(88px,18cqh,208px);--form:clamp(44px,6cqh,62px);padding:0 clamp(12px,1.5cqw,28px) 4px}
  .brand-wide{display:block}.brand-narrow{display:none}
  .stage,.app[data-view=audience] .stage{grid-template-columns:minmax(0,42fr) minmax(0,58fr);grid-template-rows:minmax(0,1fr) clamp(40px,6cqh,56px);
    grid-template-areas:'video board' 'actions board';column-gap:clamp(12px,1.6cqw,28px)}
  .app[data-view=audience] .actions,.app[data-view=audience] .now{display:grid}
  .app[data-view=audience] .now{display:block}
  .app[data-view=audience] .sound span{display:inline}
  .app[data-view=audience] .badge{font-size:14px;padding:4px 8px}
  .quick,.audience-head,.app[data-view=audience] .audience-head,.app[data-view=audience] .quick{display:none}
  .board{display:grid}
  .action{font-size:24px}.action svg{width:22px;height:22px}
  .panel.questions{grid-template-rows:auto minmax(0,1fr) 28px}
  .locked-row{font-size:clamp(14px,1.8cqh,18px)}
  .q{gap:clamp(9px,1.2cqw,18px);padding:5px 10px 5px 17px}
  .q-text{font:700 clamp(17px,2.4cqh,26px)/1.06 var(--heading)}
  .rank{font-size:clamp(30px,4.1cqh,46px);min-width:44px}
  .vote{font-size:clamp(23px,3.1cqh,33px);min-width:clamp(64px,7cqw,108px);height:clamp(36px,5.5cqh,56px)}
  .clip-list{grid-template-columns:1fr 1fr}
  .clip h3{font-size:clamp(20px,2.8cqh,28px)}
  .composer input{padding:10px 14px;font:700 clamp(18px,2.6cqh,26px) var(--heading)}
  .composer button{width:74px}.composer button svg{width:34px;height:34px}
  .feedback{font-size:12px}
  .detail h3{font-size:clamp(28px,4cqh,42px)}
}

@container viewport (min-width:820px) and (max-height:700px){.app{--mast:88px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}