/* Tablet/phone breakpoints, momentum bars, gallery, music control, stage 3 action bar / crowd / strip / banner / modes. */
/* ---------- iPad landscape (1024-1199) and short desktops; designer 2026-09-18, docs/design/hierarchy.md ---------- */
@media (max-width:1199px){
  :root{--t-1:8px;--t0:11px}
  .arena{grid-template-columns:1fr 200px 1fr} .side{padding-left:24px;padding-right:24px}
  .stats{grid-template-columns:repeat(4,minmax(64px,1fr));gap:5px;width:min(100%,360px)} .stat{padding:1px 0 1px 8px} .side.b .stat{padding:1px 8px 1px 0} .stat .v{margin-top:1px}
  .topic{top:76px;width:min(94vw,1000px);padding:10px 20px 12px} .topic .judged{margin-top:8px}
  .top .pill{padding:3px 8px}
  .vs{font-size:40px}
  .lead,.gap{max-width:190px;padding:6px 10px}
  .actions{padding:8px 12px;column-gap:14px} .actions .vmini:not(:first-child){display:none}
}
/* iPad portrait (700-1023, portrait) uses the stacked layout in phone.css: a vertical rift cannot fill a 310px column on an 1180px-tall screen */

/* --t1 clamps ~20% larger at 1600+ than at 1440 while the stats block did not, so "13m ago" ellipsised at 1920 only */
@media (min-width:1600px){ .stats{width:min(100%,448px)} }

/* short screens: the stats fold to one row (items, sources, momentum, last item) so the block clears the dock */
@media (max-height:760px){ .stat[data-k="articles"],.stat[data-k="posts"],.stat[data-k="topName"],.stat[data-k="hottest"]{display:none} }
.actions .vlabel .short{display:none}   /* the stacked layout (phone.css) shows the short call label instead */
.early{display:block;margin-top:4px;font-size:var(--t-1);letter-spacing:.2em;opacity:.8}

/* ---- momentum bars (web/src/momentum.js draws them): a band hugging the rift on the side that is pushing ---- */
.artbg .push{position:absolute;top:0;bottom:0;width:26%;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity 1.2s,left 1.2s cubic-bezier(.2,.8,.2,1)}
.artbg .push.for{left:calc(50% + var(--shift) - 26%)}
.artbg .push.against{left:calc(50% + var(--shift))}
.artbg .push.on{opacity:1}
/* center text hidden for now (owner decision 2026-09-16); rift column keeps its space */
.mid{visibility:hidden}

/* ---- gallery: floating rounded image cards, slightly tilted, low opacity, behind everything ---- */
.artbg .gallery{position:absolute;inset:0;overflow:hidden;pointer-events:none}
@media (max-width:1023px){ .artbg .gallery{display:none} }   /* gallery hidden on iPad portrait and phones: it would collide with the stats and quotes */
.artbg .gallery .card{position:absolute;width:27vw;aspect-ratio:16/9;border-radius:16px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);background-size:cover;background-position:center;opacity:0;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12) inset;filter:saturate(1.1) brightness(.75);transition:opacity 2s;animation:cardFloat var(--dur,26s) ease-in-out infinite alternate}
.artbg .gallery .card.on{opacity:var(--op,.36)}
@keyframes cardFloat{from{transform:translate(0,0) rotate(var(--rot))}to{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) + 1.5deg))}}
/* ---- music control ---- */
/* vertically centred in the dock whatever its height: --bar-top is the dock top (main.js), 44px its bottom; translateY(50%) centres the box on that line */
.music{position:absolute;left:12px;bottom:calc(var(--bar-top,130px) / 2 + 22px);transform:translateY(50%);z-index:7;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:999px;background:rgba(6,8,14,.7);border:1px solid var(--line);backdrop-filter:blur(8px)}
.music .mbtn{font:inherit;font-size:var(--t1);line-height:1;background:none;border:none;color:#fff;cursor:pointer;width:32px;height:32px;border-radius:50%}
.music .mbtn.beat{animation:mpulse 2.4s ease-in-out infinite}
@keyframes mpulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.12)}}
.music .mvol{width:0;opacity:0;transition:width .3s,opacity .3s;accent-color:var(--a2)}
.music:hover .mvol,.music:focus-within .mvol{width:90px;opacity:1}
.feed .items a.tk{color:inherit;text-decoration:none;opacity:.85}
.feed .items a.tk:hover{opacity:1;text-decoration:underline}

/* ---- stage 3: action bar, crowd, strip, banner, modes ---- */
/* Bottom dock (designer, 2026-09-17): fused to the ticker, edge to edge, no card. Same feathered blur-and-fade language as the hero,
   rising from the ticker line. Three cells on one row: yesterday / up next (left), your call (centre), crowd data + actions (right). */
.actions{position:absolute;left:0;right:0;bottom:44px;transform:none;z-index:7;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:28px;max-width:none;padding:12px clamp(16px,3vw,40px) 12px 86px;border:0;border-radius:0;background:none;transition:opacity .25s}   /* left padding clears the music control in the corner */
.actions::before{content:"";position:absolute;inset:-44px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(4,6,12,.86) calc(100% - 44px),rgba(4,6,12,0));-webkit-backdrop-filter:blur(14px) saturate(.8);backdrop-filter:blur(14px) saturate(.8);-webkit-mask-image:linear-gradient(to top,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to top,#000 calc(100% - 44px),transparent)}
.actions .vgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions .vgroup.call{justify-content:center}
.actions .vgroup.dim{opacity:.6}
.actions .vlabel{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:600;font-size:var(--t2);letter-spacing:.05em;text-transform:uppercase;opacity:.95;color:#fff}
.actions .vlabel small{opacity:.7;letter-spacing:.1em}
.actions .vbtn{font:800 var(--t1)/1 Inter;letter-spacing:.03em;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;min-height:34px;transition:border-color .15s,background .15s}
.actions .vbtn:hover{border-color:var(--b2);background:rgba(0,180,255,.12)}
.actions .vbtn.on{background:var(--b2);border-color:var(--b2);color:#06101a}
.actions .vbtn:disabled{opacity:.5;cursor:default}
.actions .vbtn.s{font-weight:600;font-size:var(--t0);margin-left:10px}
.actions .vsaid{font-size:var(--t0);opacity:.9}
.actions .crowd{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 0;justify-self:end}
.actions .vmini{font:600 var(--t-1) Inter;letter-spacing:.14em;text-transform:uppercase;opacity:.6;padding:0 10px;border-left:1px solid rgba(255,255,255,.16);white-space:nowrap}
.actions .vmini:first-child{border-left:0;padding-left:0}
.actions .vmini b{font-family:"Barlow Condensed",Inter,sans-serif;font-weight:600;font-size:var(--t1);letter-spacing:.04em;opacity:1;color:#fff}
.actions .vstreak{font-family:Orbitron;font-size:var(--t0);margin-left:10px}
.actions .vflash{font-size:var(--t0);color:var(--neg);margin-left:10px}
.actions .vflash.ok,.actions .vsaid.ok{color:#7CFF9A}
.lastverdict a{color:#fff;text-decoration:none}
.lastverdict[data-winner="for"]{border-left-color:var(--a2)} .lastverdict[data-winner="tie"]{border-left-color:#fff} .lastverdict[data-winner="next"]{border-left-color:#fff}
/* the dock's first cell: yesterday's verdict or the evening up-next, a labelled line, never a pill */
.actions .lastverdict{position:static;transform:none;justify-self:start;max-width:100%;font-size:var(--t0);letter-spacing:.1em;text-transform:uppercase;opacity:.75;padding:2px 0 2px 10px;border-radius:0;background:none;border:0;border-left:2px solid var(--b2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions .lastverdict[hidden]{display:none}
#lastverdict{display:none}
.banner{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 60%,#000),color-mix(in srgb,var(--b1) 60%,#000));border:1px solid rgba(255,255,255,.3);font-weight:800;font-size:var(--t1);box-shadow:0 10px 30px rgba(0,0,0,.6)}
/* Desktop / iPad: the personal grade is the personal form of "yesterday" (hierarchy tier D), so it takes the dock's first cell instead of the hero band */
@media (min-width:1024px), (min-width:700px) and (orientation:landscape){
  .banner{left:86px;top:auto;bottom:calc(var(--bar-top,130px) / 2 + 22px);transform:translateY(50%);max-width:calc(33vw - 60px);padding:2px 0 2px 10px;gap:8px;border:0;border-left:2px solid #fff;border-radius:0;background:none;box-shadow:none;font-size:var(--t0);font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .banner small{font-size:inherit;text-transform:none;letter-spacing:.02em}
  .stage:has(.banner:not([hidden])) .actions .dockstrip{visibility:hidden}
}
.banner small{opacity:.75;font-weight:400;margin-left:6px}
.banner .bx{font:inherit;background:none;border:none;color:#fff;font-size:var(--t2);cursor:pointer;opacity:.7}
.stage[data-mode="countdown"] .top .r .pill:last-child{animation:cdPulse 1s ease-in-out infinite;border-color:#fff}
@keyframes cdPulse{50%{box-shadow:0 0 18px rgba(255,255,255,.6)}}
.verdictplate{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:9;text-align:center;padding:22px 34px;border-radius:22px;background:rgba(6,8,14,.82);border:1px solid rgba(255,255,255,.3);box-shadow:0 20px 80px rgba(0,0,0,.7);animation:plateIn .8s cubic-bezier(.2,.8,.2,1)}
.verdictplate .k{font-size:var(--t0);letter-spacing:.35em;text-transform:uppercase;opacity:.8}
.verdictplate h2{font-family:Orbitron;font-size:var(--t6);margin:6px 0 4px;text-shadow:0 0 30px currentColor}
.verdictplate .s{font-family:Orbitron;font-size:var(--t3);opacity:.9}
@keyframes plateIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.stage[data-mode="verdict"] .side.lost{opacity:.45;filter:saturate(.5)}
.stage[data-mode="verdict"] .side.won .score{animation:winPulse 1.2s ease-in-out infinite}
@keyframes winPulse{50%{transform:scale(1.08)}}