/* CYBER tab (wave 2, 10/15; wow/cyberx.js). Indigo accent (--cx). Panel top to bottom: sticky hook, shared ALL ON / ALL OFF, WHO'S DARK button +
   hero card, ALSO HERE tiles, COUNTRY PULSE list, HACKS IN THE WILD (KEV), RIPE Atlas logo + boilerplate. Phone + light theme at the bottom. */
:root{--cx:#7a7dff;--cx2:#aab0ff;--cx-red:#ff3b4a;--cx-amb:#ffb347;--cx-ok:#3ddc97}
html[data-theme="light"]{--cx:#4a4fd6;--cx2:#3438a8;--cx-red:#c81d2b;--cx-amb:#8f5200;--cx-ok:#08744a}

/* the hook stays visible while the panel scrolls. Slots: #cx-hook + #cx-top ride right after the shared ALL ON / OFF (phone.css orders #lmaster -3,
   #lcards -2: equal order keeps DOM order, so these sit between them); #cx (lists, KEV, credits) follows the layer cards like every tab's widgets. */
#lpanel>#cx-hook,#lpanel>#cx-top{order:-3}
.cx-topsl{margin:0 0 8px}
.cx-hook{position:sticky;top:-1px;z-index:3;margin:0 0 8px;padding:7px 9px 7px 10px;border-left:2px solid var(--cx);background:linear-gradient(90deg,color-mix(in srgb,var(--cx) 16%,var(--bg)),var(--bg));box-shadow:0 6px 10px -6px var(--bg)}
.cx-hook.stuck{padding-top:5px;padding-bottom:5px}.cx-hook.stuck span{display:none}.cx-hook.stuck b{font-size:13px}
.cx-hook b{display:block;font:700 15px/1.2 var(--hd);letter-spacing:.06em;color:var(--cx2)}
.cx-hook span{display:block;font-size:10.5px;line-height:1.45;color:var(--dim);margin-top:3px;letter-spacing:.02em}
.cx{display:flex;flex-direction:column;gap:9px;margin:8px 0 12px}
.cx svg{flex:none}

/* FIRST ACTION */
.cx-go{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;width:100%;padding:11px 12px;border:1px solid color-mix(in srgb,var(--cx-red) 60%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--cx-red) 18%,transparent),color-mix(in srgb,var(--cx-red) 5%,transparent));color:var(--ink-hi);font:inherit;cursor:pointer;min-height:56px}
.cx-go b{grid-column:2;font:700 18px/1.1 var(--hd);letter-spacing:.12em}
.cx-go small{grid-column:2;font-size:9.5px;letter-spacing:.14em;color:var(--dim);margin-top:2px}
.cx-go:hover,.cx-go:focus-visible{border-color:var(--cx-red);box-shadow:var(--glow-red);outline:none}
.cx-go:disabled{cursor:progress;opacity:.85}
.cx-blip{grid-row:1/3;width:14px;height:14px;border-radius:50%;background:var(--cx-red);box-shadow:0 0 0 0 var(--cx-red);animation:cxblip 1.6s ease-out infinite}
@keyframes cxblip{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cx-red) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}

