/* HK Upload Desk - the process view: what a Reel / Story is doing right now, and a big clear "it is live" with its link.
   Rules kept from the rest of the app: only transform / opacity move, nothing loops unless work is really running,
   no backdrop-filter, no overflow tricks on <html>/<body> (iPhone Safari), min text 12px on phones. */

/* ============================================================ card: process panel (while publishing) */
.text-col{position:relative}
.proc,.livep{position:absolute;inset:0;z-index:3;border-radius:18px;display:grid;align-content:center;gap:8px;padding:18px 20px;
  background:linear-gradient(155deg,#1d1914,#0f0d0b 70%);box-shadow:0 0 0 1px rgba(222,196,152,.18) inset,0 20px 40px -24px #000;overflow:hidden}
.proc.hidden,.livep.hidden{display:none}
.card.has-panel .caption-wrap,.card.has-panel .opts{visibility:hidden}
.card.has-panel .text-col{min-height:262px}
.card.busy .card-foot .go{display:none}                    /* nothing to press while it is on its way */

.proc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 180px at 85% -10%,rgba(214,178,122,.16),transparent 65%)}
.proc-top{display:flex;align-items:center;gap:10px;position:relative}
.proc-kicker{font:700 .7rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.proc-kicker i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--violet);margin-right:8px;vertical-align:1px;
  box-shadow:0 0 10px var(--violet);animation:pcBeat 1.1s ease-in-out infinite}
