/* nodash analytics wall slide (/wall/analytics/web). 10-13 evening (owner: "more fancy looking for tv display"): a 1920x1080 stage
   zoomed to fit, like the Overview slide; the browser page with the detail is the app's Web tab. Dark only, the Overview palette.
   Motion budget for the Pi: count-up and draw-in once per page load, then only CSS opacity/transform pulses (a few) and the ticker. */
:root{--bg:#07121f;--panel:#0f2236;--tile:#13304b;--line:rgba(160,190,220,.14);--fg:#e8eef5;--fg2:#b9c8d8;--mut:#8ea6bf;
  --accent:#ffb26b;--blue:#6fb7ff;--ok:#5ed6a0;--warn:#ffc857;--bad:#ff6b6b;--violet:#b49bff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden}
body{display:flex;align-items:center;justify-content:center;color:var(--fg);font-family:Mulish,system-ui,sans-serif}
body:not(.app){cursor:none}
.stage{position:relative;width:1920px;height:1080px;flex:none;overflow:hidden;padding:34px 46px 30px;display:flex;flex-direction:column;gap:18px;
  background:radial-gradient(900px 520px at 12% 40%,rgba(111,183,255,.08),transparent 65%),
             radial-gradient(1100px 600px at 95% -10%,rgba(255,178,107,.07),transparent 60%),var(--bg)}
h2{margin:0;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:800}
.h2row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.meta{font-size:15px;color:var(--mut)}
header{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:16px}
.b1{font-size:36px;font-weight:900;letter-spacing:-.01em}
.b2{font-size:16px;color:var(--mut);font-weight:600;letter-spacing:.06em}
.hr{display:flex;align-items:center;gap:16px}
.upd{font-size:15px;color:var(--mut)}
.pill,.livepill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;font-size:16px;font-weight:800}
.pill{background:rgba(255,200,87,.13);color:#ffd27a}
.pill i{width:9px;height:9px;border-radius:50%;background:currentColor}
.livepill{background:rgba(94,214,160,.13);color:#8fe6bd}
.livepill i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.8s ease-in-out infinite}
[hidden]{display:none!important}
@keyframes pulse{50%{opacity:.3}}

main{flex:1;min-height:0;display:grid;grid-template-columns:520px minmax(0,1fr) minmax(0,1fr);gap:18px}
.panel,.hero,.small{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--panel);border:1px solid var(--line);border-radius:20px;
  position:relative;overflow:hidden}

/* the map */
.mapp{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
#map{flex:1;min-height:0;width:100%}
.nw{fill:#10283f;stroke:rgba(111,183,255,.55);stroke-width:2.2;stroke-linejoin:round}
.city{fill:var(--blue)}
.city-glow{fill:url(#cityGlow)}
.city-top{animation:cityPulse 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes cityPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.city-l{font:800 30px Mulish,system-ui,sans-serif;fill:var(--fg);paint-order:stroke;stroke:#07121f;stroke-width:7px;stroke-linejoin:round}
.city-n{font:800 26px Mulish,system-ui,sans-serif;fill:var(--blue);paint-order:stroke;stroke:#07121f;stroke-width:6px}
.map-foot{font-size:16px;color:var(--mut);font-weight:700;display:flex;justify-content:space-between;white-space:nowrap}

/* the two big ones */
.hero{padding:22px 26px 20px;display:flex;flex-direction:column;gap:10px;--c:var(--blue)}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c),transparent 80%)}
.hero::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(closest-side,var(--c),transparent);opacity:.09;pointer-events:none}
.hh{display:flex;justify-content:space-between;align-items:baseline}
.hh h2{font-size:17px;color:var(--fg2)}
.dom{font-size:15px;color:var(--mut)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:#8fe6bd}
.live i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.8s ease-in-out infinite}
.hnum{display:flex;align-items:flex-end;gap:22px;min-width:0}
.hnum .lead{display:flex;flex-direction:column;gap:10px;min-width:0}
.bigrow{display:flex;align-items:flex-start;gap:16px}
.bigrow .delta{margin-top:10px}
.big{font-size:150px;font-weight:900;line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 10%,var(--c) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--c) 35%,transparent))}
.bigl{font-size:17px;color:var(--mut);font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:12px}
.delta{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:900;padding:5px 12px;border-radius:999px;background:var(--tile);color:var(--fg2);white-space:nowrap}
.delta.up{color:#8fe6bd;background:rgba(94,214,160,.13);box-shadow:0 0 18px rgba(94,214,160,.18)}
.delta.down{color:#ff9d9d;background:rgba(255,107,107,.12)}
.kv{display:flex;gap:26px;margin-left:auto;margin-bottom:4px}
.kv div{display:flex;flex-direction:column;align-items:flex-end}
.kv b{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums}
.kv span{font-size:13px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.area{flex:1;min-height:0;position:relative}
.area svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.area .ln{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--c))}
.area .ln.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.8s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.area .fl{opacity:0;animation:fadein 1.2s ease-out 1s forwards}
.area .fl.now{opacity:1;animation:none}
@keyframes fadein{to{opacity:1}}
.area .today{fill:var(--c);animation:pulse 2.4s ease-in-out infinite}
.ax{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);font-weight:700}
.toprow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:end}
.top{min-width:0}
.top{font-size:13px;color:var(--mut);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.top b{display:block;margin-top:4px;font-size:21px;color:var(--fg);letter-spacing:0;text-transform:none;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix{display:flex;height:12px;border-radius:999px;overflow:hidden;margin-top:8px;background:var(--tile)}
.mix i{display:block;height:100%}
.mixl{display:flex;gap:14px;margin-top:7px;font-size:14px;color:var(--fg2);font-weight:700;flex-wrap:wrap;text-transform:none;letter-spacing:0}
.mixl span{white-space:nowrap}
.mixl span{display:inline-flex;align-items:center;gap:6px}
.mixl span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--d)}

/* right now */
.ticker{height:56px;flex:none;display:flex;align-items:center;gap:18px;padding:0 22px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(94,214,160,.08),transparent 40%),var(--panel)}
.tk-l{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#8fe6bd;flex:none}
.tk-l i{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.8s ease-in-out infinite}
.ticker.quiet .tk-l{color:var(--mut)}.ticker.quiet .tk-l i{background:#51657a;box-shadow:none;animation:none}
.tk-t{font-size:21px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .5s}
.tk-t.out{opacity:0}
.tk-t em{font-style:normal;color:var(--mut);font-weight:600}
.tk-t b{color:var(--c,var(--blue))}

/* the four small ones */
.smalls{height:190px;flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.small{padding:16px 20px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;column-gap:18px;row-gap:4px}
.small h2{grid-column:1/-1;font-size:14px;display:flex;justify-content:space-between}
.small .snum{font-size:66px;font-weight:900;line-height:.9;font-variant-numeric:tabular-nums;align-self:center}
.small .sd{font-size:15px;font-weight:800;color:var(--fg2);align-self:center}
.small .sd.up{color:#8fe6bd}.small .sd.down{color:#ff9d9d}
.small .spark{grid-column:1/-1;height:46px;position:relative}
.small .spark svg{position:absolute;inset:0;width:100%;height:100%}
.small .spark .ln{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round}
.small .sub{grid-column:2;grid-row:2;align-self:center;font-size:14px;color:var(--mut);font-weight:700;text-align:right}
.err{color:var(--warn);font-size:18px;font-weight:700}
.rs{color:var(--mut);font-size:22px;padding:30px}