/* =========================================================================
   AXIOM DNA — MTT Digital Twin · v0.4 (3-col layout, every building)
   ========================================================================= */

:root {
  --paper:    #0a0e1a;
  --panel:    #14141f;
  --panel-2:  #1c1c2a;
  --ink:      #f0f0f5;
  --ink-2:    #9a9ab0;
  --ink-3:    #5a5a6c;
  --line:     #1f1f2a;
  --line-2:   #2a2a3a;

  --blue:     #5a6a88;
  --red:      #f0594e;
  --neon:     #f59e0b;
  --green:    #5cb85c;
  --orange:   #f0ad4e;
  --cyan:     #5bc0de;

  --ff:       'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-display: 'Josefin Sans', 'Source Sans 3', sans-serif;

  --pad-out:  18px;
  --pad-cell: 11px 13px;
  --gap-1:    6px;
  --gap-2:    13px;
  --gap-3:    21px;
  --gap-4:    34px;

  --hair:     1px solid var(--line);
  --hair-2:   1px solid var(--line-2);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  height: auto; max-height: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff);
  font-variant-numeric: tabular-nums;
  font-size: 14px; line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  display: flex; flex-direction: column;
  min-height: 100vh;
  height: auto; max-height: none;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

::selection { background: var(--neon); color: #0a0e1a; }
a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  font: inherit; font-family: var(--ff);
  background: transparent;
  border: var(--hair-2);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 80ms, color 80ms, border-color 80ms;
}
button:hover { background: var(--panel-2); border-color: var(--neon); color: var(--neon); }
button.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
input[type="text"] {
  font: inherit; font-family: var(--ff);
  background: var(--panel);
  border: var(--hair-2);
  color: var(--ink);
  padding: 7px 11px;
  outline: none;
  width: 100%;
}
input[type="text"]::placeholder { color: var(--ink-3); }
input[type="text"]:focus { border-color: var(--neon); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  animation: pulse 2.4s ease-in-out infinite;
  flex: none;
}

/* =========================================================================
   0. TOP BAR + NEWS TICKER
   ========================================================================= */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-out);
  height: 36px; flex: 0 0 36px;
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.topbar__tabs { display: flex; gap: 0; }
.tab {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px; height: 36px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.tab--active { color: var(--neon); border-bottom-color: var(--neon); }
.topbar__time {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-2);
}
.topbar__time #topbar-date { color: var(--neon); letter-spacing: 0.14em; }
.topbar__live { color: var(--red); display: inline-flex; align-items: center; gap: 5px; }

.news-ticker {
  display: flex; align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid var(--red);
  font-size: 11px;
  height: 28px; flex: 0 0 28px;
  overflow: hidden;
}
.news-ticker__label {
  background: var(--red); color: var(--paper);
  font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 13px;
  display: inline-flex; align-items: center; flex: none;
}
.news-ticker__stream {
  display: flex; gap: 38px;
  align-items: center;
  padding-left: 22px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-2);
  flex: 1;
}
.news-ticker__stream span { font-weight: 500; }
.news-ticker__stream span:first-child::before { content: '▶'; color: var(--neon); margin-right: 8px; }

/* =========================================================================
   1. MASTHEAD
   ========================================================================= */
.masthead {
  background: rgba(10, 14, 26, 0.96);
  border-bottom: 2px solid var(--neon);
  flex: 0 0 auto;
}
.masthead__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: var(--gap-2);
  padding: 6px var(--pad-out);
  border-right: var(--hair-2);
  flex: none;
}
.brand__disc {
  width: 30px; height: 30px;
  background: var(--neon); color: var(--paper);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
}
.brand__disc--hub { background: var(--ink); }
.brand__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; }
.brand__title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-family: var(--ff-display); }
.brand__sub { font-size: 11px; color: var(--ink-2); letter-spacing: 0.04em; }

.vitals {
  display: flex; flex: 1;
  border-right: var(--hair-2);
}
.vital {
  flex: 1;
  padding: 5px 10px;
  border-right: var(--hair-2);
  display: flex; flex-direction: column; justify-content: center;
}
.vital:last-child { border-right: none; }
.vital__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.vital__value {
  font-size: 14px; font-weight: 600; line-height: 1.05;
  color: var(--ink);
}
.vital__value--red { color: var(--red); }
.vital__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; color: var(--ink-2); text-transform: uppercase; }

.claim { display: flex; border-left: var(--hair-2); flex: none; }
.claim__chip {
  background: var(--red); color: var(--paper);
  padding: 0 12px;
  display: flex; align-items: center;
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  text-transform: uppercase; flex: none;
}
.claim__body {
  padding: 6px 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  background: var(--panel);
}
.claim__body strong { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--ink); }
.claim__body small { color: var(--ink-2); font-size: 11px; }

/* CEO decision strip — one narrative line under the masthead */
.decision {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 5px var(--pad-out);
  background: var(--panel);
  border-bottom: var(--hair-2);
  min-height: 32px;
  flex: 0 0 auto;
}
.decision__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--neon); text-transform: uppercase;
  flex: none;
}
.decision__line {
  flex: 1 1 220px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.25;
  min-width: 0;
}
.decision__line b { color: var(--neon); font-weight: 700; }
.decision__line .d-warn { color: var(--orange); }
.decision__line .d-hot { color: var(--red); }
.decision__line .d-ok { color: var(--green); }
.decision__line small {
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.decision__jump {
  flex: none;
  min-height: 44px;
  padding: 8px 12px;
  border: var(--hair-2);
  background: transparent;
  color: var(--ink);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.decision__jump:hover,
.decision__jump:focus-visible {
  border-color: var(--neon); color: var(--neon); outline: none;
}
.decision__jump:active { transform: scale(0.97); }
.vital[data-d="traffic"] .vital__value { color: var(--neon); }
.vital[data-d="halls"] .vital__value { color: var(--red); }

/* =========================================================================
   2. MAIN LAYOUT — IOC Command Center Screen (No Outer Bleed)
   ========================================================================= */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 0;
  /* Fill the remaining space below the topbar. flex:1 1 0% (NOT
     `auto`) — the auto basis uses the lpanel's content size, which
     stops the layout from ever growing past that. With 0% basis
     the layout expands to whatever the lower bands don't take. */
  flex: none;
  height: max(580px, calc(100vh - 180px));
  min-height: 580px;
  overflow: hidden !important;
  border-bottom: var(--hair-2);
  background: var(--paper);
}
.lpanel, .rpanel {
  background: var(--panel);
  border-right: var(--hair-2);
  display: flex; flex-direction: column;
  height: 100%; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
}
.rpanel { border-right: none; border-left: var(--hair-2); }

/* L/R panel sections */
.lpanel__section, .rpanel__section {
  border-bottom: var(--hair-2);
  padding: 14px var(--pad-out);
  display: flex; flex-direction: column; gap: 9px;
}
.lpanel__section--scroll, .rpanel__section--scroll {
  max-height: 260px; overflow-y: auto;
}
.lpanel__section--scroll::-webkit-scrollbar,
.rpanel__section--scroll::-webkit-scrollbar { width: 4px; }
.lpanel__section--scroll::-webkit-scrollbar-thumb { background: var(--line-2); }

.lpanel__head, .rpanel__head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 8px;
  border-bottom: var(--hair);
}
.lpanel__disc, .rpanel__disc {
  width: 18px; height: 18px;
  background: var(--blue); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: none;
}
.lpanel__title, .rpanel__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neon);
}
.lpanel__meta, .rpanel__meta {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase;
}
.rpanel__tab {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-3);
  padding: 3px 7px;
  border: var(--hair);
  cursor: pointer;
  text-transform: uppercase;
}
.rpanel__tab.is-active { color: var(--neon); border-color: var(--neon); }