/* hero card */
.cx-hero{border:1px solid var(--line2);background:color-mix(in srgb,var(--cx) 6%,transparent);padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.cx-hero em{font-style:normal;font-size:9.5px;letter-spacing:.18em;color:var(--mute);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cx-hero>b{font:700 19px/1.15 var(--hd);letter-spacing:.08em;color:var(--ink-hi)}
.cx-hero strong{font-size:12px;line-height:1.45;color:var(--ink);font-weight:600;letter-spacing:.02em}
.cx-hero p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.cx-hero.hot{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%)}
.cx-hero.hot>b{color:color-mix(in srgb,var(--c) var(--hue-mix),var(--hue-base))}
.cx-hero.ok{border-color:color-mix(in srgb,var(--cx-ok) 40%,transparent)}
.cx-hero.ok>b{color:var(--cx-ok)}
.cx-hero.warn{border-color:color-mix(in srgb,var(--cx-amb) 45%,transparent)}
.cx-hero.warn>b{color:var(--cx-amb)}
.cx-hero.scan{flex-direction:row;align-items:center;gap:12px}
.cx-hero.scan b{font:700 15px var(--hd);letter-spacing:.1em;color:var(--cx2)}
.cx-hero.scan em{display:block;margin-bottom:3px}
.cx-age{color:var(--dim)}.cx-age.st{color:var(--warn)}
.cx-hs{font-size:10px;letter-spacing:.12em;color:var(--ink);line-height:1.5}
.cx-cap{font-size:9px;letter-spacing:.12em;color:var(--mute);line-height:1.4}
.cx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,var(--cx));box-shadow:0 0 8px var(--c,var(--cx));flex:none}
.cx-radar{width:34px;height:34px;border-radius:50%;border:1px solid var(--cx);position:relative;flex:none;background:conic-gradient(from 0deg,color-mix(in srgb,var(--cx) 55%,transparent),transparent 30%);animation:cxspin 1.1s linear infinite}
@keyframes cxspin{to{transform:rotate(1turn)}}
.cx-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cx-nums div,.cx-kst div{border:1px solid var(--line2);padding:6px 7px;min-width:0}
.cx-nums b,.cx-kst b{display:block;font:700 19px/1.1 var(--hd);letter-spacing:.04em;color:var(--ink-hi)}
.cx-nums span,.cx-kst span{display:block;font-size:9px;letter-spacing:.1em;color:var(--dim);line-height:1.3;margin-top:2px}
.cx-nums .hot b{color:var(--cx-red)}.cx-nums .warn b{color:var(--cx-amb)}
.cx-btns{display:flex;flex-wrap:wrap;gap:6px}
.cx-btns button{flex:1 1 auto;min-height:36px;padding:7px 10px;font-size:10px;letter-spacing:.14em;border:1px solid var(--line);background:var(--cy-bg2);color:var(--cy2)}
.cx-btns button.pri{border-color:color-mix(in srgb,var(--c,var(--cx)) 70%,transparent);color:var(--ink-hi);background:color-mix(in srgb,var(--c,var(--cx)) 22%,transparent)}
.cx-last{display:flex;flex-direction:column;gap:4px;font-size:9.5px;letter-spacing:.14em;color:var(--mute)}
.cx-last button{text-align:left;font-size:11px;letter-spacing:.08em;color:var(--ink);border:1px solid var(--line2);padding:6px 8px;background:transparent}
.cx-last button small{color:var(--dim);font-size:9.5px;margin-left:6px}
.cx-sp{display:block;width:100%;height:30px;color:var(--mute)}
.cx-hero .cx-sp{height:34px}

/* ALSO HERE tiles */
.cx-do{display:flex;flex-direction:column;gap:5px}
.cx-do>span{font-size:9px;letter-spacing:.22em;color:var(--mute)}
.cx-do div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cx-do button{display:flex;flex-direction:column;gap:3px;text-align:left;padding:7px 7px;border:1px solid var(--line2);background:var(--m-wash,transparent);color:var(--ink);font:inherit;min-height:52px}
.cx-do button b{font-size:10px;letter-spacing:.1em;line-height:1.25;color:var(--cx2)}
.cx-do button small{font-size:8.5px;letter-spacing:.06em;color:var(--dim);line-height:1.3}
.cx-do button:hover,.cx-do button:focus-visible{border-color:var(--cx);outline:none}
.cx-do button.on{border-color:var(--cx);background:color-mix(in srgb,var(--cx) 12%,transparent)}

/* sections + country list */
.cx-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:10.5px;letter-spacing:.26em;color:var(--cx2);margin-top:6px;border-bottom:1px solid color-mix(in srgb,var(--cx) 30%,transparent);padding-bottom:4px}
.cx-sec small{font-size:9px;letter-spacing:.12em;color:var(--mute);text-align:right}
.cx-seg{display:flex;gap:3px}
.cx-seg button{flex:1;font-size:9px;letter-spacing:.12em;padding:6px 4px;border:1px solid var(--line2);color:var(--dim);background:transparent;min-height:30px}
.cx-seg button.on{color:var(--ink-hi);border-color:var(--cx);background:color-mix(in srgb,var(--cx) 14%,transparent)}
.cx-list{display:flex;flex-direction:column;gap:3px}
.cx-row{display:grid;grid-template-columns:auto minmax(0,1fr) 64px auto;align-items:center;gap:8px;text-align:left;width:100%;padding:6px 8px;border:1px solid var(--line2);background:transparent;color:var(--ink);font:inherit;min-height:40px}
.cx-row:hover,.cx-row:focus-visible{border-color:var(--c);outline:none;background:color-mix(in srgb,var(--c) 7%,transparent)}
.cx-row.dark{border-color:color-mix(in srgb,var(--cx-red) 55%,transparent);background:color-mix(in srgb,var(--cx-red) 8%,transparent)}
.cx-row.dim{border-color:color-mix(in srgb,var(--cx-amb) 45%,transparent)}
.cx-rn{min-width:0}.cx-rn b{display:block;font-size:12px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-rn small{font-size:8.5px;letter-spacing:.16em;color:var(--c)}
.cx-row .cx-sp{height:20px}
.cx-rv{text-align:right;line-height:1.15}.cx-rv b{font:700 14px var(--hd);color:var(--ink-hi)}.cx-rv b small{font-size:10px;color:var(--dim);font-weight:400}
.cx-rv>small{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--mute)}
.cx-more{font-size:9.5px;letter-spacing:.16em;color:var(--cy2);border:1px dashed var(--line);padding:7px;background:transparent;min-height:34px}
.cx-how{border-left:2px solid var(--line);padding:2px 0 2px 9px}
.cx-how button{font-size:9.5px;letter-spacing:.16em;color:var(--dim);background:none;border:0;padding:4px 0;text-align:left}
.cx-how button u{text-decoration:none;color:var(--cy2);margin-left:6px}
.cx-how p{margin:4px 0 2px;font-size:11px;line-height:1.55;color:var(--ink2)}
.cx-note{font-size:10px;line-height:1.5;letter-spacing:.06em;color:var(--dim);border-left:2px solid var(--line);padding:5px 0 5px 9px}

/* KEV */
.cx-lead{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.cx-lead b{color:var(--ink-hi)}
.cx-kst{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cx-kst div:nth-child(2) b{color:var(--cx-red)}
.cx-tick{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:8px 10px;border:1px solid color-mix(in srgb,var(--cx) 45%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--cx) 14%,transparent),transparent);color:var(--ink);font:inherit;min-height:52px;animation:cxin .45s ease-out}
.cx-tick u{text-decoration:none;font-size:9px;letter-spacing:.2em;color:var(--cx2)}
.cx-tick span{font-size:12px;line-height:1.4}
@keyframes cxin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.cx-kl{display:flex;flex-direction:column;gap:3px}
.cx-k{border:1px solid var(--line2)}
.cx-k.rw{border-left:2px solid var(--cx-red)}
.cx-k.xp{border-color:var(--cx)}
.cx-kh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;width:100%;text-align:left;padding:7px 28px 7px 8px;position:relative;background:transparent;color:var(--ink);font:inherit;min-height:44px}
.cx-kk{font-size:8.5px;letter-spacing:.14em;padding:2px 5px;border:1px solid color-mix(in srgb,var(--cx) 55%,transparent);color:var(--cx2)}
.cx-kk.rw{border-color:color-mix(in srgb,var(--cx-red) 60%,transparent);color:var(--cx-red)}
.cx-kd{font-size:9px;letter-spacing:.1em;color:var(--mute);margin-left:auto}
.cx-kp{flex-basis:100%;font-size:11.5px;line-height:1.45;color:var(--ink)}
.cx-kh .cv{position:absolute;right:9px;top:7px;font-style:normal;color:var(--cy2)}
.cx-kx{margin:0;padding:2px 9px 9px;display:grid;grid-template-columns:auto 1fr;gap:4px 9px;font-size:10.5px;line-height:1.45}
.cx-kx dt{font-size:8.5px;letter-spacing:.16em;color:var(--mute);padding-top:2px}
.cx-kx dd{margin:0;color:var(--ink2);overflow-wrap:anywhere}.cx-kx dd small{color:var(--dim)}
.cx-kx a,.cx-src a,.cx-attr a:not(.cx-logo){color:var(--cy2);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--cy2) 50%,transparent)}
.cx-src{font-size:9px;letter-spacing:.1em;color:var(--mute);line-height:1.55}

