/* ===========================================================================
   WiMac Resilience Lab — shared shell
   The routing tool's palette, lifted out of the individual pages so the suite
   reads as one instrument rather than four.
   ======================================================================== */
:root{
  --paper:#EDF0EB; --panel:#FAFBF8; --panel2:#F1F4EF;
  --ink:#161F1B; --ink2:#48564E; --ink3:#7B8981; --rule:#C7D0C7; --rule2:#DDE3DB;
  --water:#2A6E8F; --w1:#7E9182; --w2:#AE9629; --w3:#C4711A; --w4:#9E2C20;
  --live:#0F6B4F; --proj:#4B3F72; --offline:#8E44AD;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --cond:"IBM Plex Sans Condensed","Helvetica Neue",Arial,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
a{color:inherit}

/* --- masthead ---------------------------------------------------------- */
.flag{background:var(--ink);color:var(--paper);font-family:var(--cond);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:4px 16px;text-align:center;font-weight:600}
.mast{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);background:var(--panel);flex-wrap:wrap}
.mast-brand{padding:14px 18px;border-right:1px solid var(--rule2)}
.brandline{font-family:var(--cond);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:13px}
.brandsub{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:2px}
.mast-spacer{flex:1}
.mast-nav{display:flex;align-items:center;gap:2px;padding:0 10px}
.mast-nav a{font-family:var(--cond);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink2);padding:8px 10px;border-bottom:2px solid transparent}
.mast-nav a:hover{color:var(--ink);background:var(--panel2)}
.mast-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.currency{display:flex;align-items:center;gap:9px;padding:10px 18px;border-left:1px solid var(--rule2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(15,107,79,.15)}
.dot.warn{background:var(--w3);box-shadow:0 0 0 3px rgba(196,113,26,.15)}
.dot.bad{background:var(--w4);box-shadow:0 0 0 3px rgba(158,44,32,.15)}
.seg-k{font-family:var(--cond);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.seg-v{font-family:var(--mono);font-size:12.5px;font-weight:500;margin-top:1px}

.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 34px}

/* --- live banner ------------------------------------------------------- */
.lv-bar{display:flex;align-items:baseline;gap:11px;border:1px solid var(--rule);border-left-width:4px;padding:9px 14px;font-size:13px;flex-wrap:wrap}
.lv-tag{font-family:var(--cond);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.lv-text{flex:1;min-width:200px}
.lv-link{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.lv-note{border:1px solid var(--rule);border-top:none;background:var(--panel2);padding:6px 14px;font-family:var(--mono);font-size:11px;color:var(--ink2)}

/* --- controls ---------------------------------------------------------- */
.bar{display:flex;align-items:center;gap:14px;background:var(--panel);border-bottom:1px solid var(--rule);padding:8px 16px;flex-wrap:wrap;z-index:500}
.ctl{display:flex;align-items:center;gap:7px}
.ctl label{font-family:var(--cond);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
select{font-family:var(--mono);font-size:12.5px;border:1px solid var(--rule);background:var(--panel2);padding:3px 7px;border-radius:2px}
.seg{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.seg button{font-family:var(--mono);font-size:12.5px;padding:3px 10px;background:var(--panel);color:var(--ink2);border:none;cursor:pointer}
.seg button+button{border-left:1px solid var(--rule2)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* --- cards / panels ---------------------------------------------------- */
.panel{border:1px solid var(--rule);background:var(--panel)}
.panel-h{display:flex;align-items:baseline;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.panel-h h2{margin:0;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.panel-h .sub{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.btn{display:inline-block;text-align:center;padding:8px 14px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:2px;font-family:var(--cond);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--ink2);border-color:var(--ink2)}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:var(--panel2)}

.disclaimer{border:1px solid var(--rule);border-left:4px solid var(--ink3);background:var(--panel);padding:12px 16px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.disclaimer b{color:var(--ink)}
.foot{max-width:1180px;margin:0 auto;padding:16px 20px 26px;font-family:var(--mono);font-size:10.5px;color:var(--ink3);display:flex;gap:18px;flex-wrap:wrap}
.foot b{color:var(--ink2);font-weight:500}

/* --- map furniture ----------------------------------------------------- */
.leaflet-container{font-family:var(--mono);font-size:11px;background:#dfe4de}
.legend,.info{background:rgba(250,251,248,.95);border:1px solid var(--rule);border-radius:3px;padding:9px 11px;box-shadow:0 1px 4px rgba(22,31,27,.12)}
.legend h4,.info h4{margin:0 0 6px;font-family:var(--cond);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.legend .row{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;margin-bottom:3px}
.legend .row i{width:20px;height:0;display:inline-block;border-top-width:3px;border-top-style:solid;border-radius:2px}
.legend .sep{height:1px;background:var(--rule2);margin:6px 0}
.info{max-width:250px;font-family:var(--mono);font-size:11px;line-height:1.5}
.gauge-lbl{font-family:var(--mono);font-size:10px;color:var(--ink);background:rgba(250,251,248,.85);padding:0 3px;border-radius:2px;white-space:nowrap;border:0}
.pop b{font-family:var(--cond)}
.pop .k{color:var(--ink3);font-family:var(--mono);font-size:10.5px}
.leaflet-popup-content-wrapper{border-radius:3px}

/* --- tables ------------------------------------------------------------ */
table.grid{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11.5px}
table.grid th{font-family:var(--cond);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);text-align:right;padding:5px 7px;border-bottom:1px solid var(--rule);font-weight:600}
table.grid th:first-child{text-align:left}
table.grid td{padding:4px 7px;border-bottom:1px solid var(--rule2);text-align:right;white-space:nowrap}
table.grid td:first-child{text-align:left;font-family:var(--sans);font-size:12.5px}
table.grid tr:hover td{background:var(--panel2)}
.chip{display:inline-block;padding:1px 6px;border-radius:2px;font-family:var(--cond);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#fff}
.muted{color:var(--ink3)}
.callout{border:1px solid var(--rule);border-left:4px solid var(--w3);background:#F6F2E7;padding:9px 13px;font-size:12.5px;color:var(--ink2)}

@media (max-width:760px){
  .mast-nav{width:100%;overflow-x:auto;border-top:1px solid var(--rule2)}
  .currency{border-left:none;border-top:1px solid var(--rule2);width:100%}
}

/* --- embedded map panel ------------------------------------------------- */
.mapbox{height:420px;width:100%;background:#dfe4de;position:relative}
.mapbox.tall{height:520px}
.mapbox.short{height:300px}
.map-fail{padding:24px;font-family:var(--mono);font-size:12px;color:var(--w4);background:#F5E6E4}
.basemap-warn{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:800;background:#F5E6E4;border:1px solid var(--w4);border-left-width:4px;padding:7px 12px;font-size:12px;max-width:480px;box-shadow:0 2px 8px rgba(22,31,27,.18)}

/* --- hero statistics ---------------------------------------------------- */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));border:1px solid var(--rule);background:var(--panel)}
.hero .h{padding:13px 16px;border-right:1px solid var(--rule2);border-bottom:1px solid var(--rule2)}
.hero .h .k{font-family:var(--cond);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.hero .h .v{font-family:var(--mono);font-size:24px;font-weight:500;margin-top:2px;line-height:1.1}
.hero .h .v small{font-size:12px;color:var(--ink3)}
.hero .h .n{font-family:var(--mono);font-size:10px;color:var(--ink3);margin-top:3px;line-height:1.45}

/* --- uniform dashboard tiles -------------------------------------------- */
.dash{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.dash a,.dash div.dcard{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);background:var(--panel);
  padding:13px 15px;min-height:158px;text-decoration:none;color:inherit}
.dash a:hover{border-color:var(--ink);background:var(--panel2)}
.dash .dcard.soon{border-style:dashed;background:repeating-linear-gradient(135deg,var(--panel) 0 10px,var(--panel2) 10px 20px)}
.dash .dtop{display:flex;align-items:baseline;gap:7px}
.dash .dmod{font-family:var(--mono);font-size:9.5px;color:var(--paper);background:var(--ink3);padding:1px 5px;border-radius:2px;letter-spacing:.05em}
.dash .dmod.live{background:var(--live)}
.dash .dmod.gate{background:var(--w3)}
.dash h3{margin:0;font-family:var(--cond);font-size:15px;font-weight:600;flex:1}
.dash p{margin:0;font-size:12px;color:var(--ink2);line-height:1.45}
.dash .dfoot{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--ink3);border-top:1px solid var(--rule2);padding-top:6px;line-height:1.5}
.dash .dfoot b{color:var(--ink2);font-weight:500}

/* --- event timeline ------------------------------------------------------ */
.tl{position:relative;padding:6px 0 2px}
.tl-axis{position:absolute;left:0;right:0;top:56px;height:1px;background:var(--rule)}
.tl-row{display:flex;gap:0;align-items:flex-end;overflow-x:auto;padding-bottom:6px}
.tl-ev{flex:0 0 auto;width:62px;text-align:center;cursor:pointer;padding:0 2px}
.tl-ev .bar{margin:0 auto;width:14px;background:var(--w4);border-radius:2px 2px 0 0;min-height:3px}
.tl-ev .lbl{font-family:var(--mono);font-size:9px;color:var(--ink3);margin-top:4px;line-height:1.3}
.tl-ev.sel .bar{outline:2px solid var(--ink);outline-offset:1px}
.tl-ev:hover .lbl{color:var(--ink)}
.tl-live .bar{background:var(--live)}