/* Dev-only chrome: shared data dir with prod, but visually unmistakable. */
html[data-dev-build] .sidebar-brand {
  background: #b91c1c;
  border-bottom-color: rgba(0, 0, 0, 0.22);
}

html[data-dev-build] .sidebar-brand svg {
  --logo-color-start: #fff;
  --logo-color-end: #fecaca;
}

/* Scope the dev-grey to the real title bar only — the Settings window-button
 * style previews reuse `.titlebar-btn` classes and must show true colours. */
html[data-dev-build] .titlebar .titlebar-btn-close,
html[data-dev-build] .titlebar .titlebar-btn-minimize,
html[data-dev-build] .titlebar .titlebar-btn-maximize {
  background: #8b8b8b;
}

html[data-dev-build] .titlebar .titlebar-btn-close:hover,
html[data-dev-build] .titlebar .titlebar-btn-minimize:hover,
html[data-dev-build] .titlebar .titlebar-btn-maximize:hover {
  background: #a3a3a3;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  filter: none;
}

html[data-dev-build] .titlebar .titlebar-btn:focus-visible {
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Narrow/mobile: sidebar logo is hidden — fixed red DEV square top-left. */
html[data-dev-build] .dev-build-badge {
  display: none;
}

html[data-dev-build] .app-shell[data-mobile] .dev-build-badge {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: #b91c1c;
  color: #fff;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

html[data-dev-build] .app-shell[data-mobile][data-titlebar] .dev-build-badge {
  top: var(--titlebar-height);
}

html[data-dev-build] .dev-network-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

html[data-dev-build] .dev-network-mode-toggle--offline {
  color: var(--warning, #e6a700);
  border-color: color-mix(in srgb, var(--warning, #e6a700) 45%, var(--border));
}
