/* WXWI Stat v83 */
:root {
  --s-crit:  #e74c3c;
  --s-high:  #e67e22;
  --s-med:   #f1c40f;
  --s-ok:    #2ecc71;
  --s-blue:  #3498db;
  --s-muted: rgba(255,255,255,.58);
  --s-border:rgba(255,255,255,.07);
  --s-card:  rgba(255,255,255,.035);
}

.top.top--stat { padding-bottom: 10px; }
.top.top--stat .tiles { display: none; }

/* ── Layout ─────────────────────────────────────────────── */
.statMain {
  padding: 14px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1300px;
  margin: 0 auto;
}

/* ── Cards ──────────────────────────────────────────────── */
.s-card {
  background: var(--s-card);
  border: 1px solid var(--s-border);
  border-radius: 16px;
  padding: 20px 22px;
}
.s-card--network {
  background: linear-gradient(135deg,rgba(52,152,219,.07),rgba(231,76,60,.05));
  border-color: rgba(52,152,219,.18);
}
.s-card--airport {
  background: linear-gradient(135deg,rgba(46,204,113,.04),rgba(52,152,219,.04));
  border-color: rgba(46,204,113,.15);
}

/* ── Section title ──────────────────────────────────────── */
.s-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 16px;
  letter-spacing: .3px;
}
.s-section-icon { font-size: 1.1rem; }
.s-section-badge {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--s-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--s-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.s-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--s-ok);
  box-shadow: 0 0 6px var(--s-ok);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(.8); }
}
.s-muted { color: var(--s-muted); }
.s-atlas-sub { font-size: .82rem; margin:-10px 0 6px; }

/* ── Network tiles ──────────────────────────────────────── */
.s-network-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media(max-width:700px){ .s-network-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:440px){ .s-network-grid{ grid-template-columns:repeat(2,1fr); } }

.s-net-tile {
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s;
}
.s-net-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.s-net-tile__num {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.s-net-tile__lbl { font-size:.72rem; font-weight:800; letter-spacing:1.2px; margin:5px 0 2px; }
.s-net-tile__sub { font-size:.68rem; color:var(--s-muted); }
.s-net-tile--crit{ background:rgba(231,76,60,.12); border-color:rgba(231,76,60,.3); color:var(--s-crit); }
.s-net-tile--high{ background:rgba(230,126,34,.12); border-color:rgba(230,126,34,.3); color:var(--s-high); }
.s-net-tile--med { background:rgba(241,196,15,.10); border-color:rgba(241,196,15,.28);color:var(--s-med); }
.s-net-tile--ok  { background:rgba(46,204,113,.08); border-color:rgba(46,204,113,.25);color:var(--s-ok); }
.s-net-tile--total{background:rgba(52,152,219,.08); border-color:rgba(52,152,219,.25);color:var(--s-blue);}

/* ── Two-col layout for trend + top10 ──────────────────── */
.s-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
}
@media(max-width:900px){ .s-two-col{ grid-template-columns:1fr; } }

/* ── Trend chart ────────────────────────────────────────── */
.s-trend-wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.s-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.s-trend-title { font-size:.88rem; font-weight:700; color:rgba(255,255,255,.85); }
.s-trend-legend { display:flex; gap:8px; }
.s-leg { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:4px; }
.s-leg--crit{ background:rgba(231,76,60,.25);  color:var(--s-crit); }
.s-leg--high{ background:rgba(230,126,34,.25); color:var(--s-high); }
.s-leg--med { background:rgba(241,196,15,.2);  color:var(--s-med); }
#netTrendCanvas { width:100%; display:block; border-radius:6px; }
.s-trend-footer {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--s-muted);
  margin-top: 6px;
}

