/* Homepage telemetry panel (#telemetry). Every colour is a site token, so both themes work. */
/* Live telemetry panel. Scoped to this section; every colour is a site token, so both themes work. */
.tlm-sec{padding-block:clamp(28px,4vw,52px);border-block:1px solid var(--line);background:var(--ink-1)}
.tlm{position:relative;border:1px solid var(--line-2);border-radius:calc(var(--r) + 4px);background:linear-gradient(180deg,var(--ink-2),var(--ink-1) 42%);box-shadow:var(--shadow-md,0 30px 80px -30px rgba(0,0,0,.6));overflow:hidden;isolation:isolate}
.tlm::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(110% 70% at 100% 0%,var(--blue-wash),transparent 62%),radial-gradient(80% 60% at 0% 0%,var(--indigo-dim),transparent 60%)}
.tlm-top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--line)}
.tlm-ttl{display:flex;align-items:center;gap:12px;font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.tlm-ttl small{font:inherit;letter-spacing:.1em;color:var(--fg-3);text-transform:none}
.tlm-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tlm-live{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--go-line);background:var(--go-dim);color:var(--go);font:500 11.5px/1 var(--mono);letter-spacing:.12em}
.tlm-clk{font:400 12px/1 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.tlm-clk b{color:var(--fg-2);font-weight:500}
.tlm-led{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--go)}
.tlm-led::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--go);opacity:0}
.tlm-on .tlm-led::after{animation:tlm-ping 3.2s cubic-bezier(.2,.7,.1,1) infinite;animation-delay:var(--d,0s)}
@keyframes tlm-ping{0%{transform:scale(.6);opacity:.6}70%,100%{transform:scale(1.9);opacity:0}}

/* Signal chain: traffic -> requests -> load -> latency -> health -> security */
.tlm-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;z-index:1}
.tlm-k{position:relative;display:grid;gap:9px;align-content:start;padding:20px 18px 18px;border-left:1px solid var(--line);min-width:0}
.tlm-k:first-child{border-left:0}
.tlm-k+.tlm-k::before{content:"";position:absolute;left:-5px;top:24px;width:8px;height:8px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);background:var(--ink-2);transform:rotate(45deg)}
.tlm-k .kl{display:flex;justify-content:space-between;gap:6px;font:400 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.tlm-k .kl i{font-style:normal;color:var(--indigo);opacity:.85}
.tlm-k .kv{font:500 clamp(21px,2.05vw,28px)/1 var(--mono);letter-spacing:-.045em;color:var(--fg);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.tlm-k .kv small{font-size:.46em;letter-spacing:0;color:var(--fg-3)}
.tlm-k .kf{font-size:12.5px;line-height:1.4;color:var(--fg-3)}
.tlm-k .kf b{color:var(--fg-2);font-weight:500;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tlm-k .kf b.ok{color:var(--go)}
.tlm-spark{width:100%;height:34px;display:block;overflow:visible}
.tlm-spark .ln{fill:none;stroke:var(--us);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tlm-spark .ar{stroke:0;fill:var(--us);opacity:.1}
.tlm-spark .hd{fill:var(--us)}
.tlm-spark.ix .ln{stroke:var(--indigo)}.tlm-spark.ix .hd,.tlm-spark.ix .ar{fill:var(--indigo)}
.tlm-spark.go .ln{stroke:var(--go)}.tlm-spark.go .hd{fill:var(--go)}
.tlm-meter{position:relative;height:6px;border-radius:3px;background:var(--ink-0);overflow:hidden;margin:14px 0}
.tlm-meter i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--indigo);transition:width .9s var(--ease)}
.tlm-meter b{position:absolute;top:-3px;bottom:-3px;left:80%;width:1px;background:var(--fg-3);opacity:.6}
.tlm-bars{display:flex;align-items:flex-end;gap:2px;height:34px}
.tlm-bars i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--indigo) 40%,transparent);transition:height .6s var(--ease)}
.tlm-bars i:last-child{background:var(--indigo)}

