/* Environment Lookup — TV-first map stage + slim rail (PS/Fleet pattern) */
:root {
  --bg: #0b1117;
  --panel: #121a22;
  --panel-2: #18232e;
  --line: #243140;
  --ink: #e8eef4;
  --muted: #8b9aab;
  --accent: #3d9b6e;
  --red: #e53935;
  --yellow: #f9a825;
  --green: #43a047;
  --gray: #78909c;
  --rail-w: 340px;
  --top-h: 56px;
  --bath: #c17a3a;
  --water: #2b9cdb;
  --garbage: #6b7280;
  --dust: #d4a017;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
/* Author display rules must not defeat the HTML hidden attribute */
[hidden] { display: none !important; }

/* ── Gate ── */
.gate {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(61,155,110,0.18), transparent 50%),
    var(--bg);
}
.gate-card {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  display: grid;
  gap: 10px;
}
.gate-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.gate-card h1 { margin: 0; font-size: 1.45rem; }
.gate-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.gate-label { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.gate-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 1rem;
}
.gate-card button, .btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--accent);
  color: #04140c;
  font-weight: 700;
  cursor: pointer;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 12px;
}
.gate-err { color: #ff8a80; font-size: 0.85rem; }

/* ── App shell ── */
.app {
  height: 100%;
  display: grid;
  grid-template-rows: var(--top-h) 1fr;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 18, 24, 0.96);
  height: var(--top-h);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(61,155,110,0.18);
  border: 1px solid rgba(61,155,110,0.35);
}
.brand-title { font-weight: 700; font-size: 0.98rem; white-space: nowrap; }
.brand-sub { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.search-wrap { flex: 1; max-width: 420px; }
.search-wrap input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
.top-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  white-space: nowrap;
}
.pill.soft { color: var(--muted); }
.ryg-pill { font-variant-numeric: tabular-nums; }

.layout {
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  min-height: 0;
  height: 100%;
}
.map {
  min-width: 0;
  min-height: 0;
  background: #0a1016;
}
.rail {
  border-left: 1px solid var(--line);
  background: rgba(12, 18, 24, 0.97);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}
.tab.on {
  background: rgba(61,155,110,0.22);
  border-color: rgba(61,155,110,0.55);
  color: #c8f0d8;
}

.legend-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.legend-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.legend-row { margin: 3px 0; }
.legend-row label { cursor: pointer; display: flex; align-items: center; gap: 6px; }

.ryg-legend {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}
.ryg-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.ryg-dot.red { background: var(--red); }
.ryg-dot.yellow { background: var(--yellow); }
.ryg-dot.green { background: var(--green); }
.ryg-dot.gray { background: var(--gray); }

.icon-legend { display: grid; gap: 4px; margin-top: 4px; }
.icon-leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.icon-leg-row svg { width: 36px; height: 24px; flex: 0 0 auto; }