.lpanel__foot, .rpanel__foot {
  margin-top: 5px;
  padding-top: 9px;
  border-top: var(--hair);
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Alert */
.alert {
  background: rgba(240, 89, 78, 0.08);
  border: 1px solid var(--red);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.alert__head { display: flex; gap: 6px; }
.alert__tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 6px;
  background: var(--ink-3); color: var(--paper);
}
.alert__tag--red { background: var(--red); color: var(--paper); }
.alert__title { font-size: 14px; font-weight: 600; color: var(--ink); }
.alert__body { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.alert__link {
  font-size: 11px; font-weight: 600;
  color: var(--red); letter-spacing: 0.04em;
}

/* Bars */
.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-row__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.bar-row__top b { font-weight: 600; color: var(--ink); }
.bar-row__num { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar {
  position: relative;
  background: var(--panel-2);
  height: 6px;
  overflow: hidden;
}
.bar__fill { height: 100%; }
.bar__mute {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-3);
}

/* Hall list */
.hall-list { display: flex; flex-direction: column; }
.hall-row {
  display: grid;
  grid-template-columns: 6px 56px 1fr 64px 64px;
  align-items: center;
  border-bottom: var(--hair);
  cursor: pointer;
  position: relative;
}
.hall-row:last-child { border-bottom: none; }
.hall-row:hover { background: var(--panel-2); }
.hall-row.is-selected { background: var(--panel-2); }
.hall-row.is-selected::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--neon);
}
.hall-row__bar { height: 36px; align-self: stretch; }
.hall-row[data-status="LIVE"]      .hall-row__bar { background: var(--red); }
.hall-row[data-status="SETUP"]     .hall-row__bar { background: var(--blue); }
.hall-row[data-status="BOOKED"]    .hall-row__bar { background: var(--ink-2); }
.hall-row[data-status="AVAILABLE"] .hall-row__bar { background: var(--ink-3); }
.hall-row[data-status="CLOSED"]    .hallall-row__bar, .hall-row[data-status="CLOSED"] .hall-row__bar { background: var(--ink-3); }
.hall-row__code {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; color: var(--neon);
  padding: 10px 11px;
}
.hall-row__name {
  padding: 7px 0;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.hall-row__name b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hall-row__name small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
.hall-row__capacity { font-size: 11px; font-weight: 600; text-align: right; padding: 0 9px; color: var(--ink-2); }
.hall-row__status {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  text-align: right; padding: 0 9px;
}
.hall-row[data-status="LIVE"]      .hall-row__status { color: var(--red); }
.hall-row[data-status="SETUP"]     .hall-row__status { color: var(--blue); }
.hall-row[data-status="BOOKED"]    .hall-row__status { color: var(--ink-2); }
.hall-row[data-status="AVAILABLE"] .hall-row__status { color: var(--ink-3); }
.hall-row[data-status="CLOSED"]    .hall-row__status { color: var(--ink-3); }

/* Legend grid */
.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 11px;
  color: var(--ink-2);
}
.legend-grid__cell { display: flex; align-items: center; gap: 7px; }
.legend-grid__cell i {
  width: 10px; height: 10px; display: inline-block; flex: none;
}

/* =========================================================================
   3. MAP AREA
   ========================================================================= */
.map-area {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-right: var(--hair-2);
}
.map-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2);
  padding: 11px var(--pad-out);
  border-bottom: var(--hair-2);
}
.map-header__search { flex: 1; min-width: 180px; }
.map-header__group { display: flex; flex-wrap: wrap; gap: 0; }
.map-toggle {
  background: var(--panel);
  border: var(--hair-2);
  border-right: none;
  padding: 7px 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
}
.map-toggle:last-child { border-right: var(--hair-2); }
.map-toggle.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
/* Accent variant — the FACILITY GUIDES trigger. Same dimensions, but neon
   outline + neon text so it reads as a primary action in the toolbar. */
.map-toggle--accent {
  color: var(--neon);
  border-color: var(--neon);
  background: var(--panel);
}
.map-toggle--accent:hover {
  background: var(--neon); color: var(--paper);
}
.map-toggle--accent.is-active {
  background: var(--neon); color: var(--paper); border-color: var(--neon);
}

.map-canvas {
  position: relative;
  flex: 1;
  min-height: 480px;
  background: var(--paper);
  overflow: hidden;
}
/* MapLibre fills #twin-3d-wrap directly (no separate canvas).
   The .map-canvas div and #twin-3d-wrap are the same element (id on the
   same div), so this rule intentionally does NOT set position — the
   .map-canvas class already gives us position:relative + flex:1 inside
   the .map-area column. An older revision had position:absolute;inset:0
   here, which made the canvas fill the entire .map-area (including under
   the toolbar) and was the root cause of clicks being intercepted. */
#twin-3d-wrap .maplibregl-canvas { outline: none; }
#twin-3d-wrap .maplibregl-ctrl-group { background: rgba(10, 14, 26, 0.92); border: 1px solid var(--line-2); border-radius: 0; }
#twin-3d-wrap .maplibregl-ctrl-group button { background: transparent; color: var(--ink-2); border-radius: 0; }
#twin-3d-wrap .maplibregl-ctrl-group button:hover { background: var(--ink); color: var(--paper); }
#twin-3d-wrap .maplibregl-ctrl-bottom-right { bottom: 58px; }
#twin-3d-wrap .maplibregl-ctrl-attrib { background: rgba(10, 14, 26, 0.78); color: var(--ink-3); }
#twin-3d-wrap .maplibregl-ctrl-attrib a { color: var(--ink-2); }

/* House style: zero rounded corners, zero drop shadows — override MapLibre's popup defaults */
.mtt-road-popup .maplibregl-popup-content {
  background: rgba(10, 14, 26, 0.95); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 0;
  padding: 9px 11px; font-size: 11px; line-height: 1.4;
}
.mtt-road-popup .maplibregl-popup-tip { display: none; }
.mtt-road-popup .maplibregl-popup-close-button { color: var(--ink-2); border-radius: 0; }
.mtt-road-popup b { color: var(--neon); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.mtt-road-popup small { color: var(--ink-2); }

.twin-legend {
  position: absolute; bottom: 11px; left: 11px;
  background: rgba(10, 14, 26, 0.92);
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  z-index: 5;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  max-width: calc(100% - 320px);
  max-height: 118px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.map-legend__sep {
  width: 1px; height: 12px; background: var(--line-2);
}
.map-legend__item {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.map-legend__swatch {
  width: 11px; height: 11px;
  border: 1px solid var(--line-2);
  display: inline-block;
}
.map-legend__item--note { color: var(--ink-3); font-style: italic; letter-spacing: 0.02em; }

.twin-help {
  position: absolute; top: 11px; right: 11px;
  background: rgba(10, 14, 26, 0.92);
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  z-index: 5;
  font-size: 11px; font-weight: 500;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 7px;
}
.twin-help b { font-weight: 700; color: var(--neon); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.twin-help__sep { color: var(--ink-3); }

/* Rotation widget — 4 cardinal-direction buttons + a spin toggle.
   Top-left of the map, below the topbar tabs. Same chrome as the
   .twin-help and .detail panels.  is-active lights up the current
   bearing (rounded to the nearest 90°). */
.rot-widget {
  position: absolute; top: 11px; left: 11px;
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid var(--line-2);
  z-index: 6;
  display: grid;
  grid-template-columns: 32px 32px 32px 32px 1px 32px;
  grid-template-rows: 32px;
  gap: 0;
  padding: 0;
}
.rot-widget__btn {
  background: var(--panel);
  border: none;
  color: var(--ink-2);
  font: 700 11px/1 var(--ff-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.rot-widget__btn:hover { background: var(--panel-2); color: var(--neon); }
.rot-widget__btn.is-active {
  background: var(--neon);
  color: var(--paper);
}
.rot-widget__btn--n { grid-column: 1; }
.rot-widget__btn--e { grid-column: 2; }
.rot-widget__btn--s { grid-column: 3; }
.rot-widget__btn--w { grid-column: 4; }
.rot-widget__divider {
  background: var(--line-2);
  grid-column: 5;
}
.rot-widget__btn--spin {
  grid-column: 6;
  font-size: 15px;
}
.rot-widget__btn--spin.is-active {
  background: var(--neon);
  color: var(--paper);
  animation: rot-spin-pulse 1.6s ease-in-out infinite;
}
@keyframes rot-spin-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.twin-help__btn {
  padding: 4px 9px !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  background: var(--panel) !important;
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  text-transform: uppercase;
}
.twin-help__btn:hover { background: var(--neon) !important; color: var(--paper) !important; }
.twin-help__btn--square {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
.map-legend__item--feed {
  color: var(--neon);
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-weight: 700;
  text-transform: uppercase;
}

/* On-map floor switcher removed 2026-07-22 (BitmapLayer overlay gone). */

.floorplan-legend {
  position: absolute; bottom: 11px; right: 11px;
  background: rgba(10, 14, 26, 0.92);
  padding: 7px 11px;
  border: 1px solid var(--neon);
  z-index: 5;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  max-width: 280px;
}
.floorplan-legend[hidden] { display: none; }
.floorplan-legend__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neon); width: 100%;
}

.hall-row__util {
  display: block; height: 3px; background: var(--line-2);
  margin-top: 4px; width: 100%;
}
.hall-row__util-fill {
  display: block; height: 100%; background: var(--red);
}

.detail__util {
  display: block; height: 4px; background: var(--line-2);
  margin: 4px 0 2px; width: 100%;
}
.detail__util-fill { display: block; height: 100%; }

/* Detail panel (overlay on map area) — docked upper-right, capped height,
   scrolls internally so it never covers the map or the bottom legends. */
.detail {
  position: absolute;
  right: 13px; top: 122px;   /* clears the ~57px map-header + the top-right twin-help hint (to ~114px) */
  width: 360px;
  max-height: calc(100% - 234px);   /* leaves the bottom-right floorplan-legend uncovered */
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--neon);
  z-index: 6;
}
.detail__head { position: sticky; top: 0; z-index: 1; }
.detail__head {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 11px 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--neon);
  cursor: default;
}
.detail__head b { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.detail__head small { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }

/* Collapse toggle — yellow tap on the right edge of the head */
.detail__toggle {
  margin-left: auto;          /* push to far right of the head row */
  background: transparent;
  border: 1px solid var(--neon);
  color: var(--neon);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0; line-height: 1;
  font: 700 14px/1 var(--ff-display);
  transition: background 0.12s, color 0.12s;
}
.detail__toggle:hover { background: var(--neon); color: var(--paper); }
.detail__toggle-glyph { display: inline-block; }

/* Collapsed state — hide the body, keep the head visible (yellow tap stays
   discoverable). The tap becomes a "+" hint to re-open. */
.detail[data-collapsed="true"] {
  max-height: 40px;           /* just the head row */
  overflow: hidden;
}
.detail[data-collapsed="true"] .detail__body { display: none; }
.detail[data-collapsed="true"] .detail__head {
  border-bottom-color: transparent;  /* visual rest when collapsed */
}
.detail[data-collapsed="true"] .detail__toggle-glyph::before {
  content: '+';
}
.detail[data-collapsed="true"] .detail__toggle-glyph { font-size: 16px; }
/* Hide the literal "−" when collapsed — replaced by the ::before "+" */
.detail[data-collapsed="true"] .detail__toggle-glyph { color: transparent; position: relative; }
.detail[data-collapsed="true"] .detail__toggle-glyph::before {
  color: var(--neon);
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.detail__body { padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.detail__row {
  display: grid; grid-template-columns: 76px 1fr; gap: 11px;
  align-items: baseline; padding-bottom: 6px;
  border-bottom: var(--hair);
}
.detail__row:last-child { border-bottom: none; padding-bottom: 0; }
.detail__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon); }
.detail__value { font-size: 14px; font-weight: 500; display: flex; align-items: baseline; gap: 7px; min-width: 0; color: var(--ink); }
.detail__value b { font-weight: 600; }
.detail__value small { color: var(--ink-2); font-size: 11px; }
.detail__value i { color: var(--ink-3); font-style: italic; }
.detail__pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px;
  border: var(--hair-2);
}
.detail__pill .live-dot { background: currentColor; }
.detail__pill[data-status="LIVE"]      { color: var(--red); border-color: var(--red); }
.detail__pill[data-status="SETUP"]     { color: var(--blue); border-color: var(--blue); }
.detail__pill[data-status="BOOKED"]    { color: var(--ink); border-color: var(--ink); }
.detail__pill[data-status="AVAILABLE"] { color: var(--ink-2); border-color: var(--line-2); }
.detail__pill[data-status="CLOSED"]    { color: var(--ink-3); border-color: var(--ink-3); }

/* Source-tier badge — surfaces the "illustrative" label on event rows
   per work-order mtt.md F3. Amber outline + monospace caps; matches the
   §11.10 contrast floor (4.5:1 on the dark panel). */
.detail__tier {
  display: inline-block;
  font-family: var(--ff-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 5px; margin-left: 4px;
  color: #c8983a; border: 1px solid #c8983a;
  background: transparent;
  vertical-align: middle;
}

/* =========================================================================
   3b. FACILITY GUIDES PANEL (slide-in from left of map area)
   ========================================================================= */
.guide {
  position: absolute;
  left: 13px; top: 13px;
  width: 380px;
  max-height: calc(100% - 26px);
  background: var(--panel);
  border: 1px solid var(--neon);
  z-index: 7;
  display: flex; flex-direction: column;
}
.guide[hidden] { display: none; }
.guide__head {
  background: var(--neon); color: var(--paper);
  padding: 11px 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gap-2);
}
.guide__head b { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; display: block; }
.guide__head small {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  display: block; margin-top: 3px; opacity: 0.85;
}
.guide__close {
  background: transparent; border: 1px solid var(--paper);
  color: var(--paper);
  width: 24px; height: 24px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.guide__close:hover { background: var(--paper); color: var(--neon); }
.guide__body {
  padding: 11px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
  flex: 1; min-height: 0;
}
.guide__section { display: flex; flex-direction: column; gap: 8px; }
.guide__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--neon);
  border-bottom: var(--hair-2);
  padding-bottom: 4px;
}
.guide__hint {
  font-size: 11px; color: var(--ink-2);
  margin: 0 0 4px 0; line-height: 1.4;
}

/* Floor-plan preview (axis-aligned HTML img of the rotated source).
   In 'full' mode it shows the entire floor (8 halls); in 'hall' mode
   it crops to a single hall. Either way, the image is rendered by the
   browser, so it's exactly aligned with the panel — no MapLibre warp,
   no polygon-vertex shear. */
.guide__viewer {
  border: 1px solid var(--line-2);
  background: var(--paper);
  overflow: hidden;
}
.guide__viewer[hidden] { display: none; }
.guide__viewer-meta {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--neon);
  padding: 6px 9px;
  border-bottom: var(--hair);
  background: var(--panel-2);
}
.guide__viewer img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  background: var(--paper);
}
.guide__viewer[data-mode="hall"] img {
  /* Per-hall crops are already small (600×600); constrain tighter
     so the layout reads cleanly when a hall is selected. */
  max-height: 320px;
}

/* Floor-plan picker — 2-col grid of thumbnails */
.guide__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.guide__fp {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: flex; flex-direction: column;
  text-align: left;
  font: inherit;
  overflow: hidden;
}
.guide__fp:hover { border-color: var(--ink-2); }
.guide__fp.is-active {
  border-color: var(--neon);
  border-width: 2px;
}
.guide__fp img {
  width: 100%; height: 78px;
  object-fit: cover; object-position: top;
  display: block;
  background: var(--paper);
}
.guide__fp span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 7px;
  color: var(--ink);
  border-top: var(--hair);
  display: block;
}
.guide__fp.is-active span { color: var(--neon); }
.guide__fp--off {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 7px;
  border-style: dashed;
  color: var(--ink-3);
}
.guide__fp--off span { border: none; padding: 0; display: inline; color: inherit; }
.guide__fp-off-mark { font-size: 14px; line-height: 1; }

/* Documents / virtual-tour list */
.guide__doc {
  background: var(--panel-2);
  border: var(--hair-2);
  padding: 8px 11px;
  display: flex; flex-direction: column;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
}
.guide__doc:hover { border-color: var(--neon); color: var(--neon); }
.guide__doc-name { font-size: 14px; font-weight: 600; }
.guide__doc small {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-3);
}

.guide__credit {
  font-size: 11px; color: var(--ink-3);
  line-height: 1.4;
  border-top: var(--hair);
  padding-top: 8px;
}

/* =========================================================================
   4. RIGHT PANEL — trends, news, lens, layers, counts
   ========================================================================= */
.trends { display: flex; flex-direction: column; gap: 7px; }
.trends__search {
  background: var(--panel-2); padding: 7px 11px;
  font-size: 11px; color: var(--ink-2);
  border: var(--hair);
}
.trends__chart {
  background: var(--panel-2);
  padding: 11px;
}
.trends__chart svg { width: 100%; height: 60px; display: block; }
.trends__axis {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--ink-3);
  margin-top: 5px;
}

.news-card {
  background: var(--panel-2);
  border-left: 2px solid var(--red);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 4px;
}
.news-card__head { display: flex; align-items: center; gap: 8px; }
.news-card__tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 6px; background: var(--red); color: var(--paper);
}
.news-card__rel { font-size: 11px; color: var(--ink-3); letter-spacing: 0.10em; }
.news-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.news-card__source {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3);
  text-transform: uppercase;
}

.lens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.lens-btn {
  background: var(--panel-2); color: var(--ink-2);
  border: none;
  padding: 11px 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
}
.lens-btn:hover { background: var(--panel); color: var(--ink); }
.lens-btn.is-active {
  background: var(--blue); color: var(--paper);
}
.lens-help {
  font-size: 11px; color: var(--ink-2);
  line-height: 1.35;
  margin: 0;
  padding: 9px 11px;
  background: var(--panel-2);
  border: var(--hair);
}

.ops-body:empty { display: none; }
.ops-section { margin-top: 10px; }
.ops-section__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon);
  margin-bottom: 5px;
}
.ops-selfcheck {
  margin-top: 10px; padding: 8px 10px;
  font-size: 11px; color: var(--ink-2); line-height: 1.4;
  background: var(--panel-2); border: var(--hair);
}