/* ── Top 10 worst ───────────────────────────────────────── */
.s-worst-wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 14px 16px;
  overflow: hidden;
}
.s-worst-list { display:flex; flex-direction:column; gap:4px; }
.s-worst-item {
  display: grid;
  grid-template-columns: 20px 46px 46px 1fr 52px 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.s-worst-item:hover { background: rgba(255,255,255,.05); }
.s-worst-rank  { font-size:.72rem; color:var(--s-muted); text-align:right; }
.s-worst-icao  { font-weight:800; font-size:.88rem; }
.s-worst-icao2 { font-size:.72rem; color:var(--s-muted); }
.s-worst-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.s-worst-bar {
  height: 100%;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: width .4s ease;
}
.s-worst-badge {
  font-size:.68rem; font-weight:800;
  padding:2px 6px; border-radius:4px;
  border:1px solid transparent;
  letter-spacing:.4px; text-align:center;
}
.s-worst-score { font-size:.75rem; color:var(--s-muted); text-align:right; font-variant-numeric:tabular-nums; }

/* ── KPI tiles (override) ───────────────────────────────── */
.tiles.tiles--statKpi {
  grid-template-columns: repeat(4,minmax(180px,1fr));
  width: 100%;
}
@media(max-width:860px){ .tiles.tiles--statKpi{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .tiles.tiles--statKpi{ grid-template-columns:1fr; } }
.tile.tile--stat { min-height:88px; padding:14px; }
.tile.tile--stat .tile__k { font-size:13px; }
.tile.tile--stat .tile__v { font-size:32px; }
.tile.tile--stat .tile__s { font-size:11px; white-space:normal; }
.tile.tile--time .tile__v {
  font-size:14px; font-family:var(--mono,monospace);
  white-space:normal; word-break:break-word; line-height:1.35;
}
.statMetaRow {
  margin:12px 0 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pill {
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14); font-weight:800; font-size:.82rem;
}
.statVizGrid {
  margin:14px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media(max-width:640px){ .statVizGrid{ grid-template-columns:1fr; } }
.statViz {
  background:rgba(0,0,0,.15); border:1px solid var(--s-border);
  border-radius:10px; padding:12px 14px;
  cursor:pointer; transition:border-color .15s;
}
.statViz:hover { border-color:rgba(255,255,255,.15); }
.statViz__k { font-size:.88rem; font-weight:700; }
.statViz__s { font-size:.75rem; color:var(--s-muted); margin-top:2px; }

/* ── Airport Deep-Dive ──────────────────────────────────── */
.s-airport-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--s-border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.s-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 0 12px;
  flex: 0 0 auto;
}
.s-search-icon { font-size:.9rem; }
.s-search-input {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.9);
  padding: 9px 0;
  font-size: .92rem;
  outline: none;
  width: 200px;
}
.s-airport-pills { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Airport panel */
.s-airport-panel {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  margin-top: 4px;
}
@media(max-width:860px){ .s-airport-panel{ grid-template-columns:1fr; } }

.s-airport-metrics, .s-airport-events {
  background: rgba(0,0,0,.15);
  border: 1px solid var(--s-border);
  border-radius: 12px;
  padding: 16px;
}
.s-ap-header { margin-bottom: 12px; }
.s-ap-name {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .5px;
  min-height: 28px;
  color: rgba(255,255,255,.95);
}
.s-ap-events-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--s-border);
}
.trendFallback { color:var(--s-muted); font-size:.85rem; padding:8px 0; }
.atlasEvents { display:flex; flex-direction:column; gap:6px; }

/* Controls */
.input, .select {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: rgba(255,255,255,.9);
  padding: 8px 12px;
  font-size: .86rem;
  outline: none;
}
.input:focus { border-color:rgba(52,152,219,.6); }
.select { cursor:pointer; }
.pickHint { font-size:.75rem; padding-left:2px; }
.pillbtn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18); color:rgba(255,255,255,.9);
  font-weight:800; font-size:.82rem; cursor:pointer; transition:all .15s;
}
.pillbtn:hover { background:rgba(255,255,255,.08); }
.pillbtn.is-on {
  border-color:rgba(52,152,219,.5);
  background:rgba(52,152,219,.15); color:#4fc3f7;
}

/* ── Atlas ──────────────────────────────────────────────── */
.s-atlas-controls {
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 0 0 14px;
}
.s-atlas-search { flex:1; min-width:150px; }
.atlasKpis { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.atlasTable { overflow-x:auto; }
.atlasTooltip {
  position:fixed; z-index:9999;
  background:rgba(10,14,26,.97);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px; padding:10px 14px;
  font-size:.82rem; max-width:320px; pointer-events:none;
}

/* ── Log ────────────────────────────────────────────────── */
.logList {
  display:flex; flex-direction:column; gap:4px;
  max-height:260px; overflow-y:auto;
}

/* ── Tooltips ───────────────────────────────────────────── */
.tile-tip {
  position:fixed; z-index:9998;
  background:rgba(10,14,26,.97);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:12px 16px;
  font-size:.83rem; max-width:360px;
  line-height:1.55; pointer-events:none;
  opacity:0; transition:opacity .15s;
}
.tile-tip.is-visible { opacity:1; pointer-events:auto; }
.tile-tip--pin { pointer-events:auto; box-shadow:0 4px 24px rgba(0,0,0,.5); }

/* ── metricGrid ─────────────────────────────────────────── */
.metricGrid { display:flex; flex-direction:column; gap:8px; }
.airportHead { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; margin-bottom:14px; }
.airportControls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }