:root {
  --rhk-bg: #090b0a;
  --rhk-panel: rgba(12, 15, 12, 0.90);
  --rhk-panel-2: rgba(18, 21, 18, 0.94);
  --rhk-line: #343b34;
  --rhk-line-soft: rgba(169,181,155,.20);
  --rhk-accent: #efefe9;
  --rhk-text: #efefe9;
  --rhk-muted: #8f978f;
  --rhk-dim: #626862;
  --rhk-live: #efefe9;
  --rhk-info: #efefe9;
  --rhk-warn: #efefe9;
  --rhk-critical: #efefe9;
  --rhk-off: #8f978f;
}

/* RHKEARTH visual language: graphite instrument chrome with the same neutral
   off-white / graphite typography used by the primary RHKEARTH wordmark. */
#title-bar,
#data-panel,
#data-layers,
.data-panel,
.panel,
.modal,
.glass-panel,
[class*="panel"] {
  border-color: var(--rhk-line-soft) !important;
}

#title-bar {
  background: linear-gradient(180deg, rgba(9,11,10,.88), rgba(9,11,10,.46), transparent) !important;
}

#title-bar h1,
#title-bar .title-accent {
  color: var(--rhk-text) !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

#title-bar .subtitle {
  color: var(--rhk-muted) !important;
  letter-spacing: .16em !important;
}

button,
select,
input,
.layer-item,
.data-layer-item,
[class*="layer-row"] {
  border-radius: 0 !important;
}

button,
select,
input {
  box-shadow: none !important;
}

.data-layer-item,
.layer-item,
[class*="layer-row"] {
  background: rgba(9,11,10,.78) !important;
  border-color: rgba(169,181,155,.15) !important;
}

.data-layer-item:hover,
.layer-item:hover,
[class*="layer-row"]:hover {
  background: rgba(20,24,20,.92) !important;
  border-color: rgba(169,181,155,.38) !important;
}

.rhk-glyph {
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: var(--rhk-accent) !important;
  background: rgba(169,181,155,.05) !important;
  border: 1px solid rgba(169,181,155,.22) !important;
  padding: 5px 4px !important;
  text-shadow: none !important;
}

#toast,
#global-loading-status,
#traffic-sync-chip,
#cctv-sync-chip {
  background: var(--rhk-panel) !important;
  border-color: var(--rhk-line) !important;
  color: var(--rhk-text) !important;
  box-shadow: none !important;
}

/* Data rail: restrained instrument list rather than app-store cards. */
#data-panel {
  background: rgba(8,10,9,.93) !important;
  border: 1px solid rgba(169,181,155,.22) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(12px) saturate(.72);
}

#data-panel .data-toggle-list {
  padding: 0 !important;
}

#data-panel .data-toggle-row {
  padding: 10px 11px 9px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(169,181,155,.11) !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

#data-panel .data-toggle-row:first-child {
  border-top-color: rgba(169,181,155,.18) !important;
}

#data-panel .data-toggle-row:hover {
  background: rgba(169,181,155,.045) !important;
}

#data-panel .data-toggle-top {
  min-height: 28px !important;
  gap: 10px !important;
}

#data-panel .data-toggle-left {
  gap: 9px !important;
  min-width: 0 !important;
}

#data-panel .data-icon.rhk-layer-symbol {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rhk-accent) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: .88 !important;
  text-shadow: none !important;
}

#data-panel .data-name {
  color: var(--rhk-text) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#data-panel .data-toggle-right {
  gap: 7px !important;
}

#data-panel .data-count {
  min-width: 28px !important;
  color: rgba(239,239,233,.48) !important;
  font-size: 9px !important;
  letter-spacing: .04em !important;
}

#data-panel .data-toggle-btn {
  min-width: 48px !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(169,181,155,.22) !important;
  background: rgba(169,181,155,.025) !important;
  color: rgba(239,239,233,.58) !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-shadow: none !important;
}

#data-panel .data-toggle-btn:hover,
#data-panel .data-toggle-btn:focus-visible {
  border-color: rgba(169,181,155,.48) !important;
  background: rgba(169,181,155,.07) !important;
  color: var(--rhk-text) !important;
}

/* Selected and feed-state text stays neutral; state is conveyed by the control
   structure/background instead of unrelated green/blue/yellow typography. */