/* attribution: the RIPE Atlas logo on a light plate so the navy mark reads on the dark UI (logo itself unaltered) */
.cx-attr{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line2);padding-top:9px;margin-top:4px}
.cx-logo,.cx-ilogo{align-self:flex-start;display:inline-block;background:#fff;padding:5px 8px;border-radius:2px;line-height:0}
.cx-logo img{width:166px;height:auto}.cx-ilogo{margin-top:8px}.cx-ilogo img{width:118px;height:auto}
.cx-bp{margin:0;font-size:9.5px;line-height:1.5;color:var(--dim)}

/* INSPECT block */
.cx-ins{margin:0}
.cx-im{display:flex;flex-direction:column;gap:6px}
.cx-im>b{font:700 15px var(--hd);letter-spacing:.08em}
.cx-im p{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.cx-im .cx-sp{height:40px}.cx-sm{font-size:10px!important;color:var(--dim)!important}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .cx-hook{padding:6px 8px}
  .cx-hook b{font-size:14px}
  .cx-hook span{font-size:10px}
  .cx-go{min-height:60px}
  .cx-go b{font-size:17px}
  .cx-nums b,.cx-kst b{font-size:17px}
  .cx-do button{min-height:56px}
  .cx-row{grid-template-columns:auto minmax(0,1fr) 52px auto;min-height:46px}
  .cx-seg button{min-height:38px}
  .cx-btns button,.cx-more{min-height:44px}
  .cx-kh{min-height:48px}
  .cx-last button{min-height:44px}
}
@media (prefers-reduced-motion: reduce){.cx-blip,.cx-radar,.cx-tick{animation:none}}
/* QA w2 fixes 10/15: the folded sticky hook gets a hard edge + a short fade so the line scrolling under it is not sliced mid-text;
   the locked teaser's sticky UPGRADE bar fades the content above it instead of cutting the TOR card's last line (scoped to CYBER, wow-locked.css untouched) */
.cx-hook.stuck{border-bottom:1px solid color-mix(in srgb,var(--cx) 40%,var(--line))}
.cx-hook.stuck::after{content:"";position:absolute;left:-2px;right:0;top:100%;height:26px;background:linear-gradient(var(--bg),var(--bg) 35%,transparent);pointer-events:none}
#lpanel .lk:has(#cx-lock) .lk-up::before{content:"";position:absolute;left:-1px;right:-1px;bottom:calc(100% + 1px);height:20px;background:linear-gradient(transparent,var(--bg) 85%);pointer-events:none}
#lpanel .lk:has(#cx-lock) #cx-lock{padding-bottom:6px}#cx-lock .tlk{margin:0} /* the .cx gap already spaces them: 21px gaps were pushing the TOR card under the bar at 1440x900 */
/* QA w2: stick flush with the panel's inner top edge (past its 12px / 8px padding) so nothing scrolls visibly above the hook either */
#lpanel>#cx-hook{top:-12px}
@media (max-height:500px) and (pointer:coarse){ #lpanel>#cx-hook{top:-8px} }