/* ------------------------------------------------------------------------
   M. Curtis McCoy — Build wall (/1–/4) and console 404
   Same tokens and lighting as the front screen and login.

   Sizing: 1rem follows the screen's short side, so a 1080p TV, a rotated
   portrait monitor and a 4K panel all get the same composition. Phones and
   small tablets fall back to a 13px floor and a scrolling single column.
   ------------------------------------------------------------------------ */

:root{
	--bg:#08090A;
	--ink:#F4F5F6;
	--muted:#8A9099;
	--quiet:#767C85;              /* 4.7:1 on --bg */
	--line:rgba(255,255,255,.10);
	--line-soft:rgba(255,255,255,.06);
	--panel:rgba(14,15,17,.78);
	--mcm-accent:#FFFFFF;
	--mcm-accent-rgb:255,255,255;
	--mcm-accent-ink:#0A0B0C;
	--mcm-status:#35D07F;
	--mcm-status-rgb:53,208,127;
	--ok:var(--mcm-status);
	--ok-rgb:var(--mcm-status-rgb);
	--warn:#F5A524;
	--warn-rgb:245,165,36;
	--bad:#E5484D;
	--bad-rgb:229,72,77;
	--s1:#3987E5;                 /* series 1 — validated dark categorical */
	--s1-rgb:57,135,229;
	--s2:#D95926;                 /* series 2 */
	--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
	--r:1rem;
	--gap:1.1rem;
	--state:var(--ok);
	--state-rgb:var(--ok-rgb);
}

body[data-state="degraded"]{ --state:var(--warn); --state-rgb:var(--warn-rgb); }
body[data-state="offline"] { --state:var(--bad);  --state-rgb:var(--bad-rgb); }

html{
	font-size:max(13px, min(.9vw, 1.6vh));
	background:var(--bg);
	-webkit-text-size-adjust:100%;
	overflow-x:hidden;
	overflow-x:clip;
}
@media (orientation: portrait){
	html{ font-size:max(13px, min(1.6vw, .9vh)); }
}

*,*::before,*::after{ box-sizing:border-box; }

body{
	margin:0;
	min-height:100vh;
	min-height:100dvh;
	color:var(--ink);
	font:400 1rem/1.45 var(--font);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-variant-numeric:tabular-nums;
	background:
		radial-gradient(90rem 50rem at 50% -18%, #25292E 0%, rgba(37,41,46,0) 60%),
		radial-gradient(70rem 45rem at 94% 112%, rgba(150,158,168,.12) 0%, rgba(150,158,168,0) 70%),
		var(--bg);
	background-attachment:fixed;
}

a{ color:inherit; }
h1,h2,p,dl,dd,ol,figure{ margin:0; }
ol{ padding:0; list-style:none; }

.w-sr{
	position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
	overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.w-grid{
	position:fixed; inset:0; z-index:0; pointer-events:none;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size:5rem 5rem;
	background-position:center center;
	-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, rgba(0,0,0,.3) 55%, transparent 85%);
	        mask-image:radial-gradient(ellipse 70% 62% at 50% 50%, #000 0%, rgba(0,0,0,.3) 55%, transparent 85%);
}

.w-shell{
	position:relative; z-index:1;
	display:flex; flex-direction:column;
	min-height:100vh; min-height:100dvh;
	padding:0 clamp(12px, 2.2rem, 3.2rem);
	overflow:hidden; overflow:clip;
}

/* Top bar ---------------------------------------------------------------- */

.w-top{
	display:flex; align-items:center; gap:1.4rem;
	padding:1.25rem 0 1.1rem;
	flex-wrap:wrap;
}

.w-brand{ display:flex; align-items:center; gap:1rem; min-height:2.75rem; text-decoration:none; white-space:nowrap; }
.w-brand__name{ font-size:1.12rem; font-weight:600; letter-spacing:.055em; }
.w-brand__sub{
	padding-left:1rem; border-left:1px solid var(--line);
	font-size:.72rem; line-height:1.4rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}

.w-tabs{
	display:flex; gap:.3rem; padding:.3rem;
	margin:0 auto;
	border:1px solid var(--line); border-radius:.9rem;
	background:rgba(255,255,255,.025);
	overflow-x:auto; scrollbar-width:none;
}
.w-tabs::-webkit-scrollbar{ display:none; }

.w-tab{
	display:inline-flex; align-items:center; gap:.55rem;
	min-height:2.6rem; padding:0 1rem;
	border-radius:.62rem;
	color:var(--muted); text-decoration:none; white-space:nowrap;
	font-size:.9rem; font-weight:600; letter-spacing:.04em;
	transition:background-color .15s ease, color .15s ease;
}
.w-tab:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.w-tab[aria-current="page"]{ color:var(--mcm-accent-ink); background:var(--mcm-accent); }
.w-tab__n{ font-size:.72rem; letter-spacing:.14em; opacity:.7; }
.w-short{ display:none; }

.w-meta{ display:flex; align-items:center; gap:1.1rem; margin-left:auto; white-space:nowrap; }
.w-state{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.w-clock{ font-size:1rem; font-weight:500; color:var(--ink); min-width:6.6em; text-align:right; }
.w-btn{
	display:inline-flex; align-items:center; min-height:2.6rem; padding:0 1.1rem;
	border:1px solid var(--line); border-radius:.62rem; background:rgba(255,255,255,.02);
	font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
	transition:border-color .15s ease, background-color .15s ease;
}
.w-btn:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }

.w-tab:focus-visible,.w-btn:focus-visible,.w-brand:focus-visible,.nf-tile:focus-visible{ outline:2px solid var(--mcm-accent); outline-offset:3px; }

/* Status dot -------------------------------------------------------------- */

.w-dot{
	position:relative; display:inline-block; flex:none;
	width:.62rem; height:.62rem; border-radius:50%;
	background:var(--state);
	box-shadow:0 0 0 .22rem rgba(var(--state-rgb), .16), 0 0 1.1rem rgba(var(--state-rgb), .55);
	transition:background-color .4s ease, box-shadow .4s ease;
}
.w-dot::after{
	content:""; position:absolute; inset:0; border-radius:50%;
	border:1px solid rgba(var(--state-rgb), .7);
	animation:w-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.w-dot--lg{ width:1.15rem; height:1.15rem; box-shadow:0 0 0 .38rem rgba(var(--state-rgb), .16), 0 0 2rem rgba(var(--state-rgb), .55); }
.w-dot--warn{ --state:var(--warn); --state-rgb:var(--warn-rgb); }

/* Main + panels ---------------------------------------------------------- */

.w-main{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; padding-bottom:.4rem; }

.panel{
	position:relative;
	min-width:0; min-height:0;
	padding:1.35rem 1.5rem;
	border:1px solid var(--line);
	border-radius:var(--r);
	background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
	box-shadow:0 1.4rem 3.6rem rgba(0,0,0,.4);
	-webkit-backdrop-filter:blur(10px);
	        backdrop-filter:blur(10px);
}

.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.panel-head h1,.panel-head h2{ font-size:1rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.panel-note{ font-size:.85rem; color:var(--quiet); }

.eyebrow{ font-size:.95rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.kpi,.vital{
	min-width:0; padding:1.15rem 1.35rem;
	border:1px solid var(--line); border-radius:var(--r);
	background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--panel);
}
.kpi dt,.vital dt{ font-size:.95rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi dd,.vital dd{ margin-top:.45rem; font-size:2.3rem; font-weight:500; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi small,.vital small{ margin-left:.35rem; font-size:.5em; font-weight:600; letter-spacing:.06em; color:var(--muted); }

.legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:.85rem; color:var(--muted); }
.lg{ display:inline-flex; align-items:center; gap:.45rem; }
.lg i{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.lg-ok i{ background:var(--ok); }
.lg-warn i{ background:var(--warn); }
.lg-bad i{ background:var(--bad); }
.lg-wait i{ border:1.5px solid var(--quiet); }
.lg-in i{ background:var(--s1); border-radius:2px; width:1rem; height:.22rem; }
.lg-out i{ background:var(--s2); border-radius:2px; width:1rem; height:.22rem; }
.lg b{ color:var(--ink); font-weight:600; margin-left:.25rem; }

.live-tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.live-tag i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--bad); animation:w-blink 1.6s steps(2, jump-none) infinite; }

/* Command stream header: larger, on-air style. */
.stream-head{ align-items:center; margin-bottom:1.1rem; }
.cmd-stream .stream-head h2{ font-size:1.45rem; letter-spacing:.2em; color:var(--ink); }
.stream-meta{ display:inline-flex; align-items:center; gap:1.1rem; }
.live-ago{ font-size:.98rem; color:var(--quiet); white-space:nowrap; }
.cmd-stream .live-tag{
	gap:.65rem; padding:.42rem .95rem .42rem .8rem;
	border:1px solid rgba(var(--bad-rgb), .38); border-radius:999px; background:rgba(var(--bad-rgb), .09);
	font-size:1rem; letter-spacing:.2em; color:var(--ink);
}
.cmd-stream .live-tag i{ position:relative; width:.62rem; height:.62rem; animation:none; box-shadow:0 0 .7rem rgba(var(--bad-rgb), .85); }
.cmd-stream .live-tag i::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--bad-rgb), .85); animation:w-ping 1.8s cubic-bezier(.2,.6,.3,1) infinite; }

/* Radar (shared) ---------------------------------------------------------- */

.w-radar{
	position:absolute; left:50%; top:50%; z-index:0;
	width:48rem; height:48rem; transform:translate(-50%, -50%);
	pointer-events:none; border-radius:50%; overflow:hidden;
	-webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 100%);
	        mask-image:radial-gradient(closest-side, #000 45%, transparent 100%);
}
.w-radar span{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(255,255,255,.055); }
.w-radar span:nth-child(1){ width:24%; height:24%; }
.w-radar span:nth-child(2){ width:50%; height:50%; }
.w-radar span:nth-child(3){ width:76%; height:76%; }
.w-radar i,.scope-sweep{
	position:absolute; inset:0; border-radius:50%;
	background:conic-gradient(from 0deg,
		rgba(var(--state-rgb), 0) 0deg, rgba(var(--state-rgb), 0) 315deg,
		rgba(var(--state-rgb), .05) 358.6deg, rgba(var(--state-rgb), .30) 359.4deg, rgba(var(--state-rgb), 0) 360deg);
	animation:w-spin 10s linear infinite;
}

/* =========================================================================
   01 · Command
   ========================================================================= */

.cmd{ flex:1; display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }

.cmd-status{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.cmd-status > *{ position:relative; z-index:1; }
.cmd-status .w-radar{ position:absolute; z-index:0; width:34rem; height:34rem; }
.cmd-headline{ display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:.6rem; font-size:3.2rem; font-weight:500; line-height:1.1; letter-spacing:-.012em; }
.cmd-checked{ margin-top:.8rem; font-size:1.2rem; color:var(--muted); }

.cmd-clock{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cmd-time{ display:flex; align-items:baseline; justify-content:center; gap:.5rem; font-size:8.4rem; font-weight:300; line-height:1; letter-spacing:-.03em; }
.cmd-sec{ font-size:.36em; font-weight:400; color:var(--muted); min-width:1.3em; text-align:left; letter-spacing:0; }
.cmd-ampm{ font-size:.22em; font-weight:600; letter-spacing:.14em; color:var(--muted); }
.cmd-date{ margin-top:.7rem; font-size:1.35rem; color:var(--muted); }
.cmd-zones{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; width:100%; margin-top:1.4rem; }
.cmd-zone{ padding:.8rem .6rem; border:1px solid var(--line-soft); border-radius:.7rem; background:rgba(255,255,255,.02); }
.cmd-zone.is-home{ border-color:rgba(255,255,255,.22); }
.cmd-zone dt{ font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.cmd-zone dd{ margin-top:.3rem; font-size:1.45rem; font-weight:500; white-space:nowrap; }

.cmd-vitals{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }

.cmd-stream{ display:flex; flex-direction:column; overflow:hidden; min-height:18rem; }

.events{
	flex:1 1 auto; min-height:0; overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
	        mask-image:linear-gradient(180deg, #000 78%, transparent 100%);
}
.ev{
	--lvl-rgb:var(--ok-rgb);
	position:relative; overflow:hidden;
	display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:.9rem;
	padding:.72rem .2rem; border-top:1px solid var(--line-soft);
	font-size:1.12rem;
}
.ev.is-warn{ --lvl-rgb:var(--warn-rgb); }
.ev.is-bad{ --lvl-rgb:var(--bad-rgb); }
.ev.is-info{ --lvl-rgb:var(--s1-rgb); }
.ev:first-child{ border-top:0; }
.ev-time{ color:var(--quiet); font-size:.92em; min-width:6.4em; }
.ev-tag{
	justify-self:start;
	padding:.18rem .5rem; border-radius:.35rem; border:1px solid var(--line);
	font-size:.7em; font-weight:700; letter-spacing:.16em; color:var(--muted);
}
.ev-txt{ overflow:hidden; overflow:clip; overflow-clip-margin:1em; text-overflow:ellipsis; white-space:nowrap; }
.ev-txt::before{
	content:""; display:inline-block; width:.5em; height:.5em; margin-right:.6em; border-radius:50%;
	background:var(--ok); vertical-align:.08em;
}
.ev.is-warn .ev-txt::before{ background:var(--warn); }
.ev.is-bad .ev-txt::before{ background:var(--bad); }
.ev.is-info .ev-txt::before{ background:var(--s1); }
.ev-val{ color:var(--muted); white-space:nowrap; }
.ev.is-new{ animation:w-ev-in .75s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both, w-ev-bg 2.6s ease-out var(--d, 0ms) both; }
/* A light passes across each new row, its tag lights up in the row's
   color, and the status dot sends out a ring. */
.ev.is-new::after{
	content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(var(--lvl-rgb), .22) 55%, rgba(255,255,255,.10) 70%, transparent);
	transform:translateX(-110%);
	animation:w-ev-sweep 1.25s cubic-bezier(.35,.55,.25,1) calc(var(--d, 0ms) + 120ms) both;
}
.ev.is-new .ev-tag{ animation:w-tag-flash 2.4s ease-out var(--d, 0ms) both; }
.ev.is-new .ev-txt::before{ animation:w-dot-ping 1.5s ease-out calc(var(--d, 0ms) + 200ms) both; }
.ev.is-new .ev-val{ color:var(--ink); transition:color 2s ease 1.2s; }

/* =========================================================================
   02 · Fleet
   ========================================================================= */

.flt{ flex:1; display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }

.flt-scope{ display:flex; flex-direction:column; overflow:hidden; }
.scope{ position:relative; flex:1 1 auto; min-height:0; aspect-ratio:1 / 1; max-width:100%; margin:0 auto; width:100%; }
.scope-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.scope-sweep{ inset:4%; }
.scope-rings circle{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:.35; }
.scope-rings circle.is-outer{ stroke:rgba(255,255,255,.14); }
.scope-rings line{ stroke:rgba(255,255,255,.05); stroke-width:.3; }
.scope-rings text{ fill:var(--quiet); font-size:3.1px; letter-spacing:.2px; font-family:var(--font); }
.blip{ transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.blip circle.core{ fill:var(--ok); }
.blip circle.halo{ fill:rgba(var(--ok-rgb), .18); }
.blip.is-warn circle.core{ fill:var(--warn); }
.blip.is-warn circle.halo{ fill:rgba(var(--warn-rgb), .2); }
.blip.is-bad circle.core{ fill:var(--bad); animation:w-blink 1s steps(2, jump-none) infinite; }
.blip.is-bad circle.halo{ fill:rgba(var(--bad-rgb), .22); }
.blip.is-wait circle.core{ fill:none; stroke:var(--quiet); stroke-width:.5; }
.blip.is-wait circle.halo{ fill:none; }
.blip text{ fill:var(--muted); font-size:2.9px; font-weight:600; letter-spacing:.15px; font-family:var(--font); }
.blip .ring{ fill:none; stroke:rgba(var(--ok-rgb), .9); stroke-width:.45; opacity:0; }
.blip.is-ping .ring{ animation:w-ripple 1.8s cubic-bezier(.2,.6,.3,1) 1; }

/* Radar afterglow: each dot flares as the sweep beam crosses it, then fades
   over ~1.5 s. The script sets --glow-delay per dot so the flare lands on the
   beam; the cycle length matches the sweep (10 s). Decorative only — a real
   check still shows its own ripple ring. */
.blip .core,.blip .halo{ transform-box:fill-box; transform-origin:center; }
.blip.is-ok .core,.blip.is-warn .core,
.blip.is-ok .halo,.blip.is-warn .halo,
.blip.is-ok text,.blip.is-warn text{
	animation-duration:var(--sweep, 10s);
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-delay:var(--glow-delay, 0s);
}
.blip.is-ok .core,.blip.is-warn .core{ opacity:.62; animation-name:w-glow-core; }
.blip.is-ok .halo,.blip.is-warn .halo{ opacity:.4; animation-name:w-glow-halo; }
.blip.is-ok text,.blip.is-warn text{ animation-name:w-glow-text; }
.blip.is-wait .core{ animation:w-glow-wait var(--sweep, 10s) linear infinite; animation-delay:var(--glow-delay, 0s); }

.flt-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }

.flt-board{ display:flex; flex-direction:column; overflow:hidden; }
.nodes{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.5rem .9rem; align-content:start; overflow:hidden; }
.node{
	display:grid; grid-template-columns:auto minmax(4.6em, 1fr) minmax(0, auto); align-items:center; gap:.7rem;
	padding:.55rem .75rem; border:1px solid var(--line-soft); border-radius:.6rem;
	background:rgba(255,255,255,.02);
	font-size:1.02rem;
	transition:border-color .6s ease, background-color .6s ease;
}
.node i{ width:.6rem; height:.6rem; border-radius:50%; background:var(--ok); box-shadow:0 0 .6rem rgba(var(--ok-rgb), .5); }
.node.is-warn i{ background:var(--warn); box-shadow:0 0 .6rem rgba(var(--warn-rgb), .5); }
.node.is-bad i{ background:var(--bad); box-shadow:0 0 .6rem rgba(var(--bad-rgb), .6); animation:w-blink 1s steps(2, jump-none) infinite; }
.node.is-wait i{ background:transparent; border:1.5px solid var(--quiet); box-shadow:none; }
.node b{ font-weight:600; letter-spacing:.06em; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.node-ms{ color:var(--muted); font-size:.92em; }
.node-bars{ display:flex; align-items:flex-end; gap:2px; height:1.3rem; }
.node-bars span{ width:3px; min-height:2px; border-radius:1px; background:rgba(255,255,255,.28); }
.node-bars span.is-bad{ background:var(--bad); height:100% !important; }
.node-meta{ display:flex; align-items:center; gap:.8rem; justify-self:end; min-width:0; white-space:nowrap; }
.node-meta .node-bars{ flex:0 1 auto; min-width:0; overflow:hidden; }
.node-ms{ white-space:nowrap; }
.node-tls{ font-size:.82em; color:var(--quiet); min-width:3.4em; text-align:right; }
.node.is-ping{ border-color:rgba(var(--ok-rgb), .55); background:rgba(var(--ok-rgb), .07); }

/* =========================================================================
   03 · Infrastructure
   ========================================================================= */

.inf{ flex:1; display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
.inf-gauges{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.gauge{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.gauge-dial{ position:relative; width:min(100%, 15rem); aspect-ratio:1/1; }
.gauge-dial svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
/* Heat: JS sets --heat / --heat-rgb from the reading, blended green → yellow
   → orange → red across each gauge's bands (data-bands). The track takes the
   same color, so the state reads around the whole dial. Above normal, a
   status word with a dot appears under the number, so color never carries
   the meaning alone. The number itself stays white. */
.gauge{ --heat:var(--gauge-ok, var(--ok)); --heat-rgb:var(--gauge-ok-rgb, var(--ok-rgb)); --heat-a:.3; --track-a:.08; --g-yellow:#F2C230; --g-orange:#F07F35; }
.gauge-track{ fill:none; stroke:rgba(var(--heat-rgb), var(--track-a)); stroke-width:7; transition:stroke 1.2s ease; }
/* Tachometer scale inside the ring: ticks light up to the reading in the
   current heat color; the Critical band is the redline. */
.gt{ stroke:rgba(255,255,255,.16); stroke-width:.7; stroke-linecap:round; transition:stroke .35s ease calc(var(--p, 0) * .8s); }
.gt--major{ stroke:rgba(255,255,255,.3); stroke-width:1.1; }
.gt--red{ stroke:rgba(var(--bad-rgb), .5); stroke-width:1.1; }
.gt.is-on{ stroke:var(--heat); }
.gt--red.is-on{ stroke:var(--bad); }
.gauge-redline{ fill:none; stroke:rgba(var(--bad-rgb), .75); stroke-width:.9; }
.gauge-val{
	fill:none; stroke:var(--heat); stroke-width:7; stroke-linecap:round;
	stroke-dasharray:100 100; stroke-dashoffset:100;
	transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1), stroke 1.2s ease, filter 1.2s ease;
	filter:drop-shadow(0 0 6px rgba(var(--heat-rgb), var(--heat-a)));
}
.gauge[data-level="3"] .gauge-val{ animation:w-gauge-breathe 2.4s ease-in-out infinite; }
@keyframes w-gauge-breathe{
	0%, 100% { filter:drop-shadow(0 0 6px rgba(var(--heat-rgb), .5)); }
	50%      { filter:drop-shadow(0 0 16px rgba(var(--heat-rgb), .95)); }
}
.gauge-dial{ --n:3.4rem; }
.gauge-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--n); font-weight:500; letter-spacing:-.02em; }
.gauge-flag{
	position:absolute; left:50%; top:calc(50% + var(--n) * .64);
	transform:translateX(-50%);
	display:flex; align-items:center; gap:.5em;
	margin:0; font-size:max(.62rem, var(--n) * .24); font-weight:600; line-height:1;
	letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:var(--ink);
	opacity:0; transition:opacity .6s ease;
}
.gauge-flag i{ width:.62em; height:.62em; border-radius:50%; background:var(--heat); box-shadow:0 0 .7em rgba(var(--heat-rgb), .7); transition:background-color 1.2s ease; }
.gauge:not([data-level="0"]) .gauge-flag{ opacity:1; }
.gauge[data-level="3"] .gauge-flag i{ animation:w-blink 1s steps(2, jump-none) infinite; }
.gauge-num small{ margin-left:.15rem; font-size:.4em; color:var(--muted); font-weight:600; }
.gauge figcaption,.gauge > figcaption{ display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center; }
.gauge-l{ font-size:1.05rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.gauge-s{ font-size:1rem; color:var(--quiet); }

.inf-net{ display:flex; flex-direction:column; min-height:14rem; }
.net-head .legend{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; }
.net-head .lg{ font-size:.95rem; }
.net-head .lg b{ font-size:1.25rem; font-weight:600; color:var(--ink); margin-left:.35rem; font-variant-numeric:tabular-nums; }
.net-head .lg-peak{ color:var(--quiet); }
.net-head .lg-peak b{ color:var(--muted); }
.net-foot{ display:flex; justify-content:space-between; gap:1rem; margin-top:.55rem; font-size:.85rem; color:var(--quiet); }
.net-foot [data-net-total]{ color:var(--muted); letter-spacing:.02em; text-align:center; }

/* Stat tiles: cores, load average, uptime */
.inf-stats .tile{ display:flex; flex-direction:column; min-height:0; }
.tile-l{ margin:0; font-size:.9rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tile-l span{ color:var(--quiet); letter-spacing:.06em; }

.cores{ --n:8; flex:1 1 auto; min-height:4.5rem; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:.45rem; margin-top:.8rem; }
.core{ display:flex; flex-direction:column; align-items:center; gap:.35rem; min-height:0; }
.core-bar{ position:relative; flex:1 1 auto; width:100%; min-height:2.5rem; border-radius:.3rem; overflow:hidden;
	background:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 4px, transparent 4px 6px); }
.core-bar i{ position:absolute; left:0; right:0; bottom:0; height:2%;
	background:var(--gauge-ok, var(--ok));
	-webkit-mask-image:repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px);
	        mask-image:repeating-linear-gradient(0deg, #000 0 4px, transparent 4px 6px);
	transition:height 1.2s cubic-bezier(.2,.7,.2,1), background-color 1.2s ease; }
.core b{ font-size:.72rem; font-weight:600; color:var(--quiet); }
.cores.is-dense{ gap:.2rem; }
.cores.is-dense .core b{ display:none; }

.loads{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-around; gap:.35rem; margin-top:.55rem; }
.ld{ display:grid; grid-template-columns:3.6rem minmax(0,1fr) 3.4rem; align-items:center; gap:.8rem; }
.ld-l{ font-size:.85rem; color:var(--quiet); white-space:nowrap; }
.ld-bar{ position:relative; height:.55rem; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.ld-bar i{ position:absolute; inset:0 auto 0 0; width:1.5%; border-radius:99px; background:var(--gauge-ok, var(--ok)); transition:width 1.2s cubic-bezier(.2,.7,.2,1), background-color 1.2s ease; }
.ld.is-over .ld-bar{ box-shadow:0 0 0 1px rgba(var(--bad-rgb), .6); }
.ld-v{ font-size:1.15rem; font-weight:500; line-height:1.3; text-align:right; font-variant-numeric:tabular-nums; }

.tile-up{ justify-content:center; }
.up-big{ margin:.4rem 0 0; font-size:2.2rem; font-weight:500; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.up-sub{ margin:.3rem 0 0; font-size:.88rem; color:var(--quiet); line-height:1.4; white-space:pre-line; }
.net-wrap{ position:relative; flex:1 1 auto; min-height:10rem; }
.net-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }

.inf-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }

/* =========================================================================
   04 · Edge
   ========================================================================= */

.edg{ flex:1; display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
.edg-map{ display:flex; flex-direction:column; min-height:18rem; }
.map-wrap{ position:relative; flex:1 1 auto; min-height:12rem; }
.map-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }
.edg-off{
	display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	align-items:center; gap:.7rem; padding:.8rem 1.2rem;
	border:1px solid var(--line); border-radius:.8rem; background:rgba(8,9,10,.8);
	font-size:1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.is-off .edg-off{ display:inline-flex; }
.w-ico{ width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.edg-hero{ display:flex; flex-direction:column; justify-content:center; }
.edg-big{ margin-top:.4rem; font-size:5rem; font-weight:500; line-height:1.02; letter-spacing:-.025em; white-space:nowrap; }
.edg-sub{ margin-top:.5rem; font-size:1.15rem; color:var(--muted); }
.edg-sub span{ color:var(--ink); font-weight:600; }
.edg-hero{ position:relative; overflow:hidden; }
.edg-next{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.04); }
.edg-next i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, rgba(var(--s1-rgb), .15), rgba(var(--s1-rgb), .9)); box-shadow:0 0 .6rem rgba(var(--s1-rgb), .6); transition:transform 1s linear; }

.edg-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }

.edg-hours{ display:flex; flex-direction:column; min-height:12rem; }
.bars{ flex:1 1 auto; min-height:6rem; display:flex; align-items:flex-end; gap:3px; }
.bars span{
	flex:1 1 0; min-height:2px; border-radius:4px 4px 0 0;
	background:var(--s1);
	transform-origin:bottom; animation:w-grow .9s cubic-bezier(.2,.7,.2,1) both;
}
.bars span.is-now{ background:repeating-linear-gradient(45deg, rgba(var(--s1-rgb), .9) 0 3px, rgba(var(--s1-rgb), .35) 3px 6px); background-size:8.5px 8.5px; animation:w-grow .9s cubic-bezier(.2,.7,.2,1) both, w-stripes 1.2s linear infinite, w-now-glow 2.4s ease-in-out infinite; }
@keyframes w-stripes{ to { background-position:8.5px 0; } }
@keyframes w-now-glow{ 0%, 100% { box-shadow:0 0 0 rgba(var(--s1-rgb), 0); } 50% { box-shadow:0 0 1rem rgba(var(--s1-rgb), .55); } }
.bars-axis{ display:flex; justify-content:space-between; margin-top:.5rem; font-size:.85rem; color:var(--quiet); }

.edg-countries{ display:flex; flex-direction:column; overflow:hidden; }
.countries{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:.55rem; overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg, #000 85%, transparent 100%); mask-image:linear-gradient(180deg, #000 85%, transparent 100%); }
.country{ display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:center; gap:.8rem; font-size:1.05rem; }
.country-cc{ font-size:.78rem; font-weight:700; letter-spacing:.12em; color:var(--muted); }
.country-bar{ position:relative; height:1.9rem; border-radius:.35rem; background:rgba(255,255,255,.035); overflow:hidden; }
.country-bar span{ position:absolute; inset:0 auto 0 0; border-radius:.35rem; background:rgba(var(--s1-rgb), .55); transform-origin:left; animation:w-grow-x 1s cubic-bezier(.2,.7,.2,1) both; }
.country-bar em{ position:relative; display:block; padding:0 .7rem; line-height:1.9rem; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.country-n{ color:var(--muted); min-width:4.4em; text-align:right; transition:color .4s ease; }
.country-bar span{ transition:background-color .5s ease, box-shadow .5s ease; }
.country-cc{ transition:color .4s ease; }
.country.is-lit .country-bar span{ background:rgba(var(--s1-rgb), .95); box-shadow:0 0 1.1rem rgba(var(--s1-rgb), .55); transition:background-color .08s ease, box-shadow .08s ease; }
.country.is-lit .country-n,.country.is-lit .country-cc{ color:var(--ink); transition:color .08s ease; }

/* =========================================================================
   404
   ========================================================================= */

.nf{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 0; }
.nf > *{ position:relative; z-index:1; }
.nf .w-radar{ position:absolute; z-index:0; top:40%; }
.nf-code{ font-size:11rem; font-weight:300; line-height:.9; letter-spacing:-.04em; color:rgba(255,255,255,.12); }
.nf-title{ display:flex; align-items:center; gap:1rem; margin-top:1rem; font-size:2.6rem; font-weight:500; letter-spacing:-.01em; }
.nf-sub{ margin-top:.7rem; font-size:1.2rem; color:var(--muted); }
.nf-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:var(--gap); width:min(100%, 86rem); margin-top:2.6rem; text-align:left; }
.nf-tile{
	position:relative; display:flex; flex-direction:column; gap:.4rem; min-height:10rem;
	padding:1.3rem 1.4rem 1.2rem;
	border:1px solid var(--line); border-radius:var(--r);
	background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
	text-decoration:none;
	transition:border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.nf-tile:hover{ border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.nf-tile__n{ font-size:.8rem; font-weight:700; letter-spacing:.2em; color:var(--muted); }
.nf-tile__t{ font-size:1.5rem; font-weight:600; }
.nf-tile__d{ font-size:.98rem; color:var(--muted); line-height:1.4; }
.nf-tile .w-ico{ position:absolute; right:1.2rem; top:1.2rem; width:1.3rem; height:1.3rem; color:var(--muted); transition:transform .15s ease, color .15s ease; }
.nf-tile:hover .w-ico{ transform:translateX(3px); color:var(--ink); }

/* Footer ------------------------------------------------------------------ */

.w-foot{
	display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	padding:.9rem 0 calc(1.1rem + env(safe-area-inset-bottom));
	font-size:.82rem; letter-spacing:.04em; color:var(--quiet);
}
.w-foot__screen{ letter-spacing:.14em; text-transform:uppercase; }

/* =========================================================================
   Wall layouts — fixed to the screen, nothing scrolls
   ========================================================================= */

/* Landscape monitors, laptops, TVs */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px){
	.w-shell{ height:100vh; height:100dvh; }
	.w-main{ overflow:hidden; }
	.cmd,.flt,.inf,.edg{ flex:1 1 0; min-height:0; }
	.cmd > *,.flt > *,.inf > *,.edg > *{ min-height:0; }

	.cmd{
		grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr);
		grid-template-rows:minmax(0, 1.3fr) auto minmax(0, .72fr);
		grid-template-areas:"clock stream" "vitals stream" "status stream";
	}
	.cmd-status{ grid-area:status; } .cmd-clock{ grid-area:clock; } .cmd-vitals{ grid-area:vitals; grid-template-columns:repeat(4, minmax(0,1fr)); } .cmd-stream{ grid-area:stream; }
	.cmd-vitals .vital{ container-type:inline-size; }
	.cmd-vitals .vital dd{ font-size:min(1.9rem, 15cqi); }
	.cmd-vitals .vital small{ margin-left:.08rem; }

	.flt{
		grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);
		grid-template-rows:auto minmax(0, 1fr);
		grid-template-areas:"scope kpis" "scope board";
	}
	.flt-scope{ grid-area:scope; } .flt-kpis{ grid-area:kpis; grid-template-columns:repeat(4, minmax(0,1fr)); } .flt-board{ grid-area:board; }
	.flt-kpis .kpi dd{ font-size:2.1rem; }
	.flt-kpis .kpi dt{ font-size:.9rem; letter-spacing:.12em; }
	.scope{ height:100%; width:auto; }

	.inf{
		grid-template-columns:minmax(0, 1fr) minmax(0, 23rem);
		grid-template-rows:minmax(0, .82fr) minmax(0, 1.18fr);
		grid-template-areas:"gauges gauges" "net stats";
	}
	.inf-gauges{ grid-area:gauges; } .inf-net{ grid-area:net; } .inf-stats{ grid-area:stats; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0, 1fr) auto auto; }
	.gauge{ container-type:size; padding-top:1.4rem; padding-bottom:1.2rem; }
	.gauge-dial{ flex:none; width:min(100cqw - 1rem, 100cqh - 7.2rem, 18rem); height:auto; }
	.inf-stats .kpi{ padding-top:1rem; padding-bottom:1rem; }

	.edg{
		grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
		grid-template-rows:auto auto minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:"map hero" "map kpis" "map countries" "hours countries";
	}
	.edg-map{ grid-area:map; } .edg-hero{ grid-area:hero; } .edg-kpis{ grid-area:kpis; } .edg-hours{ grid-area:hours; min-height:0; } .edg-countries{ grid-area:countries; }
	.edg-kpis .kpi dd{ font-size:1.9rem; }
	.edg-big{ font-size:4.4rem; }
}

/* Portrait monitors (rotated displays, portrait TVs) */
@media (orientation: portrait) and (min-width: 700px) and (min-height: 1000px){
	.w-shell{ height:100vh; height:100dvh; }
	.w-main{ overflow:hidden; }
	.cmd,.flt,.inf,.edg{ flex:1 1 0; min-height:0; }
	.cmd > *,.flt > *,.inf > *,.edg > *{ min-height:0; }
	.w-top{ row-gap:.9rem; }
	.w-tabs{ order:3; width:100%; justify-content:space-between; margin:0; }
	.w-tab{ flex:1 1 0; justify-content:center; padding:0 .6rem; }

	.cmd{ grid-template-rows:auto auto auto minmax(0, 1fr); }
	.cmd-status{ padding-top:2rem; padding-bottom:2rem; }
	.cmd-headline{ font-size:2.9rem; }
	.cmd-time{ font-size:9.5rem; }

	.flt{ grid-template-rows:minmax(0, 1.05fr) auto minmax(0, 1fr); }
	.scope{ height:100%; width:auto; }
	.flt-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
	.flt-kpis .kpi{ padding:1rem; }
	.flt-kpis .kpi dt{ font-size:.82rem; letter-spacing:.1em; }
	.flt-kpis .kpi dd{ font-size:2rem; }
	.nodes{ grid-template-columns:repeat(2, minmax(0,1fr)); }

	.inf{ grid-template-rows:minmax(0, .82fr) minmax(0, 1fr) minmax(0, .5fr); }
	.inf-stats .kpi{ padding-top:1.1rem; padding-bottom:1.1rem; }
	.gauge{ container-type:size; }
	.gauge-dial{ flex:none; width:min(100cqw - 1rem, 100cqh - 7.2rem, 17rem); height:auto; --n:2.8rem; }

	.edg{ grid-template-rows:minmax(0, 1fr) auto auto minmax(0, .55fr) minmax(0, .75fr); }
	.edg-big{ font-size:4.8rem; }
}

/* Phones and small tablets: one scrolling column */
@media (max-width: 899px) and (orientation: landscape), (max-width: 699px), (orientation: portrait) and (max-height: 999px){
	.w-top{ gap:.8rem; }
	.w-brand__sub{ display:none; }
	.w-meta .w-clock,.w-meta .w-state{ display:none; }
	.w-tabs{ order:3; width:100%; margin:0; }
	.w-tab{ flex:1 0 auto; justify-content:center; padding:0 .75rem; font-size:.85rem; }
	.w-full{ display:none; }
	.w-short{ display:inline; }
	.w-tab__n{ display:none; }
	.w-tab{ padding:0 .7rem; }
	.kpi dt,.vital dt{ white-space:normal; line-height:1.25; }
	.inf-stats{ grid-template-columns:minmax(0,1fr); }
	.cores{ min-height:6rem; }
	.up-big{ font-size:1.8rem; }
	.ev{ grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"time tag . ." "txt txt txt val"; row-gap:.35rem; column-gap:.7rem; }
	.ev-time{ grid-area:time; } .ev-tag{ grid-area:tag; } .ev-val{ grid-area:val; justify-self:end; align-self:start; } .ev-txt{ grid-area:txt; white-space:normal; }

	.cmd-time{ font-size:5.6rem; }
	.cmd-headline{ font-size:1.9rem; gap:.8rem; }
	.cmd-zones{ grid-template-columns:repeat(2, minmax(0,1fr)); }
	.cmd-stream{ min-height:24rem; max-height:34rem; }
	.cmd-status .w-radar{ width:26rem; height:26rem; }

	.flt-kpis .kpi dd,.cmd-vitals .vital dd,.edg-kpis .kpi dd{ font-size:1.7rem; }
	.kpi dt,.vital dt{ font-size:.78rem; letter-spacing:.1em; }
	.nodes{ grid-template-columns:minmax(0,1fr); }
	.scope{ width:100%; }

	.inf-gauges{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem; }
	.gauge{ padding:1rem .5rem; gap:.6rem; }
	.gauge-dial{ --n:1.9rem; }
	.gt:not(.gt--major):not(.gt--red){ display:none; }
	.gauge-l{ font-size:.72rem; letter-spacing:.12em; }
	.gauge-s{ font-size:.75rem; }
	.inf-net{ min-height:21rem; }
	.net-wrap{ min-height:13rem; }
	.net-head .lg b{ font-size:1.05rem; }

	.edg-map{ min-height:14rem; }
	.edg-big{ font-size:3rem; }
	.edg-hours{ min-height:13rem; }
	.countries{ max-height:30rem; }

	.nf-code{ font-size:7rem; }
	.nf-title{ font-size:1.7rem; }
	.nf-tiles{ grid-template-columns:minmax(0,1fr); }
	.nf-tile{ min-height:0; }
	.nf .w-radar{ width:28rem; height:28rem; }
}


/* Motion ------------------------------------------------------------------ */

@keyframes w-spin   { to { transform:rotate(360deg); } }
@keyframes w-ping   { 0% { transform:scale(1); opacity:.9; } 80% { opacity:0; } 100% { transform:scale(3.6); opacity:0; } }
@keyframes w-blink  { 50% { opacity:.25; } }
@keyframes w-in     { from { opacity:0; transform:translateY(-.6rem); } to { opacity:1; transform:none; } }
@keyframes w-flash  { 0% { background:rgba(255,255,255,.07); } 100% { background:transparent; } }
@keyframes w-ev-in   { from { opacity:0; transform:translateY(-.5rem); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:none; clip-path:inset(0 0 0 0); } }
@keyframes w-ev-bg   { 0% { background:rgba(var(--lvl-rgb), .10); } 100% { background:transparent; } }
@keyframes w-ev-sweep{ 0% { transform:translateX(-110%); opacity:1; } 85% { opacity:1; } 100% { transform:translateX(290%); opacity:0; } }
@keyframes w-tag-flash{ 0% { color:var(--ink); border-color:rgba(var(--lvl-rgb), .95); background:rgba(var(--lvl-rgb), .22); box-shadow:0 0 .8rem rgba(var(--lvl-rgb), .35); } 100% { color:var(--muted); border-color:var(--line); background:transparent; box-shadow:none; } }
@keyframes w-dot-ping{ 0% { box-shadow:0 0 0 0 rgba(var(--lvl-rgb), .75); } 100% { box-shadow:0 0 0 .75em rgba(var(--lvl-rgb), 0); } }
@keyframes w-ripple { 0% { r:2; opacity:.95; } 100% { r:11; opacity:0; } }
@keyframes w-grow   { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes w-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes w-glow-core { 0% { opacity:1; transform:scale(1.45); } 12% { opacity:.62; transform:scale(1); } 100% { opacity:.62; transform:scale(1); } }
@keyframes w-glow-halo { 0% { opacity:1; transform:scale(1.75); } 15% { opacity:.4; transform:scale(1); } 100% { opacity:.4; transform:scale(1); } }
@keyframes w-glow-text { 0% { fill:var(--ink); } 15% { fill:var(--muted); } 100% { fill:var(--muted); } }
@keyframes w-glow-wait { 0% { stroke:var(--ink); } 15% { stroke:var(--quiet); } 100% { stroke:var(--quiet); } }

/* Honour a computer's "reduce motion" setting unless Settings → Console
   Front → "Animate on every computer" is on (body.w-motion-always). */
@media (prefers-reduced-motion: reduce){
	body:not(.w-motion-always) .w-radar i,body:not(.w-motion-always) .scope-sweep{ display:none; }
	body:not(.w-motion-always) .w-dot::after{ animation:none; opacity:0; }
	body:not(.w-motion-always) .ev.is-new,body:not(.w-motion-always) .ev.is-new::after,body:not(.w-motion-always) .ev.is-new .ev-tag,body:not(.w-motion-always) .ev.is-new .ev-txt::before,body:not(.w-motion-always) .bars span,body:not(.w-motion-always) .country-bar span{ animation:none; }
	body:not(.w-motion-always) .ev.is-new::after{ display:none; }
	body:not(.w-motion-always) .bars span.is-now{ animation:none; }
	body:not(.w-motion-always) .cmd-stream .live-tag i::after{ animation:none; opacity:0; }
	body:not(.w-motion-always) .live-tag i,body:not(.w-motion-always) .blip.is-bad circle.core,body:not(.w-motion-always) .node.is-bad i{ animation:none; }
	body:not(.w-motion-always) .blip .core,body:not(.w-motion-always) .blip .halo,body:not(.w-motion-always) .blip text{ animation:none !important; opacity:1 !important; }
	body:not(.w-motion-always) .gauge .gauge-val,body:not(.w-motion-always) .gauge .gauge-flag i{ animation:none; }
}
.w-still .w-radar i,.w-still .scope-sweep{ display:none; }
.w-still .blip .core,.w-still .blip .halo,.w-still .blip text{ animation:none !important; opacity:1 !important; }
.w-still .w-dot::after{ animation:none; opacity:0; }
.w-still .gauge .gauge-val{ animation:none; }
body[data-state="offline"] .w-radar i,body[data-state="offline"] .scope-sweep{ animation-play-state:paused; opacity:.4; }
body[data-state="offline"] .blip .core,body[data-state="offline"] .blip .halo,body[data-state="offline"] .blip text{ animation-play-state:paused; }

/* ------------------------------------------------------------------------
   Eight tabs (Home + seven screens). On wall layouts the bar keeps one row:
   short names on 16:9 monitors, full names again on ultra-wide ones.
   ------------------------------------------------------------------------ */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px){
	.w-tab{ padding:0 .8rem; gap:.42rem; }
	.w-full{ display:none; }
	.w-short{ display:inline; }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px) and (min-aspect-ratio: 2/1){
	.w-tab{ padding:0 1rem; gap:.55rem; }
	.w-full{ display:inline; }
	.w-short{ display:none; }
}
@media (orientation: portrait) and (min-width: 700px) and (min-height: 1000px){
	.w-tab{ padding:0 .3rem; gap:.35rem; font-size:.86rem; }
	.w-full{ display:none; }
	.w-short{ display:inline; }
}
/* Set by wall.js when the bar would still wrap or scroll. */
.w-nav-tight .w-tab__n{ display:none; }
.w-nav-tight .w-tab{ padding:0 .62rem; }

/* ------------------------------------------------------------------------
   Screen cycle (cycle.js). The button sits at the start of the top bar's
   right side; while cycling, its ring and a line under the current tab fill
   over the time this screen stays up. Screens cross-fade into each other
   where the browser supports it (Chrome, Edge, Safari).
   ------------------------------------------------------------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; }

.w-cycle{
	display:inline-flex; align-items:center; gap:.5rem; min-height:2.6rem; padding:0 .95rem 0 .7rem;
	border:1px solid var(--line); border-radius:.62rem; background:rgba(255,255,255,.02); color:var(--muted);
	font:inherit; font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .3s ease;
}
.w-cycle:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:var(--ink); }
.w-cycle:focus-visible{ outline:2px solid var(--mcm-accent); outline-offset:3px; }
.w-cycle[hidden]{ display:none; }
.cyc-ico{ width:1.35rem; height:1.35rem; flex:none; overflow:visible; }
.cyc-track{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.4; }
.cyc-fill{ fill:none; stroke:var(--mcm-status); stroke-width:1.8; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:10px 10px; }
.cyc-play{ fill:currentColor; }
.cyc-pause{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; display:none; }
.w-cycle.is-on{ color:var(--ink); border-color:rgba(var(--mcm-status-rgb), .55); background:rgba(var(--mcm-status-rgb), .1); box-shadow:0 0 1.1rem rgba(var(--mcm-status-rgb), .22); }
.w-cycle.is-on .cyc-play{ display:none; }
.w-cycle.is-on .cyc-pause{ display:inline; }
.w-cycling .w-cycle .cyc-fill{ animation:cyc-fill var(--cycle, 10s) linear forwards; filter:drop-shadow(0 0 .25rem rgba(var(--mcm-status-rgb), .8)); }
.w-cycling .w-tab[aria-current="page"]{ position:relative; overflow:hidden; }
.w-cycling .w-tab[aria-current="page"]::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:3px; transform-origin:left; transform:scaleX(0);
	background:var(--mcm-status); box-shadow:0 0 .6rem rgba(var(--mcm-status-rgb), .9);
	animation:cyc-line var(--cycle, 10s) linear forwards;
}
.w-cycle-paused .w-cycle .cyc-fill,.w-cycle-paused .w-tab[aria-current="page"]::after{ animation-play-state:paused; }
@keyframes cyc-fill{ to { stroke-dashoffset:0; } }
@keyframes cyc-line{ to { transform:scaleX(1); } }

/* Standard widescreen monitors: icon only, so the eight tabs keep their
   numbers. Ultra-wide and portrait monitors have room for the label. */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px) and (max-aspect-ratio: 199/100){
	.w-cycle{ padding:0 .62rem; }
	.w-cycle .cyc-l{ display:none; }
}

/* Phones: icon only. */
@media (max-width: 899px) and (orientation: landscape), (max-width: 699px), (orientation: portrait) and (max-height: 999px){
	.w-cycle{ padding:0 .7rem; }
	.w-cycle .cyc-l{ display:none; }
}