/* Ops pack (ops.js, voice.js): sensor rail, tactical HUD, detection overlay, voice bubble. */
#opsDet{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;display:none}

/* ---- the rail: sensors, overlays, cockpit, mic */
#opsRail{position:fixed;left:50%;top:80px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;z-index:5;max-width:calc(100% - 600px)}
#opsRail button{min-width:44px;padding:0 8px;height:30px;flex:none;border-radius:8px;border:1px solid transparent;background:none;color:var(--dim);font:600 10px/1 var(--mono);letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#opsRail button:hover{color:var(--ink);border-color:var(--edge-dim)}
#opsRail button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#opsRail [data-s].on{color:var(--accent);border-color:var(--edge);background:rgba(125,255,166,.07)}
#opsRail [data-o].on{color:#04060a;background:var(--accent)}
#opsRail .ops-t{color:var(--accent);font-weight:700;letter-spacing:.14em}
#opsRail .ops-body{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
#opsRail:not(.open) .ops-body{display:none}
#opsRail:not(.open) .ops-t{width:auto;padding:0 10px}
#opsRail .ops-sep{display:block;width:1px;margin:5px 4px;background:var(--edge-dim)}
#opsMic.live{color:#ff4d5e!important;border-color:#ff4d5e!important;animation:opsPulse 1s ease-in-out infinite}
@keyframes opsPulse{50%{box-shadow:0 0 14px rgba(255,77,94,.55)}}
body.lookup #opsRail{display:none}
/* Director's cinema mode: nothing but the globe (and the data credits) on screen */
body.cinema #top,body.cinema #dock,body.cinema #band,body.cinema #navpad,body.cinema #card,body.cinema #opsRail,body.cinema .m-dock,body.cinema #hover,body.cinema #toast,body.cinema #voiceBubble{display:none!important}

/* ---- tactical HUD */
#opsHud{position:fixed;inset:0;pointer-events:none;z-index:3;display:none;color:var(--hud,#7dffa6);font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-shadow:0 0 6px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9)}
body.ops-hud #opsHud,body.ops-cockpit #opsHud{display:block}
body.lookup #opsHud{display:none!important}
#opsHud .oh-frame{position:absolute;inset:124px 12px 80px 278px;opacity:.55;--k:28px;--w:1.5px;
  background:linear-gradient(var(--hud),var(--hud)) top left/var(--k) var(--w) no-repeat,linear-gradient(var(--hud),var(--hud)) top left/var(--w) var(--k) no-repeat,
    linear-gradient(var(--hud),var(--hud)) top right/var(--k) var(--w) no-repeat,linear-gradient(var(--hud),var(--hud)) top right/var(--w) var(--k) no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom left/var(--k) var(--w) no-repeat,linear-gradient(var(--hud),var(--hud)) bottom left/var(--w) var(--k) no-repeat,
    linear-gradient(var(--hud),var(--hud)) bottom right/var(--k) var(--w) no-repeat,linear-gradient(var(--hud),var(--hud)) bottom right/var(--w) var(--k) no-repeat}
#opsHud .oh-tape{position:absolute;top:126px;left:50%;transform:translateX(-50%);width:min(460px,64vw);height:46px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
#opsHud .oh-strip{position:absolute;left:50%;top:0;height:26px;width:4324px;will-change:transform}
#opsHud .oh-strip i{position:absolute;top:0;width:1px;height:6px;background:var(--hud);opacity:.7}
#opsHud .oh-strip i.b{height:10px;opacity:1}
#opsHud .oh-strip span{position:absolute;top:11px;left:0;transform:translateX(-50%);font-size:10px;font-style:normal}
#opsHud .oh-hdg{position:absolute;left:50%;top:26px;transform:translateX(-50%);padding:0 6px;border:1px solid var(--hud);font-weight:600;background:rgba(0,0,0,.35);line-height:16px}
#opsHud .oh-hdg::before{content:'';position:absolute;left:50%;top:-6px;width:1px;height:6px;background:var(--hud)}
#opsHud .oh-ret{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);fill:none;stroke:var(--hud);stroke-width:1.2;opacity:.8;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#opsHud .oh-ret circle{opacity:.55}
#opsHud .oh-lock{position:absolute;left:50%;top:calc(50% + 72px);transform:translateX(-50%);padding:2px 8px;border:1px solid var(--hud);background:rgba(0,0,0,.35);letter-spacing:.12em;white-space:nowrap;display:none}
#opsHud .oh-tl,#opsHud .oh-bl{position:absolute;display:grid;gap:0;white-space:nowrap}
#opsHud .oh-tl{left:292px;top:134px} #opsHud .oh-bl{left:292px;bottom:92px}
#opsHud .oh-tl b{font-weight:600;letter-spacing:.16em}
#opsHud .rec{font-style:normal;color:#ff4d5e;margin-left:8px;animation:opsBlink 1.2s steps(2,start) infinite}
@keyframes opsBlink{to{visibility:hidden}}
body.ops-cockpit #opsHud .oh-ret{width:150px;height:150px}

/* ---- voice */
#voiceBubble{position:fixed;left:50%;bottom:92px;transform:translate(-50%,8px);z-index:7;display:flex;gap:10px;align-items:flex-start;padding:10px 14px;max-width:min(560px,92vw);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font:500 13px/1.4 var(--body)}
#voiceBubble.show{opacity:1;transform:translate(-50%,0)}
#voiceBubble .vb-mic{color:var(--faint);font-size:12px;line-height:20px} #voiceBubble .vb-mic.on{color:#ff4d5e;animation:opsBlink 1s steps(2,start) infinite}
#voiceBubble q{display:block;color:var(--ink);font-style:italic;quotes:'“' '”'} #voiceBubble q.dim{color:var(--dim);quotes:none}
#voiceBubble b{display:block;margin-top:2px;color:var(--accent);font:500 12px/1.4 var(--mono)}

