/* Countries tab — layout from ~/25092026/Countries.html, inside the site shell */
.countries-board {
  color: #e0e4f0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 46px);
  max-height: calc(100vh - 46px);
  overflow: hidden;
  box-sizing: border-box;
}
.map-sec {
  flex: 0 0 33.333vh;
  height: 33.333vh;
  min-height: 33.333vh;
  background: #060a10; border: 1px solid #131828; border-radius: 12px;
  position: relative; overflow: hidden; margin-bottom: 12px;
}
.countries-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.map-controls { position: absolute; top: 8px; left: 14px; z-index: 10; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.map-title { font-size: 10px; font-weight: 600; color: #4a5880; letter-spacing: .04em; }
.layer-btn {
  font-size: 9px; padding: 3px 9px; border-radius: 15px; cursor: pointer;
  border: 1px solid #1a2040; color: #2a3860; background: transparent; user-select: none;
}
.layer-btn:hover { border-color: #2a4060; color: #8090c0; }
.layer-btn.on { border-color: #0e3028; color: #0fc49a; background: #081e18; }
.layer-btn.on.heat { border-color: #a03020; color: #ff8060; background: #1a0a08; }
.layer-btn.on.pulse-lb { border-color: #3a1060; color: #c080ff; background: #160820; }
.zoom-btns { display: flex; gap: 2px; margin-left: 4px; }
.zbtn {
  width: 22px; height: 22px; border-radius: 5px; background: #0d1020; border: 1px solid #1a2040;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #4a6090;
}
.zbtn:hover { background: #1a2040; color: #c0c8e0; }
.map-hint {
  position: absolute; top: 8px; right: 12px; font-size: 9px; color: #1e2848;
  background: #0d1020; border: 1px solid #1a2040; border-radius: 4px; padding: 2px 7px; z-index: 10;
}
.map-hint.on { color: #0fc49a; border-color: #0e3028; background: #081e18; }
#mapsvg { width: 100%; height: 100%; display: block; cursor: grab; }
#mapsvg.panning { cursor: grabbing; }
.cpath { fill: #0a1520; stroke: #142030; stroke-width: .4; }
.ocean-bg { fill: #050e18; }
.gratline { fill: none; stroke: #0d1828; stroke-width: .25; opacity: .5; }
.map-lbl {
  position: absolute; bottom: 7px; right: 10px; font-size: 10px; font-weight: 500; color: #0fc49a;
  background: #081e18; border: 1px solid #0e3028; border-radius: 5px; padding: 2px 9px;
  opacity: 0; z-index: 9; pointer-events: none;
}
.map-lbl.on { opacity: 1; }
.heat-legend { position: absolute; bottom: 7px; left: 14px; display: flex; align-items: center; gap: 5px; z-index: 9; }
.hl-label { font-size: 8px; color: #4a5880; }
.hl-grad { width: 80px; height: 6px; border-radius: 3px; background: linear-gradient(to right, #c03020, #404060, #1a8060); }
.breaking-flash {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 11;
  display: flex; align-items: center; gap: 5px; background: #07080f; border: 1px solid #3a1060;
  border-radius: 15px; padding: 3px 10px; font-size: 9px; color: #c080ff; white-space: nowrap;
  opacity: 0; pointer-events: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis;
}
.breaking-flash.show { opacity: 1; }
.breaking-flash .bdot { width: 6px; height: 6px; border-radius: 50%; background: #c080ff; flex-shrink: 0; }

.list-hdr { padding: 8px 4px 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lh-cnt { font-size: 9px; background: #081e18; border: 1px solid #0e3028; color: #0fc49a; border-radius: 10px; padding: 2px 7px; }
.region-strip { padding: 5px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.rc { font-size: 9px; padding: 3px 9px; border-radius: 15px; cursor: pointer; border: 1px solid #1a2040; color: #2a3860; }
.rc:hover { border-color: #2a4060; color: #8090c0; }
.rc.on { background: #081e18; border-color: #0e3028; color: #0fc49a; }
.ab { padding: 4px 0; display: flex; gap: 2px; flex-wrap: wrap; }
.al { font-size: 9px; padding: 2px 4px; border-radius: 3px; cursor: pointer; color: #1e2840; }
.al.has { color: #2a4060; }
.al.act { background: #081e18; color: #0fc49a; border: 1px solid #0e3028; }
.sort-btn {
  font-size: 9px; background: #0d1020; border: 1px solid #1a2040; border-radius: 4px;
  padding: 2px 6px; color: #4a6090; cursor: pointer;
}
.sort-btn.on { color: #0fc49a; border-color: #0e3028; }
.th-row, .crow {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.4fr) 70px 90px 100px 64px 42px 28px;
  gap: 6px; align-items: center; padding: 6px 8px;
}
.th-row { border-bottom: 1px solid #0e1020; }
.th { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; color: #1e2840; }
.crow {
  border-bottom: 1px solid #0c0e18; cursor: pointer; border-left: 2px solid transparent;
  text-decoration: none; color: inherit;
}
.crow:hover, .crow.hl { background: #091a18; border-left-color: #0fc49a; }
.crow:hover .cn, .crow.hl .cn { color: #0fc49a; }
.cn { font-size: 12px; font-weight: 600; color: #b0bcd0; }
.creg { font-size: 9px; color: #2a3860; margin-top: 1px; }
.cv { font-size: 11px; font-weight: 500; color: #8090b0; }
.cchg { font-size: 9px; padding: 1px 4px; border-radius: 3px; display: inline-block; }
.cchg.pos { background: #0a1e14; color: #2dd4a0; }
.cchg.neg { background: #1a0a0e; color: #e05060; }
.cchg.neu { background: #0d1020; color: #4a6090; }
.risk-badge {
  font-size: 10px; font-weight: 700; width: 24px; height: 24px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; border: 1px solid;
}
.albl {
  font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: #0e3028;
  background: #07080f; padding: 4px 8px 3px; border-bottom: 1px solid #0c0e18;
}
.crow-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; display: block; }
.cp-bar, .cp-mood { display: flex; align-items: center; gap: 4px; }
.cp-bar-track { flex: 1; height: 4px; background: #0e1020; border-radius: 2px; overflow: hidden; }
.cp-bar-fill { height: 100%; background: #2dd4a0; }
.cp-bar-pct { font-size: 8px; color: #2a3060; width: 28px; text-align: right; }
.cp-mood { font-size: 9px; }
.cp-mood-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.crow .wl-star {
  font-size: 12px; background: none; border: none; color: #2a3860; cursor: pointer; padding: 0;
}
.crow .wl-star.is-on { color: #f59e0b; }
@media (max-width: 800px) {
  .th-row, .crow { grid-template-columns: 28px 1fr 64px 48px 28px; }
  .hide-sm { display: none; }
}