.tlm-low{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-top:1px solid var(--line);position:relative;z-index:1}
.tlm-sec-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tlm-sec-flow li{position:relative;display:grid;gap:7px;padding:15px 16px 14px;border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent);min-width:0}
.tlm-sec-flow li:first-child{border-left:0;padding-left:22px}
.tlm-sec-flow span{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.tlm-sec-flow b{font:500 18px/1 var(--mono);letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums}
.tlm-sec-flow small{font-size:12px;line-height:1.3;color:var(--fg-3)}
.tlm-sec-flow li.v b{color:var(--go)}
.tlm-s{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 22px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.tlm-s:first-of-type{border-top:0}
.tlm-s .sn{display:grid;gap:4px;min-width:0}
.tlm-s .sn b{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.tlm-s .sn span{font-size:13px;line-height:1.45;color:var(--fg-3)}
.tlm-s .ss{justify-self:end;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--go);white-space:nowrap}

.tlm-feed{border-left:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;align-content:start;min-width:0}
.tlm-fh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px 10px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.tlm-fh .lg{display:flex;align-items:center;gap:6px;letter-spacing:.06em;text-transform:none}.tlm-fh .lg i+i{margin-left:10px}
.tlm-fh i{display:inline-block;flex:none}
.tlm-fl{list-style:none;margin:0;padding:0 22px 14px;display:grid;align-content:start}
.tlm-fl li{display:grid;grid-template-columns:auto 8px minmax(0,1fr);align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:13.5px;line-height:1.45;color:var(--fg-2)}
.tlm-fl li:first-child{border-top:0}
.tlm-fl time{font:400 12px/1.45 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.tlm-fl .dt,.tlm-fh i{width:6px;height:6px;border-radius:50%;background:var(--us);transform:translateY(-1px)}
.tlm-fl .sx .dt,.tlm-fh i.sx{background:var(--indigo)}
.tlm-fl .ok .dt,.tlm-fh i.ok{background:var(--go)}
.tlm-fl b{font-weight:500;color:var(--fg);font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.js .tlm-on .tlm-fl li.new{animation:tlm-in .5s var(--ease) both}
@keyframes tlm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tlm-foot{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap;padding:13px 22px;border-top:1px solid var(--line);font:400 12px/1.5 var(--mono);color:var(--fg-3);position:relative;z-index:1}

.js .tlm:not(.tlm-on) .tlm-k,.js .tlm:not(.tlm-on) .tlm-low{opacity:0;transform:translateY(6px)}
.tlm-on .tlm-k,.tlm-on .tlm-low{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}

@media (max-width:1100px){.tlm-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.tlm-k:nth-child(4){border-left:0}.tlm-k:nth-child(4)::before{display:none}.tlm-k:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:860px){.tlm-low{grid-template-columns:1fr}.tlm-feed{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:620px){
  .tlm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlm-k{padding:16px;border-left:1px solid var(--line)}.tlm-k::before{display:none}
  .tlm-k:nth-child(odd){border-left:0}.tlm-k:nth-child(n+3){border-top:1px solid var(--line)}.tlm-k:nth-child(4){border-left:1px solid var(--line)}
  .tlm-sec-flow{grid-template-columns:1fr 1fr}.tlm-sec-flow li:nth-child(3){border-left:0;padding-left:16px}.tlm-sec-flow li:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.tlm-sec-flow li:first-child{padding-left:16px}
  .tlm-s,.tlm-top,.tlm-foot,.tlm-fh{padding-inline:16px}.tlm-fl{padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){.tlm-on .tlm-led::after{animation:none}.tlm-on .tlm-k,.tlm-on .tlm-low{transition:none}.js .tlm-on .tlm-fl li.new{animation:none}.tlm-meter i,.tlm-bars i{transition:none}}

/* Persistent feed states */
.tlm-live.idle{border-color:var(--line-2);background:transparent;color:var(--fg-3)}
.tlm-live.idle .tlm-led{background:var(--fg-3)}.tlm-live.idle .tlm-led::after{animation:none}
.tlm-fl li.idle{display:block;color:var(--fg-3);font-size:13px}
.tlm-k .kv small{white-space:nowrap}
.tlm-fl .wn .dt{background:var(--warn)}
.tlm-s .ss.wn{color:var(--warn)}
.tlm-s.wn .tlm-led{background:var(--warn)}.tlm-s.wn .tlm-led::after{border-color:var(--warn)}

/* Primary numbers: larger, easier to scan */
.tlm-k{gap:11px;padding:22px 18px 18px}
.tlm-k .kv{font-size:clamp(28px,2.55vw,38px);letter-spacing:-.05em;font-weight:500}
.tlm-k .kv small{font-size:.4em}
.tlm-k .kl{font-size:11px}
.tlm-sec-flow b{font-size:clamp(20px,1.7vw,24px)}
.tlm-sync{font:400 12px/1 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
@media (max-width:620px){.tlm-k .kv{font-size:clamp(24px,7vw,30px)}.tlm-sync{display:none}}

/* ---------- Operations Center (v18) ---------- */
.ops{position:relative;border:1px solid var(--line-2);border-radius:calc(var(--r) + 4px);background:linear-gradient(180deg,var(--ink-2),var(--ink-1) 38%);box-shadow:var(--shadow-md,0 30px 80px -30px rgba(0,0,0,.6));overflow:hidden;isolation:isolate}
.ops::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 60% at 100% 0%,var(--blue-wash),transparent 60%),radial-gradient(70% 50% at 0% 0%,var(--indigo-dim),transparent 60%),repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--line) 35%,transparent) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,color-mix(in srgb,var(--line) 35%,transparent) 31px 32px);opacity:1}
.ops-top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink-1) 70%,transparent)}
.ops-ttl{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}
.ops-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ops-sync,.ops-clk{font:400 12px/1 var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.ops-clk b{color:var(--fg-2);font-weight:500}

.ops-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);position:relative;z-index:1}
.ops-c{display:grid;gap:10px;padding:24px 22px 22px;border-left:1px solid var(--line);min-width:0}
.ops-c:first-child{border-left:0}
.ops-c .cl{font:400 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.ops-c .cv{font:500 clamp(32px,3.2vw,48px)/1 var(--mono);letter-spacing:-.055em;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:clip}
.ops-c .cr{font-size:13px;color:var(--fg-3)}
.ops-c .cr b{font-family:var(--mono);font-weight:500;color:var(--fg-2);font-variant-numeric:tabular-nums}
.ops-c:first-child .cv{color:var(--blue)}
.ops-c:nth-child(2) .cv{color:var(--indigo)}

.ops-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);border-bottom:1px solid var(--line);position:relative;z-index:1}
.ops-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px 10px;font:400 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.ops-h b{color:var(--fg-2);font-weight:500;font-variant-numeric:tabular-nums}
.ops-h .lg{display:flex;align-items:center;gap:6px;letter-spacing:.06em;text-transform:none}.ops-h .lg i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue)}.ops-h .lg i+i{margin-left:10px}.ops-h .lg i.sx{background:var(--indigo)}
.ops-stream{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.ops-canvas{position:relative;height:230px;margin:0 22px 14px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--ink-0) 60%,transparent);overflow:hidden}
.ops-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ops-canvas .st{position:absolute;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
.ops-canvas .s1{left:12px;top:12px}.ops-canvas .s2{left:50%;top:12px;transform:translateX(-50%);color:var(--indigo)}.ops-canvas .s3{right:12px;top:12px;color:var(--blue)}.ops-canvas .s4{right:12px;bottom:12px;color:var(--indigo)}
.ops-wait{position:absolute;inset:auto 0 50%;transform:translateY(50%);text-align:center;font:400 12px/1 var(--mono);color:var(--fg-3);letter-spacing:.08em}
.ops-flow{border-top:1px solid var(--line);border-bottom:0}
.ops-sys{border-left:1px solid var(--line);min-width:0}
.ops-sys .tlm-s{padding:11px 22px}
.ops-sys .tlm-s .sn span b{font:inherit;letter-spacing:0;text-transform:none;color:var(--fg-2);font-family:var(--mono)}

.ops-low{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);position:relative;z-index:1}
.ops-day{min-width:0;padding-bottom:16px}
.ops-hours{display:flex;align-items:flex-end;gap:3px;height:120px;margin:4px 22px 0;border-bottom:1px solid var(--line-2)}
.ops-hours i{position:relative;flex:1;min-width:2px;height:2px;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--blue) 55%,transparent);transition:height .8s var(--ease)}
.ops-hours i:last-child{background:var(--blue)}
.ops-hours i b{position:absolute;left:0;right:0;bottom:0;border-radius:2px 2px 0 0;background:var(--indigo)}
.ops-axis{display:flex;justify-content:space-between;margin:6px 22px 0;font:400 10.5px/1 var(--mono);color:var(--fg-3)}
.ops-log{border-left:1px solid var(--line)}

