/* Malaysia 3D — national twin. Peninsular Malaysia from the satellite down to
   the district. Same discipline as the atlas: the map owns the screen, every
   band above it is a label on an instrument. Sharp edges only, no gradients. */

:root {
  --bg: #070b0e;
  --bg-raised: #0d1418;
  --ink: #e8e4d8;
  --dim: #8d968f;
  --line: #1e2a2c;
  --line-bright: #33454a;
  --accent: #f48067;
  --observed: #6fcf97;
  --derived: #f2c14e;
  --satellite: #7fc4e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

/* ── Top bar: one row, 40px. Same rule as the atlas header. ─────────────── */
.n-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-bright);
  background: var(--bg);
}
.n-top h1 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.n-top .n-sub {
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* The live line sits in the existing header row — no band, no extra height —
   and the subtitle absorbs the pressure rather than a scroller appearing. */
.n-top .n-live { flex: none; color: var(--dim); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-top .n-live + .n-live { margin-left: 10px; }
.n-top .n-live.live { color: var(--observed); }
.n-top .n-live.unknown { color: var(--line-bright); }
.n-top nav { display: flex; gap: 10px; margin-left: auto; flex: none; }
.n-top nav a {
  display:inline-flex;align-items:center;min-height:24px;
  color: var(--dim);
  text-decoration: none;
  font-size: 11px;
  padding: 0 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.n-top nav a:hover { color: var(--ink); border-color: var(--line-bright); }

/* ── Map owns the rest ──────────────────────────────────────────────────── */
#n-map { position: absolute; inset: 40px 0 24px 0; }

/* ── Left rail ──────────────────────────────────────────────────────────── */
.n-rail {
  position: absolute;
  top: 82px;
  left: 10px;
  width: 250px;
  max-height: calc(100% - 115px);
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--line-bright);
  z-index: 5;
}
.n-rail h2 {
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
}
.n-layer {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  min-height: 44px;
}
.n-layer:hover { background: #101a1e; }
.n-layer input { margin: 2px 0 0; accent-color: var(--accent); }
.n-layer .n-name { font-weight: 600; font-size: 12px; }
.n-layer .n-note { color: var(--dim); font-size: 11px; margin-top: 1px; }

/* The tier tag is the whole point of this panel: a sensor detection, a ground
   station and a computed centroid must never look like the same kind of fact. */
.n-tier {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 4px;
  margin-top: 3px;
  border: 1px solid;
}
.n-tier.observed { color: var(--observed); border-color: var(--observed); }
.n-tier.satellite { color: var(--satellite); border-color: var(--satellite); }
.n-tier.derived { color: var(--derived); border-color: var(--derived); }

/* ── Status bar ─────────────────────────────────────────────────────────── */
.n-status {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  border-top: 1px solid var(--line-bright);
  background: var(--bg);
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  overflow-x: auto;
  z-index: 6;
}
.n-status b { color: var(--ink); font-weight: 600; }
.n-status .fail { color: var(--accent); }

/* ── Map furniture ──────────────────────────────────────────────────────── */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib a { background: rgba(7, 11, 14, 0.85); color: var(--dim); font-size: 10px; }
.maplibregl-popup-content {
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  padding: 0;
  font: inherit;
}
.maplibregl-popup-tip { border-top-color: var(--line-bright); border-bottom-color: var(--line-bright); }
.n-pop { min-width: 190px; }
.n-pop .n-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 9px; border-bottom: 1px solid var(--line); }
.n-pop .n-row span { color: var(--dim); }
.n-pop .n-head { padding: 6px 9px; font-weight: 700; border-bottom: 1px solid var(--line-bright); }
.n-pop .n-src { padding: 5px 9px; color: var(--dim); font-size: 10px; }

.n-legend { position: absolute; bottom: 64px; right: 10px; z-index: 5; background: var(--bg-raised); border: 1px solid var(--line-bright); padding: 6px 9px; font-size: 11px; }
.n-legend div { display: flex; align-items: center; gap: 6px; }
.n-legend i { width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(0,0,0,0.4); }

@media (max-width: 700px) {
  .n-rail { width: calc(100% - 20px); max-height: 38%; }
  .n-top .n-sub { display: none; }
  /* On a phone the map owns the screen: the header carries identity and
     navigation only, so the live line steps aside. */
  .n-top .n-live { display: none; }
}
/* Compact disclosures keep the imagery clear and offer keyboard point selection. */
[hidden] { display: none !important; }
.n-tools { position:absolute;top:48px;left:10px;z-index:6;display:flex;gap:4px;max-width:calc(100% - 20px);flex-wrap:wrap; }
.n-tools button,#retry-feeds,#tilt-view { color:var(--ink);background:var(--bg-raised);border:1px solid var(--line-bright);padding:2px 6px;font:inherit;min-height:26px;cursor:pointer; }
.n-tools button[aria-expanded=true] { border-bottom:2px solid var(--derived); }
.n-rail a { color:var(--satellite); }
.n-inspect { display:block;margin:8px 10px;font-weight:600; }
.n-inspect select { width:100%;min-height:32px;background:var(--bg);color:var(--ink);border:1px solid var(--line-bright);font:inherit; }
.n-caution,#air-check,#failures { margin:8px 10px;font-size:11px; }
#retry-feeds { margin:0 10px 8px; }
.fail { color:var(--accent); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--derived);outline-offset:2px; }
.maplibregl-popup-content { box-shadow:none; }
.maplibregl-popup-close-button { width:28px;height:28px;color:var(--ink);background:var(--bg-raised); }
.n-pop .n-head { padding-right:30px; }
@media(max-width:700px) {
 .n-top { gap:4px;padding:0 8px; }.n-top nav { gap:2px; }.n-top nav a { padding:2px;font-size:10px; }.n-top h1{font-size:12px;}
 .n-tools button { min-height:44px;font-size:11px; }.n-tools{gap:2px;}.n-rail{top:98px;max-height:calc(100% - 140px);}
 .n-legend { font-size:10px;max-width:180px; }.n-inspect select,#retry-feeds,#tilt-view { min-height:44px; }
}
.n-rail:not([hidden]) ~ .n-legend { display:none; }