#data-panel .data-toggle-btn.active {
  background: rgba(169,181,155,.14) !important;
  border-color: rgba(169,181,155,.58) !important;
  color: var(--rhk-text) !important;
}

#data-panel .data-toggle-btn.feed-nominal,
#data-panel .data-toggle-btn[data-feed-state="nominal"] {
  color: var(--rhk-live) !important;
  border-color: rgba(169,181,155,.48) !important;
  background: rgba(169,181,155,.07) !important;
}

#data-panel .data-toggle-btn.feed-loading,
#data-panel .data-toggle-btn[data-feed-state="loading"],
#data-panel .data-toggle-btn.lifecycle-enabling,
#data-panel .data-toggle-btn.lifecycle-disabling {
  color: var(--rhk-info) !important;
  border-color: rgba(169,181,155,.46) !important;
  background: rgba(169,181,155,.06) !important;
}

#data-panel .data-toggle-btn.feed-degraded,
#data-panel .data-toggle-btn.feed-stale,
#data-panel .data-toggle-btn.feed-fallback,
#data-panel .data-toggle-btn[data-feed-state="degraded"],
#data-panel .data-toggle-btn[data-feed-state="stale"],
#data-panel .data-toggle-btn[data-feed-state="fallback"] {
  color: var(--rhk-warn) !important;
  border-color: rgba(169,181,155,.40) !important;
  background: rgba(169,181,155,.05) !important;
}

#data-panel .data-toggle-btn.feed-unavailable,
#data-panel .data-toggle-btn[data-feed-state="unavailable"],
#data-panel .data-toggle-btn[data-feed-state="uncertain"] {
  color: var(--rhk-off) !important;
  border-color: rgba(115,122,115,.34) !important;
  background: rgba(115,122,115,.035) !important;
}

#data-panel .data-toggle-row:has(.feed-nominal) .data-icon.rhk-layer-symbol,
#data-panel .data-toggle-row:has(.feed-degraded) .data-icon.rhk-layer-symbol,
#data-panel .data-toggle-row:has(.feed-stale) .data-icon.rhk-layer-symbol,
#data-panel .data-toggle-row:has(.feed-fallback) .data-icon.rhk-layer-symbol {
  color: var(--rhk-text) !important;
}

#data-panel .data-toggle-row:has(.feed-unavailable) .data-icon.rhk-layer-symbol {
  color: var(--rhk-off) !important;
  opacity: .62 !important;
}

#data-panel .data-toggle-meta {
  margin: 4px 0 0 31px !important;
  color: rgba(143,151,143,.72) !important;
  font-size: 7.5px !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}

#data-panel .data-toggle-controls {
  margin: 6px 0 0 31px !important;
  gap: 4px !important;
}

#data-panel .data-toggle-chip {
  padding: 3px 6px !important;
  border: 1px solid rgba(169,181,155,.17) !important;
  background: transparent !important;
  color: rgba(239,239,233,.48) !important;
  box-shadow: none !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

#data-panel .data-toggle-chip:hover,
#data-panel .data-toggle-chip:focus-visible,
#data-panel .data-toggle-chip.active {
  color: var(--rhk-text) !important;
  border-color: rgba(169,181,155,.42) !important;
}

#data-panel .data-toggle-chip.active {
  background: rgba(169,181,155,.055) !important;
}

#data-panel .data-toggle-legend-item {
  color: rgba(239,239,233,.44) !important;
  font-size: 7px !important;
  letter-spacing: .04em !important;
}

/* Do not globally desaturate legend swatches: traffic red/amber/green and other
   semantic map legends need to remain legible. */
#data-panel .data-toggle-legend-swatch {
  width: 5px !important;
  height: 5px !important;
  filter: none !important;
}

/* Generic information hierarchy outside the data rail. All operational words
   now share the RHKEARTH wordmark color; only intentionally muted secondary
   metadata stays gray. */
.status-live,
.status-nominal,
[data-status="live"],
[data-status="nominal"],
.status-warning,
.status-degraded,
.status-stale,
.status-fallback,
[data-status="warning"],
[data-status="degraded"],
[data-status="stale"],
[data-status="fallback"],
.status-critical,
.status-error,
[data-status="critical"],
[data-status="error"] {
  color: var(--rhk-text) !important;
}

.status-offline,
.status-unavailable,
[data-status="offline"],
[data-status="unavailable"] {
  color: var(--rhk-off) !important;
}

