/* ---------- stacked layout (phones, and tablets held portrait): FOR on top, AGAINST below, the rift runs sideways across the middle ----------
   --arena-cy / --sy / --dock-h / --bar-top are set by main.js (layoutVars) from the real element sizes. The same media list lives in main.js and arena.js. */
@media (max-width:699px), (max-width:1023px) and (orientation:portrait){
  /* The rift frame is the desktop frame turned 90deg: its width becomes the screen height x --bolt-frame (narrower rift).
     One rift unit (--bu) = 1% of that frame, so the clip paths below use exactly the seam's vertex list and stay hidden under it. */
  :root{--arena-cy:50%;--sy:50%;--bolt-frame:.85;--bu:.85dvh;--u:min(1vh,2.1vw);--t-1:8px;--t0:10px;   /* phone unit: statement L5, score L6 */
    --clipA:polygon(0 0,100% 0,100% calc(var(--sy) + .03*var(--bu)),0 calc(var(--sy) + .03*var(--bu)));
    --clipB:polygon(0 100%,100% 100%,100% calc(var(--sy) - .03*var(--bu)),0 calc(var(--sy) - .03*var(--bu)))}
  .stage{grid-template-rows:48px auto 1fr 40px}
  /* header: LIVE + the verdict clock only (tier C); Scanned / Next scan are tier E and go. The right cell clears the music button. */
  .top{grid-template-columns:auto 1fr auto;padding:0 10px} .top .l .pill:nth-child(2){display:none} .top .r{display:flex;padding-right:36px} .top .r .pill:first-child{display:none} .top .pill{white-space:nowrap}
  .top .title{font-size:13px} .top .title small{font-size:8px}
  .topic{position:relative;top:auto;left:auto;transform:none;width:auto;margin:8px 12px 0;padding:6px 6px 6px}   /* relative: the hero sits above the arena here instead of over it */
  .topic .kicker,.topic h1,.topic .judged{display:none} .topic .sub{font-size:calc(min(var(--t5),9.6vw) * var(--fit,1));line-height:1.02} .topic .sub .ask{margin-top:.18em}
  .arena{grid-template-columns:minmax(0,1fr);grid-template-rows:calc(50% + var(--shift-y,0px)) minmax(0,1fr);padding-bottom:var(--dock-h,230px);transition:grid-template-rows 1.2s cubic-bezier(.2,.8,.2,1)}
  .mid{display:none}
  /* the halves hug the rift: name, number and button read as one unit; the air goes under the hero and above the dock */
  .side{padding:8px 16px;gap:6px} .side>*{flex-shrink:0}   /* nothing in a half may be squeezed away; main.js keeps the split where both halves fit */
  .side.a{justify-content:flex-end;padding-bottom:var(--stack-clear,120px)}   /* --stack-clear (main.js) = half the button pair's real height + 8px */
  .side.b{justify-content:flex-start;padding-top:var(--stack-clear,120px);align-items:flex-end;text-align:right}
  .score{font-size:var(--t6)} .score sup{font-size:var(--t1)} .name{font-size:var(--t2)} .name small{font-size:var(--t0);margin-top:0}
  canvas.spark{display:none;width:100%;height:calc(2.6*var(--u))}   /* no axis at this size, so the canvas only has to hold the line */
  /* stats: one inline line of three numbers ("54 ITEMS  54 SOURCES  +5 MOMENTUM"), no scroll, no clipping */
  .stats{display:flex;gap:14px;width:100%;overflow:hidden;padding:0}
  .stat{flex:0 0 auto;display:flex;flex-direction:row-reverse;align-items:baseline;gap:5px;border:0;padding:0} .side.b .stat{border:0;padding:0}
  .stat .v{font-size:var(--t1);margin:0} .stat .k{font-size:var(--t-1)}
  .stat[data-k="articles"],.stat[data-k="posts"],.stat[data-k="topName"],.stat[data-k="hottest"],.stat[data-k="lastItem"]{display:none}
  .side.b .stats{flex-direction:row;justify-content:flex-end}
  .bolt{inset:auto;left:50%;top:var(--sy);width:calc(100dvh * var(--bolt-frame));height:100vw;transform:translate(-50%,-50%) rotate(90deg)} .bolt svg,.bolt .riftshift{transform:none}   /* the rift sits on the split itself (capped in main.js), not on the uncapped --shift */
  .rift-core{stroke-width:1.8}
  .riftnode{transform:rotate(-90deg)}   /* .bolt is rotated 90deg here: the sparks still fall down the screen */
  .riftnode::before{width:1.8px;height:12px;margin:-6px 0 0 -.9px}
  .riftnode i{width:1.8px;height:4.5px;margin:-2.25px 0 0 -.9px;--k:.72}
  .riftnode i:nth-child(3n){width:1.3px;height:3.2px;margin:-1.6px 0 0 -.65px}
  :root{--scrim-h:38vh}   /* --hero-b is ~0 here: the hero sits above the arena, so the band is a plain fraction of the screen */
  .artbg .push{left:0;right:0;width:auto;height:26vh;transition:opacity 1.2s,top 1.2s cubic-bezier(.2,.8,.2,1)}
  .artbg .push.for{top:calc(var(--sy) - 26vh)}
  .artbg .push.against{top:var(--sy)}
  .snip{max-width:78vw;font-size:var(--t1)}
  .credit{top:auto;bottom:calc(var(--dock-h,230px) + 2px);left:auto;right:10px;transform:none;font-size:var(--t-1);opacity:.4}   /* stacked: the hero sits right under the header, so the credit stays down by the dock. top:auto or it would stretch between the two. */
  .music{top:8px;bottom:auto;left:auto;right:8px;transform:none;padding:2px 4px} .music .mbtn{width:28px;height:28px;font-size:13px} .music:hover .mvol{width:0;opacity:0} .music:focus-within .mvol{width:60px;opacity:1}
  .actions{bottom:40px;grid-template-columns:1fr;row-gap:4px;padding:6px 12px}
  .actions .vbtn{flex:1;min-height:34px;font-size:var(--t1)}
  .actions .vgroup.call{width:100%}
  .actions .vgroup.call .vlabel{flex-basis:100%;text-align:center;font-size:var(--t1)}
  .actions .crowd{justify-self:stretch;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .actions .crowd .vmini{display:none}   /* social proof is desktop texture; share / push stay on this row */
  .actions .vlabel .long{display:none} .actions .vlabel .short{display:inline}
  .actions .vbtn.s{flex:0 0 auto;min-height:32px;padding:5px 10px;font-size:var(--t0)}
  .actions .lastverdict{font-size:var(--t0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .banner{top:52px;font-size:var(--t0);max-width:94vw}
  .verdictplate{top:var(--arena-cy)} .verdictplate h2{font-size:var(--t6)}
  .feed{font-size:var(--t0)}
}

/* tall phones have room for the sparklines again (shorter than on desktop) */
@media (max-width:699px) and (min-height:900px){ canvas.spark{display:block} }

/* ---------- tablets held portrait (700-1023): the stacked layout with a bigger unit and the desktop extras that fit ---------- */
@media (min-width:700px) and (max-width:1023px) and (orientation:portrait){
  :root{--u:min(.7vh,1vw);--t-1:8px;--t0:11px}
  .topic{margin:14px 24px 0} .topic .sub{font-size:calc(min(var(--t6),6.8vw) * var(--fit,1))} .topic .judged{display:block;font-size:var(--t0)}
  .score{font-size:var(--t7)} .name{font-size:var(--t4)} .side{padding-left:28px;padding-right:28px;row-gap:10px}   /* not the phone's 6px: this screen has room the phone does not */
  canvas.spark{display:block;height:calc(6*var(--u))}
  .stats{gap:22px} .stats .stat[data-k="lastItem"]{display:flex}
  .stance .sbtn{min-width:46vw}
  :root{--scrim-h:34vh}
  .actions .crowd .vmini:first-child{display:inline-block}
  .actions .vgroup.call{flex-wrap:nowrap} .actions .vgroup.call .vlabel{flex-basis:auto;text-align:left}   /* 820px holds the call label and both buttons on one row */
}

/* tall tablets held portrait: enough height to give the block real rhythm and the sparkline a chart's proportions
   (at 6u it runs ~15:1 across a 764px half, which reads as a wire). A 1024-tall tablet cannot pay for this. */
@media (min-width:700px) and (max-width:1023px) and (orientation:portrait) and (min-height:1100px){
  .side{row-gap:16px}
  canvas.spark{height:calc(7*var(--u))}
}