/* HK Ads Desk - "Ads in orbit" (client panel). The same night as HK ADS CITY: blue-black sky, Platinum Ice light,
   health colours only where they mean something. Loads after clientmap.css; every class here starts with ob-.
   Kept light for phones: only transform and opacity are ever animated (no animated filter / box-shadow, no
   backdrop-filter anywhere), and every running animation is switched off through .ob-live when the section is off
   screen, the tab is hidden or a finger is scrolling the panel. */
.cm-card.ob{--ob-ease:var(--ease,cubic-bezier(.16,1,.3,1));--ob-ink:#090c13;--px:0;--py:0;--sx:50%;
  position:relative;padding:0;overflow:hidden;isolation:isolate;background:#070a10;
  box-shadow:inset 0 1px 0 rgba(169,216,240,.1),0 0 0 1px rgba(169,216,240,.09),0 2px 4px rgba(0,0,0,.35),0 26px 54px -26px rgba(0,0,0,.95),0 0 80px -36px rgba(127,210,255,.4)}

/* ---------- the sky: night gradient lit from the sun, the client's two colours as far nebula, two star layers ---------- */
.ob-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;
  background:radial-gradient(72% 64% at var(--sx) 48%,#111a2b 0,#0b101a 36%,#07090f 72%,#06080d 100%)}
.ob-sky>i{position:absolute;display:block}
.ob-neb{inset:-8%;transform:translate(calc(var(--px) * -6px),calc(var(--py) * -6px));transition:transform .6s var(--ob-ease);
  background:radial-gradient(40% 46% at 92% 2%,color-mix(in srgb,var(--e2) 18%,transparent),transparent 72%),radial-gradient(44% 52% at 0% 100%,color-mix(in srgb,var(--e1) 15%,transparent),transparent 72%)}
.ob-st{inset:-16px;background-repeat:no-repeat;transition:transform .6s var(--ob-ease)}
.ob-st1{transform:translate(calc(var(--px) * 6px),calc(var(--py) * 6px))}
.ob-st2{transform:translate(calc(var(--px) * 13px),calc(var(--py) * 13px))}
.ob-tw{width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;opacity:.45;background:radial-gradient(closest-side,#fff 0,#fff 24%,rgba(169,216,240,.5) 42%,rgba(169,216,240,0) 100%)}
.ob-live .ob-tw{animation:obTw var(--d,4s) ease-in-out var(--dl,0s) infinite}
.ob-vig{inset:0;background:radial-gradient(130% 112% at var(--sx) 46%,transparent 50%,rgba(0,0,0,.55) 100%)}

/* ---------- frame ---------- */
.ob-h{position:relative;margin:0;padding:15px 18px 2px}
.ob-h h3 .ic{color:var(--accent)}
.ob-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:0}
.ob.ob-wide .ob-body{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;align-items:center}
.ob-sys{position:relative;flex:none;max-width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ob-svg{position:relative;z-index:1;display:block;overflow:visible}
.ob-svg text{font-family:var(--sans);font-variant-numeric:tabular-nums;pointer-events:none}
.ob-cur{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-size:.88em}

/* ---------- the sun: the client's own icon on a two-colour corona ---------- */
.ob-glow,.ob-sun{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.ob-glow{z-index:0}
.ob-sun{z-index:3}
.ob-glow>i,.ob-sunem{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.ob-corona{--co:.5;width:calc(var(--sun,60px) * 3.3);height:calc(var(--sun,60px) * 3.3);border-radius:50%;opacity:var(--co);
  background:radial-gradient(circle closest-side,#fff 0,var(--e1,#7cc4ea) 18%,transparent 72%);
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--e1) 58%,#fff) 0,color-mix(in srgb,var(--e1) 60%,transparent) 22%,color-mix(in srgb,var(--e2) 30%,transparent) 50%,transparent 100%)}
.ob-rays{width:calc(var(--sun,60px) * 4.8);height:calc(var(--sun,60px) * 4.8);border-radius:50%;opacity:.26;
  background:conic-gradient(from 0deg,transparent 0 4%,var(--e1) 9%,transparent 15% 22%,var(--e2) 28%,transparent 35% 46%,var(--e1) 52%,transparent 58% 68%,var(--e2) 75%,transparent 82% 90%,var(--e1) 95%,transparent);
  -webkit-mask:radial-gradient(circle closest-side,transparent 24%,#000 33%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 24%,#000 33%,transparent 100%)}
.ob-live .ob-corona{animation:obBreath 6.5s ease-in-out infinite}
.ob-live .ob-rays{animation:obSpin 90s linear infinite}
.ob-sys[data-h=idle] .ob-corona{--co:.14}
.ob-sys[data-h=idle] .ob-rays{opacity:.05}
.ob-sunem{display:block;pointer-events:auto;--em-cut:#0c111c}
.ob-sunem .em.lg{--es:var(--sun,60px);border-radius:calc(var(--sun,60px) * .3)}
.ob-sunem .em::after{display:none}   /* the health LED would read as a moon here; the panel header already shows it */

/* ---------- rings: a faint "great" ring, the clear target ring, the red zone beyond ---------- */
.ob-r12,.ob-r15,.ob-r15g,.ob-r25,.ob-belt{fill:none}
.ob-r12{stroke:rgba(62,207,142,.34);stroke-width:1;stroke-dasharray:1.5 5;stroke-linecap:round}
.ob-r15g{stroke:rgba(127,210,255,.12);stroke-width:7}
.ob-r15{stroke:#a9d8f0;stroke-opacity:.85;stroke-width:1.25}
.ob-r25{stroke:rgba(255,95,87,.24);stroke-width:1;stroke-dasharray:1 6;stroke-linecap:round}
.ob-belt{stroke:rgba(255,95,87,.2);stroke-width:1;stroke-dasharray:2 7;opacity:0;transition:opacity .4s ease}
.ob-rl{font-size:8.5px;font-weight:600;letter-spacing:.14em}
.ob-rl.r15{fill:#d3ecf9;font-size:9px}
.ob-rl.r12{fill:rgba(62,207,142,.85)}
.ob-rl.r25{fill:rgba(255,95,87,.6)}
.ob-rl.rc{fill:rgba(255,95,87,.66);opacity:0;transition:opacity .4s ease}
.ob-rl.rs{fill:var(--muted);letter-spacing:.12em}
.has-comet .ob-belt,.has-comet .ob-rl.rc{opacity:1}
.ob-shelf{opacity:0;transition:opacity .4s ease}
.has-park .ob-shelf{opacity:1}
.ob-shelf path{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1;stroke-dasharray:2 4}
.ob-empty .ob-r12,.ob-empty .ob-r15,.ob-empty .ob-r25{stroke-opacity:.35;opacity:.55}
.ob-empty .ob-r15g{opacity:.4}
/* the target ring answers when an ad crosses it during a live refresh */
.ob-rx{fill:none;stroke-width:9;opacity:0}
.ob-svg.ob-xo .ob-rx{stroke:#ff5f57;animation:obRing 1.7s ease-out}
.ob-svg.ob-xi .ob-rx{stroke:#3ecf8e;animation:obRing 1.7s ease-out}
.ob-wave{fill:none;stroke:rgba(169,216,240,.7);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;transform:scale(var(--w0,.4))}
.ob-wave.soft{stroke:rgba(127,210,255,.16);stroke-width:14}
.ob-svg.ob-go .ob-wave{animation:obWave 1.6s cubic-bezier(.22,.61,.36,1) both}

/* orbit lanes: part of the static stage (only the small bodies turn) */
.ob-lane{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1;vector-effect:non-scaling-stroke;transition:transform .95s var(--ob-ease),opacity .4s ease}
.ob-lane.off{stroke:rgba(255,95,87,.22)}
.ob-lane.hid,.ob-dense .ob-lane{opacity:0}
.ob-lane.hl{stroke:rgba(169,216,240,.6);opacity:1}

/* ---------- one ad: a small body on top of the stage. The orbit is a transform animation on .ob-ad (compositor);
   distance (.ob-at) and size (.ob-ball) are transforms too, so a window switch glides with plain CSS transitions ---------- */
.ob-ads{position:absolute;z-index:2;width:0;height:0;pointer-events:none}
.ob-ad,.ob-arm,.ob-at,.ob-ball{position:absolute;left:0;top:0;width:0;height:0}
.ob-ad{outline:none;transition:opacity .35s ease;--c:169,216,240;--b0:#f4fbff;--b1:#a9d8f0;--b2:#507c95;--b3:#172630;--k:169,216,240}
.ob-ad.t-good{--c:62,207,142;--b0:#d2f9e7;--b1:#3ecf8e;--b2:#167352;--b3:#0a2c20}
.ob-ad.t-warn{--c:240,180,76;--b0:#fff0cc;--b1:#f0b44c;--b2:#8f6116;--b3:#33240b}
.ob-ad.t-bad{--c:255,95,87;--b0:#ffd8d4;--b1:#ff5f57;--b2:#9c2620;--b3:#3a100e}
.ob-ad.c-hot{--k:255,95,87}
.ob-arm,.ob-at,.ob-ball{transition:transform .95s var(--ob-ease)}
.k-park .ob-at{transition:transform .95s cubic-bezier(.6,0,.9,.4)}   /* on the way to the shelf: swing round first, step out last (stays inside the picture) */
.ob-sv{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ob-streak{opacity:.8;transition:transform .95s var(--ob-ease),opacity .4s ease}
.ob-ball>i{position:absolute;border-radius:50%;transition:opacity .45s ease}
/* glow: stronger with more results (opacity is set per ad) */
.ob-halo{left:-27px;top:-27px;width:54px;height:54px;background:radial-gradient(closest-side,rgba(var(--c),.62) 0,rgba(var(--c),.2) 38%,rgba(var(--c),0) 100%)}
/* a sphere lit from the sun: the body always faces the centre, because it turns with its orbit */
.ob-orb{left:-10px;top:-10px;width:20px;height:20px;background:radial-gradient(circle 13.5px at 24% 47%,var(--b0) 0,var(--b1) 30%,var(--b2) 72%,var(--b3) 100%);
  box-shadow:0 0 0 1px rgba(9,12,19,.72),inset 0 0 0 .8px rgba(255,255,255,.28)}
.ob-chalo{left:-36px;top:-36px;width:72px;height:72px;opacity:0;background:radial-gradient(closest-side,rgba(var(--k),.7) 0,rgba(var(--k),.2) 40%,rgba(var(--k),0) 100%)}
.ob-nuc{left:-10px;top:-10px;width:20px;height:20px;opacity:0;background:radial-gradient(closest-side,#fff 0,#d6ecf8 55%,#8db6cd 100%)}
.c-hot .ob-nuc{background:radial-gradient(closest-side,#fff 0,#ffc0bb 50%,#ff5f57 100%)}
.ob-dot{left:-10px;top:-10px;width:20px;height:20px;opacity:0;background:var(--ob-ink);box-shadow:inset 0 0 0 4.8px #6f7887}
.ob-ball>.ob-ping{left:-13px;top:-13px;width:26px;height:26px;opacity:0;border:1.2px solid #ff5f57;transition:none}
.ob-live .t-bad.k-planet .ob-ping{animation:obPing 2.8s cubic-bezier(.22,.61,.36,1) infinite}   /* act now: a calm sonar ring */
.ob-live .t-bad.k-planet:nth-child(2n) .ob-ping{animation-delay:-.9s}
.ob-live .t-bad.k-planet:nth-child(3n) .ob-ping{animation-delay:-1.8s}
/* live refresh: an ad that crossed the target ring between two scans sends out two rings of its own (red out, green in) */
.ob .ob-ads .ob-ad.x-out .ob-ping,.ob .ob-ads .ob-ad.x-in .ob-ping{animation:obCross 1.3s cubic-bezier(.22,.61,.36,1) 2}
.ob .ob-ads .ob-ad.x-in .ob-ping{border-color:#3ecf8e}
.k-comet .ob-orb,.k-park .ob-orb{opacity:0}
.k-comet .ob-chalo,.k-comet .ob-nuc,.k-comet .ob-streak,.k-park .ob-dot{opacity:1}
.c-cool .ob-chalo{opacity:.7}
.k-park .ob-streak{opacity:0}
.ob-ret,.ob-hit{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.ob-ret{border:1px dashed var(--accent);opacity:0;transition:opacity .16s ease;pointer-events:none}
.ob-hit{pointer-events:auto;cursor:pointer}
.ob-ad.hl .ob-ret,.ob-ad:focus-visible .ob-ret{opacity:1}
.ob-sys.ob-dim .ob-ad:not(.hl){opacity:.28}

/* names: a plain overlay, placed on whole pixels by a slow timer so the words stay sharp. The few biggest ads
   keep theirs; the rest speak on hover / tap */
.ob-labels{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none}
.ob-tag{position:absolute;left:0;top:0;display:grid;justify-items:center;white-space:nowrap;opacity:0;transition:opacity .15s ease;
  font:500 11px/1.25 var(--sans);text-shadow:0 0 2px #070a10,0 0 4px #070a10,0 0 7px #070a10}
.ob-tag.on,.ob-tag.hl{will-change:transform}   /* only the names on show get their own layer */
.ob-tag.on{opacity:1;transition:opacity .35s ease}
.ob-tag.on[data-hid="1"]{opacity:0}
.ob-sys.ob-dim .ob-tag.on:not(.hl){opacity:.3}
.ob-sys .ob-tag.hl,.ob-sys .ob-tag.hl[data-hid="1"]{opacity:1}   /* the chosen ad always shows its name */
.ob-tn{font-weight:500;color:var(--soft)}
.ob-tv{font-variant-numeric:tabular-nums;color:var(--text)}
.ob-tv.good{color:var(--good)}.ob-tv.warn{color:var(--warn)}.ob-tv.bad{color:var(--bad)}.ob-tv.idle{color:var(--muted)}
.ob-tv em{font-style:normal;font-weight:400;font-size:10px;color:var(--muted)}
.ob-tv .ob-cur{font-style:normal}
.ob-tv .ob-n{font-weight:inherit}
.ob-still,.ob-still *{transition:none!important}

/* ---------- the summary: beside the system on a wide panel, below it on a phone ---------- */
.ob-hud{position:relative;min-width:0;width:100%;display:grid;gap:13px;align-content:center;padding:4px 16px 16px;transition:opacity .18s ease}
.ob.ob-pick .ob-hud{opacity:.16}   /* an ad's details are docked over the summary */
.ob.ob-wide .ob-hud{padding:10px 22px 10px 6px}
/* a soft shade behind the words, so no star sits under a letter */
.ob-hud::before{content:"";position:absolute;inset:-18px -6px -10px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(7,10,16,.68) 0,rgba(7,10,16,.56) 62%,transparent 100%)}
.ob-score{display:grid;gap:5px;min-width:0}
.ob-big{display:flex;align-items:baseline;gap:9px;font-size:46px;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.ob-big i{font-style:normal;font-size:16px;font-weight:400;letter-spacing:-.01em;color:var(--muted)}
.ob-big.word{font-size:25px;line-height:1.12;letter-spacing:-.03em}
.ob-score[data-t=good] .ob-big b,.ob-score[data-t=good] .ob-big.word{color:var(--good)}
.ob-score[data-t=bad] .ob-big b,.ob-score[data-t=bad] .ob-big.word{color:var(--bad)}
.ob-score[data-t=idle] .ob-big.word{color:var(--soft)}
.ob-cap{font-size:13px;line-height:1.4;color:var(--soft)}
.ob-cap small{display:block;margin-top:1px;font-size:11.5px;color:var(--dim)}
.ob-facts{display:grid;gap:6px}
.ob-f{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.5px;line-height:1.35;color:var(--soft)}
.ob-f>i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--fc,var(--idle));box-shadow:0 0 8px -1px var(--fc,transparent)}
.ob-f.bad{--fc:var(--bad)}
.ob-f.comet>i{width:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--fc,rgba(169,216,240,.8)));box-shadow:none}
.ob-f.park>i{background:none;box-shadow:inset 0 0 0 1.5px #6f7887}
.ob-f b{font-weight:500;color:var(--text)}
.ob-f em,.ob-say em{font-style:normal;color:var(--dim);white-space:nowrap}
.ob-f em::before,.ob-say em::before{content:"· "}
.ob-list{display:grid;gap:1px;margin:-4px 0}
.ob-row{display:grid;grid-template-columns:7px minmax(0,1fr) auto;gap:9px;align-items:center;width:calc(100% + 16px);margin:0 -8px;padding:6px 8px;border:0;border-radius:8px;background:none;cursor:pointer;
  text-align:left;font:400 12.5px/1.3 var(--sans);color:var(--soft);transition:background .15s ease,color .15s ease}
.ob-row:hover,.ob-row:focus-visible{background:rgba(169,216,240,.07);color:var(--text);outline:none}
.ob-row>i{width:7px;height:7px;border-radius:50%;background:var(--rc,var(--accent));box-shadow:0 0 8px -1px var(--rc,var(--accent))}
.ob-row>i.good{--rc:var(--good)}.ob-row>i.warn{--rc:var(--warn)}.ob-row>i.bad{--rc:var(--bad)}
.ob-row>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-row>b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-row>b.good{color:var(--good)}.ob-row>b.warn{color:var(--warn)}.ob-row>b.bad{color:var(--bad)}
.ob-rest{padding:3px 0 0;font-size:11.5px;color:var(--dim)}
.ob-money{display:grid;gap:8px;padding-top:13px;box-shadow:0 -1px 0 rgba(169,216,240,.08)}
.ob-split{position:relative;height:5px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.07)}
.ob-split i{position:absolute;inset:0;transform-origin:0 50%;transform:translateX(calc(var(--o,0) * 100%)) scaleX(var(--x,0));transition:transform .8s var(--ob-ease)}
.ob-split .on{background:var(--good)}
.ob-split .out{background:var(--bad)}
.ob-split .nr{background:repeating-linear-gradient(135deg,rgba(255,95,87,.8) 0 3px,rgba(255,95,87,.28) 3px 6px)}
.ob-say{margin:0;font-size:12.5px;line-height:1.5;color:var(--soft)}
.ob-say b{font-weight:500;color:var(--text)}
.ob-say small{display:block;margin-top:2px;font-size:11.5px;color:var(--dim)}

/* ---------- the one-line legend + colour key ---------- */
.ob-foot{position:relative;display:grid;gap:8px;padding:11px 18px 14px;background:rgba(7,10,16,.55);box-shadow:0 -1px 0 rgba(169,216,240,.07)}
.ob-leg{margin:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.ob-leg i{font-style:normal;margin:0 3px;color:var(--dim)}
.ob-keys{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;color:var(--dim)}
.ob-keys:empty{display:none}
.ob-keys .k{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ob-keys .k i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--kc,var(--idle));box-shadow:0 0 8px -1px var(--kc,transparent)}
.ob-keys .good{--kc:var(--good)}.ob-keys .warn{--kc:var(--warn)}.ob-keys .bad{--kc:var(--bad)}.ob-keys .ice{--kc:var(--accent)}
.ob-keys .comet i{width:16px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(169,216,240,.85));box-shadow:none}
.ob-keys .comet.hot i{background:linear-gradient(90deg,transparent,var(--bad))}
.ob-keys .park i{background:none;box-shadow:inset 0 0 0 1.5px #6f7887}

/* ---------- no ads: a calm, quiet sun ---------- */
.ob.ob-none .ob-body{padding-bottom:12px}
.ob.ob-none .ob-foot{display:none}
.ob.ob-none .ob-hud{padding-top:0}
.ob.ob-none:not(.ob-wide) .ob-score{justify-items:center;text-align:center}
.ob.ob-none:not(.ob-wide) .ob-big{justify-content:center}

/* tip content (the shared UI.tip) */
#tip .ob-tt{min-width:208px}
#tip .ob-tt-v{margin:-2px 0 5px;font-size:12px;color:var(--muted)}
#tip .ob-tt-v.good{color:var(--good)}#tip .ob-tt-v.warn{color:var(--warn)}#tip .ob-tt-v.bad{color:var(--bad)}
#tip .ob-tt-o{margin:-2px 0 4px;font-size:11.5px;color:var(--dim)}
#tip .ob-tt-go{display:block;margin-top:7px;font-size:11.5px;color:var(--accent)}

@keyframes obTw{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.95;transform:scale(1.25)}}
@keyframes obBreath{50%{opacity:calc(var(--co,.5) * 1.34);transform:translate(-50%,-50%) scale(1.07)}}
@keyframes obSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes obWave{0%{transform:scale(var(--w0,.4));opacity:.75}100%{transform:scale(var(--w1,2));opacity:0}}
@keyframes obPing{0%{transform:scale(.8);opacity:.8}65%,100%{transform:scale(2.4);opacity:0}}
@keyframes obCross{0%{transform:scale(.8);opacity:.95}100%{transform:scale(3.4);opacity:0}}
@keyframes obRing{0%{opacity:0}16%{opacity:.5}100%{opacity:0}}

@media (pointer:coarse){
  .ob-live .ob-rays{animation:none}   /* phones: the rays stay still (a turning masked layer is the one costly thing here) */
  .ob-sky .ob-tw:nth-child(n+7){display:none}   /* and three twinkling stars are enough */
}
@media (max-width:640px){
  .ob-h{padding:13px 14px 0}
  .ob-hud{padding:2px 14px 14px;gap:12px}
  .ob-big{font-size:40px}
  .ob-big.word{font-size:23px}
  .ob-foot{padding:10px 14px 13px}
}
@media (prefers-reduced-motion:reduce){
  .ob *,.ob *::before,.ob *::after{animation:none!important;transition:none!important}
}