@import url('/lib/inter.css');

:root{
  --paper:#FFFFFF; --ink:#172E62; --directoire:#3F56E2; --current:#2E93B8;
  --filament:#A5CD2D; --chili:#E23D28; --taupe:#5F6B8C; --hair:#E3E7F2;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--paper); display:flex; overflow:hidden}
#panel{width:var(--panelw,348px); min-width:280px; max-width:78vw; height:100%; overflow-y:auto;
  padding:22px 20px 28px; background:var(--paper); border-right:1px solid var(--hair); z-index:1000; flex:none}
#drag{width:9px; min-width:9px; height:100%; cursor:col-resize; background:var(--paper); z-index:1001;
  position:relative; flex:none; touch-action:none}
#drag::before{content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--hair)}
#drag:hover::before,#drag.on::before,#drag:focus-visible::before{background:var(--directoire); width:2px; left:3.5px}
#drag:focus-visible{outline:2px solid var(--directoire); outline-offset:-1px}
#drag::after{content:""; position:absolute; left:1px; top:50%; margin-top:-16px; width:7px; height:32px;
  border-radius:4px; background:transparent}
#drag:hover::after,#drag.on::after{background:var(--directoire); opacity:.14}
#map{flex:1; height:100%; background:var(--paper)}
.kicker{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--taupe); font-weight:600; margin-bottom:8px}
h1{font-size:19px; line-height:1.28; font-weight:700; margin-bottom:6px}
.standfirst{font-size:12.5px; line-height:1.5; color:var(--taupe); margin-bottom:16px}
.sect{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe);
  font-weight:600; margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--hair)}
