/* hypercluster.org/network: the network map (site/index.js draws it, network.js makes it react).
   The shared design's colours (ui/hc.css): storage --good, AI chip (NPU) --link, graphics card (GPU) --wait. */
/* A blockchain node (HyperCluster's own servers only): violet, a colour of its own. */
:root{--chain:#a78bfa}
.kdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.kdot.storage{background:var(--good)} .kdot.npu{background:var(--link)} .kdot.gpu{background:var(--wait)} .kdot.chain{background:var(--chain)}
.kdot.node{border-radius:2px;background:var(--chain);box-shadow:0 0 0 1.5px var(--card),0 0 0 3px var(--chain)}
.kdot.main{border-radius:2px;background:var(--good);box-shadow:0 0 0 1.5px var(--card),0 0 0 3px var(--good)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the totals: two by two on a phone, in a row on a wide screen */
.grid.netstats{grid-template-columns:repeat(2,minmax(0,1fr));--g:10px}
@container site (min-width:960px){.grid.netstats{grid-template-columns:repeat(4,minmax(0,1fr));--g:16px}}
@container site (max-width:599px){.netstats .card{padding:14px}.netstats .stat .v{font-size:22px}}

/* the legend: each kind on or off */
.netmap-card .chip b{font-weight:600}
.netmap-card .chip[aria-pressed="false"]{color:var(--faint);border-style:dashed;background:transparent}
.netmap-card .chip[aria-pressed="false"] .kdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}

/* the map: the land outline, and one button per city placed on it in % */
.netmap-wrap{position:relative}
@container site (max-width:599px){.netmap-card{padding:14px}.netmap-wrap{margin-inline:-6px}}
.netmap{position:relative;width:100%;aspect-ratio:1000/455;--k:1}
@container site (max-width:599px){.netmap{--k:.72}}
.netmap>img{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.netmap .city{position:absolute;width:calc(var(--sz) * var(--k));height:calc(var(--sz) * var(--k));transform:translate(-50%,-50%);margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--good) 0 var(--a),var(--link) 0 var(--b),var(--wait) 0);box-shadow:0 0 0 1.5px var(--card),0 2px 10px rgba(0,0,0,.55)}
.netmap .city::before{content:'';position:absolute;inset:-7px;border-radius:50%}   /* a bigger target for a finger */
.netmap .city::after{content:'';position:absolute;inset:24%;border-radius:50%;background:var(--card)}
.netmap .city .n{position:relative;z-index:1;font-size:11px;font-weight:700;line-height:1;color:var(--text)}
@container site (max-width:599px){.netmap .city .n{display:none}}
/* HyperCluster's main server: a square with a ring, storage's colour */
.netmap .city.main{border-radius:6px;background:var(--good);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--good),0 2px 10px rgba(0,0,0,.55)}
.netmap .city.main::after{inset:32%;border-radius:2px}
.netmap .city.main:hover,.netmap .city.main.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--text),0 2px 10px rgba(0,0,0,.55)}
/* HyperCluster's other blockchain nodes: a smaller square with a ring, the chain's colour */
.netmap .city.server.chain{border-radius:5px;background:var(--chain);box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--chain),0 2px 10px rgba(0,0,0,.55)}
.netmap .city.server.chain::after{inset:32%;border-radius:2px}
.netmap .city.server.chain:hover,.netmap .city.server.chain.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--text),0 2px 10px rgba(0,0,0,.55)}
.netmap .city:hover,.netmap .city.on{z-index:3;opacity:1;box-shadow:0 0 0 2px var(--text),0 2px 10px rgba(0,0,0,.55)}
.netmap .city:focus-visible{z-index:3;outline:2px solid var(--link);outline-offset:3px}
.netmap-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}

/* a city's card: over the map beside its marker, or under the map on a narrow screen */
.citycard{position:absolute;z-index:6;width:240px;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-sm);
  background:#0b1424;border:1px solid #22324d;box-shadow:0 14px 40px rgba(0,0,0,.5);pointer-events:none}
.citycard.docked{position:static;width:auto;margin-top:12px;box-shadow:none}
.citycard .kv{font-size:13px}
.citycard .kname{display:inline-flex;align-items:center;gap:8px}

/* the list of cities under the map */
.citylist{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@container site (min-width:700px){.citylist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container site (min-width:1040px){.citylist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cityrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cityrow b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.cityrow .kc{display:flex;gap:10px;flex-shrink:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cityrow .kc>span{display:inline-flex;align-items:center;gap:5px}
.cityrow .kc .none{color:var(--faint)} .cityrow .kc .none .kdot{opacity:.35}
.cityrow.main{border-color:var(--good)} .cityrow.server.chain{border-color:var(--chain)}