.results-sec, .events-sec {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.events-sec { flex: 0 0 auto; max-height: 28vh; border-top: 1px solid var(--line); }
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
}
.sec-head h2 {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.muted { color: var(--muted); }
.results, .events {
  overflow: auto;
  padding: 4px 8px 12px;
  min-height: 0;
}

.result {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
}
.result:hover { background: var(--panel); }
.result.on {
  background: rgba(61,155,110,0.12);
  border-color: rgba(61,155,110,0.4);
}
.result-ico {
  width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.result-ico svg { width: 40px; height: 28px; }
.ryg-swatch {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.ryg-swatch.ryg-red { background: var(--red); }
.ryg-swatch.ryg-yellow { background: var(--yellow); }
.ryg-swatch.ryg-green { background: var(--green); }
.ryg-swatch.ryg-gray, .ryg-swatch.ryg-none { background: var(--gray); }

.result-title { font-weight: 600; font-size: 0.9rem; }
.result-sub { font-size: 0.75rem; color: var(--muted); }

.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.badge.ryg-red { background: rgba(229,57,53,0.2); color: #ff8a80; border: 1px solid rgba(229,57,53,0.45); }
.badge.ryg-yellow { background: rgba(249,168,37,0.18); color: #ffe082; border: 1px solid rgba(249,168,37,0.45); }
.badge.ryg-green { background: rgba(67,160,71,0.18); color: #a5d6a7; border: 1px solid rgba(67,160,71,0.45); }
.badge.ryg-gray, .badge.ryg-none { background: rgba(120,144,156,0.18); color: #b0bec5; border: 1px solid rgba(120,144,156,0.4); }

.event {
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 6px;
  font-size: 0.8rem;
}
.event-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.event-body { margin-top: 2px; }

.rail-foot {
  display: flex;
  gap: 12px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}
.rail-foot a { color: #9ec1ff; text-decoration: none; }

/* ── Map markers ── */
.vicon-marker, .bank-marker, .report-marker, .pt-marker {
  background: transparent !important;
  border: 0 !important;
}
.vicon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55));
  transform: translateY(-4px);
}
.vicon-wrap.moving .vicon-svg {
  animation: pulse-move 1.4s ease-in-out infinite;
}
@keyframes pulse-move {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.vicon-svg svg { display: block; width: 44px; height: 30px; }
.vicon-label {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(11, 17, 23, 0.88);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  white-space: nowrap;
  line-height: 1.3;
}
.vicon-label.cl-bathrooms { border-color: rgba(193,122,58,0.7); color: #ffcc80; }
.vicon-label.cl-water { border-color: rgba(43,156,219,0.7); color: #81d4fa; }
.vicon-label.cl-garbage { border-color: rgba(107,114,128,0.7); color: #e0e0e0; }
.vicon-label.cl-dust { border-color: rgba(212,160,23,0.7); color: #ffe082; }

.bank-pin {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(11,17,23,0.85);
  border: 3px solid var(--ryg, var(--gray));
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 10px color-mix(in srgb, var(--ryg) 45%, transparent);
  position: relative;
}
.bank-glyph { font-size: 12px; line-height: 1; }
.bank-ryg {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ryg, var(--gray));
  border: 1px solid #0b1117;
}
.bank-pin.ryg-red { animation: glow-red 1.8s ease-in-out infinite; }
@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 8px rgba(229,57,53,0.45); }
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 16px rgba(229,57,53,0.85); }
}

.report-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ryg, var(--yellow));
  border: 2px solid #0b1117;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ryg) 70%, #fff), 0 0 12px color-mix(in srgb, var(--ryg) 55%, transparent);
}
.report-pin.ryg-red { animation: glow-red 1.6s ease-in-out infinite; }
.report-pin span { display: none; }

.pt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
  opacity: 0.85;
}

.pop { font-size: 0.88rem; line-height: 1.35; }
.pop-title { font-weight: 700; margin-bottom: 2px; }

/* Leaflet chrome (dark TV) */
.leaflet-control-layers {
  background: rgba(15, 21, 28, 0.92) !important;
  color: var(--ink);
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}
.leaflet-control-layers-expanded {
  padding: 8px 10px !important;
  min-width: 140px;
}
.leaflet-control-layers-toggle {
  width: 34px !important;
  height: 34px !important;
}
.leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  background: rgba(15, 21, 28, 0.92) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-control-attribution {
  background: rgba(0,0,0,0.45) !important;
  color: #c5d0da !important;
  font-size: 10px !important;
  max-width: 42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaflet-control-attribution a { color: #9ec1ff !important; }
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content { margin: 10px 12px; font-size: 0.9rem; }

@media (min-width: 1400px) {
  :root { --rail-w: 360px; --top-h: 52px; }
  .vicon-svg svg { width: 48px; height: 32px; }
  .vicon-label { font-size: 12px; }
}
@media (min-width: 1800px) {
  :root { --rail-w: 380px; }
}

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .app { height: auto; min-height: 100%; }
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 52vh auto;
    height: auto;
  }
  .rail { max-height: none; overflow: visible; }
  .results-sec { max-height: 50vh; }
  .search-wrap { max-width: none; flex: 1 1 100%; }
  .tv-hide { display: block !important; }
  .top-meta { flex-wrap: wrap; justify-content: flex-end; }
}