/* Neutralize the inherited cyan/green/yellow text across the operational
   console while leaving map geometry, swatches, imagery and state dots alone. */
#intel-hud,
#cockpit-hud,
#data-panel,
#style-indicator,
#global-loading-status,
#traffic-sync-chip,
#cctv-sync-chip,
[class*="panel"],
[class*="readout"],
[class*="status"] {
  color: var(--rhk-text) !important;
  text-shadow: none !important;
}

#intel-hud :is(span, small, strong, p, label, button, select, option),
#cockpit-hud :is(span, small, strong, p, label, button, select, option),
#data-panel :is(span, small, strong, p, label, button, select, option),
#style-indicator :is(span, small, strong, p, label, button),
#global-loading-status :is(span, small, strong, p),
#traffic-sync-chip :is(span, small, strong, p),
#cctv-sync-chip :is(span, small, strong, p),
[class*="panel"] :is(span, small, strong, p, label, button, select, option),
[class*="readout"] :is(span, small, strong, p, label),
[class*="status"] :is(span, small, strong, p, label) {
  color: var(--rhk-text) !important;
  text-shadow: none !important;
}

/* No demo onboarding, local-key setup, voice-agent, or city-specific duplicate
   layer rows on RHKEARTH. Chicago is supplied through the existing CCTV and
   Traffic owners in the native build. */
#first-run-launcher,
#key-setup,
#key-setup-chip,
#gev-voice-control,
#gev-voice-button,
[data-layer-id="chicago-live-cameras"],
[data-layer-id="chicago-street-activity"] {
  display: none !important;
}

/* Reduce cyber-game styling without weakening actual state visualization. */
.title-glow,
[class*="neon"],
[class*="glow"] {
  filter: saturate(.42) !important;
}

#title-bar .brand-logo img {
  filter: grayscale(1) contrast(1.05) brightness(1.15) !important;
}

/* Clear View: one restrained RHKEARTH mark at top-left. */
#rhkearth-clear-emblem {
  position: fixed;
  left: 18px;
  top: 18px;
  bottom: auto;
  z-index: 1500;
  display: none;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  user-select: none;
  opacity: .72;
  color: rgba(239,239,233,.88);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}

body.ui-clean-view #rhkearth-clear-emblem {
  display: flex;
}

#rhkearth-clear-emblem img {
  width: 27px;
  height: 27px;
  display: block;
  object-fit: contain;
  filter: grayscale(1) brightness(1.25) contrast(1.08) drop-shadow(0 1px 5px rgba(0,0,0,.8));
}

#rhkearth-clear-emblem::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -6px;
  bottom: -6px;
  width: 1px;
  background: rgba(169,181,155,.38);
}

@media (max-width: 700px) {
  #rhkearth-clear-emblem {
    left: 12px;
    top: 12px;
    font-size: 9px;
    opacity: .64;
  }
  #rhkearth-clear-emblem img {
    width: 23px;
    height: 23px;
  }
}

#intel-hud,
#cockpit-hud,
#cesiumContainer {
  --rhk-ui-accent: var(--rhk-text);
}


/* RHKEARTH square-logo normalization v1
   The inherited GEV shell assumes a 775:520 eye logo. RHKEARTH is a 1:1 mark,
   so lock every shell presentation to square geometry and remove inherited
   radio-eye ornamentation that otherwise appears in some operating modes. */
.brand-logo {
  aspect-ratio: 1 / 1 !important;
}

#title-bar .title-logo {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  aspect-ratio: 1 / 1 !important;
  filter: none !important;
}

#title-bar .title-logo > img,
#title-bar .title-logo > svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The upstream eye mark grows radio arcs in broadcast mode. Those arcs are not
   part of the RHKEARTH identity and make the replacement mark look malformed. */
#title-bar .title-logo::before,
#title-bar .title-logo::after,
#title-bar.radio-broadcasting .title-logo::before,
#title-bar.radio-broadcasting .title-logo::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Keep the clear-view mark visually consistent with the standard title mark. */
#rhkearth-clear-emblem {
  opacity: .82 !important;
  gap: 8px !important;
}

#rhkearth-clear-emblem img {
  width: 27px !important;
  height: 27px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}

#rhkearth-clear-emblem::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 700px) {
  #title-bar .title-logo {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
}