.layer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0;
  border-bottom: var(--hair);
  font-size: 11px;
}
.layer-row:last-child { border-bottom: none; }
.layer-row__name { color: var(--ink-2); }

/* Switch */
.switch { position: relative; display: inline-block; width: 30px; height: 16px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0;
  background: var(--ink-3);
  transition: background 100ms;
}
.switch span::before {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 2px;
  background: var(--paper);
  transition: transform 100ms;
}
.switch input:checked + span { background: var(--neon); }
.switch input:checked + span::before { transform: translateX(14px); }

.rpanel__section--last { border-bottom: none; }
.rpanel__counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.rpanel__counts > div {
  background: var(--panel-2);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.rpanel__counts b {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.rpanel__counts span {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase;
}

/* =========================================================================
   5. TRAFFIC BAND  (slim — ≤ 10% of viewport, map = primary)
   ========================================================================= */
.traffic {
  padding: 4px var(--pad-out) 5px;
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.traffic__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
  height: 18px;
}
.traffic__head-l { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.traffic__title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.traffic__sub { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--neon); }
.traffic__head-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.traffic__cwr {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 1px 5px; margin-right: 3px;
  background: rgba(246, 201, 14, 0.08);
  border: 1px solid rgba(246, 201, 14, 0.4);
  font-variant-numeric: tabular-nums;
}
.traffic__cwr-l {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--neon); text-transform: uppercase;
}
.traffic__cwr-v { font-size: 11px; font-weight: 700; color: var(--neon); }
.traffic__cwr-s { font-size: 11px; color: var(--ink-2); font-weight: 500; }
.traffic__time { font-size: 11px; font-weight: 600; color: var(--neon); font-variant-numeric: tabular-nums; }
.traffic__loc { font-size: 11px; color: var(--ink-3); letter-spacing: 0.10em; text-transform: uppercase; }
.traffic__dow {
  padding: 1px 5px;
  font-size: 11px; letter-spacing: 0.10em; font-weight: 700;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.traffic__dow.is-active {
  background: rgba(246, 201, 14, 0.12);
  color: var(--neon); border-color: var(--neon);
}
.traffic__hour {
  width: 110px;
  accent-color: var(--neon);
  margin: 0;
}
/* ---- Strip: 24h city-wide + 7 corridors in a single row ----
   The 24h city profile (left, 60%) and the 7 corridor fills (right,
   40%) sit side-by-side. Together they're the "hour of day" model
   and never exceed ~38 px tall. */
.traffic__strip {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1px;
  background: var(--line-2);
  border: var(--hair-2);
}
.traffic__strip-24h {
  height: 36px;
  background: var(--panel);
  position: relative;
  overflow: hidden;
}
.traffic__strip-24h svg { display: block; }
.traffic__strip-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  height: 36px;
}
.traffic__strip-bars .traffic-bar {
  background: var(--panel);
  padding: 1px 0 2px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 1px;
  overflow: hidden;
}
.traffic__strip-bars .traffic-bar__pct {
  font-size: 11px; font-weight: 700;
  color: var(--neon); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.traffic__strip-bars .traffic-bar__track {
  width: 60%;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
  margin: 0 auto;
}
.traffic__strip-bars .traffic-bar__fill {
  height: 100%;
  transition: width 0.15s ease;
}
.traffic__strip-bars .traffic-bar__name,
.traffic__strip-bars .traffic-bar__class { display: none; }
/* ---- Quick-stats row (4 cells + 1 note) ----
   One horizontal row, ~22 px tall. The note replaces the old gmap
   placeholder (the "live signals" caveat text). */
.traffic__qs {
  display: grid;
  grid-template-columns: 110px 110px 130px 130px minmax(0, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: var(--hair-2);
  border-top: none;
}
.traffic__qs-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--panel);
  font-size: 11px; line-height: 1;
  min-height: 20px;
  overflow: hidden;
}
.traffic__qs-cell--gap { background: rgba(240, 89, 78, 0.06); }
.traffic__qs-cell--note {
  font-size: 11px; color: var(--ink-3);
  background: var(--panel);
  white-space: nowrap; overflow: hidden;
}
.traffic__qs-l {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--neon); text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.traffic__qs-v {
  font-size: 11px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.traffic__qs-v small { color: var(--ink-3); font-weight: 500; }

/* =========================================================================
   6. DATA SHADOW + ENV
   ========================================================================= */
.shadow {
  padding: 24px;
  background: var(--panel);
}
/* .gmap__placeholder-* removed 2026-09-26 — Google Maps integration was
   retired; the placeholder markup it styled hasn't existed for months. */
.traffic-side { border-left: var(--hair-2); }
.traffic-stat {
  padding: 10px 14px;
  border-bottom: var(--hair);
  display: flex; flex-direction: column; gap: 2px;
}
.traffic-stat:last-child { border-bottom: none; }
.traffic-stat__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--neon); text-transform: uppercase; }
.traffic-stat__value { font-size: 14px; font-weight: 600; line-height: 1.05; color: var(--ink); }
.traffic-stat__sub { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.traffic-stat--gap .traffic-stat__value { color: var(--ink-3); font-style: italic; font-size: 14px; font-weight: 600; }
.traffic-stat--gap { background: rgba(240, 89, 78, 0.08); }

/* =========================================================================
   6. DATA SHADOW + ENV  (slim — single row each)
   ========================================================================= */
.shadow {
  padding: 5px var(--pad-out);
  background: var(--paper);
  border-bottom: var(--hair-2);
}
.shadow__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.shadow__title { display: flex; align-items: baseline; gap: 9px; }
.shadow__title b {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.shadow__title small { font-size: 11px; color: var(--ink-2); }
.shadow__counts {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  display: inline-flex; align-items: center; gap: 5px;
}
.shadow__grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--hair-2);
}
.shadow__cell {
  background: var(--panel);
  padding: 4px 8px 5px;
  display: flex; flex-direction: column; gap: 1px;
  min-height: 0;
  overflow: hidden;
}
.shadow__num { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--neon); }
.shadow__label {
  font-size: 11px; font-weight: 600; line-height: 1.15; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shadow__status {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--red);
  display: inline-flex; align-items: center; gap: 4px;
}
.shadow__status .live-dot { background: var(--red); }
.shadow__why { display: none; }

