/* ============================================================
   The category walls, second design (ChatGPT board, Sep 15):
   jet black, gold borders, white text. Left rail of tabs, map in
   the middle, live feed right, four boxes along the bottom.
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:#fff;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wall{min-height:100vh;padding:10px 12px 64px;max-width:1900px;margin:auto;display:flex;flex-direction:column;gap:10px}
.box{background:#050505;border:1px solid #e0b53a;border-radius:10px}
.M{font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400}
/* ---- header ---- */
.head{display:grid;grid-template-columns:1fr;gap:10px}
.head .title{text-align:center;padding:8px 16px 8px}
.head .mark{margin:0 auto;max-width:900px}
.head .mark svg{display:block;width:100%;height:auto}
.head h1{margin:0;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:34px;letter-spacing:.12em;color:#f2c75a;line-height:1.1}
.head h2{margin:2px 0 4px;font-family:Inter,sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;color:#f2c75a;text-transform:uppercase}
.head .name{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:6px}
.head .name i{display:none}
.head .name b{font-family:Inter,sans-serif;font-weight:700;font-size:12px;letter-spacing:.3em;color:#f5b027;text-transform:uppercase}
.rail .clock{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;gap:2px}
.rail .clock small{font-family:Inter,sans-serif;font-size:8.5px;font-weight:700;color:#8f8574;letter-spacing:.14em;text-transform:uppercase}
.rail .clock span{font:800 20px Inter,sans-serif;color:#fff;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.rail .clock b{font-size:10px;letter-spacing:.14em;color:#3ee88a;font-weight:700}.rail .clock b.y{color:#f2c75a}.rail .clock b.r{color:#ff4d4d}
.rail .clock #ver{font-size:9px;color:#9a9a9a;letter-spacing:.1em}
/* ---- main ---- */
main{display:grid;grid-template-columns:230px 1fr 330px;grid-template-rows:auto auto;gap:10px;align-items:stretch}
.rail{grid-column:1;grid-row:1}
.centre{grid-column:2;grid-row:1}
.right{grid-column:3;grid-row:1/3}
.sections{grid-column:1/3;grid-row:2}
.rail{display:flex;flex-direction:column;gap:6px;align-self:stretch}
.rail a{flex:1 1 0;min-height:38px;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;background:#0a0a0c;border:1px solid #e0b53a;border-radius:9px;padding:8px 12px;font-family:Inter,sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rail a svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail a.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#000;border-color:#f2c75a}
.rail a.on svg{stroke:#000}
.rail a.hot{border-color:#ff4d4d;color:#ff4d4d}.rail a.hot svg{stroke:#ff4d4d}
.rail a:not(.on):hover{background:#141008}
.rail .wx{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px;gap:1px;text-align:center}
.rail .wx small{font-family:Inter,sans-serif;font-size:8.5px;font-weight:700;color:#8f8574;letter-spacing:.14em}
.rail .wx b{font:800 22px Inter,sans-serif;color:#fff}
.rail .wx i{font-style:normal;font-size:10.5px;font-weight:700;color:#f5b027;letter-spacing:.06em;text-transform:uppercase}
.rail .wx u{text-decoration:none;font-size:8.5px;color:#8f8574;letter-spacing:.08em}
.rail .home{flex:0 0 auto;justify-content:center;font-size:9.5px;letter-spacing:.08em;color:#f5b027}
.centre{display:flex;flex-direction:column;min-width:0}
.mapbox{position:relative;overflow:hidden;min-height:520px;flex:1}
#worldMap{position:absolute;inset:0}
.mapbox .tl{position:absolute;left:14px;top:12px;z-index:500}
.mapbox .tl small{display:block;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-shadow:0 0 6px #000,0 0 12px #000}
.mapbox .tl b{display:block;color:#fff;font-size:22px;font-weight:800;letter-spacing:.06em;text-shadow:0 0 6px #000,0 0 14px #000;line-height:1}
.mapbox .ctl{position:absolute;left:14px;bottom:14px;z-index:500;display:flex;flex-direction:column;gap:6px}
.mapbox .ctl button{width:36px;height:36px;border:1px solid #e0b53a;border-radius:6px;background:rgba(0,0,0,.85);color:#fff;font-size:22px;font-weight:700;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.mapbox .ctl button svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.mapbox .foot{position:absolute;left:70px;right:250px;bottom:14px;height:44px;line-height:24px;text-align:center;z-index:500;border:2px solid #e0b53a;border-radius:6px;background:rgba(0,0,0,.9);padding:8px 22px;font-family:Michroma,Orbitron,Inter,sans-serif;font-weight:400;font-size:11px;letter-spacing:.2em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapbox .foot.hot{color:#ff4d4d;border-color:#ff4d4d;animation:beat 1s infinite alternate}
@keyframes beat{from{opacity:.55}to{opacity:1}}
.mapbox .views{position:absolute;right:10px;bottom:24px;z-index:500;display:flex;gap:4px}
.mapbox .views button{width:auto;height:22px;padding:0 8px;white-space:nowrap;font-size:8px;letter-spacing:.1em;border-radius:4px;border-width:1px}
.mapbox .views button{border:2px solid #e0b53a;border-radius:6px;background:rgba(0,0,0,.9);color:#f2c75a;cursor:pointer}
.mapbox .views button.on{color:#5fd8ff;border-color:#5fd8ff}
.compass{position:absolute;right:14px;top:12px;z-index:500;width:70px;height:70px;border-radius:50%;border:2px solid #e0b53a;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px}
.compass svg{width:100%;height:100%}
/* the incident card over the map */
.inc{position:absolute;left:70px;right:14px;bottom:70px;z-index:600;background:rgba(0,0,0,.96);border:2px solid #ff4d4d;border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;box-shadow:0 0 30px rgba(255,59,48,.3)}
.inc.rev{border-color:#f2c75a;box-shadow:none}.inc.sim{border-color:#e0b53a;box-shadow:none}
.inc .face{width:60px;height:60px;border-radius:6px;object-fit:cover;background:#111;border:2px solid #e0b53a}
.inc small{display:block;color:#f2c75a;font-size:10px;letter-spacing:.2em;font-weight:800}
.inc h3{margin:2px 0;font-family:Inter,sans-serif;font-weight:800;font-size:17px;color:#fff;letter-spacing:.04em}
.inc p{margin:0;font-size:12px;color:#fff}
.inc p b{color:#f2c75a;font-weight:800}
.inc .sev{font-weight:800;color:#ff4d4d;font-size:12px;letter-spacing:.18em;padding:8px 12px;border:2px solid currentColor;border-radius:6px;white-space:nowrap;text-align:center}
.inc.rev .sev{color:#f2c75a}.inc.sim .sev{color:#e0b53a}
.inc .actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mapbox .foot{display:none!important}
.mapbox .foot.hot{display:block!important;left:70px;right:120px;height:auto;line-height:1.4}
button,.btn{border:1px solid #e0b53a;border-radius:8px;background:#0a0a0c;color:#fff;font-weight:600;padding:11px 6px;font-size:9.5px;letter-spacing:.08em;cursor:pointer;width:100%;font-family:Inter,sans-serif;text-align:center;text-decoration:none;display:block;text-transform:uppercase}
button:disabled{opacity:.4;cursor:default}
.gold{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#000;border-color:#f2c75a}
.dark{background:#000;color:#fff}
.red{border-color:#ff4d4d;color:#ff4d4d}
.safe{border-color:#3ee88a;color:#3ee88a}
.hidden{display:none!important}
/* the section under the map */
.sections{display:flex}
.sec{display:none;padding:14px 16px;flex:1}
.sec.on{display:flex;flex-direction:column}
.sec h3{margin:0 0 8px;font-family:Inter,sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;color:#f5b027;text-transform:uppercase}
.sec .lead{margin:0 0 12px;font-size:12px;color:#fff;line-height:1.55}
.sec .lead i{font-style:normal;color:#8f8574}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;margin:0 0 10px;flex:1}
.tile{border:1px solid #e0b53a;border-radius:8px;padding:10px 12px;background:#0a0a0c;display:flex;flex-direction:column}
.tile b{display:block;font-family:Inter,sans-serif;font-size:10.5px;letter-spacing:.04em;color:#f5b027;font-weight:700;margin-bottom:5px}
.tile span{display:block;font-size:11px;color:#fff;line-height:1.45}
.tile i{display:inline-block;align-self:flex-start;font-style:normal;font-size:8px;letter-spacing:.14em;font-weight:700;padding:3px 7px;border-radius:4px;border:1px solid;margin-top:auto;padding-top:3px}
.tile span+i{margin-top:10px}
.tile{justify-content:flex-start}
.tile>span{margin-bottom:auto}
.tile i.live{color:#3ee88a;border-color:#3ee88a}.tile i.plan{color:#cfcfcf;border-color:#cfcfcf}.tile i.proto{color:#f2c75a;border-color:#f2c75a}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px;flex:1}
.steps div{border-left:3px solid #e0b53a;padding:6px 12px;font-size:11px;color:#fff;line-height:1.45}
.steps div:before{counter-increment:s;content:counter(s);display:block;font-family:Inter,sans-serif;font-weight:800;color:#f5b027;font-size:14px;margin-bottom:4px}
.sec .row{display:flex;gap:8px;margin-top:auto}
.sec .row>*{flex:1}
/* ---- feed ---- */
.right{display:flex;flex-direction:column;gap:10px;min-width:0}
.feed{display:flex;flex-direction:column;min-width:0;flex:1}
.watch .krow b{font-size:18px}
.ph{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e0b53a;padding:9px 12px;color:#f5b027;font-family:Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.ph span{font-family:Inter,sans-serif;font-size:9px;letter-spacing:.14em;color:#3ee88a;font-weight:700}
.ph span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#3ee88a;margin-right:6px}
.ph span.hot{color:#ff4d4d}.ph span.hot:before{background:#ff4d4d}
.queue{display:flex;gap:4px;flex-wrap:wrap;padding:6px 10px 0}
.chip{border:1px solid #e0b53a;border-radius:999px;padding:4px 10px;font-size:9px;letter-spacing:.06em;font-weight:800;color:#fff;cursor:pointer;background:#000;width:auto;display:flex;gap:6px;align-items:center;text-transform:none}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.chip.crit{color:#ff4d4d;border-color:#ff4d4d}
.chip.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#000;border-color:#f2c75a}
.log{flex:1;overflow:auto;min-height:200px;padding:6px 10px}
.entry{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid #2a2418}
.entry svg{width:22px;height:22px;stroke:#f2c75a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entry b{display:block;font-size:10.5px;color:#fff;font-weight:700}
.entry b.r{color:#ff4d4d}.entry b.g{color:#fff}.entry b.d{color:#fff}
.entry span{display:block;font-size:10px;color:#8f8574;margin-top:2px;line-height:1.35}
.entry time{font-size:10px;color:#fff;font-weight:700;white-space:nowrap;text-align:right;display:block}
.entry em{display:block;font-style:normal;font-size:8px;letter-spacing:.12em;font-weight:700;text-align:right;margin-top:2px;color:#3ee88a}
.entry em.r{color:#ff4d4d}.entry em.y{color:#f2c75a}.entry em.b{color:#5fd8ff}
/* ---- bottom row ---- */
.bottom{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.5fr;gap:10px}
.bottom .box{display:flex;flex-direction:column}
.srow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #2a2418;font-size:10.5px;color:#fff;font-weight:600}
.srow span{display:flex;align-items:center;gap:10px}
.srow span:before{content:"";width:12px;height:12px;border-radius:50%;background:#3ee88a;flex:none;box-shadow:0 0 8px #3ee88a}
.srow.dim span:before{background:#e0b53a;box-shadow:none}.srow.hot span:before{background:#ff4d4d;box-shadow:0 0 8px #ff4d4d}
.srow em{font-style:normal;font-size:9px;letter-spacing:.12em;font-weight:700;color:#3ee88a;white-space:nowrap}
.srow.dim em{color:#f2c75a}.srow.hot em{color:#ff4d4d}
.krow{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #2a2418;font-size:8.5px;letter-spacing:.14em;color:#8f8574;text-transform:uppercase;font-weight:600}
.krow svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.krow b{font-family:Inter,sans-serif;font-weight:800;font-size:19px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0}
.arow{display:grid;grid-template-columns:18px 64px 1fr 1.2fr;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid #2a2418;font-size:10px;color:#fff}
.arow i{width:16px;height:16px;border-radius:50%;background:#5fd8ff;display:inline-block;color:#000;font-style:normal;font-size:10px;font-weight:900;text-align:center;line-height:16px}
.arow i.r{background:#ff4d4d}.arow i.y{background:#f2c75a}
.arow.none{grid-template-columns:1fr;color:#cfcfcf}
.qa{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:8px;padding:10px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;padding:11px 6px;font-size:9.5px;line-height:1.3;text-align:center;min-height:64px}
.qa button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.qa .g{border-color:#3ee88a;color:#3ee88a}.qa .r{border-color:#ff4d4d;color:#ff4d4d}
/* ---- the bar, lights, sound ---- */
.konline{display:flex;gap:4px;justify-content:center;align-items:stretch;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.konline a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#f5b027;font-family:Inter,sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 6px;border-radius:6px;border:1px solid transparent;line-height:1.2}
.konline a:hover{background:#141008;color:#fff}
.konline a.on{background:linear-gradient(135deg,#f2c75a,#d8a93a);color:#000}
footer{position:fixed;left:12px;right:12px;bottom:10px;border:2px solid #e0b53a;border-radius:8px;padding:4px;background:#000;z-index:900}
.lights{position:fixed;inset:0;pointer-events:none;z-index:800;opacity:0;transition:opacity .3s;box-shadow:0 0 0 14px #ff2a2a inset,0 0 120px 40px rgba(255,42,42,.55) inset}
.lights.on{opacity:1;animation:lights .8s infinite alternate}
@keyframes lights{from{opacity:.25}to{opacity:1}}
.flash{position:fixed;inset:0;background:rgba(255,40,40,.5);pointer-events:none;opacity:0;z-index:801}
.flash.on{animation:flash 1s 4}
@keyframes flash{0%,100%{opacity:0}50%{opacity:1}}
.soundnote{position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:950;background:#f2c75a;color:#000;font-size:11px;font-weight:800;letter-spacing:.16em;padding:8px 16px;border-radius:999px}
.soundnote.off{display:none}
#alertCtl button{border-width:2px}
.leaflet-container{background:#000;font-family:Inter,sans-serif}
.leaflet-control-attribution{background:rgba(0,0,0,.7)!important;color:#9a9a9a!important;font-size:9px!important}
.leaflet-control-attribution a{color:#cfcfcf!important}
.pin{width:16px;height:16px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.8);animation:pulse 1.5s infinite;border:2px solid #fff}
.pin.y{background:#f2c75a;animation:none}
.phone{width:8px;height:8px;border-radius:50%;background:#3ee88a;box-shadow:0 0 8px #3ee88a}
@keyframes pulse{70%{box-shadow:0 0 0 20px transparent}}
@media(max-width:1200px){main{grid-template-columns:200px 1fr 280px}.mapbox .foot{right:14px;bottom:70px}.mapbox .views{bottom:14px}.bottom{grid-template-columns:1fr 1fr}.tiles,.steps,.sec .row{grid-template-columns:1fr 1fr}}
@media(max-width:900px){main{grid-template-columns:1fr;grid-template-rows:auto}.rail,.centre,.right,.sections{grid-column:1;grid-row:auto}.rail{flex-direction:row;flex-wrap:wrap}.rail a{flex:1 1 40%}.rail .home{margin-top:0}.head{grid-template-columns:1fr}.bottom{grid-template-columns:1fr}.inc .actions{grid-template-columns:1fr 1fr 1fr}.head h1{font-size:22px}}