/* threatmap.css v3.2 (2026-10-30): by default the list starts closed (summary + legend only) */
/* v3.1: list height set with a drag grip; Show/Hide button removed */
/* v3: time selector, hover list, pulse, hit areas */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/share-tech-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');}
:root{--black:#080808;--rose:#e0004a;--white:#fff;--grey:#9a9a9a;--rule:#2a2a2a;
 --mono:'Share Tech Mono',monospace;--display:'Bebas Neue',sans-serif;--sans:'DM Sans',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--black);color:var(--white);font-family:var(--sans);overflow:hidden}
#map{position:fixed;inset:0;background:#0b0b0b}
.leaflet-container{background:#0b0b0b;font-family:var(--sans)}
.leaflet-control-attribution{background:rgba(8,8,8,.7)!important;color:#777!important;font-size:10px}
.leaflet-control-attribution a{color:#999!important}
.leaflet-top{top:54px}
.leaflet-control-zoom a{background:#111!important;color:#fff!important;border-color:#333!important}

#topbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:14px;
 padding:10px 14px;background:linear-gradient(#080808e6,#08080800);pointer-events:none}
#topbar>*{pointer-events:auto}
#topbar .back{white-space:nowrap;color:var(--white);text-decoration:none;font-family:var(--mono);font-size:14px;
 border:1px solid #444;padding:4px 10px;background:#0c0c0c}
#topbar .back:hover{border-color:var(--rose);color:var(--rose)}
#topbar .title{font-family:var(--display);font-size:26px;letter-spacing:.12em;white-space:nowrap}
#windows{margin-left:auto;display:flex;gap:0}
#windows button{background:#0c0c0c;color:var(--white);border:1px solid #444;margin-left:-1px;
 font-family:var(--mono);font-size:14px;padding:4px 10px;cursor:pointer;white-space:nowrap}
#windows button:hover{border-color:var(--rose);position:relative}
#windows button.on{background:var(--rose);border-color:var(--rose);color:#fff}

#panel{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:rgba(8,8,8,.93);
 border-top:1px solid var(--rose);color:var(--white);height:var(--panel-h,auto);display:flex;flex-direction:column;
 font-size:16px}
/* Grip on the top edge (same idea as qsomap's tools panel). The grab area is
   invisible and taller than the bar so it is easy to catch, also with a finger. */
#panel-resize{position:absolute;left:0;right:0;top:-7px;height:14px;cursor:row-resize;z-index:2;touch-action:none}
#panel-resize::after{content:'';position:absolute;left:50%;top:5px;width:44px;height:4px;margin-left:-22px;
 border-radius:2px;background:#555;transition:background .15s}
#panel-resize:hover::after,#panel-resize.dragging::after{background:var(--rose)}
body.resizing{cursor:row-resize;user-select:none;-webkit-user-select:none}
@media (pointer:coarse){#panel-resize{top:-12px;height:24px}#panel-resize::after{top:9px;width:56px;margin-left:-28px}}
#summary{display:flex;flex-wrap:wrap;gap:6px 26px;padding:9px 14px;border-bottom:1px solid var(--rule);
 font-family:var(--mono);font-size:16px}
#summary b{font-weight:400;color:var(--rose)}
#summary .win{color:var(--white)}
#summary .upd{margin-left:auto;color:var(--grey);font-size:13px}
#rows{overflow-y:auto;flex:1 1 0;min-height:0;-webkit-overflow-scrolling:touch}
.row{display:grid;grid-template-columns:78px 200px 1fr auto;gap:4px 14px;align-items:baseline;
 padding:6px 14px;border-bottom:1px solid #1a1a1a;cursor:pointer;font-size:16px;line-height:1.35}
.row:hover,.row.hl{background:#1a1a1a}
.row .tm{font-family:var(--mono);color:var(--grey)}
.row .ip{font-family:var(--mono)}
.row .what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .what i{font-style:normal;display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.row .n{font-family:var(--mono);color:var(--grey)}
.empty{padding:14px;color:var(--grey)}
#legend{display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 14px;border-top:1px solid var(--rule);
 font-size:14px;font-family:var(--mono)}
#legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#legend i{display:inline-block;width:22px;height:3px;border-radius:2px}

#modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.72);display:flex;
 align-items:center;justify-content:center;padding:14px}
#modal[hidden]{display:none}
#modal-box{position:relative;background:#0e0e0e;border:1px solid var(--rose);max-width:760px;width:100%;
 max-height:86vh;overflow-y:auto;padding:18px 20px;font-size:16px;-webkit-overflow-scrolling:touch}
#modal-close{position:absolute;right:10px;top:6px;background:none;border:0;color:var(--white);font-size:30px;cursor:pointer}
#modal-body h2{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:.06em;margin-bottom:2px}
#modal-body .sub{color:var(--grey);font-family:var(--mono);font-size:14px;margin-bottom:12px}
#modal-body dl{display:grid;grid-template-columns:130px 1fr;gap:4px 14px;margin-bottom:14px}
#modal-body dt{color:var(--grey);font-family:var(--mono);font-size:14px}
#modal-body dd{word-break:break-word}
#modal-body h3{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--grey);margin:6px 0}
#modal-body .smp{font-family:var(--mono);font-size:14px;border-top:1px solid #222;padding:5px 0;word-break:break-all}
#modal-body .smp span{color:var(--grey)}

/* hover / tap list of IPs at one location */
#tip{position:fixed;z-index:1500;background:rgba(10,10,10,.96);border:1px solid #444;min-width:220px;max-width:min(340px,92vw);
 font-family:var(--mono);font-size:14px;box-shadow:0 4px 18px #000a}
#tip[hidden]{display:none}
#tip .tip-head{padding:7px 10px;border-bottom:1px solid #2a2a2a;color:var(--white)}
#tip .tip-head span{color:var(--grey)}
#tip .tip-list{max-height:min(320px,50vh);overflow-y:auto;-webkit-overflow-scrolling:touch}
#tip .tip-row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-bottom:1px solid #1a1a1a;
 color:var(--white);font:inherit;text-align:left;padding:7px 10px;cursor:pointer}
#tip .tip-row:hover,#tip .tip-row:focus{background:#1d1d1d;outline:none}
#tip .tip-row i{width:9px;height:9px;border-radius:50%;flex:none}
#tip .tip-ip{flex:1}
#tip .tip-t{color:var(--grey);font-size:12px;white-space:nowrap}

/* several IPs at one spot: the line and dot pulse */
.tm-pulse{animation:tm-pulse 1.8s ease-in-out infinite}
path.tm-line.tm-pulse{animation-name:tm-pulse-line}
@keyframes tm-pulse-line{0%,100%{stroke-width:1.8px}50%{stroke-width:4.5px}}
@keyframes tm-pulse{0%,100%{stroke-width:1px}50%{stroke-width:7px}}
@media (prefers-reduced-motion:reduce){.tm-pulse{animation:none}path.tm-line.tm-pulse{stroke-width:3px}}
.leaflet-interactive.tm-hit{cursor:pointer}

@media (max-width:720px){
 #topbar{gap:8px;padding:8px 10px}
 #summary .upd{margin-left:0;width:100%}
 #topbar .title{font-size:20px}
 #windows button{font-size:13px;padding:4px 7px}
 .row{grid-template-columns:70px 1fr auto;font-size:15px}
 .row .ip{grid-column:2;grid-row:1}
 .row .n{grid-column:3;grid-row:1}
 .row .what{grid-column:1 / -1;grid-row:2}
 #summary{font-size:14px;gap:4px 16px}
 #modal-body dl{grid-template-columns:100px 1fr}
}
@media (max-width:440px){#topbar .title{display:none}}