/* Secondary operating controls; the map stays dominant. */
/* First screen: identity → map. All operational panels remain below/alongside. */
body { display: flex; flex-direction: column; }
.topbar { order: 0; }
.masthead { order: 1; }
.masthead .brand { width: 100%; border: 0; padding: 6px 12px; }
.layout { order: 2; }
.operations-summary { order: 3; border-bottom: var(--hair-2); }
.decision { order: 4; }
.news-ticker { order: 5; }
body > :not(.topbar,.masthead,.layout,.operations-summary,.decision,.news-ticker) { order: 6; }
.map-header { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 12px; }
.map-header__group { flex: none; flex-wrap: nowrap; }
.map-toggle { min-height: 44px; white-space: nowrap; }
.map-header__search { flex: none; width: 180px; }
.map-context { flex-wrap: nowrap !important; overflow-x: auto; }
.map-context > * { flex: none; white-space: nowrap; }
.map-area { min-height: 0; }
@media (min-width: 721px) {
  .detail { top: calc(var(--map-canvas-offset, 104px) + 76px); }
  .map-area:has(.cctv-wall:not([hidden])) .detail { top: calc(var(--map-canvas-offset, 104px) + 235px); }
}
@media (max-width: 1100px) {
  .map-area { height: calc(100svh - 108px); min-height: 440px; }
  .map-canvas { min-height: 320px; }
  .operations-summary .vitals { width: 100%; }
}
.install-help, .calendar-focus, .calendar-scenario, #install-dialog button {
  color: #f59e0b; background: transparent; border: 2px solid #f59e0b;
  border-radius: 0; padding: 8px 12px; font: inherit; cursor: pointer;
  min-height: 44px;
}
.calendar-focus, .calendar-scenario { margin-top: 8px; font-size: 11px; }
.ml-panel__toolbar { flex-wrap: wrap; }
.ml-panel__head { flex-wrap: wrap; }
.camera-credits { padding: 8px 12px; border-top: var(--hair-2); font-size: 11px; line-height: 1.5; }
.camera-credits summary { min-height: 44px; cursor: pointer; color: #f59e0b; }
.camera-credits p { margin: 8px 0; }
.ml-panel { height: min(480px, 70svh); max-height: 70svh; }
.ml-panel__body { min-height: 100px; }
.camera-credits { max-height: 160px; overflow: auto; flex-shrink: 0; }
.ml-panel__status[data-s="stale_snapshot"], .cctv-wall__cv[data-cv="old"] { color: #f59e0b; }
.ml-camera-open { font: inherit; color: #f59e0b; background: transparent; border: 0; border-radius: 0; min-height: 44px; cursor: pointer; }
.ml-camera-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ml-camera-open { max-width: 100px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.ml-panel__table .ml-id { width: 110px; min-width: 100px; max-width: 110px; white-space: normal; }
.ml-panel__table th:first-child { min-width: 100px; }
.ml-filter-btn { background: transparent; color: #f59e0b; border: 1px solid #f59e0b; border-radius: 0; padding: 8px; min-height: 44px; cursor: pointer; }
.ml-filter-btn.active { background: #f59e0b; color: #0a0f1a; }
#install-dialog { width: min(460px, calc(100% - 32px)); box-sizing: border-box; color: #eee; background: #111722; border: 2px solid #f59e0b; padding: 24px; }
#install-dialog::backdrop { background: #000a; }
#install-dialog p { line-height: 1.5; }
#install-dialog form { margin-top: 16px; }
.map-context { padding: 7px 12px; border-bottom: 1px solid #343845; color: #d4d8df; background: #0c111b; font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.map-context button { color: #f59e0b; background: transparent; border: 0; border-bottom: 2px solid #f59e0b; font: inherit; cursor: pointer; min-height: 32px; }
.map-context small { color: #959bab; }
.hall-row[data-status="SCHEDULED"] .hall-row__bar { background: #f59e0b; }
.hall-row[data-status="UNPUBLISHED"] .hall-row__status { color: #959bab; }
.brand-logo { object-fit: contain; background: transparent; filter: none; mix-blend-mode: normal; }
/* Light grounds belong to the placement, never to the transparent PNG. */
.brand-mark-ground, .brand-icon-ground { display: inline-flex; align-items: center; justify-content: center; background: #eee; flex: none; }
.brand-mark-ground { width: 40px; height: 40px; }
.brand-icon-ground { width: 36px; height: 36px; }
.brand-logo--mono { display: block; width: 32px; height: 32px; }
.brand { gap: 10px; }
.brand-wordmark-ground { background: #eee; padding: 16px; margin-bottom: 20px; }
.brand-logo--wordmark { display: block; width: 100%; height: auto; }
.install-help { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.footer { align-items: center; gap: 12px; }
.map-area { min-width: 0; }
.map-header, .map-canvas, .map-context { min-width: 0; max-width: 100%; box-sizing: border-box; }
.map-context button { max-width: 100%; text-align: left; overflow-wrap: anywhere; }
:is(.install-help,.calendar-focus,.calendar-scenario,.map-context button,#install-dialog button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1100px) {
  .masthead__row { flex-wrap: wrap; }
  .brand { width: 100%; box-sizing: border-box; border-right: 0; border-bottom: var(--hair-2); }
  .vitals { width: 100%; flex: auto; overflow-x: auto; overscroll-behavior-x: contain; }
  .vital { min-width: 132px; }
  .claim { width: 100%; }
}
@media (max-width: 600px) {
  .ml-panel__head { gap: 8px; }
  .ml-panel__title { flex-basis: 100%; }
  .ml-panel__sub { flex: 0 0 100%; order: 3; line-height: 1.4; }
  .ml-panel__close { min-height: 44px; }
  .twin-legend { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .footer { flex-wrap: wrap; } .install-help { width: 100%; }
  .map-context { font-size: 11px; gap: 6px; }
  .cctv-wall__summary { display: none; }
  .cctv-wall__head { gap: 6px; min-height: 44px; }
}