.env {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: var(--hair-2);
  border-bottom: 1px solid var(--neon);
}
.env__cell {
  background: var(--panel);
  padding: 5px 12px 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.env__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--neon);
  flex-shrink: 0;
  min-width: 50px;
}
.env__value {
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--ink);
}
.env__value small { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.env__vs { display: none; }
.env__cell[data-status="red"]  .env__value { color: var(--red); }
.env__cell[data-status="warn"] .env__value { color: var(--ink); }
.env__cell[data-status="ok"]   .env__value { color: var(--ink); }
.env__cell[data-status="mute"] .env__value { color: var(--ink-3); font-style: italic; }

/* =========================================================================
   7. FOOTER
   ========================================================================= */
.footer {
  padding: 11px var(--pad-out);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; color: var(--ink-2);
}
.footer b { font-weight: 600; color: var(--ink); }

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 1380px) {
  .layout { grid-template-columns: 240px 1fr 280px; }
}
@media (max-width: 1100px) {
  html, body {
    height: auto; max-height: none;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body { display: block; }
  .layout {
    grid-template-columns: 1fr;
    height: auto; min-height: 0;
    overflow: visible !important;
  }
  .lpanel, .rpanel {
    height: auto; max-height: none;
    overflow: visible;
    border-right: none; border-left: none; border-top: var(--hair-2);
  }
  .map-area { order: -1; min-height: 70vh; border-right: none; }
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .masthead__row { grid-template-columns: 1fr; }
  .claim { border-left: none; border-top: var(--hair-2); }
  .decision { gap: 8px; }
  .decision__line { flex-basis: 100%; order: 2; }
  .traffic-wrap { grid-template-columns: 1fr; }
  .traffic-side { border-left: none; border-top: var(--hair-2); }
  .gmap { height: 280px; }
  .shadow__grid { grid-template-columns: repeat(2, 1fr); }
  .env { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .masthead__row { flex-direction: column; }
  .brand { width: 100%; border-right: none; border-bottom: var(--hair-2); }
  .vitals { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .vital { min-width: 132px; }
  .claim { width: 100%; }
  .shadow__grid { grid-template-columns: 1fr; }
  .env { grid-template-columns: repeat(2, 1fr); }
  .legend-grid { grid-template-columns: 1fr; }
  /* Map toolbar collapses to ONE horizontally-scrolling row instead of
     wrapping every button group onto its own line — the wrapped version
     was eating 260px of an 812px phone viewport before the map itself
     ever appeared. This is the §11.8 rule-3 "legitimate horizontal
     scroller" exception: every view/mode/accent button and the search
     box stay fully present and tappable, just reached by a swipe. */
  .map-header {
    padding: 8px 12px; gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .map-header__group { flex-wrap: nowrap; flex: none; }
  .map-toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: none;
  }
  .map-header__search { flex: none; width: 150px; }
  .map-header__search input { min-height: 44px; }
  .hall-row { min-height: 44px; padding: 6px 0; }
  .lens-btn { min-height: 44px; min-width: 44px; }
  .layer-row { min-height: 44px; align-items: center; }
  .switch { width: 44px; height: 24px; }
  .switch span::before { width: 18px; height: 18px; top: 2px; left: 2px; }
  .switch input:checked + span::before { transform: translateX(20px); }
  .detail {
    right: 8px; left: 8px; top: auto; bottom: 48px;
    width: auto; max-width: none;
    max-height: 55vh;
  }
  .guide {
    left: 8px; right: 8px;
    width: auto; max-width: calc(100% - 16px);
  }
  .twin-help { display: none; }
  .twin-legend { max-width: calc(100% - 16px); }
  .floorplan-legend { max-width: calc(100% - 16px); }
  .topbar__tabs .tab:not(.tab--active) { opacity: 0.72; }
  .traffic__dow { min-height: 44px; min-width: 44px; }
  .traffic__hour { min-height: 44px; width: 100%; max-width: 100%; }
}

/* §11.8 explicit test width — 360–480 px phones. Tightens spacing,
   bumps small font targets above 11px tap floor, guarantees no
   horizontal scroll. Sits BELOW the 720px tier so 481–720 px keeps
   the regular mobile layout; ≤480 px gets these extra refinements. */
@media (max-width: 480px) {
  :root { --pad-out: 8px; --gap-2: 8px; }
  .topbar {
    display: block;
    height: auto; min-height: 44px;
    padding: 0 var(--pad-out);
    overflow: hidden;
  }
  .topbar__time { display: none; }
  .topbar__tabs {
    width: 100%;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .topbar__tabs .tab { padding: 0 12px; min-height: 44px; flex: none; }
  .detail__tier { font-size: 11px; padding: 2px 4px; }
  .vitals { grid-template-columns: 1fr 1fr; }
  .vital { padding: 8px 10px; }
  .vital__main { font-size: 14px; }
  .news-ticker { padding: 6px 8px; }
  .footer { padding: 8px var(--pad-out); font-size: 11px; flex-wrap: wrap; gap: 4px; }
  .masthead { padding: 0; }
  .masthead__row { display: flex; }
  .brand { padding: 8px var(--pad-out); }
  .claim { flex-direction: column; }
  .claim__chip { min-height: 32px; justify-content: center; }
  .masthead__lead { font-size: 14px; }
  .masthead__sub { font-size: 11px; }
  /* The toolbar wraps to several rows at 390px; reserve enough total height
     that the actual map canvas still remains the primary surface. */
  .map-area { min-height: 82svh; }
  .gmap { height: 220px; }
  .detail {
    right: 4px; left: 4px; bottom: 44px;
    width: auto; max-width: none;
    max-height: 60vh;
  }
  .guide {
    left: 4px; right: 4px; top: 4px;
    width: auto; max-width: calc(100% - 8px);
    max-height: calc(100% - 8px);
  }
  .lens-btn, .layer-row, .hall-row, .map-toggle {
    min-height: 44px;
  }
}

/* Hard ban: no rogue radius */
* { border-radius: 0 !important; }
input, textarea, select, button { border-radius: 0 !important; }
.live-dot, .brand__disc, .lpanel__disc, .rpanel__disc { border-radius: 50% !important; }
.hall-row__bar { border-radius: 0 !important; }
.legend-grid__cell i { border-radius: 0 !important; }

/* =========================================================================
   Phase 2 (2026-07-21) — env data layer: honest-labelling UI states
   ========================================================================= */

/* CITY VITALS — source caption under the bars */
.vitals-caption {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Vitals with no upstream source (PM10, NO₂) — dimmed, never fabricated.
   The bar fill is set to width 0% in env.js dimNoSignal(); here we strip
   the remaining track colour so the row reads as "no measurement" rather
   than "very low measurement". */
.bar-row--nosignal { opacity: 0.45; }
.bar-row--nosignal .bar { background: transparent; border-color: transparent; }
.bar-row--nosignal .bar-row__num {
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3);
}

/* LENS chips that are planned but not wired — dead on purpose, labelled */
.lens-btn--planned { opacity: 0.4; cursor: default; }
.lens-btn--planned:hover {
  background: transparent; color: var(--ink-3);
  border-color: var(--line-2);
}

/* Topbar tab with no real section — dimmed instead of pretending */
.tab--dim { opacity: 0.4; cursor: default; }
.tab--dim:hover { color: var(--ink-3); border-bottom-color: transparent; }

/* FLOOD mode live SITUATION card (injected by js/env.js) */
.sit-live__lvl {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 6px;
}
.sit-live__lvl b {
  font-family: var(--ff-display);
  font-size: 32px; font-weight: 700; line-height: 1;
}
.sit-live__lvl span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.sit-live__lvl small {
  font-size: 11px; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; color: var(--ink-3);
}
.sit-live__src {
  display: block; margin-top: 6px;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--neon);
}

/* =========================================================================
   SSDIY Modal & Executive Studio Styles
   ========================================================================= */
.ssdiy-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.ssdiy-modal[hidden] { display: none !important; }
.ssdiy-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 22, 0.92); /* §14: opaque scrim, no frosted glass */
}
.ssdiy-modal__dialog {
  position: relative; z-index: 10;
  width: min(840px, 92vw); max-height: 88vh;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; overflow: hidden;
  color: #f1f5f9; font-family: 'Source Sans 3', sans-serif;
}
.ssdiy-modal__head {
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(30, 41, 59, 0.5);
}
.ssdiy-modal__title { display: flex; align-items: center; gap: 12px; }
.ssdiy-chip {
  background: #f59e0b;
  padding: 3px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0a0e1a;
}
.ssdiy-modal__close {
  background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer;
  transition: color 0.15s ease;
}
.ssdiy-modal__close:hover { color: #f1f5f9; }
.ssdiy-modal__nav {
  display: flex; gap: 2px; padding: 6px 16px 0; background: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ssdiy-tab {
  background: none; border: none; padding: 10px 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.ssdiy-tab:hover { color: #cbd5e1; }
.ssdiy-tab.is-active { color: #f59e0b; border-bottom-color: #f59e0b; }
.ssdiy-modal__body { padding: 20px; overflow-y: auto; flex: 1; }

.ssdiy-sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .ssdiy-sim-grid { grid-template-columns: 1fr; } }
.ssdiy-card {
  background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
}
.ssdiy-card--accent { background: rgba(30, 41, 59, 0.8); border-color: rgba(245, 158, 11, 0.35); }
.ssdiy-card__title {
  font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #f59e0b; margin-bottom: 14px;
}

.ssdiy-control { margin-bottom: 16px; }
.ssdiy-control__head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.ssdiy-control__head label { color: #cbd5e1; }
.ssdiy-control__head b { color: #f59e0b; font-family: monospace; font-size: 14px; }
.ssdiy-control input[type="range"] {
  width: 100%; accent-color: #f59e0b; cursor: pointer;
}
.ssdiy-control small { display: block; font-size: 11px; color: #64748b; margin-top: 4px; }

.ssdiy-out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ssdiy-kpi {
  background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px; display: flex; flex-direction: column;
}
.ssdiy-kpi__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.ssdiy-kpi__val { font-size: 14px; font-weight: 700; color: #f1f5f9; margin: 2px 0; }
.ssdiy-kpi__sub { font-size: 11px; color: #64748b; }

.ssdiy-filter-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ssdiy-filter-col label { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
.ssdiy-filter-col select {
  width: 100%; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9; padding: 6px 10px; font-size: 14px;
}
.ssdiy-results-box {
  background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 16px; text-align: center;
}
.ssdiy-results-box b { display: block; font-size: 14px; color: #f59e0b; margin-bottom: 4px; }
.ssdiy-results-box span { font-size: 14px; color: #94a3b8; }

.ssdiy-export-actions { display: flex; gap: 12px; margin-top: 16px; }
.ssdiy-btn {
  background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.15); color: #f1f5f9;
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.15s ease;
}
.ssdiy-btn:hover { background: #334155; }
.ssdiy-btn--primary {
  background: #f59e0b; border: none; color: #0a0e1a;
}
.ssdiy-btn--primary:hover { background: #f1f5f9; }

/* CPDT & Lens Card Styles */
.cpdt-card, .lens-card {
  background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px; margin-bottom: 10px;
}
.cpdt-card__head, .lens-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}
.cpdt-card__badge { color: #f59e0b; letter-spacing: 0.06em; }
.cpdt-card__sub { color: #64748b; font-size: 11px; }
.cpdt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.cpdt-stat { text-align: center; background: rgba(30, 41, 59, 0.4); padding: 6px; }
.cpdt-stat__val { display: block; font-size: 14px; font-weight: 700; color: #f1f5f9; }
.cpdt-stat__lbl { font-size: 11px; color: #94a3b8; text-transform: uppercase; }
.cpdt-breakdown__row, .lens-card__row {
  display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: #cbd5e1;
}
.cpdt-breakdown__row b, .lens-card__row b { color: #f1f5f9; }

.event-intel-card {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.event-intel-card__head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--neon);
}
.event-intel-card__meta {
  font-size: 11px; color: var(--ink-2); margin-top: 3px;
}

/* ========================================================================
   CCTV POPUP — Pak Kret City cameras (js/cctv.js)
   Sharp corners, no shadow, monospace ID stamp, live-snapshot feed.
   ======================================================================== */
.mtt-cctv-popup .maplibregl-popup-content {
  background: rgba(10, 14, 26, 0.96);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
}
.mtt-cctv-popup .maplibregl-popup-tip { display: none; }
.mtt-cctv-popup .maplibregl-popup-close-button {
  color: var(--ink-2); border-radius: 0;
  font-size: 18px; padding: 2px 8px;
}
.mtt-cctv-popup .maplibregl-popup-close-button:hover { background: var(--ink); color: var(--paper); }

.cctv-pop { width: 320px; }
.cctv-pop__head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
}
.cctv-pop__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700;
  color: var(--neon); letter-spacing: 0.05em;
}
.cctv-pop__group {
  font-size: 10px; padding: 2px 6px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cctv-pop__group[data-g="chaeng-watthana"],
.cctv-pop__group[data-g="ha-yaek"],
.cctv-pop__group[data-g="rama-iv"] { color: #fca5a5; border-color: rgba(220, 38, 38, 0.6); }
.cctv-pop__group[data-g="suan-somdet"],
.cctv-pop__group[data-g="khlong-prapa"],
.cctv-pop__group[data-g="si-saman"],
.cctv-pop__group[data-g="tiwanon"] { color: #fde68a; border-color: rgba(202, 138, 4, 0.6); }
.cctv-pop__group[data-g="muang-thong"],
.cctv-pop__group[data-g="phumivet"],
.cctv-pop__group[data-g="recycle"],
.cctv-pop__group[data-g="si-yaek-prasert"] { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-pop__body {
  position: relative;
  background: #000;
  width: 320px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.cctv-pop__img {
  width: 320px; height: 240px;
  object-fit: cover; display: block;
  background: #0a0e1a;
}
.cctv-pop__stamp {
  position: absolute; left: 8px; top: 8px;
  font-size: 9px; letter-spacing: 0.08em;
  background: rgba(220, 38, 38, 0.85);
  color: #fff; padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cctv-pop__name {
  padding: 7px 11px 4px;
  font-size: 12px; color: var(--ink);
}
.cctv-pop__src {
  padding: 0 11px 9px;
  font-size: 10px; color: var(--ink-3);
}
.cctv-pop__src a { color: var(--neon); text-decoration: none; }
.cctv-pop__src a:hover { text-decoration: underline; }

/* ========================================================================
   PAK KRET WATER — slide-up panel (LIFF embed)
   Off by default. Opens at the bottom of the map area so it doesn't
   shrink the map further (the panel already competes with the data
   shadow strip; the map stays dominant).
   ======================================================================== */
.water {
  position: absolute; left: 11px; right: 11px; bottom: 11px;
  height: 320px; max-height: 56vh;
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid var(--line-2);
  z-index: 6;
  display: flex; flex-direction: column;
}
.water[hidden] { display: none; }
.water__head {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
  flex: 0 0 auto;
}
.water__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--neon); text-transform: uppercase;
}
.water__sub {
  font-size: 10px; color: var(--ink-2); flex: 1;
}
.water__src { font-size: 10px; color: var(--ink-3); }
.water__src a { color: var(--neon); text-decoration: none; }
.water__src a:hover { text-decoration: underline; }
.water__close {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  font-family: inherit; letter-spacing: 0.04em;
}
.water__close:hover { background: var(--paper); color: var(--neon); border-color: var(--neon); }
.water__body {
  flex: 1 1 auto; position: relative; background: #000;
}
.water__frame {
  width: 100%; height: 100%; border: 0; display: block;
}
.water__note {
  position: absolute; left: 11px; bottom: 9px;
  font-size: 10px; color: var(--ink-3);
  background: rgba(10, 14, 26, 0.78);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
}
.water__note b { color: var(--ink-2); }

/* Flood alert — top-bar style strip showing the live Pak Kret pier level.
   Default state is "no data"; js/feeds.js (or js/cctv.js) can replace
   the text. Designed for the FB-context 26 Sep 2569 BE flood event. */
.flood-alert {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 9px;
  font-size: 10px; letter-spacing: 0.06em;
  color: #f5f3ec;
  border: 1px solid var(--line-2);
  background: rgba(10, 14, 26, 0.78);
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}
.flood-alert:hover { border-color: var(--neon); color: var(--neon); }
.flood-alert__dot {
  width: 7px; height: 7px; background: #dc2626;
  display: inline-block;
}
.flood-alert__level { color: #fca5a5; font-weight: 700; }
.flood-alert__label { color: var(--ink-2); }

/* ========================================================================
   CCTV WALL — horizontal strip of live snapshots at the top of the map
   area (Lopburi war-room pattern). Sharp edges, mono IDs, 4:3 thumbnails,
   2s refresh on the wall side + 1s in the popup once a card is clicked.
   ======================================================================== */
.cctv-wall {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 7;
  background: rgba(10, 14, 26, 0.94);
  border-bottom: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  max-height: 156px;
}
.cctv-wall[hidden] { display: none; }
.cctv-wall__head {
  display: flex; align-items: center; gap: 11px;
  padding: 5px 11px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
  flex: 0 0 auto;
}
.cctv-wall__title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--neon); text-transform: uppercase;
}
.cctv-wall__summary {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-2);
  flex: 1;
}
.cctv-wall__close {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); width: 22px; height: 22px;
  font-size: 16px; line-height: 1; cursor: pointer;
  font-family: inherit; padding: 0;
}
.cctv-wall__close:hover { background: var(--paper); color: var(--neon); border-color: var(--neon); }
.cctv-wall__strip {
  display: flex; gap: 4px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px 8px 7px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.cctv-wall__strip::-webkit-scrollbar { height: 5px; }
.cctv-wall__strip::-webkit-scrollbar-thumb { background: var(--line-2); }
.cctv-wall__card {
  flex: 0 0 auto;
  width: 168px; padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  position: relative;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  overflow: hidden;
}
.cctv-wall__card:hover { border-color: var(--neon); }
.cctv-wall__card:focus-visible { outline: 1px solid var(--neon); outline-offset: -1px; }
.cctv-wall__live {
  position: absolute; left: 4px; top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px; letter-spacing: 0.08em;
  background: rgba(220, 38, 38, 0.92); color: #fff;
  padding: 1px 4px;
  z-index: 2;
}
.cctv-wall__img {
  width: 168px; height: 84px;        /* 2:1 crop keeps the strip short */
  object-fit: cover; object-position: center 40%;
  display: block; background: #0a0e1a;
}
.cctv-wall__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 3px 6px 2px;
  border-top: 1px solid var(--line-2);
}
.cctv-wall__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; font-weight: 700;
  color: var(--neon); letter-spacing: 0.05em;
}
.cctv-wall__group {
  font-size: 8px; padding: 1px 4px;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cctv-wall__group[data-g="chaeng-watthana"],
.cctv-wall__group[data-g="ha-yaek"],
.cctv-wall__group[data-g="rama-iv"] { color: #fca5a5; border-color: rgba(220, 38, 38, 0.6); }
.cctv-wall__group[data-g="suan-somdet"],
.cctv-wall__group[data-g="khlong-prapa"],
.cctv-wall__group[data-g="si-saman"],
.cctv-wall__group[data-g="tiwanon"] { color: #fde68a; border-color: rgba(202, 138, 4, 0.6); }
.cctv-wall__group[data-g="muang-thong"],
.cctv-wall__group[data-g="phumivet"],
.cctv-wall__group[data-g="recycle"],
.cctv-wall__group[data-g="si-yaek-prasert"] { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-wall__name {
  display: block;
  padding: 0 6px 4px;
  font-size: 9px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* When the wall is visible, push the rotation widget and the zoom/help
   controls down so they sit just below the wall instead of being covered
   by it. Pure CSS — no JS. :has() is in all major browsers since 2023. */
.map-canvas:has(.cctv-wall:not([hidden])) .rot-widget { top: 168px; }
.map-canvas:has(.cctv-wall:not([hidden])) .twin-help  { top: 168px; }

/* ========================================================================
   WATERWAYS + LANDMARKS popups (js/waterways.js)
   Sharp corners, mono tags, no shadow, dark surface.
   ======================================================================== */
.mtt-water-popup .maplibregl-popup-content {
  background: rgba(10, 14, 26, 0.96);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.4;
}
.mtt-water-popup .maplibregl-popup-tip { display: none; }
.mtt-water-popup .maplibregl-popup-close-button {
  color: var(--ink-2); border-radius: 0;
  font-size: 18px; padding: 2px 8px;
}
.mtt-water-popup .maplibregl-popup-close-button:hover { background: var(--ink); color: var(--paper); }

.ww-pop, .lm-pop { width: 280px; }
.ww-pop__head {
  padding: 7px 11px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
}
.ww-pop__name {
  font-size: 13px; font-weight: 600;
  color: #cfe7fb;
}
.ww-pop__row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 11px;
  border-bottom: 1px solid var(--line-2);
}
.ww-pop__row:last-of-type { border-bottom: none; }
.ww-pop__lbl {
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--ink-3); text-transform: uppercase;
  min-width: 56px;
}
.ww-pop__val {
  font-size: 11px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ww-pop__val[data-t="major"]   { color: #5aa8e6; }
.ww-pop__val[data-t="named"]   { color: #7ec1ee; }
.ww-pop__val[data-t="unmapped"]{ color: #aed6f0; }
.ww-pop__src {
  padding: 5px 11px 7px;
  font-size: 10px; color: var(--ink-3);
  border-top: 1px solid var(--line-2);
  margin-top: 3px;
}

.lm-pop__cat {
  display: inline-block;
  font-size: 9px; padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.lm-pop__cat[data-cat="hospital"]   { color: #fca5a5; border-color: rgba(220, 38, 38, 0.6); }
.lm-pop__cat[data-cat="airport"]    { color: #c4b5fd; border-color: rgba(124, 58, 237, 0.6); }
.lm-pop__cat[data-cat="shelter"]    { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.lm-pop__cat[data-cat="school"]     { color: #fde68a; border-color: rgba(202, 138, 4, 0.6); }
.lm-pop__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.lm-pop__name-en { font-size: 11px; color: var(--ink-2); margin-bottom: 6px; }
.lm-pop__row {
  display: flex; gap: 8px;
  padding: 4px 0;
  border-top: 1px solid var(--line-2);
  margin-top: 4px;
}
.lm-pop__lbl { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; min-width: 64px; }
.lm-pop__val { font-size: 11px; color: var(--ink); }

/* ========================================================================
   FLOOD PREVENTION PANEL — slide-in from the right, anchored to the map
   area. Hidden by default; toggled by the PREVENTION button in the map
   header. Sits between the map header tabs and the data shadow.
   ======================================================================== */
.fp-panel {
  position: absolute; right: 11px; top: 11px; bottom: 11px;
  width: 380px; max-width: calc(100vw - 22px);
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid var(--line-2);
  z-index: 8;
  display: flex; flex-direction: column;
}
.fp-panel[hidden] { display: none; }
.fp-panel__head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
  flex: 0 0 auto;
}
.fp-panel__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--neon); text-transform: uppercase;
}
.fp-panel__meta {
  font-size: 10px; color: var(--ink-2); flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fp-panel__close {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); width: 24px; height: 24px;
  font-size: 16px; line-height: 1; cursor: pointer;
  font-family: inherit; padding: 0;
}
.fp-panel__close:hover { background: var(--paper); color: var(--neon); border-color: var(--neon); }
.fp-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 11px 13px;
  overscroll-behavior: contain;
}
.fp-panel__body::-webkit-scrollbar { width: 5px; }
.fp-panel__body::-webkit-scrollbar-thumb { background: var(--line-2); }
.fp-panel__foot {
  padding: 7px 13px;
  font-size: 10px; color: var(--ink-3);
  border-top: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.4);
  flex: 0 0 auto;
}
.fp-panel__foot a { color: var(--neon); text-decoration: none; }
.fp-panel__foot a:hover { text-decoration: underline; }

.fp-section { margin-bottom: 14px; }
.fp-section:last-child { margin-bottom: 0; }
.fp-h3 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--neon);
  text-transform: uppercase;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 5px;
}
.fp-p {
  font-size: 11px; line-height: 1.55;
  color: var(--ink); margin: 0 0 7px;
}
.fp-p--note {
  color: var(--ink-2);
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--line-2);
  padding: 6px 9px;
  margin-top: 7px;
}

.fp-chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin: 6px 0 7px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
}
.fp-chain__step {
  display: inline-flex; flex-direction: column;
  background: var(--panel-2);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  min-width: 50px; text-align: center;
}
.fp-chain__step b {
  font-size: 12px; color: #cfe7fb;
  letter-spacing: 0.02em;
}
.fp-chain__step small {
  font-size: 9px; color: var(--ink-3);
  letter-spacing: 0.04em;
}
.fp-chain__arrow {
  font-size: 14px; color: var(--ink-3);
  font-weight: 700;
}

.fp-section__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px; padding-bottom: 5px;
}
.fp-section__head .fp-h3 { border-bottom: none; margin: 0; padding: 0; }
.fp-h3-hint {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; color: var(--neon); letter-spacing: 0.08em;
}

.fp-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
}
.fp-list__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 9px;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px;
}
.fp-list__row:last-child { border-bottom: none; }
.fp-list__row--clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fp-list__row--clickable:hover {
  background: rgba(90, 168, 230, 0.09);
  border-color: rgba(90, 168, 230, 0.3);
}
.fp-list__row--lm {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}
.fp-list__row--lm .fp-list__cat { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.fp-list__row--lm .fp-list__name { grid-column: 2; grid-row: 1; }
.fp-list__row--lm .fp-list__name-en { grid-column: 2; grid-row: 2; font-size: 10px; color: var(--ink-3); }
.fp-list__name {
  color: var(--ink);
  font-size: 11px;
}
.fp-list__tier {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; padding: 1px 5px;
  border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fp-list__tier[data-t="major"]   { color: #5aa8e6; border-color: rgba(90, 168, 230, 0.6); }
.fp-list__tier[data-t="named"]   { color: #7ec1ee; border-color: rgba(126, 193, 238, 0.6); }
.fp-list__tier[data-t="unmapped"]{ color: #aed6f0; border-color: rgba(174, 214, 240, 0.6); }
.fp-list__km {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-2);
}
.fp-list__cat {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; padding: 2px 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.fp-list__cat[data-cat="hospital"]   { color: #fca5a5; border-color: rgba(220, 38, 38, 0.6); }
.fp-list__cat[data-cat="airport"]    { color: #c4b5fd; border-color: rgba(124, 58, 237, 0.6); }
.fp-list__cat[data-cat="shelter"]    { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.fp-list__cat[data-cat="government"] { color: #d4d4d4; border-color: rgba(115, 115, 115, 0.6); }

/* Upstream Cascade Diagram & Basin Controls */
.fp-cascade-diagram-wrap {
  margin: 8px 0;
  padding: 8px;
  background: rgba(10, 15, 28, 0.7);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.fp-cascade-diagram {
  width: 100%;
  height: auto;
  display: block;
}
.fp-basin-actions {
  display: flex; gap: 8px; margin: 8px 0 10px;
}
.fp-action-btn {
  flex: 1;
  background: rgba(0, 243, 255, 0.08);
  border: 1px solid rgba(0, 243, 255, 0.4);
  color: var(--neon);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.15s ease;
}
.fp-action-btn:hover {
  background: rgba(0, 243, 255, 0.18);
  border-color: var(--neon);
  box-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}
.fp-action-btn--subtle {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
  color: var(--ink-2);
}
.fp-action-btn--subtle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: none;
}

.fp-cascade {
  list-style: none; margin: 0; padding: 0;
  counter-reset: cs;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
}
.fp-cascade__row {
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto auto;
  gap: 1px 9px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}
.fp-cascade__row:last-child { border-bottom: none; }
.fp-cascade__num {
  grid-row: 1 / span 3;
  align-self: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--neon);
  text-align: center;
  background: rgba(255,255,255,0.03);
  padding: 3px 0;
}
.fp-cascade__en {
  grid-column: 2; grid-row: 1;
  font-size: 11px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding-right: 55px;
}
.fp-cascade__th {
  grid-column: 2; grid-row: 2;
  font-size: 10px; color: var(--ink-2);
}
.fp-cascade__days {
  position: absolute; right: 9px; top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}
.fp-cascade__days--mtt {
  color: #00f3ff;
  background: rgba(0, 243, 255, 0.15);
  border: 1px solid rgba(0, 243, 255, 0.4);
}
.fp-cascade__hint {
  grid-column: 2; grid-row: 3;
  font-size: 9px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px;
}
.fp-cascade__row--mtt {
  background: rgba(0, 243, 255, 0.06);
  border-left: 3px solid #00f3ff;
}
.fp-cascade__row--mtt .fp-cascade__num,
.fp-cascade__row--mtt .fp-cascade__en {
  color: #00f3ff;
  font-weight: bold;
}

/* ========================================================================
   CCTV CV STATUS — color-coded badges on wall cards + popups
   ======================================================================== */
.cctv-wall__cv {
  position: absolute; right: 4px; top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8px; letter-spacing: 0.06em;
  padding: 1px 4px;
  z-index: 2;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: rgba(10, 14, 26, 0.85);
}
.cctv-wall__cv[data-cv="ok"]   { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-wall__cv[data-cv="dark"] { color: #94a3b8; border-color: rgba(148, 163, 184, 0.6); }
.cctv-wall__cv[data-cv="fog"]  { color: #cbd5e1; border-color: rgba(203, 213, 225, 0.6); }
.cctv-wall__cv[data-cv="sky"]  { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.6); }
.cctv-wall__cv[data-cv="grn"]  { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-wall__cv[data-cv="wet"]  { color: #38bdf8; border-color: rgba(56, 189, 248, 0.7); background: rgba(12, 74, 110, 0.85); }
.cctv-wall__cv[data-cv="trf"]  { color: #f59e0b; border-color: rgba(245, 158, 11, 0.7); background: rgba(120, 53, 15, 0.85); }
.cctv-wall__cv[data-cv="acc"]  { color: #ffffff; border-color: rgba(239, 68, 68, 0.9); background: rgba(185, 28, 28, 0.9); font-weight: 700; }
.cctv-wall__cv[data-cv="frz"],
.cctv-wall__cv[data-cv="err"]  { color: #fca5a5; border-color: rgba(220, 38, 38, 0.7); background: rgba(127, 29, 29, 0.7); }
.cctv-wall__cv[data-cv="pend"] { color: #cbd5e1; border-color: var(--line-2); }

.cctv-pop__cv {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; padding: 1px 5px;
  margin-left: auto;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.cctv-pop__cv[data-cv="ok"]   { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-pop__cv[data-cv="dark"] { color: #94a3b8; border-color: rgba(148, 163, 184, 0.6); }
.cctv-pop__cv[data-cv="fog"]  { color: #cbd5e1; border-color: rgba(203, 213, 225, 0.6); }
.cctv-pop__cv[data-cv="sky"]  { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.6); }
.cctv-pop__cv[data-cv="grn"]  { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.cctv-pop__cv[data-cv="wet"]  { color: #38bdf8; border-color: rgba(56, 189, 248, 0.7); background: rgba(12, 74, 110, 0.85); }
.cctv-pop__cv[data-cv="trf"]  { color: #f59e0b; border-color: rgba(245, 158, 11, 0.7); background: rgba(120, 53, 15, 0.85); }
.cctv-pop__cv[data-cv="acc"]  { color: #ffffff; border-color: rgba(239, 68, 68, 0.9); background: rgba(185, 28, 28, 0.9); font-weight: 700; }
.cctv-pop__cv[data-cv="frz"],
.cctv-pop__cv[data-cv="err"]  { color: #fca5a5; border-color: rgba(220, 38, 38, 0.7); background: rgba(127, 29, 29, 0.7); }
.cctv-pop__cv[data-cv="pend"] { color: #cbd5e1; border-color: var(--line-2); }

.cctv-pop__water {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 11px;
  margin: 0 0 6px;
  background: rgba(90, 168, 230, 0.08);
  border: 1px solid rgba(90, 168, 230, 0.3);
  font-size: 11px;
}
.cctv-pop__water-icon {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #5aa8e6; font-weight: 700;
}
.cctv-pop__water-name { color: #cfe7fb; }
.cctv-pop__water-tier {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; padding: 1px 5px;
  border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cctv-pop__water-tier[data-t="major"]   { color: #5aa8e6; border-color: rgba(90, 168, 230, 0.6); }
.cctv-pop__water-tier[data-t="named"]   { color: #7ec1ee; border-color: rgba(126, 193, 238, 0.6); }
.cctv-pop__water-tier[data-t="unmapped"]{ color: #aed6f0; border-color: rgba(174, 214, 240, 0.6); }
.cctv-pop__water-dist {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; color: var(--ink-2);
}
.cctv-pop__water-note {
  padding: 0 11px 6px;
  font-size: 10px; color: var(--ink-3);
}

.cctv-pop__cv-details {
  margin: 0 11px 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-2);
  font-size: 11px;
}
.cctv-pop__cv-details summary {
  cursor: pointer;
  font-size: 9px; font-weight: 700;
  color: var(--neon); letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0 5px;
}
.cctv-pop__cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px 9px;
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
.cctv-pop__cv-grid > div { color: var(--ink); }
.cctv-pop__cv-grid > div b { color: var(--neon); font-weight: 700; margin-right: 4px; }
.cctv-pop__cv-note {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--line-2);
  font-size: 10px; color: var(--ink-3); line-height: 1.45;
}

/* ========================================================================
   ML PANEL — slide-up from the bottom, like the Pak Kret Water panel.
   Shows the full CCTV CV grid (56 cameras with status + features).
   ======================================================================== */
.ml-panel {
  position: absolute; left: 11px; right: 11px; bottom: 11px;
  height: 320px; max-height: 50vh;
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid var(--line-2);
  z-index: 6;
  display: flex; flex-direction: column;
}
.ml-panel[hidden] { display: none; }
.ml-panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(28, 28, 42, 0.6);
  flex: 0 0 auto;
}
.ml-panel__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--neon); text-transform: uppercase;
}
.ml-panel__sub {
  font-size: 10px; color: var(--ink-2); flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ml-panel__close {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-2); padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  font-family: inherit; letter-spacing: 0.04em;
}
.ml-panel__close:hover { background: var(--paper); color: var(--neon); border-color: var(--neon); }
.ml-panel__body {
  flex: 1 1 auto; overflow-y: auto;
  background: rgba(0,0,0,0.4);
}
.ml-panel__body::-webkit-scrollbar { width: 5px; }
.ml-panel__body::-webkit-scrollbar-thumb { background: var(--line-2); }
.ml-panel__table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}
.ml-panel__table th {
  position: sticky; top: 0;
  background: rgba(28, 28, 42, 0.95);
  padding: 6px 9px;
  text-align: left;
  font-weight: 700; letter-spacing: 0.06em;
  color: var(--neon); text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
.ml-panel__table td {
  padding: 4px 9px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  white-space: nowrap;
}
.ml-panel__table tr:hover td {
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
.ml-panel__table .ml-id { color: var(--neon); font-weight: 700; }
.ml-panel__status {
  display: inline-block;
  font-size: 9px; padding: 1px 5px;
  letter-spacing: 0.06em;
  border: 1px solid var(--line-2);
}
.ml-panel__status[data-s="ok"]   { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.ml-panel__status[data-s="dark"] { color: #94a3b8; border-color: rgba(148, 163, 184, 0.6); }
.ml-panel__status[data-s="foggy"]{ color: #cbd5e1; border-color: rgba(203, 213, 225, 0.6); }
.ml-panel__status[data-s="sky_only"]     { color: #7dd3fc; border-color: rgba(125, 211, 252, 0.6); }
.ml-panel__status[data-s="greenery"]     { color: #86efac; border-color: rgba(22, 163, 74, 0.6); }
.ml-panel__status[data-s="water_suspected"] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.7); background: rgba(12, 74, 110, 0.85); font-weight: 700; }
.ml-panel__status[data-s="traffic_heavy"]   { color: #f59e0b; border-color: rgba(245, 158, 11, 0.7); background: rgba(120, 53, 15, 0.85); font-weight: 700; }
.ml-panel__status[data-s="accident_suspected"] { color: #ffffff; border-color: rgba(239, 68, 68, 0.9); background: rgba(185, 28, 28, 0.9); font-weight: 700; }
.ml-panel__status[data-s="frozen"]       { color: #fca5a5; border-color: rgba(220, 38, 38, 0.7); background: rgba(127, 29, 29, 0.7); }
.ml-panel__status[data-s="fetch_error"]  { color: #fca5a5; border-color: rgba(220, 38, 38, 0.7); }
.ml-panel__status[data-s="pending"]      { color: #94a3b8; border-color: var(--line-2); }