.proc-time{margin-left:auto;font:500 .8rem "IBM Plex Mono";color:var(--muted)}
.proc-stage{font:400 1.75rem/1.08 "Instrument Serif",serif;color:#f8ecd2;position:relative}
.proc-stage em{font-style:normal;color:var(--violet)}

/* the 3D launch track: a floor that runs away from you, a glowing rail on it, the stations standing on the rail as
   spheres, and light running to the station that is working */
.proc-track{position:relative;height:112px;perspective:440px;perspective-origin:50% 0}
.pt-floor{position:absolute;left:-6%;right:-6%;bottom:22px;height:150px;transform:rotateX(74deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(222,196,152,.26) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,rgba(222,196,152,.2) 0 1px,transparent 1px 22px),
    linear-gradient(0deg,rgba(214,178,122,.16),rgba(214,178,122,0) 70%);
  -webkit-mask-image:linear-gradient(0deg,#000 8%,transparent 92%);mask-image:linear-gradient(0deg,#000 8%,transparent 92%)}
.pt-rail{position:absolute;left:6%;right:6%;bottom:38px;height:6px;border-radius:6px;background:linear-gradient(180deg,#3a3229,#191511);
  box-shadow:0 0 0 1px rgba(222,196,152,.18),0 8px 10px -4px rgba(0,0,0,.9)}
.pt-fill{position:absolute;left:8%;bottom:38px;height:6px;border-radius:6px;width:0;max-width:84%;
  background:linear-gradient(180deg,#fff4d6,#d6b27a 60%,#9d7444);box-shadow:0 0 16px rgba(239,220,179,.85),0 0 2px #fff7e0;transition:width .9s cubic-bezier(.3,.8,.3,1)}
.pt-flow{position:absolute;bottom:36px;height:10px;border-radius:10px;overflow:hidden;opacity:.95;transition:left .9s cubic-bezier(.3,.8,.3,1),width .9s}
.pt-flow i{position:absolute;inset:0;width:46%;background:linear-gradient(90deg,transparent,#fff7e0 60%,transparent);animation:pcFlow 1.2s linear infinite}
.pt-node{position:absolute;bottom:26px;width:30px;height:30px;margin-left:-15px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#5a4e40,#231d17 62%,#0e0c0a);box-shadow:0 0 0 1px rgba(222,196,152,.3) inset,0 14px 10px -8px rgba(0,0,0,.95);
  transition:background .5s,box-shadow .5s,transform .5s}
.pt-node b{font:700 .7rem "Manrope";color:var(--muted);transition:color .4s;position:relative;z-index:1}
.pt-node em{position:absolute;top:36px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 .7rem "Manrope";font-style:normal;
  letter-spacing:.04em;color:var(--muted);transition:color .4s}
.pt-node.first em{left:-4px;transform:none}                  /* the end labels stay inside the panel */
.pt-node.last em{left:auto;right:-4px;transform:none}
.pt-node s{position:absolute;left:50%;bottom:50%;width:34px;height:0;margin-left:-17px;border-radius:17px 17px 0 0;pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(255,244,214,.5),transparent);transition:height .6s cubic-bezier(.2,.8,.2,1),opacity .4s;text-decoration:none}
.pt-node.done{background:radial-gradient(circle at 34% 28%,#fff8e4,#e2c189 46%,#8a6233);box-shadow:0 0 18px rgba(214,178,122,.6),0 14px 10px -8px rgba(0,0,0,.95)}
.pt-node.done b{color:#1b140a}
.pt-node.done em{color:#cdbf9f}
.pt-node.skip{opacity:.45}
.pt-node.on{transform:scale(1.2);background:radial-gradient(circle at 34% 28%,#fff,#f6e2b4 42%,#b98a48);
  box-shadow:0 0 0 1px rgba(255,244,214,.9) inset,0 0 30px rgba(239,220,179,.95),0 16px 12px -8px rgba(0,0,0,.95)}
.pt-node.on b{color:#1b140a}
.pt-node.on em{color:#f8ecd2;font-weight:700}
.pt-node.on s{height:62px;opacity:1}                         /* a column of light over the station that is working */
/* a ring that orbits the working station: a circle seen from the side */
.pt-node.on::before,.pt-node.on::after{content:"";position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;
  border:2px solid transparent;border-top-color:#fff4d6;border-right-color:rgba(246,230,195,.4);animation:pcOrbit 1.5s linear infinite}
.pt-node.on::after{width:66px;height:66px;margin:-33px;border-top-color:rgba(214,178,122,.8);border-right-color:transparent;animation-duration:2.3s;animation-direction:reverse}
.pt-node.bad{background:radial-gradient(circle at 34% 28%,#ffd0c8,#e38b7f 55%,#8a3a30);box-shadow:0 0 18px rgba(227,139,127,.6)}

.proc-bar{position:relative;height:8px;border-radius:8px;background:rgba(255,255,255,.07);overflow:hidden}
.proc-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:linear-gradient(90deg,#9d7444,#f6e6c3);
  box-shadow:0 0 14px rgba(239,220,179,.6);transition:width .6s cubic-bezier(.3,.8,.3,1)}
.proc-bar.wait i{width:34%!important;animation:pcWait 1.5s ease-in-out infinite}
.proc-foot{display:flex;align-items:baseline;gap:10px;position:relative}
.proc-hint{flex:1;min-width:0;font-size:.8rem;line-height:1.4;color:var(--muted)}
.proc-pct{font:500 1.05rem "IBM Plex Mono";color:#f6e6c3;min-width:3.2em;text-align:right}

@keyframes pcBeat{50%{opacity:.35;transform:scale(.7)}}
@keyframes pcFlow{from{transform:translateX(-110%)}to{transform:translateX(230%)}}
@keyframes pcOrbit{from{transform:rotateX(68deg) rotate(0)}to{transform:rotateX(68deg) rotate(360deg)}}
@keyframes pcWait{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}

/* ============================================================ card: ring over the Reel while it is working */
.pub-ring{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 50% 46%,rgba(8,7,6,.5),rgba(8,7,6,.86));pointer-events:none;overflow:hidden}
.pub-ring.hidden{display:none}
.pub-ring svg{width:128px;height:128px;transform:rotate(-90deg);grid-area:1/1}
.pub-ring circle{fill:none;stroke-width:6}
.pub-ring .track{stroke:rgba(255,255,255,.13)}
.pub-ring .val{stroke:#f1dba8;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .7s cubic-bezier(.3,.8,.3,1);
  filter:drop-shadow(0 0 6px rgba(239,220,179,.8))}
.pub-ring .num{grid-area:1/1;display:grid;justify-items:center}
.pub-ring b{font:500 1.5rem "IBM Plex Mono";color:#fff7e0;line-height:1}
.pub-ring small{font:700 .68rem "Manrope";letter-spacing:.1em;text-transform:uppercase;color:#d9c8a2;margin-top:5px}
.pub-ring b:empty{display:none}                               /* a step without a number: the ring turns, the word says what it is */
.pub-ring b:empty + small{margin-top:0;font-size:.76rem}
.pub-ring.spin svg{animation:pcSpin 1.3s linear infinite}
@keyframes pcSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.pub-ring::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(180deg,transparent,rgba(239,220,179,.16),transparent);
  animation:pcScan 2.2s linear infinite}
@keyframes pcScan{from{transform:translateY(-100%)}to{transform:translateY(270%)}}

/* ============================================================ card: it is live - the link, big */
.livep{align-content:space-between;gap:12px;background:linear-gradient(155deg,#17251c,#0c110d 72%);
  box-shadow:0 0 0 1px rgba(156,202,166,.34) inset,0 20px 40px -24px #000}
.livep::before{content:"";position:absolute;right:-34px;top:-40px;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(156,202,166,.22),transparent 68%)}
.livep.sched{background:linear-gradient(155deg,#241d12,#110e0a 72%);box-shadow:0 0 0 1px rgba(214,178,122,.4) inset,0 20px 40px -24px #000}
.livep.sched::before{background:radial-gradient(circle,rgba(214,178,122,.2),transparent 68%)}
.lp-top{display:flex;align-items:center;gap:12px;position:relative}
.lp-tick{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:#0b1a10;
  background:radial-gradient(circle at 32% 28%,#eafff0,#9ccaa6 55%,#4f8a60);box-shadow:0 0 26px rgba(156,202,166,.55),0 10px 14px -8px #000}
.lp-tick i{width:22px;height:22px}
.livep.sched .lp-tick{color:#1b140a;background:radial-gradient(circle at 32% 28%,#fff4d6,#d6b27a 55%,#8a6233);box-shadow:0 0 26px rgba(214,178,122,.5),0 10px 14px -8px #000}
.lp-title{display:grid;gap:1px;min-width:0}
.lp-title small{font:700 .7rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.livep.sched .lp-title small{color:var(--violet)}
.lp-title strong{font:400 1.6rem/1.05 "Instrument Serif",serif;color:#f1fff4}
.livep.sched .lp-title strong{color:#f8ecd2}
.lp-when{margin-left:auto;text-align:right;font:500 .78rem/1.5 "IBM Plex Mono";color:var(--muted);white-space:nowrap}
.lp-when b{display:block;font-weight:500;color:#cfe6d4}
.lp-link{position:relative;display:grid;gap:3px;padding:14px 52px 14px 18px;border-radius:16px;text-decoration:none;min-width:0;
  background:rgba(156,202,166,.09);box-shadow:0 0 0 1px rgba(156,202,166,.32) inset;transition:background .2s,transform .2s}
.lp-link:hover{background:rgba(156,202,166,.16);transform:translateY(-1px)}
.lp-link small{font:500 .76rem "IBM Plex Mono";color:#9db8a3}
.lp-link b{font:500 clamp(1.15rem,2.3vw,1.7rem)/1.15 "IBM Plex Mono";color:#f1fff4;overflow-wrap:anywhere}
.lp-link .go-i{position:absolute;right:16px;top:50%;margin-top:-13px;width:26px;height:26px;color:var(--green)}
.lp-wait{padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line) inset;font-size:.86rem;line-height:1.45;color:#d9d2c4}
.lp-wait b{color:#f1fff4}
.lp-wait i{display:block;height:4px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.lp-wait i::after{content:"";position:absolute;inset:0;width:34%;border-radius:4px;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:pcWait 1.5s ease-in-out infinite}
.lp-big{font:400 clamp(1.5rem,3vw,2.1rem)/1.1 "Instrument Serif",serif;color:#f8ecd2}
.lp-big small{display:block;font:500 .8rem "IBM Plex Mono";color:var(--muted);margin-top:6px}
.lp-acts{display:flex;gap:8px;flex-wrap:wrap;position:relative}
.lp-acts .btn{padding:.72rem 1.1rem;font-size:.86rem;border-radius:13px;text-decoration:none}
.lp-acts .btn.open{color:#0b1a10;background:linear-gradient(120deg,#e3f7e8,#9ccaa6 55%,#5c9a6e);box-shadow:0 10px 26px -10px rgba(156,202,166,.8)}
.lp-cap{display:none;max-height:92px;overflow:auto;white-space:pre-wrap;font-size:.8rem;line-height:1.5;color:#d9d2c4;padding:10px 12px;border-radius:12px;
  background:rgba(0,0,0,.28);box-shadow:0 0 0 1px var(--line) inset}
.livep.show-cap .lp-cap{display:block}
.livep.show-cap .lp-link{padding-top:9px;padding-bottom:9px}
.livep.show-cap .lp-link b{font-size:1rem}
/* the moment it goes live: the panel turns in like a card being laid down, once */
.livep.enter{animation:lpIn .9s cubic-bezier(.2,.9,.2,1) both;transform-origin:50% 0}
.livep.enter .lp-tick{animation:lpTick .9s .15s cubic-bezier(.2,1.4,.3,1) both}
.livep.enter::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(241,255,244,.28) 50%,transparent 65%);
  animation:lpSheen 1.1s .25s ease-out both}
@keyframes lpIn{from{opacity:0;transform:perspective(900px) rotateX(-72deg) translateY(-10px)}to{opacity:1;transform:perspective(900px) rotateX(0)}}
@keyframes lpTick{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
@keyframes lpSheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.card[data-s="published"] .card-foot .link,.card[data-s="scheduled"] .card-foot .link{display:none}   /* the link lives in the big panel now */

/* ============================================================ mission: the whole batch, live */
.mission{position:relative;margin:0 0 18px;border-radius:24px;padding:16px 18px 14px;display:grid;gap:10px;
  scroll-margin-top:calc(var(--mis-off,8px) + env(safe-area-inset-top,0px));
  background:linear-gradient(160deg,#1c1813,#0b0a08 75%);box-shadow:0 0 0 1px rgba(222,196,152,.22) inset,0 30px 60px -28px #000;overflow:hidden}
.mission.hidden{display:none}
.mission::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 240px at 96% 62%,rgba(214,41,118,.2),transparent 62%),radial-gradient(600px 220px at 4% 0,rgba(214,178,122,.14),transparent 62%)}
.mis-head{display:flex;align-items:center;gap:16px;position:relative}
.mis-count{position:relative;width:74px;height:74px;flex:none;display:grid;place-items:center}
.mis-count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mis-count circle{fill:none;stroke-width:5}
.mis-count .track{stroke:rgba(255,255,255,.1)}
.mis-count .val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 0 6px rgba(156,202,166,.7))}
.mis-count b{font:400 1.9rem "Instrument Serif",serif;line-height:1;color:#f1fff4}
.mis-title{display:grid;gap:2px;min-width:0;flex:1}
.mis-title small{font:700 .7rem "Manrope";letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.mis-title small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--violet);margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--violet);animation:pcBeat 1.1s ease-in-out infinite}
.mission.done .mis-title small{color:var(--green)}.mission.done .mis-title small i{background:var(--green);box-shadow:0 0 10px var(--green);animation:none}
.mission.warn .mis-title small{color:var(--amber)}.mission.warn .mis-title small i{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:none}
/* every line keeps its height whatever it says: the runway must never grow or shrink while it works (the cards below would jump) */
.mis-title strong{font:400 1.7rem/1.08 "Instrument Serif",serif;color:#f8ecd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mis-title > span{font-size:.82rem;line-height:1.35;min-height:1.35em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mis-acts{display:flex;gap:8px;align-items:center;flex:none}
.mis-time{font:500 .82rem "IBM Plex Mono";color:var(--muted)}

/* the runway: a floor that runs away from you, a glowing rail, five gates standing on it, every Reel a coin that rides
   the rail gate to gate and into Instagram */
.mis-scene{position:relative;height:168px;perspective:520px;perspective-origin:50% 0}
.mis-floor{position:absolute;left:-8%;right:-8%;bottom:20px;height:260px;transform:rotateX(76deg);transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,rgba(222,196,152,.3) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(222,196,152,.22) 0 1px,transparent 1px 26px),
    linear-gradient(0deg,rgba(214,178,122,.2),rgba(214,178,122,0) 75%);
  -webkit-mask-image:linear-gradient(0deg,#000 6%,transparent 94%);mask-image:linear-gradient(0deg,#000 6%,transparent 94%)}
.mis-rail{position:absolute;left:2%;right:7%;bottom:44px;height:8px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#4a4034,#1b1712);box-shadow:0 0 0 1px rgba(222,196,152,.22),0 12px 14px -6px rgba(0,0,0,.95)}
.mis-rail i{position:absolute;top:0;bottom:0;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,244,214,.95),transparent);animation:misRun 1.7s linear infinite}
.mission.done .mis-rail i,.mission.warn .mis-rail i{animation:none;opacity:0}
.mission.done .mis-rail{background:linear-gradient(180deg,#cfe6d4,#5c9a6e);box-shadow:0 0 18px rgba(156,202,166,.5)}
@keyframes misRun{from{transform:translateX(-120%)}to{transform:translateX(480%)}}
.mis-gate{position:absolute;bottom:40px;width:0;height:104px}
/* an arch with depth: the same arch drawn twice, the far one smaller and dimmer */
.mis-gate::before,.mis-gate::after{content:"";position:absolute;bottom:0;border-radius:40px 40px 6px 6px;border:3px solid rgba(222,196,152,.34);border-bottom:0;
  transition:border-color .4s,box-shadow .4s,background .4s}
.mis-gate::before{left:-31px;width:62px;height:84px;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.mis-gate::after{left:-24px;width:48px;height:70px;bottom:10px;opacity:.5;border-width:2px}
.mis-gate.on::before{border-color:#fff4d6;box-shadow:0 0 26px rgba(239,220,179,.55),0 0 26px rgba(239,220,179,.4) inset;
  background:linear-gradient(0deg,rgba(255,244,214,.2),transparent 80%)}
.mis-gate.on::after{border-color:#d6b27a;opacity:.8}
.mis-gate em{position:absolute;left:50%;top:-6px;transform:translateX(-50%);white-space:nowrap;font:700 .7rem "Manrope";font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.mis-gate.on em{color:#f8ecd2}
.mis-gate b{position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);padding:1px 8px;border-radius:99px;font:500 .78rem "IBM Plex Mono";color:#1b140a;background:#f1dba8;opacity:0;transition:opacity .3s}
.mis-gate.on b{opacity:1}
.mis-portal{position:absolute;right:0;bottom:8px;width:112px;height:112px;display:grid;place-items:center}
.mis-portal::before{content:"";position:absolute;inset:8px;border-radius:34px;padding:8px;
  background:linear-gradient(45deg,#FEDA75,#FA7E1E 30%,#D62976 55%,#962FBF 78%,#4F5BD5);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 16px rgba(214,41,118,.65))}
.mis-portal::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px dashed rgba(254,218,117,.55);animation:spin 9s linear infinite}
.mission.done .mis-portal::after,.mission.warn .mis-portal::after{animation:none}
.mis-portal b{position:relative;font:400 2rem "Instrument Serif",serif;color:#fff;text-shadow:0 0 18px rgba(214,41,118,.9)}
.mis-portal.flash{animation:misFlash .7s ease-out}
@keyframes misFlash{30%{transform:scale(1.16);filter:brightness(1.8)}}
.mis-tok{position:absolute;left:0;bottom:44px;width:44px;height:44px;margin-left:-22px;border-radius:50%;padding:2px;will-change:transform;
  background:conic-gradient(#f6e6c3,#a9793f,#f6e6c3);box-shadow:0 0 0 1px rgba(0,0,0,.5);
  transition:transform .95s cubic-bezier(.4,.1,.2,1),opacity .5s;display:grid;place-items:center}
.mis-tok::after{content:"";position:absolute;left:14%;right:14%;bottom:-12px;height:9px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent)}
.mis-tok span{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#241f19;font:700 .7rem "Manrope";color:#f6e6c3}
.mis-tok img{width:100%;height:100%;object-fit:cover;display:block}
.mis-tok.work{padding:3px;background:conic-gradient(#fff7e0 calc(var(--p,0)*1%),rgba(255,255,255,.16) 0);box-shadow:0 0 18px rgba(239,220,179,.55)}
.mis-tok.live{opacity:0}
.mis-tok.bad{background:conic-gradient(#ffd0c8,#e38b7f,#ffd0c8);box-shadow:0 0 16px rgba(227,139,127,.6);cursor:pointer}
.mis-more{position:absolute;bottom:92px;margin-left:16px;padding:1px 7px;border-radius:99px;font:700 .7rem "Manrope";color:#1b140a;background:#f1dba8;z-index:25}
.mis-seg{display:flex;gap:3px;height:7px;position:relative}
.mis-seg i{flex:1;min-width:2px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .5s}
.mis-seg i[data-c="work"]{background:#f1dba8;box-shadow:0 0 8px rgba(239,220,179,.7)}
.mis-seg i[data-c="live"]{background:var(--green)}
.mis-seg i[data-c="bad"]{background:var(--red)}
.mis-legend{display:flex;gap:14px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-height:1.4em;font-size:.78rem;color:var(--muted);position:relative}
.mis-legend span{flex:none}
.mis-legend b{font:500 .82rem "IBM Plex Mono";color:#f6e6c3;margin-right:4px}
.mis-legend .bad{cursor:pointer}.mis-legend .bad b{color:var(--red)}.mis-legend .ok b{color:var(--green)}
/* the runway is off the screen (above or below): a small "now publishing" bar sits in the Publish button's place -
   the one spot every layout keeps clear, above the tab bar on phones and iPad. A tap brings the runway back.
   The runway itself never sticks and never changes height, so nothing jumps while you scroll. */
.mis-mini.publish-fab{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:0 12px;
  width:min(430px,calc(100vw - 56px));padding:10px 14px 16px 10px;border:0;border-radius:20px;cursor:pointer;text-align:left;color:var(--text);font:inherit;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;overflow:hidden;
  background:linear-gradient(160deg,#2a2219,#0d0b09 78%);
  box-shadow:0 0 0 1px rgba(222,196,152,.36) inset,0 24px 50px -16px #000,0 0 34px -10px rgba(214,178,122,.6);
  animation:mmIn .45s cubic-bezier(.2,.9,.2,1) both}
.mis-mini.done{box-shadow:0 0 0 1px rgba(156,202,166,.4) inset,0 24px 50px -16px #000,0 0 34px -10px rgba(156,202,166,.5)}
.mis-mini.warn{box-shadow:0 0 0 1px rgba(231,184,102,.45) inset,0 24px 50px -16px #000}
@keyframes mmIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mm-count{position:relative;width:46px;height:46px;display:grid;place-items:center}
.mm-count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mm-count circle{fill:none;stroke-width:4}
.mm-count .track{stroke:rgba(255,255,255,.12)}
.mm-count .val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1)}
.mm-count b{position:relative;font:400 1.3rem "Instrument Serif",serif;line-height:1;color:#f1fff4}
.mm-text{display:grid;gap:1px;min-width:0}
.mm-text strong{font:400 1.2rem/1.15 "Instrument Serif",serif;color:#f8ecd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-text strong::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:2px;
  background:var(--violet);box-shadow:0 0 10px var(--violet);animation:pcBeat 1.1s ease-in-out infinite}
.mis-mini.done .mm-text strong::before{background:var(--green);box-shadow:0 0 10px var(--green);animation:none}
.mis-mini.warn .mm-text strong::before{background:var(--amber);box-shadow:0 0 10px var(--amber);animation:none}
.mm-text > span{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-time{font:500 .78rem "IBM Plex Mono";color:var(--muted)}
.mm-go{width:16px;height:16px;color:var(--violet);transform:rotate(90deg)}          /* points to where the runway is */
.mis-mini.up .mm-go{transform:rotate(-90deg)}
.mm-seg{position:absolute;left:12px;right:12px;bottom:7px;height:4px;display:flex;gap:2px}
.mm-seg i{flex:1;min-width:1px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .5s}
.mm-seg i[data-c="work"]{background:#f1dba8;box-shadow:0 0 6px rgba(239,220,179,.7)}
.mm-seg i[data-c="live"]{background:var(--green)}
.mm-seg i[data-c="bad"]{background:var(--red)}

/* ============================================================ stories: the run, and each clip */
#stBar{display:none!important}                                 /* the thin line is replaced by the run panel */
.st-mission{position:relative;margin-top:12px;border-radius:20px;padding:16px 18px;display:grid;gap:8px;
  background:linear-gradient(160deg,#1c1813,#0d0b09 75%);box-shadow:0 0 0 1px rgba(222,196,152,.22) inset;overflow:hidden}
.st-mission{scroll-margin:calc(16px + env(safe-area-inset-top,0px)) 0 calc(118px + env(safe-area-inset-bottom,0px))}   /* clear of the tab bar when brought into view */
.st-mission.hidden{display:none}
.st-mission.done{background:linear-gradient(155deg,#17251c,#0c110d 72%);box-shadow:0 0 0 1px rgba(156,202,166,.34) inset}
.st-mission .proc-stage{font-size:1.6rem}
.st-mission .proc-track{height:124px}
.st-mission.done .proc-track{height:84px}                      /* no light column to make room for once it is finished */
.st-mission.done .proc-kicker{color:var(--green)}.st-mission.done .proc-kicker i{background:var(--green);box-shadow:0 0 10px var(--green);animation:none}
.st-mission.done .proc-stage em{color:var(--green)}
.stm-chips{display:flex;gap:8px;flex-wrap:wrap}
.stm-chip{padding:.4rem .7rem;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--line) inset;font-size:.78rem;color:var(--muted)}
.stm-chip b{font:500 .86rem "IBM Plex Mono";color:#f6e6c3;margin-right:5px}
.stm-chip.ok b{color:var(--green)}.stm-chip.warn b{color:var(--amber)}.stm-chip.bad b{color:var(--red)}
.st-cell .cell-ring{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,7,6,.62);pointer-events:none}
.st-cell .cell-ring svg{width:40px;height:40px;transform:rotate(-90deg);grid-area:1/1}
.st-cell .cell-ring circle{fill:none;stroke-width:4}
.st-cell .cell-ring .track{stroke:rgba(255,255,255,.16)}
.st-cell .cell-ring .val{stroke:#f1dba8;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transition:stroke-dashoffset .6s}
.st-cell .cell-ring.spin svg{animation:pcSpin 1.1s linear infinite}
.st-cell .cell-ring.spin .val{stroke-dashoffset:70}
.st-cell .cell-ring b{grid-area:1/1;font:500 .75rem "IBM Plex Mono";color:#fff7e0;line-height:1}
.st-cell .cell-ok{position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#0b1a10;
  background:var(--c,var(--green));box-shadow:0 0 10px var(--c,var(--green))}
.st-cell .cell-ok i{width:11px;height:11px}
.st-cell[data-s="scheduled"] i.dot,.st-cell[data-s="published"] i.dot{display:none}
.st-slot.work{box-shadow:0 0 0 1px rgba(239,220,179,.6) inset,0 0 22px -6px rgba(239,220,179,.6)}

/* ============================================================ sizes */
@media (max-width:1100px){.mis-title strong{font-size:1.45rem}}
@media (max-width:760px){
  .card.has-panel .text-col{min-height:282px}
  .proc,.livep{padding:16px}
  .proc-stage{font-size:1.5rem}
  .pt-node em{font-size:.75rem;letter-spacing:0}
  .pt-node:not(.on) em{opacity:0}                              /* five labels do not fit a phone: the working one speaks */
  .lp-title strong{font-size:1.4rem}
  .lp-link b{font-size:1.2rem}
  .lp-acts .btn{flex:1;justify-content:center}
  .mission{border-radius:20px;padding:12px 12px 10px;gap:8px;margin-bottom:14px}
  .mis-mini.publish-fab{width:auto;border-radius:18px}
  .mm-text > span,.mm-time{font-size:.75rem}
  .mis-count{width:58px;height:58px}.mis-count b{font-size:1.5rem}
  .mis-title strong{font-size:1.25rem;white-space:normal}
  .mis-title > span{font-size:.76rem;white-space:normal;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}   /* always two lines tall */
  .mis-legend{display:none}                                    /* the gates already carry these numbers */
  .mis-scene{height:140px}
  .mis-floor{height:210px}
  .mis-rail{right:13%;bottom:36px}
  .mis-gate{bottom:32px;height:86px}
  .mis-gate::before{left:-21px;width:42px;height:66px;border-radius:26px 26px 4px 4px}
  .mis-gate::after{left:-16px;width:32px;height:54px;bottom:8px}
  .mis-gate em{font-size:.75rem;letter-spacing:0;text-transform:none;opacity:0}
  .mis-gate.on em{opacity:1}
  .mis-gate b{font-size:.75rem;bottom:-30px}
  .mis-portal{width:80px;height:80px}.mis-portal::before{inset:6px;border-radius:24px;padding:6px}.mis-portal b{font-size:1.4rem}
  .mis-tok{width:34px;height:34px;margin-left:-17px;bottom:36px}
  .mis-more{bottom:74px;font-size:.75rem}
  .mis-acts .btn span{display:none}
  .st-mission{padding:14px}
  .st-mission .proc-stage{font-size:1.35rem}
  .stm-chip{font-size:.76rem}
  /* nothing under 12px on a phone */
  .proc-kicker,.mis-title small,.lp-title small,.lp-link small,.lp-when,.proc-time,.mis-time{font-size:.75rem}
  .pub-ring small{font-size:.75rem;letter-spacing:.06em}
  .mis-title small{letter-spacing:.1em}
  .mis-tok span{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){.pt-flow i,.pub-ring::after,.mis-rail i,.mis-portal::after,.pt-node.on::before,.pt-node.on::after,.mis-mini.publish-fab,.pub-ring.spin svg,.st-cell .cell-ring.spin svg{animation:none!important}}

/* one small icon this view needs (same mask system as the rest) */
.i-open{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L17 7M9 7h8v8'/%3E%3C/svg%3E")}