/* ------------------------------------------------------------------------
   M. Curtis McCoy — Build wall screens 5–7 (Shield, Uptime, Upkeep)
   Loads after wall.css on screens 5–7 only and uses its tokens,
   panels, KPI tiles, legend, event rows, country bars and layout rules.
   Same sizing: 1rem follows the screen's short side.
   ------------------------------------------------------------------------ */

/* Shared ----------------------------------------------------------------- */

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

.x-off{
	display:none; position:absolute; left:50%; top:50%; z-index:4; transform:translate(-50%,-50%);
	align-items:center; gap:.7rem; margin:0; padding:.8rem 1.2rem;
	border:1px solid var(--line); border-radius:.8rem; background:rgba(8,9,10,.88);
	font-size:1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.is-off .x-off{ display:inline-flex; }

/* Stacked share bars with a key (responses, encryption, versions …) */
.mix{ display:flex; flex-direction:column; gap:1.15rem; }
.mix-row[hidden]{ display:none; }
.mix-row{ display:grid; grid-template-columns:8.4rem minmax(0,1fr); grid-template-areas:"h bar" ". key"; column-gap:1rem; row-gap:.5rem; align-items:center; }
.mix-h{ grid-area:h; margin:0; font-size:.88rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.stack{ grid-area:bar; position:relative; display:flex; gap:2px; height:1.55rem; border-radius:.42rem; overflow:hidden; background:rgba(255,255,255,.04); }
.stack span{ min-width:3px; height:100%; transform-origin:left; animation:w-grow-x 1s cubic-bezier(.2,.7,.2,1) both; }
.stack::after{
	content:""; position:absolute; top:0; bottom:0; left:0; width:28%; pointer-events:none;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
	transform:translateX(-120%); animation:x-shine 8s ease-in-out infinite;
}
.mix-row:nth-child(2) .stack::after{ animation-delay:.9s; }
.mix-row:nth-child(3) .stack::after{ animation-delay:1.8s; }
.stack-key{ grid-area:key; display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:0; padding:0; list-style:none; font-size:.92rem; color:var(--muted); }
.stack-key li{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.stack-key i{ width:.62rem; height:.62rem; border-radius:2px; flex:none; }
.stack-key b{ color:var(--ink); font-weight:600; }

.lg-cert i{ background:var(--s1); }
.lg-dom i{ background:var(--warn); border-radius:1px; transform:rotate(45deg) scale(.82); }

/* =========================================================================
   05 · Shield
   ========================================================================= */

.shd-clock{ display:flex; flex-direction:column; overflow:hidden; }
.tclock{ position:relative; flex:1 1 auto; min-height:0; aspect-ratio:1 / 1; width:100%; max-width:100%; margin:0 auto; container-type:size; overflow:hidden; }
.tc-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.tc-grid circle{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:.35; }
.tc-grid circle.is-edge{ stroke:rgba(255,255,255,.13); }
.tc-grid line{ stroke:rgba(255,255,255,.14); stroke-width:.4; }
.tc-grid line.is-major{ stroke:rgba(255,255,255,.34); stroke-width:.6; }
.tc-grid text{ fill:var(--quiet); font-size:3.5px; font-weight:600; letter-spacing:.25px; font-family:var(--font); }
.tc-bar{ fill:rgba(var(--bad-rgb), .44); transition:fill 1.5s ease, filter 1.5s ease; }
.tc-bar.is-zero{ fill:rgba(255,255,255,.07); }
.tc-bar.is-now{ fill:url(#tc-stripes); animation:x-now 2.4s ease-in-out infinite; }
.tc-bar.is-hot{ fill:rgba(var(--bad-rgb), .98); filter:drop-shadow(0 0 2px rgba(var(--bad-rgb), .95)); transition:none; }
.tc-now line{ stroke:var(--ink); stroke-width:.45; stroke-dasharray:1 1.2; opacity:.75; }
.tc-now circle{ fill:var(--ink); }
.tc-sweep{
	position:absolute; inset:6.5%; border-radius:50%; pointer-events:none; will-change:transform;
	background:conic-gradient(from 0deg,
		rgba(var(--bad-rgb), 0) 0deg, rgba(var(--bad-rgb), 0) 296deg,
		rgba(var(--bad-rgb), .07) 352deg, rgba(var(--bad-rgb), .32) 359.4deg, rgba(var(--bad-rgb), 0) 360deg);
	-webkit-mask-image:radial-gradient(closest-side, transparent 42%, #000 44%);
	mask-image:radial-gradient(closest-side, transparent 42%, #000 44%);
}
.tc-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.tc-shield{ width:max(1.1rem, 6cqmin); height:max(1.1rem, 6cqmin); margin-bottom:.35em; fill:none; stroke:var(--mcm-status); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 .55rem rgba(var(--mcm-status-rgb), .6)); }
.tc-num{ font-size:max(1.7rem, 8.8cqmin); font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tc-l{ margin-top:.6em; font-size:max(.6rem, 1.85cqmin); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.tc-s{ margin-top:.35em; font-size:max(.62rem, 1.85cqmin); color:var(--quiet); white-space:nowrap; }

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

/* Rate limit strip — under the dial. One light per protected domain; the
   lights run left to right each time the sweep crosses midnight. */
.shd-rl{ flex:none; margin-top:.9rem; padding:.8rem 1rem .85rem; border:1px solid var(--line); border-radius:calc(var(--r) * .7); background:rgba(255,255,255,.022); }
.shd-rl[hidden]{ display:none; }
.rl-top{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem .8rem; }
.rl-name{ font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.rl-state{ display:inline-flex; align-items:center; gap:.45em; padding:.18em .6em; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mcm-status); background:rgba(var(--mcm-status-rgb), .12); border:1px solid rgba(var(--mcm-status-rgb), .35); }
.rl-state::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:currentColor; box-shadow:0 0 .55em currentColor; animation:x-now 2.4s ease-in-out infinite; }
.shd-rl.is-off .rl-state{ color:var(--quiet); background:rgba(255,255,255,.05); border-color:var(--line); }
.shd-rl.is-off .rl-state::before{ animation:none; box-shadow:none; }
.rl-of{ font-size:.86rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.rl-facts{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; margin-left:auto; font-size:.8rem; color:var(--muted); }
.rl-facts em{ font-style:normal; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.rl-facts [hidden]{ display:none; }
.rl-pips{ display:flex; gap:.3rem; height:.55rem; margin-top:.7rem; }
.rl-pip{ flex:1 1 0; min-width:.2rem; border-radius:2px; background:rgba(255,255,255,.08); transition:background-color 1.4s ease, box-shadow 1.4s ease; }
.rl-pip.is-on{ background:rgba(var(--mcm-status-rgb), .62); box-shadow:0 0 .4rem rgba(var(--mcm-status-rgb), .3); }
.rl-pip.is-err{ background:rgba(var(--bad-rgb), .78); }
.rl-pip.is-own{ background:rgba(var(--mcm-status-rgb), .08); box-shadow:inset 0 0 0 1px rgba(var(--mcm-status-rgb), .75); }
.rl-pip.is-own.is-hot{ background:rgba(var(--mcm-status-rgb), .35); box-shadow:inset 0 0 0 1px var(--mcm-status), 0 0 .6rem rgba(var(--mcm-status-rgb), .7); }
.rl-pip.is-hot{ background:var(--mcm-status); box-shadow:0 0 .75rem rgba(var(--mcm-status-rgb), .95); transition:none; }
.rl-pip.is-err.is-hot{ background:var(--bad); box-shadow:0 0 .75rem rgba(var(--bad-rgb), .95); }
.shd-mix{ display:flex; flex-direction:column; }
.shd-origins{ display:flex; flex-direction:column; overflow:hidden; }
.x-threats .country-bar span{ background:rgba(var(--bad-rgb), .42); }
.x-threats .country.is-lit .country-bar span{ background:rgba(var(--bad-rgb), .92); box-shadow:0 0 1.1rem rgba(var(--bad-rgb), .5); }

/* =========================================================================
   06 · Uptime
   ========================================================================= */

.upt-hero{ display:flex; flex-direction:column; overflow:hidden; }
.upt-figure{ margin-top:.1rem; }
.upt-big{ margin:0; font-size:5.6rem; font-weight:500; line-height:1; letter-spacing:-.035em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.upt-big small{ margin-left:.12rem; font-size:.42em; font-weight:500; letter-spacing:0; color:var(--muted); }
.upt-sub{ margin:.6rem 0 0; font-size:1.05rem; color:var(--muted); }

.ekg{ position:relative; display:flex; flex-direction:column; flex:1 1 auto; min-height:7.5rem; margin:1.3rem 0 0; }
.ekg-svg{ flex:1 1 auto; width:100%; min-height:4.5rem; overflow:visible; clip-path:inset(0 100% 0 0); transition:clip-path 1.8s cubic-bezier(.3,.6,.2,1); }
.ekg.is-drawn .ekg-svg{ clip-path:inset(-20% -2% -20% 0); }
.ekg-line{ fill:none; stroke:var(--mcm-status); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(var(--mcm-status-rgb), .55)); }
.ekg-area{ fill:rgba(var(--mcm-status-rgb), .08); }
.ekg-dot{
	position:absolute; left:0; top:0; width:.72rem; height:.72rem; margin:-.36rem 0 0 -.36rem; border-radius:50%;
	background:var(--ink); opacity:0; pointer-events:none; transition:opacity .6s ease;
	box-shadow:0 0 0 .26rem rgba(var(--mcm-status-rgb), .22), 0 0 1.1rem rgba(var(--mcm-status-rgb), .95);
}
.ekg.is-drawn .ekg-dot{ opacity:1; }
.ekg-cap{ display:flex; justify-content:space-between; gap:1rem; margin-top:.55rem; font-size:.85rem; color:var(--quiet); white-space:nowrap; }

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

.upt-map{ display:flex; flex-direction:column; overflow:hidden; }
.hm-wrap{ position:relative; flex:1 1 auto; min-height:0; }
.hm{
	height:100%; display:grid;
	grid-template-columns:4.9em repeat(24, minmax(0,1fr)) 4.6em;
	grid-auto-rows:minmax(.55rem, 1fr);
	gap:3px; font-size:.86rem;
}
.hm-h{ align-self:end; padding-bottom:.3rem; font-size:.8rem; color:var(--quiet); white-space:nowrap; overflow:visible; }
.hm-hp{ text-align:right; }
.hm-l{ align-self:center; font-weight:600; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.hm-p{ align-self:center; text-align:right; color:var(--muted); white-space:nowrap; }
.hm-p.is-warn{ color:var(--warn); }
.hm-c{ display:block; min-height:.4rem; border-radius:3px; background:rgba(var(--ok-rgb), .5); transition:background-color 1.4s ease, box-shadow 1.4s ease; }
.hm-c.is-warn{ background:rgba(var(--warn-rgb), .72); }
.hm-c.is-bad{ background:rgba(var(--bad-rgb), .85); }
.hm-c.is-none{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.hm-c.is-now{ background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 3px, transparent 3px 6px); }
.hm-c.is-hot{ background-color:rgba(var(--ok-rgb), 1); box-shadow:0 0 .7rem rgba(var(--ok-rgb), .75); transition:none; }
.hm-c.is-warn.is-hot{ background-color:var(--warn); box-shadow:0 0 .7rem rgba(var(--warn-rgb), .75); }
.hm-c.is-bad.is-hot{ background-color:var(--bad); box-shadow:0 0 .7rem rgba(var(--bad-rgb), .8); }
.hm-c.is-none.is-hot{ background-color:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.hm-scan{
	position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; pointer-events:none; opacity:0;
	background:linear-gradient(180deg, transparent, rgba(var(--ok-rgb), .95) 18%, rgba(var(--ok-rgb), .95) 82%, transparent);
	box-shadow:0 0 1rem rgba(var(--ok-rgb), .75);
	will-change:transform; transition:opacity .4s ease;
}
.hm-wrap.is-live .hm-scan{ opacity:1; }

.upt-inc{ display:flex; flex-direction:column; overflow:hidden; min-height:12rem; }
.upt-inc .events{ -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, #000 82%, transparent 100%); }
.upt-inc .ev{ font-size:1rem; }

/* =========================================================================
   07 · Upkeep
   ========================================================================= */

.upk-next{ display:flex; flex-direction:column; overflow:hidden; }
.cd{ position:relative; flex:1 1 auto; min-height:0; aspect-ratio:1 / 1; width:100%; max-width:100%; margin:0 auto; container-type:size; }
.cd-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:rotate(-90deg); }
.cd-ticks line{ stroke:rgba(255,255,255,.13); stroke-width:.8; transition:stroke .6s ease; }
.cd-ticks line.is-major{ stroke:rgba(255,255,255,.3); stroke-width:1.2; }
.cd-ticks line.is-on{ stroke:rgba(var(--s1-rgb), .85); }
.cd-bezel{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:.5; stroke-dasharray:.6 2.4; transform-origin:0 0; animation:w-spin 90s linear infinite; }
.cd-track{ fill:none; stroke:rgba(var(--s1-rgb), .1); stroke-width:5; }
.cd-val{ fill:none; stroke:var(--s1); stroke-width:5; stroke-linecap:round; stroke-dasharray:1000 1000; stroke-dashoffset:1000; filter:drop-shadow(0 0 5px rgba(var(--s1-rgb), .55)); transition:stroke-dashoffset 1s linear; }
.cd-head circle{ fill:var(--ink); filter:drop-shadow(0 0 4px rgba(var(--s1-rgb), .95)); }
.cd-head{ transform-origin:0 0; transition:transform 1s linear; }
.cd-head circle{ animation:x-head 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cd-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.cd-l{ font-size:max(.7rem, 3.3cqmin); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.cd-num{ margin-top:.35em; font-size:max(2rem, 12.5cqmin); font-weight:300; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cd-s{ margin-top:.55em; font-size:max(.78rem, 3.4cqmin); color:var(--quiet); white-space:nowrap; }
.cd-rows{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; margin:1rem 0 0; }
.cd-rows > div{ min-width:0; padding:.75rem .95rem; border:1px solid var(--line-soft); border-radius:.7rem; background:rgba(255,255,255,.02); }
.cd-rows dt{ font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-rows dd{ margin:.3rem 0 0; font-size:1.2rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

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

.upk-hz{ display:flex; flex-direction:column; overflow:hidden; }
.hz{ --name:8.6rem; position:relative; flex:1 1 auto; min-height:10rem; display:grid; grid-template-rows:auto minmax(3.4rem, 1fr) minmax(3.4rem, 1fr); gap:.65rem; }
.hz-axis{ position:relative; height:1.5rem; margin-left:var(--name); border-bottom:1px solid var(--line); font-size:.8rem; color:var(--quiet); }
.hz-axis span{ position:absolute; bottom:.35rem; transform:translateX(-50%); white-space:nowrap; }
.hz-axis span.is-today{ transform:none; color:var(--ink); font-weight:600; }
.hz-axis span.is-later{ color:var(--muted); }
.hz-axis i{ position:absolute; bottom:-1px; width:1px; height:.45rem; background:rgba(255,255,255,.18); }
.hz-lane{ display:grid; grid-template-columns:var(--name) minmax(0,1fr); min-height:0; }
.hz-name{ align-self:center; font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hz-track{ position:relative; min-height:0; border:1px solid var(--line-soft); border-radius:.55rem; background:rgba(255,255,255,.015); overflow:hidden; }
.hz-grid{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.045); }
.hz-win{ position:absolute; top:0; bottom:0; left:0; background:rgba(var(--warn-rgb), .07); border-right:1px dashed rgba(var(--warn-rgb), .4); }
.hz-later{ position:absolute; top:0; bottom:0; right:0; background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 4px, transparent 4px 9px); border-left:1px solid var(--line-soft); }
.hz-empty{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:.9rem; color:var(--quiet); white-space:nowrap; }
.hz-m{
	position:absolute; display:inline-flex; align-items:center; justify-content:center;
	height:1.35rem; min-width:2.15rem; padding:0 .35rem; margin-left:-1.075rem; border-radius:.4rem;
	font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--ink);
	background:rgba(var(--s1-rgb), .32); border:1px solid rgba(var(--s1-rgb), .8);
	transition:background-color 1.4s ease, box-shadow 1.4s ease, transform .9s cubic-bezier(.2,.7,.2,1);
	animation:x-pop .7s cubic-bezier(.2,.7,.2,1) both;
}
.hz-m.is-dom{ background:rgba(var(--warn-rgb), .22); border-color:rgba(var(--warn-rgb), .85); }
.hz-m.is-hot{ background:rgba(var(--s1-rgb), .95); box-shadow:0 0 1rem rgba(var(--s1-rgb), .8); transition:none; }
.hz-m.is-dom.is-hot{ background:rgba(var(--warn-rgb), .9); box-shadow:0 0 1rem rgba(var(--warn-rgb), .75); color:#0A0B0C; }
.hz-track.is-dense .hz-m{ min-width:.72rem; width:.72rem; height:.72rem; padding:0; margin-left:-.36rem; border-radius:50%; font-size:0; }
.hz-track.is-dense .hz-m.is-dom{ border-radius:2px; transform:rotate(45deg) scale(.86); }
.hz-more{
	position:absolute; top:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:.1rem;
	font-size:1.05rem; font-weight:600; line-height:1.1; color:var(--ink); white-space:nowrap; text-align:center;
}
.hz-more small{ font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hz-scan{
	position:absolute; top:1.9rem; bottom:0; left:0; width:2px; margin-left:-1px; pointer-events:none; opacity:0;
	background:linear-gradient(180deg, transparent, rgba(255,255,255,.85) 20%, rgba(255,255,255,.85) 80%, transparent);
	box-shadow:0 0 .9rem rgba(255,255,255,.5); will-change:transform; transition:opacity .4s ease;
}
.hz.is-live .hz-scan{ opacity:.85; }
.hz-note{ margin:.6rem 0 0; font-size:.85rem; color:var(--quiet); }

.upk-ver{ display:flex; flex-direction:column; }

.upk-sites{ display:flex; flex-direction:column; overflow:hidden; }
.tiles{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(9.4rem, 1fr)); gap:.5rem .6rem; align-content:start; overflow:hidden; }
.tile{
	display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.6rem;
	padding:.5rem .65rem; border:1px solid var(--line-soft); border-radius:.6rem; background:rgba(255,255,255,.02);
	font-size:1rem; transition:border-color .7s ease, background-color .7s ease;
}
.tile svg{ width:1.55rem; height:1.55rem; transform:rotate(-90deg); flex:none; }
.tile .rt{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:4; }
.tile .rv{ fill:none; stroke:var(--s1); stroke-width:4; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:100; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1), stroke .6s ease; }
.tile.is-stale .rv{ stroke:var(--warn); }
.tile b{ font-weight:600; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile em{ min-width:1.6rem; padding:.1rem .42rem; border:1px solid var(--line); border-radius:.35rem; font-size:.78rem; font-style:normal; font-weight:700; text-align:center; color:var(--muted); }
.tile em.is-due{ border-color:transparent; background:var(--warn); color:#0A0B0C; }
.tile.is-scan{ border-color:rgba(var(--s1-rgb), .65); background:rgba(var(--s1-rgb), .09); transition:none; }

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

@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px){
	.shd,.upt,.upk{ flex:1 1 0; min-height:0; }
	.shd > *,.upt > *,.upk > *{ min-height:0; }

	.shd{
		grid-template-columns:minmax(0, 1fr) minmax(0, 1.14fr);
		grid-template-rows:auto auto minmax(0, 1fr);
		grid-template-areas:"clock kpis" "clock mix" "clock origins";
	}
	.shd-clock{ grid-area:clock; } .shd-kpis{ grid-area:kpis; grid-template-columns:repeat(4, minmax(0,1fr)); } .shd-mix{ grid-area:mix; } .shd-origins{ grid-area:origins; }
	.shd-clock,.upk-next{ container-type:size; }
	.tclock{ flex:none; width:min(100cqw, 100cqh - 2.6rem); height:auto; margin:auto; }
	.shd-kpis .kpi dd,.upt-kpis .kpi dd,.upk-kpis .kpi dd{ font-size:2.1rem; }
	.shd-kpis .kpi dt,.upk-kpis .kpi dt{ font-size:.9rem; letter-spacing:.12em; }

	.upt{
		grid-template-columns:minmax(0, 1fr) minmax(0, 2.15fr);
		grid-template-rows:auto auto minmax(0, 1fr);
		grid-template-areas:"hero map" "kpis map" "inc map";
	}
	.upt-hero{ grid-area:hero; } .upt-kpis{ grid-area:kpis; } .upt-map{ grid-area:map; } .upt-inc{ grid-area:inc; min-height:0; }
	.upt-kpis .kpi{ padding:1rem 1.15rem; }
	.upt-kpis .kpi dt{ font-size:.86rem; letter-spacing:.1em; }
	.upt-kpis .kpi dd{ font-size:1.9rem; }

	.upk{
		grid-template-columns:minmax(0, .92fr) minmax(0, 2fr);
		grid-template-rows:auto minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas:"next kpis" "next hz" "ver sites";
	}
	.upk-next{ grid-area:next; } .upk-kpis{ grid-area:kpis; grid-template-columns:repeat(4, minmax(0,1fr)); } .upk-hz{ grid-area:hz; } .upk-ver{ grid-area:ver; } .upk-sites{ grid-area:sites; }
	.cd{ flex:none; width:min(100cqw, 100cqh - 9.6rem); height:auto; margin:auto; }
}

@media (orientation: portrait) and (min-width: 700px) and (min-height: 1000px){
	.shd,.upt,.upk{ flex:1 1 0; min-height:0; }
	.shd > *,.upt > *,.upk > *{ min-height:0; }

	.shd{ grid-template-rows:minmax(0, 1.2fr) auto auto minmax(0, .8fr); }
	.shd-clock{ container-type:size; }
	.tclock{ flex:none; width:min(100cqw, 100cqh - 2.6rem); height:auto; margin:auto; }
	.shd-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
	.shd-kpis .kpi,.upt-kpis .kpi,.upk-kpis .kpi{ padding:1rem; }
	.shd-kpis .kpi dt,.upt-kpis .kpi dt,.upk-kpis .kpi dt{ font-size:.8rem; letter-spacing:.1em; }
	.shd-kpis .kpi dd,.upt-kpis .kpi dd,.upk-kpis .kpi dd{ font-size:1.9rem; }

	.upt{ grid-template-rows:auto auto minmax(0, 1fr) minmax(0, .42fr); }
	.upt-hero{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows:auto 1fr; column-gap:1.6rem; }
	.upt-hero .panel-head{ grid-column:1 / -1; }
	.upt-hero .ekg{ margin-top:0; min-height:8rem; }
	.upt-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }

	.upk{ grid-template-rows:minmax(0, .95fr) auto minmax(0, .8fr) auto minmax(0, .7fr); }
	.upk-next{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows:auto minmax(0,1fr); column-gap:1.4rem; }
	.upk-next .panel-head{ grid-column:1 / -1; }
	.cd{ height:100%; width:auto; }
	.cd-rows{ grid-template-columns:minmax(0,1fr); align-content:center; margin:0; }
	.upk-kpis{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* Dial makes room for the rate limit strip on wall layouts. */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 540px), (orientation: portrait) and (min-width: 700px) and (min-height: 1000px){
	.shd-clock.has-rl .tclock{ width:min(100cqw, 100cqh - 7.6rem); }
}

/* Phones and small tablets: one scrolling column */
@media (max-width: 899px) and (orientation: landscape), (max-width: 699px), (orientation: portrait) and (max-height: 999px){
	.tclock{ width:100%; }
	.shd-kpis .kpi dd,.upt-kpis .kpi dd,.upk-kpis .kpi dd{ font-size:1.7rem; }
	.shd-origins .countries{ max-height:30rem; }
	.mix-row{ grid-template-columns:minmax(0,1fr); grid-template-areas:"h" "bar" "key"; }

	.upt-big{ font-size:4rem; }
	.ekg{ min-height:7rem; }
	.hm{ grid-auto-rows:1.05rem; grid-template-columns:4.7em repeat(24, minmax(0,1fr)) 4.3em; gap:2px; font-size:.72rem; }
	.hm-l{ letter-spacing:.01em; }
	.hm-h{ font-size:.68rem; }
	.hm-c{ border-radius:2px; }
	.upt-map .legend{ font-size:.78rem; gap:.3rem .8rem; }
	.upt-inc{ min-height:0; }
	.upt-inc .events{ max-height:26rem; }

	.cd{ width:min(100%, 24rem); }
	.hz{ --name:6.2rem; min-height:13rem; }
	.hz-name{ font-size:.72rem; letter-spacing:.08em; }
	.hz-axis span.is-odd{ display:none; }
	.tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

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

@keyframes x-shine{ 0%, 62% { transform:translateX(-120%); } 88%, 100% { transform:translateX(420%); } }
@keyframes x-now{ 0%, 100% { opacity:.75; } 50% { opacity:1; } }
@keyframes x-pop{ from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes x-head{ 0%, 100% { transform:scale(1); } 50% { transform:scale(1.35); } }

@media (prefers-reduced-motion: reduce){
	body:not(.w-motion-always) .stack span,body:not(.w-motion-always) .stack::after,
	body:not(.w-motion-always) .tc-bar.is-now,body:not(.w-motion-always) .cd-bezel,
	body:not(.w-motion-always) .cd-head circle,body:not(.w-motion-always) .hz-m{ animation:none; }
	body:not(.w-motion-always) .stack::after{ display:none; }
	body:not(.w-motion-always) .tc-sweep,body:not(.w-motion-always) .hm-scan,body:not(.w-motion-always) .hz-scan,body:not(.w-motion-always) .ekg-dot{ display:none; }
	body:not(.w-motion-always) .ekg-svg{ transition:none; }
}
.w-still .rl-state::before,.w-still .stack span,.w-still .stack::after,.w-still .tc-bar.is-now,.w-still .cd-bezel,.w-still .cd-head circle,.w-still .hz-m{ animation:none; }
.w-still .stack::after,.w-still .tc-sweep,.w-still .hm-scan,.w-still .hz-scan,.w-still .ekg-dot{ display:none; }
.w-still .ekg-svg{ transition:none; }
body[data-state="offline"] .tc-sweep,body[data-state="offline"] .hm-scan,body[data-state="offline"] .hz-scan{ opacity:.25; }