.js .ops:not(.tlm-on) .ops-count,.js .ops:not(.tlm-on) .ops-main,.js .ops:not(.tlm-on) .ops-low{opacity:0;transform:translateY(6px)}
.tlm-on .ops-count,.tlm-on .ops-main,.tlm-on .ops-low{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tlm-on .ops-main{transition-delay:.08s}.tlm-on .ops-low{transition-delay:.16s}

@media (max-width:1100px){.ops-count{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-c:nth-child(3){border-left:0}.ops-c:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:860px){.ops-main,.ops-low{grid-template-columns:1fr}.ops-sys,.ops-log{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:620px){
  .ops-top,.ops-h,.ops-sys .tlm-s{padding-inline:16px}.ops-canvas{margin-inline:16px;height:190px}.ops-hours,.ops-axis{margin-inline:16px}
  .ops-c{padding:18px 16px}.ops-c .cv{font-size:clamp(26px,8vw,34px)}.ops-sync{display:none}
}
@media (prefers-reduced-motion:reduce){.tlm-on .ops-count,.tlm-on .ops-main,.tlm-on .ops-low{transition:none}.ops-hours i{transition:none}}
.ops-ttl .ops-sim{margin-left:4px;letter-spacing:.1em;font-size:10.5px;height:22px;padding:0 9px}
.tlm-foot span{text-wrap:pretty}

/* v22 */
@media (max-width:520px){.ops-day .ops-h{flex-direction:column;align-items:flex-start;gap:6px}.ops-day .ops-h span:last-child{letter-spacing:.06em}}
.ops-log .tlm-feed li,.tlm-feed li{font-variant-numeric:tabular-nums}
.ops-c{position:relative}.ops-c::before{content:"";position:absolute;left:22px;top:0;width:32px;height:2px;background:var(--line-2)}
.ops-c:first-child::before{background:var(--blue)}.ops-c:nth-child(2)::before{background:var(--indigo)}.ops-c:nth-child(3)::before,.ops-c:nth-child(4)::before{background:var(--fg-3)}
@media (max-width:520px){.ops-c::before{left:16px}}