:root{--bg:#0e1319;--panel:#161d26;--line:#2a3441;--fg:#dfe6ee;--mut:#8a97a8;--acc:#4da3ff;--ok:#3ccf6e;--bad:#ff5d5d}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}
body{display:flex;flex-direction:column}
#bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{margin-right:8px;letter-spacing:.3px}
#tabs{display:flex;gap:4px;flex-wrap:wrap}
#tabs button.on,#tools button.on{background:var(--acc);color:#06101c;border-color:var(--acc)}
.grow{flex:1}
button{background:#1d2733;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
button:hover{border-color:var(--acc)}button.ghost{background:transparent}
button.danger{border-color:var(--bad);color:var(--bad)}
.chk{color:var(--mut);display:flex;gap:4px;align-items:center}
.badge{background:var(--bad);color:#fff;border-radius:9px;padding:0 6px;font-size:12px;margin-left:4px}
.badge.zero{background:#3a4656}
#tools{display:flex;gap:6px;padding:6px 12px;background:#121922;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
#tools[hidden]{display:none}.sep{width:1px;height:20px;background:var(--line)}
.hint{color:var(--mut)}
main{position:relative;flex:1;min-height:0}
#cy{position:absolute;inset:0}
#tray,#panel{position:absolute;top:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow:auto;max-height:calc(100% - 16px)}
#tray{left:8px;width:260px}#tray h3,#panel h3{margin:0 0 4px}
#tray ul{list-style:none;margin:8px 0 0;padding:0}
#tray li{padding:6px 8px;margin:4px 0;border:1px solid var(--line);border-radius:6px;cursor:grab;background:#1a232e}
#tray li small{color:var(--mut);display:block}
#panel{right:8px;width:300px}
#panel dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:8px 0}#panel dt{color:var(--mut)}#panel dd{margin:0;word-break:break-all}
#panel .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.muted{color:var(--mut);margin:0}
#legend{position:absolute;left:8px;bottom:8px;display:flex;gap:10px;flex-wrap:wrap;background:#0e1319cc;padding:6px 10px;border-radius:8px;font-size:12px;color:var(--mut);max-width:calc(100% - 16px)}
#legend i{display:inline-block;width:22px;height:0;border-top:3px solid;vertical-align:middle;margin-right:5px}
#msg{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:8px;opacity:0;transition:opacity .2s;pointer-events:none}
#msg.show{opacity:1}#msg.err{border-color:var(--bad)}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:10px;min-width:300px}
dialog::backdrop{background:#0008}
dialog label{display:block;margin:8px 0 2px;color:var(--mut)}
dialog input,dialog select{width:100%;padding:6px 8px;background:#0e1319;color:var(--fg);border:1px solid var(--line);border-radius:6px;font:inherit}
dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:14px 0 0}
body.view .edit-only{display:none!important}
body.kiosk #bar,body.kiosk #tools,body.kiosk #legend{display:none}
@media (max-width:700px){
  #panel{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:45%}
  #tray{width:calc(100% - 16px);max-height:40%}
  #legend{display:none}
}

/* two tickers along the bottom: HEALTH (left to right) above ALARMS (right to left); hover pauses */
.ticker{display:flex;align-items:stretch;height:30px;background:#0b1016;border-top:1px solid var(--line);font-size:13px;overflow:hidden}
.ticker .tl{display:flex;align-items:center;padding:0 12px;background:#1d2733;color:var(--mut);font-weight:700;letter-spacing:.5px;white-space:nowrap;min-width:96px;justify-content:center}
.ticker.alert .tl{background:var(--bad);color:#fff}
.ticker.warn .tl{background:#e0a21a;color:#201400}
.ticker .tv{flex:1;overflow:hidden;position:relative}
.ticker .tt{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform;animation:tick var(--dur,40s) linear infinite}
.ticker.rev .tt{animation-name:tickrev}
.ticker.rev .tl,.ticker.rev.alert .tl,.ticker.rev.warn .tl{background:#a67c00;color:#fff8dc} /* HEALTH label: dark yellow in every state (the symbol in its text shows the severity) */
.ticker.rev{flex-direction:row-reverse} /* HEALTH scrolls toward the right, so its label sits at the right end */
.ticker .tv:hover .tt{animation-play-state:paused}
.ticker .tt span{padding:0 28px;position:relative}
.ticker .tt span::after{content:"•";position:absolute;right:-3px;color:var(--mut)}
.ticker .tt .alert{color:#ff8f8f;font-weight:600}
.ticker .tt .warn{color:#ffd77a}
.ticker .tt .ok{color:#8fe3a8}
@keyframes tick{from{transform:translateX(var(--from,100%))}to{transform:translateX(-100%)}}
@keyframes tickrev{from{transform:translateX(-100%)}to{transform:translateX(var(--from,100%))}}
@media (prefers-reduced-motion:reduce){.ticker .tt{animation:none;position:static;overflow:auto}}
body.kiosk #healthBtn{display:none}

/* full Health screen */
#health,#events{position:fixed;inset:0;z-index:50;background:#000a;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px}
#health[hidden],#events[hidden]{display:none}
#health .hbox,#events .hbox{background:#10161d;border:1px solid var(--line);border-radius:12px;width:min(1180px,100%);padding:14px 18px 20px}
#health header,#events header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#health h2,#events h2{margin:0;font-size:18px}#health h2 small,#events h2 small{color:var(--mut);font-weight:400;font-size:12px;margin-left:8px}
.hgrid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:900px){.hgrid{grid-template-columns:1fr}}
.htab{width:100%;border-collapse:collapse;background:#161d26;border-radius:8px;overflow:hidden}
.htab th{color:var(--mut);font-weight:600;text-align:left;padding:8px 12px;font-size:12px}
.htab td{padding:8px 12px;border-top:1px solid #1f2833}
.htab tr.bad td{background:#3a1a1f}.htab tr.warn td{background:#3a2f14}
.htab td:first-child{font-weight:700;color:#7db7f0;border-left:5px solid #2d6da3}
.htab tr.bad td:first-child{border-left-color:#c62828}.htab tr.warn td:first-child{border-left-color:#e0a21a}
.c-ok{color:#5be37d}.c-bad{color:#ff6b6b}.c-warn{color:#ffb84d}.c-mut{color:var(--mut)}
.hsec{margin:16px 0 8px;font-size:15px;color:#7db7f0}
.tiles{display:flex;gap:10px;flex-wrap:wrap}
.tile{background:#2e2112;border-left:5px solid #e0a21a;border-radius:6px;padding:9px 14px;min-width:210px}
.tile b{display:block;color:#7db7f0}.tile .t1{color:#ffb84d;font-size:12px}.tile .t2{margin-top:3px}.tile .t3{color:#ffb84d;font-size:12px}
.plist{background:#161d26;border-radius:8px;overflow:hidden}
.prow{display:grid;grid-template-columns:minmax(0,1.5fr) 130px minmax(0,1.6fr) minmax(0,1.3fr);gap:10px;align-items:center;padding:7px 12px;border-top:1px solid #1f2833}
.prow:first-child{border-top:none}
.prow.alert{background:#3a1a1f;border-left:5px solid #c62828}.prow.warn{background:#2e2a14;border-left:5px solid #e0a21a}
.prow a,.tile a{color:#7db7f0;text-decoration:none}.prow a:hover,.tile a:hover{text-decoration:underline}
.chip{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11px;font-weight:700;color:#201400;background:#e0a21a;text-align:center}
.chip.alert{background:#ff6b6b;color:#2a0000}
@media (max-width:700px){.prow{grid-template-columns:1fr 1fr}}
/* hover / pinned traffic graph */
#hover{position:absolute;z-index:20;width:480px;height:330px;min-width:340px;min-height:230px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);background:#b4bac3;color:#1c232b;border:1px solid #8a93a0;border-radius:10px;padding:10px 12px;box-shadow:0 8px 28px #000a;resize:both;overflow:hidden;display:flex;flex-direction:column}
#hover .inner{flex:1;min-height:0;display:flex;flex-direction:column}
#hover .graph{flex:1;min-height:0;display:flex;flex-direction:column}
.graph .cw{flex:1;min-height:110px;position:relative}
.graph .cw svg{position:absolute;inset:0;width:100%;height:100%}
.sidegraph .cw{height:170px;flex:none}
#hover[hidden]{display:none}
.graph .gh{display:flex;align-items:center;gap:8px;padding-right:34px}
.graph .gh b{font-size:15px;line-height:1.2}
.graph .sub{color:var(--mut);font-size:12px;margin-top:2px}
.graph .cam{margin-left:auto;padding:2px 6px;display:inline-flex;align-items:center;line-height:1}
.graph .rng{display:flex;gap:4px;margin:8px 0 4px}
.graph .rng button{padding:3px 9px;font-size:12px}.graph .rng button.on{background:var(--acc);color:#06101c;border-color:var(--acc)}
.graph .note{color:var(--mut);font-size:11px;margin-top:2px}
.graph .key i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin:0 5px 0 10px}
@media (max-width:700px){#hover{left:8px!important;right:8px;width:auto}}

/* the popup is light grey: its text and buttons need dark colours (the side-panel graph stays dark) */
#hover .sub,#hover .note{color:#3d4753}
#hover .rng button,#hover .cam{background:#9aa2ad;color:#141a21;border-color:#7f8895}
#hover .rng button:hover,#hover .cam:hover{border-color:#1d5fd6;background:#a9b0ba}
#hover .rng button.on{background:#1d5fd6;color:#fff;border-color:#1d5fd6}
#hover > button.x{background:transparent;border-color:transparent;font-size:15px;color:#141a21}

.badge.warnbadge{background:#e0a21a;color:#201400}

/* events screen */
.evf{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 10px}
.evf .seg{display:flex;gap:3px}.evf .seg button{padding:4px 10px;font-size:12px}.evf .seg button.on{background:var(--acc);color:#06101c;border-color:var(--acc)}
.evf input[type=search]{background:#0e1319;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font:inherit;min-width:190px}
.evt{width:100%;border-collapse:collapse;background:#161d26;border-radius:8px;overflow:hidden}
.evt th{color:var(--mut);font-weight:600;text-align:left;padding:8px 12px;font-size:12px;position:sticky;top:0;background:#161d26}
.evt td{padding:7px 12px;border-top:1px solid #1f2833;vertical-align:top}
.evt tr.row{cursor:pointer}.evt tr.row:hover td{background:#1b2531}
.evt tr.cut td,.evt tr.down td{background:#2b1a1f}.evt tr.cut:hover td,.evt tr.down:hover td{background:#3a1f26}
.evt .when small{display:block;color:var(--mut)}
.evb{display:inline-block;padding:2px 9px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.evb.cut,.evb.down{background:#ff6b6b;color:#2a0000}.evb.restored,.evb.up{background:#3ccf6e;color:#05200f}
.evt .dur{white-space:nowrap}.evt .ongoing{color:#ff8f8f;font-weight:700}
.evbox{max-height:calc(100vh - 210px);overflow:auto;border-radius:8px}

.logo{background:#fff;border-radius:6px;padding:3px 9px;height:30px;width:auto;margin-right:2px}
body.kiosk .logo{display:none}

/* logo on the map itself, bottom right; dim on kiosk wall screens (no bright static elements, README 4.4) */
.maplogo{position:absolute;right:14px;bottom:12px;height:34px;width:auto;background:#fff;border-radius:7px;padding:4px 10px;opacity:.92;pointer-events:none;z-index:5}
body.kiosk .maplogo{display:block;opacity:.3}
@media (max-width:700px){.maplogo{height:26px;right:8px;bottom:8px}}