/* ---- phones: the rail is a strip under the header, the HUD keeps to the edges */
body.m #opsRail{top:calc(72px + env(safe-area-inset-top,0px));left:10px;transform:none;max-width:calc(100% - 20px)}
body.m #opsRail .ops-body{overflow-x:auto;scrollbar-width:none}
body.m #opsRail [data-o]{order:-2} body.m #opsRail .ops-sep{order:-1} /* overlays first: no swipe needed for HUD and the mic */
body.m #opsRail button{width:auto;min-width:42px;padding:0 9px;height:34px;flex:none}
body.m #opsHud .oh-frame{inset:calc(118px + env(safe-area-inset-top,0px)) 8px calc(84px + env(safe-area-inset-bottom,0px)) 8px}
body.m #opsHud .oh-tape{top:calc(122px + env(safe-area-inset-top,0px));width:76vw}
body.m #opsHud .oh-tl{left:16px;top:calc(172px + env(safe-area-inset-top,0px));font-size:10px}
body.m #opsHud .oh-bl{left:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));font-size:10px}
body.m #voiceBubble{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){#opsHud .rec,#voiceBubble .vb-mic.on,#opsMic.live{animation:none}}

/* ---- live cameras (cams.js): the picture in the card, and "Look through" */
#card img.cam-live{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--edge-dim);margin:2px 0 10px;background:#000}
body.cam-look #top,body.cam-look #dock,body.cam-look #band,body.cam-look #navpad,body.cam-look #card,body.cam-look #opsRail,body.cam-look .m-dock,body.cam-look #opsHud,body.cam-look #opsDet{display:none!important}
#camLookUi .cl-pic{position:fixed;left:0;z-index:6;cursor:grab;touch-action:none;outline:1px solid rgba(255,111,181,.6)}
#camLookUi .cl-pic:active{cursor:grabbing}
#camLookUi .cl-pic img,#camLookUi .cl-pic video{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none}
#camLookUi .cl-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;max-width:calc(100% - 20px);font:500 12px/1.3 var(--mono)}
#camLookUi .cl-bar b{font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#ff6fb5;margin-right:4px}
#camLookUi .cl-bar label{display:flex;align-items:center;gap:6px;color:var(--dim)}
#camLookUi .cl-bar .note{color:var(--faint);font-size:11px;width:100%;text-align:center}

/* ---- before / after (imagery.js): the slider over the globe, the list of pictures in the card */
#imgSplit{position:fixed;top:0;bottom:0;width:0;z-index:4;pointer-events:none}
#imgSplit .is-line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.88);box-shadow:0 0 6px rgba(0,0,0,.65)}
#imgSplit .is-grip{position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:2px solid #fff;background:rgba(8,14,22,.82);color:#fff;font:700 18px/1 var(--mono);cursor:ew-resize;pointer-events:auto;touch-action:none}
#imgSplit .is-x{position:absolute;top:calc(50% + 30px);left:-14px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,14,22,.82);color:#fff;font:600 16px/1 var(--mono);cursor:pointer;pointer-events:auto}
#imgSplit .is-l,#imgSplit .is-r{position:absolute;top:calc(118px + env(safe-area-inset-top,0px));padding:4px 8px;border-radius:6px;background:rgba(8,14,22,.78);color:#fff;font:600 12px/1.2 var(--mono);white-space:nowrap}
#imgSplit .is-l{right:12px;border-left:3px solid #ffb44d}
#imgSplit .is-r{left:12px;border-left:3px solid #9fe3ff}
#card .ib-list{max-height:min(44vh,420px);overflow:auto;margin-top:8px;display:flex;flex-direction:column;gap:6px}
#card .ib-row{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;padding:4px;border-radius:8px;border:1px solid var(--edge-dim)}
#card .ib-row img{width:96px;height:62px;object-fit:cover;border-radius:5px;background:#000}
#card .ib-row .ib-b{display:flex;gap:4px;margin-top:3px}
#card .ib-row .ib-b .chipbtn{padding:3px 8px;font-size:11px}
#card .ib-row .ib-t{display:flex;flex-direction:column;font:500 11px/1.3 var(--mono);color:var(--dim);min-width:0}
#card .ib-row .ib-t b{color:var(--ink);font-size:12px}
#card .ib-row.is-b{border-color:#ffb44d}
#card .ib-row.is-a{border-color:#9fe3ff}
@media (max-width:560px){#card .ib-row{grid-template-columns:76px 1fr}#card .ib-row img{width:76px;height:50px}}

/* ---- live camera video in the card (cams.js): the still behind it until the stream starts */
#card .cam-live.cam-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;border:1px solid var(--edge-dim);margin:2px 0 10px;background:#000 center/cover no-repeat;overflow:hidden}
#card .cam-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#card .cam-video .cam-badge{position:absolute;top:6px;left:6px;z-index:1;padding:2px 6px;border-radius:4px;background:#e0243a;color:#fff;font:700 10px/1.3 var(--mono);letter-spacing:.08em}
#card .cam-video .cam-fail{position:absolute;left:8px;right:8px;bottom:6px;z-index:1;margin:0;padding:4px 6px;border-radius:5px;background:rgba(8,14,22,.8)}