.tabs{display:flex; gap:0; margin:14px 0 2px; border:1px solid var(--hair); border-radius:8px; overflow:hidden}
.tab{flex:1; text-align:center; font-size:11px; font-weight:600; padding:8px 2px; cursor:pointer; color:var(--taupe); background:#fff; white-space:nowrap; letter-spacing:-.01em}
.tab.on{background:var(--ink); color:#fff}
.verd{padding:7px 6px; border-bottom:1px solid var(--hair); font-size:11.8px; line-height:1.45; cursor:pointer}
.verd:hover{background:#F3F1E9}
.verd b{font-weight:600}
.verd .tag{display:inline-block; font-size:9.5px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; padding:1px 7px; border-radius:999px; margin-right:6px}
.tag.go{background:#A5CD2D; color:#1E2A33}
.tag.watch{background:#F3E7BD; color:#6E5A16}
.tag.avoid{background:#F6D3CD; color:#9C2415}
.tag.none{background:#E8E7E2; color:#5A5A54}
.verd .mwq{color:var(--taupe); font-size:10.5px}
.sig{display:inline-block; font-size:9.5px; font-weight:600; color:#39435F; background:#EBEEFC; border:1px solid #D8DEF5; border-radius:999px; padding:1px 7px; margin:0 4px 3px 0}
.ic-label{font-size:10px; font-weight:600; letter-spacing:.06em; color:#5B6E8C; white-space:nowrap; text-shadow:0 0 3px #fff,0 0 3px #fff}
.verd-label{font-size:10.5px; font-weight:600; color:#1E2A33; white-space:nowrap; text-shadow:0 0 3px #fff, 0 0 3px #fff}
.chiprow{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:11.5px; font-weight:500; padding:4px 10px; border:1px solid var(--hair);
  border-radius:999px; background:#fff; cursor:pointer; color:var(--taupe); user-select:none}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.leg{display:flex; align-items:center; gap:8px; padding:3px 4px; font-size:12px; cursor:pointer; border-radius:4px}
.leg:hover{background:#F3F1E9}
.leg.dim{opacity:.32}
.leg .sw{width:11px; height:11px; border-radius:50%; flex:none; border:1.5px solid rgba(30,42,51,.25)}
.leg .mw{margin-left:auto; color:var(--taupe); font-variant-numeric:tabular-nums; font-size:11px}
table{width:100%; border-collapse:collapse; font-size:11.5px}
td{padding:3px 2px; border-bottom:1px solid var(--hair); vertical-align:top}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.note{font-size:10.5px; line-height:1.5; color:var(--taupe); margin-top:14px}
.sizekey{display:flex; align-items:flex-end; gap:14px; margin-top:6px}
.sizekey .b{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--taupe)}
.sizekey .dot{border-radius:50%; background:none; border:1.5px solid var(--taupe)}
.leaflet-container{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif}
.leaflet-popup-content-wrapper{background:var(--paper); color:var(--ink); border-radius:6px;
  box-shadow:0 2px 10px rgba(30,42,51,.18); border:1px solid var(--hair)}
.leaflet-popup-content{margin:12px 14px; font-size:12px; line-height:1.5; min-width:210px}
.pp-co{font-weight:700; font-size:13px; margin-bottom:2px}
.pp-grp{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--directoire); font-weight:600; margin-bottom:6px}
.pp-row{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--hair); padding:3px 0}
.pp-row span:first-child{color:var(--taupe)}
.pp-row span:last-child{font-weight:500; text-align:right}
.pp-info{margin-top:6px; color:var(--taupe); font-size:11px; line-height:1.45}
#reset{display:none; margin-top:8px; font-size:11px; color:var(--directoire); cursor:pointer; font-weight:600}
@media (max-width:720px){
  body{flex-direction:column}
  #panel{width:100%!important; min-width:0; max-width:none; height:46%; border-right:none; border-bottom:1px solid var(--hair)}
  #drag{display:none}
  #map{height:54%}
}
.geo-label{font-size:10px; letter-spacing:.18em; color:#B7B2A4; font-weight:600; white-space:nowrap}
.city-label{font-size:10px; color:#9A958A; font-weight:500; white-space:nowrap; pointer-events:none}
.leaflet-tooltip{font-family:'Inter','Söhne','Helvetica Neue',Arial,sans-serif; font-size:11px; background:var(--paper); border:1px solid var(--hair); color:var(--ink); box-shadow:none}

.cbar{display:flex;align-items:center;gap:8px;margin:3px 0}
.cbar .nm{width:64px;font-size:11px;font-weight:600}
.cbar .tr{flex:1;display:block;height:13px;background:#EEF0F7;border-radius:3px;overflow:hidden}
.cbar .fl{display:block;height:100%;background:var(--directoire);border-radius:3px}
.cbar .vl{width:56px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}
.tab{font-size:10.5px;padding:8px 1px}
tr.dosrow,tr.zrow{cursor:pointer}
tr.dosrow:hover,tr.zrow:hover{background:#F3F1E9}
#nodes td,#circuits td,#dossier td,#zones td,#reftbl td,#totbl td,#risktbl td,#comptbl td,#nltbl td,#durtbl td,#durtrend td,#tntbl td,#chrisk td{padding:3px 3px}
.leg span:nth-child(2){line-height:1.25}
#laykey .sig{font-size:9px;padding:2px 6px}

.find{font-size:13px; line-height:1.35; font-weight:600; color:var(--ink); margin:20px 0 6px;
  padding-top:12px; border-top:1px solid var(--hair)}
#devpanel>.find:first-child,#acqpanel>.find:first-child,#ptspanel>.find:first-child,
#conpanel>.find:first-child,#zonpanel>.find:first-child,#livpanel>.find:first-child{border-top:none;padding-top:2px;margin-top:6px}
.chip:focus-visible,.tab:focus-visible{outline:2px solid var(--directoire); outline-offset:2px}
.node-label{font-size:9.5px; line-height:1.15; color:#5F6B8C; font-weight:500; white-space:nowrap;
  text-align:center; transform:translate(-50%,-50%); pointer-events:none; text-shadow:0 0 3px #fff,0 0 3px #fff}
.node-label b{color:#39435F}
@media (max-width:720px){
  #panel{height:58%}
  #map{height:42%}
  #toolbar{flex-wrap:wrap}
  #q{min-width:100%;flex:1 1 100%}
  #dl{max-width:none!important;flex:1}
  #csv{flex:0 0 auto}
  .tab{font-size:10px;padding:8px 0}
  table{font-size:11px}
}
@media print{ .tabs,#drag,.chiprow,#wlchip,#wlclr,#csv,#dl{display:none!important}
  #panel{width:100%!important;height:auto;overflow:visible} #map{height:520px} }

.chip.busy{opacity:.55;position:relative}
.chip.busy::after{content:"";position:absolute;right:5px;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border:1.5px solid var(--taupe);border-top-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.chip.failed{border-color:var(--chili);color:var(--chili)}
#tierchip:empty{display:none}
a{color:var(--directoire)}