/* Kubernetes: Services. Loaded after k8s.css, which holds everything the
   viewers share; these are the parts only this page draws: the cloud's
   network and the internet users on the left, the node network along the
   bottom of the cluster, the Service's chip and card, node ports, and
   packets in flight. */

:root { --svc: #2f6fd6; --pkt-outer: #c96a12; --cni: #16866a; }
@media (prefers-color-scheme: dark) { :root { --svc: #7aa7f5; --pkt-outer: #f0a050; --cni: #4fd1a5; } }

/* The left column: the cloud's network on top, the internet and its users,
   and you */
@media (min-width: 1101px) {
  .kv-stage { grid-template-rows: 204px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "vpc cluster cloud" "net cluster log" "user cluster log"; }
}
@media (max-width: 1100px) {
  .kv-stage { grid-template-rows: 230px 330px 820px 190px 420px; grid-template-areas: "vpc cloud" "net user" "cluster cluster" "log log" "log log"; }
}
@media (max-width: 640px) {
  .kv-stage { grid-template-rows: 230px 300px 340px auto 190px 420px; grid-template-areas: "vpc" "net" "user" "cluster" "cloud" "log"; }
}
.kv-vpc { grid-area: vpc; border-top: 4px solid var(--pkt-outer); }
.kv-vpc .kv-body { padding: 0.35rem 0.5rem; display: grid; gap: 0.35rem; align-content: start; }
.kv-vpc h2 .logo, .kv-prov h2 .logo { height: 1rem; width: auto; background: #fff; border-radius: 3px; padding: 1px 3px; align-self: center; }
.kv-net { justify-content: flex-start; }
.kv-net .thing.users { width: 100%; box-sizing: border-box; }
.thing.users .heads { font-size: 0.8rem; letter-spacing: -0.1rem; margin-left: 0.3rem; }
.thing.vm, .thing.lb { border-left-color: var(--pkt-outer); }
.thing code { font-size: 0.74rem; color: var(--pkt-outer); font-weight: 700; }
.thing.vm.act, .thing.lb.act { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pkt-outer) 40%, transparent); }
.term.mini { margin-top: 0.25rem; font-size: 0.64rem; padding: 0.2rem 0.4rem; overflow: hidden; }

/* Room between the rows for the Service's chip and the manage nodes' drops,
   and under the workers for the node network. */
.kv-cluster { row-gap: 84px; padding-bottom: 46px; }
@media (min-width: 641px) { .kv-cluster { grid-template-rows: minmax(0, 0.62fr) minmax(0, 1fr); } }

/* The node network, each node's drop from eth0 to it, and the line from the
   cloud's network */
#kv-wires .bus { stroke: var(--pkt-outer); stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
#kv-wires .bus.side { stroke-width: 4; }
#kv-wires .drop { fill: none; stroke: var(--pkt-outer); stroke-width: 2.5; stroke-linejoin: round; opacity: 0.7; }
#kv-wires .bus.lit, #kv-wires .drop.lit { opacity: 1; stroke-dasharray: 9 6; animation: kv-march 0.9s linear infinite; }
#kv-wires .bus-label { fill: var(--pkt-outer); font: 700 11px ui-monospace, Menlo, Consolas, monospace; }

/* A node's footer: containerd on one line, the computer, its address and
   the Service's node port on the next */
.m-node .foot-text .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; }
.eth { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--pkt-outer);
  border: 1.5px solid color-mix(in srgb, var(--pkt-outer) 60%, var(--border)); border-radius: 5px; padding: 0 0.35rem; background: var(--card); }
.eth.act { background: var(--pkt-outer); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pkt-outer) 40%, transparent); }
.np { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--svc); border: 1.5px solid var(--svc);
  border-radius: 5px; padding: 0 0.3rem; background: color-mix(in srgb, var(--svc) 10%, var(--card)); }
.np.act { background: var(--svc); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--svc) 40%, transparent); }
.np.now { animation: kv-pulse 1.1s ease-in-out 2; }

/* The system's pods, small: the control plane solid purple, kube-proxy teal */
.spods.small { margin-bottom: 0.2rem; }
.spod.small { display: inline-block; padding: 0 0.35rem; border-width: 1.5px; border-style: solid; font-size: 0.66rem; }
.spod.small.cp { background: var(--cp-strong); color: #fff; border-color: color-mix(in srgb, var(--cp-strong) 70%, #000); }
.spod.small.proxy { --c: var(--node); color: var(--node); }

/* Your pods: their address, their process, and the Service's tag */
.pod.a-client { --a: var(--app-hello); }
.pod .ph .sym { width: 18px; height: 18px; }
.pod { padding: 0.15rem 0.4rem 0.2rem; }
.pod .st { position: absolute; top: 0.15rem; right: 0.4rem; float: none; font-size: 0.58rem; }
.pod .ph { padding-right: 3.8rem; }
.pod .ph b { font-size: 0.72rem; }
.pod .addr { font: 0.7rem ui-monospace, Menlo, Consolas, monospace; margin-top: 0.1rem; display: flex; align-items: baseline; gap: 0.4rem; }
.pod .addr b { color: var(--cni); }
.ep-tag { margin-left: auto; font: 700 0.58rem -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--svc);
  border: 1px solid var(--svc); border-radius: 4px; padding: 0 0.3rem; background: color-mix(in srgb, var(--svc) 10%, var(--card)); }
.pod .ctr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; margin-top: 0.1rem; padding: 0 0.4rem; font-size: 0.68rem; }
.pod .ctr em { font-style: normal; color: var(--dim); }
.pod .ctr small { display: inline; margin-left: auto; font-size: 0.64rem; color: var(--a); font-weight: 700;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.pods { margin-top: 0; }
.pod.act { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 45%, transparent); }

/* The Service's chip, between the cluster's two rows */
#kv-svc-chip { position: absolute; z-index: 5; transform: translateX(-50%); }
.svc-chip { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; background: var(--card); border: 2px solid var(--svc);
  border-radius: 9px; padding: 0.15rem 0.55rem 0.15rem 0.3rem; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); font-size: 0.8rem; }
.svc-chip img { width: 26px; height: 26px; }
.svc-chip code { font-weight: 700; color: var(--svc); font-size: 0.76rem; }
.svc-chip.act { box-shadow: 0 0 0 4px color-mix(in srgb, var(--svc) 40%, transparent); }
.svc-chip.now { animation: kv-pulse 1.1s ease-in-out 2; }
#kv-wires .link { stroke: var(--svc); }

/* The cloud provider: empty until it makes the load balancer */
.thing.plb { border-left-color: var(--pkt-outer); }
.thing.plb.act { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pkt-outer) 40%, transparent); }
.plan-row.act { box-shadow: 0 0 0 3px color-mix(in srgb, var(--svc) 45%, transparent); animation: kv-pulse 1.1s ease-in-out 3; }
.plan-row.now { background: color-mix(in srgb, var(--flash) 50%, var(--card)); }

/* A packet in flight, with its addresses */
#kv-fly .msg.pkt { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; background: var(--card);
  color: var(--text); border: 2px solid var(--cni); border-radius: 5px; font-size: 0.72rem; }
#kv-fly .msg.pkt .inner { padding: 0.05rem 0.45rem; color: var(--cni); }
#kv-fly .trail.pkt polyline { stroke: var(--cni); }
#kv-fly .trail.pkt path { fill: var(--cni); }
#kv-fly .drop { position: fixed; background: var(--bad); color: #fff; font: 700 0.8rem ui-monospace, Menlo, Consolas, monospace;
  padding: 0.15rem 0.5rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }